fix(grid): keep JSON format reachable after compacting

apps/desktop/src/components/grid/DataGrid.vue

@@ -6034,6 +6034,7 @@ const {
   restoreDetailOriginalValue,
   setValueEditorNull,
   formatValueEditorJson,
+  formatDetailJsonDraft,
   compactDetailJson,
   openDetailJsonCompare,
   setDetailNull,
@@ -13613,6 +13614,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
                 :can-copy-sql-condition="canCopyPreparedDetailSqlCondition"
                 :database-type="resolvedDatabaseType"
                 @start-edit="startDetailEdit"
+                @format-json="formatDetailJsonDraft"
                 @compact-json="compactDetailJson"
                 @compare-json="openDetailJsonCompare"
                 @toggle-formatted="toggleCellDetailJsonFormatted"

apps/desktop/src/components/grid/DataGridCellDetailPanel.vue

@@ -47,6 +47,7 @@ const detailEditValue = defineModel<string>("value", { default: "" });
 
 const emit = defineEmits<{
   startEdit: [];
+  formatJson: [];
   compactJson: [];
   compareJson: [];
   toggleFormatted: [];
@@ -153,6 +154,8 @@ defineExpose({ openSearch });
               :unsafe-number="typeof detail.value === 'number' && Number.isInteger(detail.value) && !Number.isSafeInteger(detail.value) && (!editing || detailEditValue === detail.rawValue)"
             />
             <Button v-if="editing && showCompareJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompareJson" :title="t('grid.compareJson')" @mousedown.prevent @click="emit('compareJson')"><FileDiff class="h-3 w-3" />{{ t("grid.compareJson") }}</Button>
+            <!-- issue #9832：编辑中「压缩 JSON」作用于草稿，格式化入口不能再被 !editing 挡掉，否则压缩后就无法展开。 -->
+            <Button v-if="showCompactJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompactJson" :title="t('grid.formatJson')" @click="emit('formatJson')"><Code2 class="h-3 w-3" />{{ t("grid.formatJson") }}</Button>
             <Button v-if="showCompactJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompactJson" :title="t('grid.compactJson')" @click="emit('compactJson')"><Code2 class="h-3 w-3" />{{ t("grid.compactJson") }}</Button>
             <Button v-if="!editing && detail.formattedJson" :variant="sideJsonView ? 'secondary' : 'ghost'" size="sm" class="h-5 gap-1 px-1.5 text-xs" :title="t('grid.formattedJson')" @click="emit('toggleFormatted')"><Code2 class="h-3 w-3" />{{ t("grid.formattedJson") }}</Button>
             <Button v-if="!editing && detail.isEditable" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.editValue')" @click="emit('startEdit')"><Pencil class="h-3 w-3" /></Button>

apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts

@@ -1864,6 +1864,37 @@ describe("cell detail surfaces", () => {
     expect(dataGridSource).toContain(':disabled="!canCompareDetailJson" @mousedown.prevent @click="openDetailJsonCompare"');
     expect(dataGridSource).toContain('v-model:open="detailValueDiffOpen" :snapshot="detailValueDiffSnapshot"');
   });
+
+  // issue #9832：编辑中点「压缩 JSON」会把草稿压成单行，此时必须仍能点「格式化 JSON」
+  // 重新展开，否则 Mongo 这类对象字段的 JSON 一旦压缩就再也无法格式化。
+  it("keeps the JSON format action reachable while a compacted draft is being edited", async () => {
+    const formatJson = vi.fn();
+    const mounted = mountComponent(DataGridCellDetailPanel, {
+      detail: detail(),
+      panelIsBottom: true,
+      metadataCollapsed: false,
+      valueFillsHeight: true,
+      editing: true,
+      sideJsonView: false,
+      showCompactJson: true,
+      canCompactJson: true,
+      typeColorClass: () => "",
+      canDownloadBinaryValue: () => false,
+      downloadBinaryValue: vi.fn(),
+      canImportBinaryValue: () => false,
+      importBinaryValue: vi.fn(),
+      openImagePreview: vi.fn(),
+      canCopySqlCondition: () => true,
+      onFormatJson: formatJson,
+    });
+
+    const formatButton = findOne(mounted.root, (node) => node.props.title === "grid.formatJson");
+    dispatch(formatButton, "click");
+    expect(formatJson).toHaveBeenCalledOnce();
+
+    await mounted.setProps({ showCompactJson: false });
+    expect(findAll(mounted.root, (node) => node.props.title === "grid.formatJson")).toHaveLength(0);
+  });
 });
 
 describe("DataGridCopyColumnNamesDialog", () => {