Block Editor新建表格默认列宽改为120px
This commit is contained in:
parent
5254805b46
commit
e61d7dbaaa
@ -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;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user