diff --git a/frontend/src/core/features/block_editor/blockeditor.css b/frontend/src/core/features/block_editor/blockeditor.css index 173189a7c..f1510a851 100644 --- a/frontend/src/core/features/block_editor/blockeditor.css +++ b/frontend/src/core/features/block_editor/blockeditor.css @@ -169,7 +169,7 @@ border: 1px solid #d1d5db; padding: 8px 12px; text-align: left; - min-width: 80px; + min-width: 35px; position: relative; transition: background-color 0.15s ease; } diff --git a/frontend/src/core/features/block_editor/composables/useEditorSetup.ts b/frontend/src/core/features/block_editor/composables/useEditorSetup.ts index a4b16c0cd..ad58d6dea 100644 --- a/frontend/src/core/features/block_editor/composables/useEditorSetup.ts +++ b/frontend/src/core/features/block_editor/composables/useEditorSetup.ts @@ -119,7 +119,7 @@ function buildExtensions(options: EditorSetupOptions): Extensions { HTMLAttributes: { class: 'code-block' }, }), // ── Table 扩展组 ── - CustomTable.configure({ resizable: true }), + CustomTable.configure({ resizable: { cellMinWidth: 35 } }), TableRow, TableHeader, TableCell, diff --git a/frontend/src/core/features/block_editor/extensions/custom-table.ts b/frontend/src/core/features/block_editor/extensions/custom-table.ts index 4c93b26c7..cc67c6db5 100644 --- a/frontend/src/core/features/block_editor/extensions/custom-table.ts +++ b/frontend/src/core/features/block_editor/extensions/custom-table.ts @@ -5,7 +5,9 @@ * 默认跟随内容宽度(非全宽),用户可通过行列菜单主动切换。 */ +import { TextSelection } from '@tiptap/pm/state' import { Table } from '@tiptap/extension-table' +import { createTable } from '@tiptap/extension-table' export const CustomTable = Table.extend({ addAttributes() { @@ -21,4 +23,40 @@ export const CustomTable = Table.extend({ }, } }, + + /** + * 重写 insertTable 命令,在创建表格时为每个 cell 注入 colwidth: [120], + * 使新建表格的默认列宽为 120px(而非 tiptap cellMinWidth 的 35px 最小值)。 + * 用户依旧可通过拖拽将列缩小到 cellMinWidth: 35px。 + */ + addCommands() { + return { + ...this.parent?.(), + insertTable: + ({ rows = 3, cols = 3, withHeaderRow = true } = {}) => + ({ tr, dispatch, editor }) => { + const node = createTable(editor.schema, rows, cols, withHeaderRow) + + if (!dispatch) return true + + // 遍历 table,为每个 cell 设置 colwidth: [120] + const json = node.toJSON() + for (const row of json.content as any[]) { + if (!row.content) continue + for (const cell of row.content as any[]) { + cell.attrs = { ...cell.attrs, colwidth: [120] } + } + } + + const newNode = editor.schema.nodeFromJSON(json) + const offset = tr.selection.from + 1 + + tr.replaceSelectionWith(newNode) + .scrollIntoView() + .setSelection(TextSelection.near(tr.doc.resolve(offset))) + + return true + }, + } + }, })