{"version":3,"file":"index.mjs","sources":["../src/locale/index.ts","../src/locale/en.ts","../src/locale/zh-CN.ts","../src/module/elem-to-html.ts","../src/constants/svg.ts","../src/utils/options.ts","../src/utils/is-of-type.ts","../src/utils/has-common.ts","../src/utils/matrices.ts","../src/utils/point.ts","../src/utils/dom.ts","../src/module/weak-maps.ts","../src/module/menu/TableProperty.ts","../src/module/menu/CellProperty.ts","../src/module/menu/DeleteCol.ts","../src/module/menu/DeleteRow.ts","../src/module/menu/DeleteTable.ts","../src/module/menu/FullWidth.ts","../src/module/helpers.ts","../src/module/menu/InsertCol.ts","../src/module/menu/InsertRow.ts","../src/module/menu/InsertTable.ts","../src/module/table-cursor.ts","../src/module/menu/MergeCell.ts","../src/module/menu/SplitCell.ts","../src/module/menu/TableHeader.ts","../src/module/menu/index.ts","../src/module/parse-elem-html.ts","../src/module/parse-style-html.ts","../src/module/plugin.ts","../src/module/pre-parse-html.ts","../src/module/column-resize.ts","../src/module/row-resize.ts","../src/module/render-elem/index.ts","../src/module/render-elem/render-table.tsx","../src/module/render-elem/render-row.tsx","../src/module/render-elem/render-cell.tsx","../src/utils/vdom.ts","../src/module/style-to-html.ts","../src/module/index.ts","../src/module/render-style.ts","../src/module/with-selection.ts"],"sourcesContent":["/**\n * @description i18n entry\n * @author wangfupeng\n */\n\nimport { i18nAddResources } from '@wangeditor-next/core'\n\nimport enResources from './en'\nimport zhResources from './zh-CN'\n\ni18nAddResources('en', enResources)\ni18nAddResources('zh-CN', zhResources)\n","/**\n * @description i18n en\n * @author wangfupeng\n */\n\nexport default {\n tableModule: {\n modal: {\n border: 'Border',\n borderColor: 'Border color',\n borderWidth: 'Width',\n bgColor: 'Back color',\n align: 'Text Align',\n ok: 'OK',\n },\n color: {\n default: 'Default color',\n clear: 'Clear back color',\n },\n borderStyle: {\n none: 'None',\n solid: 'Solid',\n dotted: 'Dotted',\n dashed: 'Dashed',\n double: 'Double',\n groove: 'Groove',\n ridge: 'Ridge',\n inset: 'Inset',\n outset: 'Outset',\n },\n deleteCol: 'Delete column',\n deleteRow: 'Delete row',\n deleteTable: 'Delete table',\n widthAuto: 'Fit width',\n insertCol: 'Insert column',\n insertRow: 'Insert row',\n insertTable: 'Insert table',\n header: 'Header',\n mergeCell: 'merge cell',\n splitCell: 'split cell',\n tableProperty: 'Table property',\n cellProperty: 'Cell property',\n },\n}\n","/**\n * @description i18n zh-CN\n * @author wangfupeng\n */\n\nexport default {\n tableModule: {\n modal: {\n border: '边框',\n borderColor: '边框颜色',\n borderWidth: '宽度',\n bgColor: '背景色',\n align: '对齐方式',\n ok: '确定',\n },\n color: {\n default: '默认颜色',\n clear: '清除背景色',\n },\n borderStyle: {\n none: '无样式',\n solid: '实线',\n dotted: '点状虚线',\n dashed: '虚线',\n double: '双线',\n groove: '凹槽边框',\n ridge: '菱形边框',\n inset: '凹边框',\n outset: '凸边框',\n },\n deleteCol: '删除列',\n deleteRow: '删除行',\n deleteTable: '删除表格',\n widthAuto: '适应宽度',\n insertCol: '插入列',\n insertRow: '插入行',\n insertTable: '插入表格',\n header: '表头',\n mergeCell: '合并单元格',\n splitCell: '拆分单元格',\n tableProperty: '表格属性',\n cellProperty: '单元格属性',\n },\n}\n","/**\n * @description to html\n * @author wangfupeng\n */\n\nimport { getTextStyleMode, IDomEditor } from '@wangeditor-next/core'\nimport { Element } from 'slate'\n\nimport { TableCellElement, TableElement, TableRowElement } from './custom-types'\n\ntype TableWidthExportMode = 'adaptive' | 'explicit'\n\nfunction escapeHtml(raw: string): string {\n return raw\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''')\n}\n\nfunction getTableWidthExportMode(editor?: IDomEditor): TableWidthExportMode {\n if (!editor || typeof editor.getMenuConfig !== 'function') {\n return 'explicit'\n }\n\n const menuConf = editor.getMenuConfig('insertTable') as { widthExportMode?: TableWidthExportMode }\n\n return menuConf?.widthExportMode === 'explicit' ? 'explicit' : 'adaptive'\n}\n\nfunction getExportTableWidth(tableNode: TableElement, editor?: IDomEditor): string {\n const { width = 'auto', columnWidths = [] } = tableNode\n\n if (width && width !== 'auto') {\n return width\n }\n\n const widthExportMode = getTableWidthExportMode(editor)\n\n // In adaptive mode, keep imported or generated auto-width tables as auto\n // and only persist explicit fixed widths when width is not auto.\n if (widthExportMode === 'adaptive') {\n return 'auto'\n }\n\n const totalWidth = columnWidths.reduce((sum, columnWidth) => {\n if (!Number.isFinite(columnWidth)) { return sum }\n if (columnWidth <= 0) { return sum }\n return sum + columnWidth\n }, 0)\n\n if (totalWidth > 0) {\n return `${totalWidth}px`\n }\n\n return 'auto'\n}\n\nfunction tableToHtml(elemNode: Element, childrenHtml: string, editor?: IDomEditor): string {\n const tableNode = elemNode as TableElement\n const { columnWidths, caption, height = 'auto' } = tableNode\n const cols = columnWidths\n ?.map(colWidth => {\n return ``\n })\n .join('')\n\n const captionStr = caption ? `${escapeHtml(caption)}` : ''\n const colgroupStr = cols ? `${cols}` : ''\n const exportedWidth = getExportTableWidth(tableNode, editor)\n const textStyleMode = getTextStyleMode(editor)\n\n if (textStyleMode === 'class') {\n const widthAttr = exportedWidth ? ` width=\"${exportedWidth}\"` : ''\n const heightValue = String(height || '').trim()\n const heightAttr = heightValue && heightValue !== 'auto' ? ` height=\"${heightValue}\"` : ''\n const heightDataAttr = heightValue ? ` data-w-e-table-height=\"${heightValue}\"` : ''\n\n return `${captionStr}${colgroupStr}${childrenHtml}
`\n }\n\n return `${captionStr}${colgroupStr}${childrenHtml}
`\n}\n\nfunction tableRowToHtml(elem: Element, childrenHtml: string, editor?: IDomEditor): string {\n const { height } = elem as TableRowElement\n const textStyleMode = getTextStyleMode(editor)\n\n if (textStyleMode === 'class') {\n if (height) {\n return `${childrenHtml}`\n }\n return `${childrenHtml}`\n }\n\n const heightStyle = height ? ` style=\"height: ${height}px\"` : ''\n\n return `${childrenHtml}`\n}\n\nfunction tableCellToHtml(cellNode: Element, childrenHtml: string): string {\n const {\n colSpan = 1,\n rowSpan = 1,\n isHeader = false,\n width = 'auto',\n hidden = false,\n } = cellNode as TableCellElement\n\n // 如果单元格被隐藏，直接返回空字符串，不生成 HTML 元素\n if (hidden) {\n return ''\n }\n\n const tag = isHeader ? 'th' : 'td'\n\n return `<${tag} colSpan=\"${colSpan}\" rowSpan=\"${rowSpan}\" width=\"${width}\">${childrenHtml}`\n}\n\nexport const tableToHtmlConf = {\n type: 'table',\n elemToHtml: tableToHtml,\n}\n\nexport const tableRowToHtmlConf = {\n type: 'table-row',\n elemToHtml: tableRowToHtml,\n}\n\nexport const tableCellToHtmlConf = {\n type: 'table-cell',\n elemToHtml: tableCellToHtml,\n}\n","/**\n * @description icon svg\n * @author wangfupeng\n */\n\n/**\n * 【注意】svg 字符串的长度 ，否则会导致代码体积过大\n * 尽量选择 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=20293\n * 找不到再从 iconfont.com 搜索\n */\n\n// 表格\nexport const TABLE_SVG = ''\n\n// 垃圾桶（删除）\nexport const TRASH_SVG = ''\n\n// 表格 添加行\nexport const ADD_ROW_SVG = ''\n\n// 表格 删除行\nexport const DEL_ROW_SVG = ''\n\n// 表格 添加列\nexport const ADD_COL_SVG = ''\n\n// 表格 删除列\nexport const DEL_COL_SVG = ''\n\n// 表头\nexport const TABLE_HEADER_SVG = ''\n\n// 宽度\nexport const FULL_WIDTH_SVG = ''\n\n// 合并单元格\nexport const MERGE_CELL_SVG = ''\n\n// 拆分单元格\nexport const SPLIT_CELL_SVG = ''\n\n// 表格属性\nexport const TABLE_PROPERTY_SVG = ''\n\n// 单元格属性\nexport const CELL_PROPERTY_SVG = ''\n\n// 左对齐\nexport const JUSTIFY_LEFT_SVG = ''\n\n// 右对齐\nexport const JUSTIFY_RIGHT_SVG = ''\n\n// 居中对齐\nexport const JUSTIFY_CENTER_SVG = ''\n\n// 两端对齐\nexport const JUSTIFY_JUSTIFY_SVG = ''\n\n// 清空（颜色）\nexport const CLEAN_SVG = ''\n","import { CustomTypes, ExtendedType } from 'slate'\n\ntype ElementType = ExtendedType<'Element', CustomTypes>['type']\n\nexport interface WithTableOptions {\n blocks: {\n td: ElementType\n th: ElementType\n content: ElementType\n tr: ElementType\n table: ElementType\n tbody: ElementType\n tfoot: ElementType\n thead: ElementType\n }\n}\n\nexport const DEFAULT_WITH_TABLE_OPTIONS = {\n blocks: {\n td: 'table-cell',\n th: 'table-cell',\n content: 'paragraph',\n tr: 'table-row',\n table: 'table',\n tbody: 'table-body',\n // tfoot: \"table-footer\",\n // thead: \"table-head\",\n },\n}\n","import {\n Editor, Element, Node, NodeMatch,\n} from 'slate'\n\nimport { DEFAULT_WITH_TABLE_OPTIONS, WithTableOptions } from './options'\nimport { WithType } from './types'\n\nexport function isElement(node: Node): node is WithType {\n return !Editor.isEditor(node) && Element.isElement(node) && 'type' in node\n}\n\n/** @returns a `NodeMatch` function which is used to match the elements of a specific `type`. */\nexport function isOfType>(\n editor: Editor,\n ...types: Array\n): NodeMatch {\n const options = DEFAULT_WITH_TABLE_OPTIONS\n const elementTypes = types.map(type => options?.blocks?.[type])\n\n return (node: Node): boolean => isElement(node) && elementTypes.includes(node.type)\n}\n","import { Editor, Node, Span } from 'slate'\n\nimport { isOfType } from './is-of-type'\nimport { WithTableOptions } from './options'\n\n/**\n * Determines whether two paths belong to the same types by checking\n * if they share a common ancestor node of type table\n */\nexport function hasCommon(\n editor: Editor,\n [path, another]: Span,\n ...types: Array\n) {\n const [node, commonPath] = Node.common(editor, path, another)\n\n if (isOfType(editor, ...types)(node, commonPath)) {\n return true\n }\n\n // Warning: returns the common ancestor but will return `undefined` if the\n // `commonPath` is equal to the specified types path\n return !!Editor.above(editor, {\n match: isOfType(editor, ...types),\n at: commonPath,\n })\n}\n","import { Editor, Location, NodeEntry } from 'slate'\n\nimport { isOfType } from './is-of-type'\nimport { CellElement, NodeEntryWithContext } from './types'\n\n/** Generates a matrix for each table section (`thead`, `tbody`, `tfoot`) */\nexport function* matrices(\n editor: Editor,\n options: { at?: Location } = {},\n): Generator[][]> {\n const [table] = Editor.nodes(editor, {\n match: isOfType(editor, 'table'),\n at: options.at,\n })\n\n if (!table) {\n return []\n }\n\n const [, tablePath] = table\n\n for (const [, path] of Editor.nodes(editor, {\n // match: isOfType(editor, \"thead\", \"tbody\", \"tfoot\"),\n match: isOfType(editor, 'table'),\n at: tablePath,\n })) {\n const matrix: NodeEntry[][] = []\n\n for (const [, trPath] of Editor.nodes(editor, {\n match: isOfType(editor, 'tr'),\n at: path,\n })) {\n matrix.push([\n ...Editor.nodes(editor, {\n match: isOfType(editor, 'th', 'td'),\n at: trPath,\n }),\n ])\n }\n\n yield matrix\n }\n}\n\nexport function filledMatrix(\n editor: Editor,\n options: { at?: Location } = {},\n): NodeEntryWithContext[][] {\n const filled: NodeEntryWithContext[][] = []\n\n // Expand each section separately to avoid sections collapsing into each other.\n for (const matrix of matrices(editor, { at: options.at })) {\n const filledSection: NodeEntryWithContext[][] = []\n\n // 首先，找出最大的列数来确定矩阵的宽度\n let maxCols = 0\n\n for (let x = 0; x < matrix.length; x += 1) {\n if (matrix[x]) {\n maxCols = Math.max(maxCols, matrix[x].length)\n }\n }\n\n for (let x = 0; x < matrix.length; x += 1) {\n if (!filledSection[x]) {\n filledSection[x] = []\n }\n\n if (!matrix[x]) {\n continue\n }\n\n for (let y = 0; y < matrix[x].length; y += 1) {\n if (!matrix[x][y] || !matrix[x][y][0]) {\n continue\n }\n\n const [{ rowSpan = 1, colSpan = 1 }] = matrix[x][y]\n\n // 找到下一个可用的位置\n let startCol = y\n\n while (filledSection[x] && filledSection[x][startCol]) {\n startCol += 1\n }\n\n for (let c = 0; c < colSpan; c += 1) {\n for (let r = 0; r < rowSpan; r += 1) {\n const targetX = x + r\n const targetY = startCol + c\n\n if (!filledSection[targetX]) {\n filledSection[targetX] = []\n }\n\n if (filledSection[targetX][targetY]) {\n continue\n }\n\n filledSection[targetX][targetY] = [\n matrix[x][y],\n {\n rtl: c + 1,\n ltr: colSpan - c,\n ttb: r + 1,\n btt: rowSpan - r,\n },\n ]\n }\n }\n }\n }\n\n filled.push(...filledSection)\n }\n\n return filled\n}\n","export class Point {\n public x: number\n\n public y: number\n\n constructor(x: number, y: number) {\n this.x = x\n this.y = y\n }\n\n public static valueOf(x: number, y: number): Point {\n return new this(x, y)\n }\n\n public static equals(point: Point, another: Point): boolean {\n return point.x === another.x && point.y === another.y\n }\n}\n","/**\n * @description DOM 操作\n * @author wangfupeng\n */\n\nimport $, {\n addClass,\n append,\n attr,\n children,\n data,\n dataset,\n Dom7Array,\n each,\n find,\n focus,\n hide,\n html,\n on,\n removeClass,\n show,\n val,\n} from 'dom7'\n\n// COMPAT: This is required to prevent TypeScript aliases from doing some very\n// weird things for Slate's types with the same name as globals. (2019/11/27)\n// https://github.com/microsoft/TypeScript/issues/35002\nimport DOMNode = globalThis.Node\nimport DOMComment = globalThis.Comment\nimport DOMElement = globalThis.Element\nimport DOMText = globalThis.Text\nimport DOMRange = globalThis.Range\nimport DOMSelection = globalThis.Selection\nimport DOMStaticRange = globalThis.StaticRange\n\nexport { Dom7Array } from 'dom7'\n\nif (append && $.fn) {\n $.fn.append = append\n}\nif (on && $.fn) {\n $.fn.on = on\n}\nif (focus && $.fn) {\n $.fn.focus = focus\n}\nif (attr && $.fn) {\n $.fn.attr = attr\n}\nif (val && $.fn) {\n $.fn.val = val\n}\nif (html && $.fn) {\n $.fn.html = html\n}\nif (dataset && $.fn) {\n $.fn.dataset = dataset\n}\nif (addClass && $.fn) {\n $.fn.addClass = addClass\n}\nif (removeClass && $.fn) {\n $.fn.removeClass = removeClass\n}\nif (children && $.fn) {\n $.fn.children = children\n}\nif (each && $.fn) {\n $.fn.each = each\n}\nif (find && $.fn) {\n $.fn.find = find\n}\nif (data && $.fn) {\n $.fn.data = data\n}\nif (hide && $.fn) {\n $.fn.hide = hide\n}\nif (show && $.fn) {\n $.fn.show = show\n}\n\nexport default $\n\n/**\n * 获取 tagName lower-case\n * @param $elem $elem\n */\nexport function getTagName($elem: Dom7Array): string {\n if ($elem.length) { return $elem[0].tagName.toLowerCase() }\n return ''\n}\n\n/**\n * 获取 $elem 某一个 style 值\n * @param $elem $elem\n * @param styleKey style key\n */\nexport function getStyleValue($elem: Dom7Array, styleKey: string): string {\n let res = ''\n\n const styleStr = $elem.attr('style') || '' // 如 'line-height: 2.5; color: red;'\n const styleArr = styleStr.split(';') // 如 ['line-height: 2.5', ' color: red', '']\n const length = styleArr.length\n\n for (let i = 0; i < length; i += 1) {\n const styleItemStr = styleArr[i] // 如 'line-height: 2.5'\n\n if (styleItemStr) {\n const arr = styleItemStr.split(':') // ['line-height', ' 2.5']\n\n if (arr[0].trim() === styleKey) {\n res = arr[1].trim()\n }\n }\n }\n\n return res\n}\n\n/**\n * 获取 outerHTML\n * @param $elem dom7 elem\n */\nexport function getOuterHTML($elem: Dom7Array) {\n if ($elem.length === 0) { return '' }\n return $elem[0].outerHTML\n}\nexport {\n DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText,\n}\n","import { Editor, Element } from 'slate'\n\nimport { NodeEntryWithContext } from '../utils'\n\n/** Weak reference between the `Editor` and the selected elements */\nexport const EDITOR_TO_SELECTION = new WeakMap()\n\n/** Weak reference between the `Editor` and a set of the selected elements */\nexport const EDITOR_TO_SELECTION_SET = new WeakMap>()\n","/**\n * @description set cell property menu\n * @author hsuna\n */\n\nimport { DomEditor, IButtonMenu, IDomEditor, t } from '@wangeditor-next/core'\nimport { Editor, Transforms } from 'slate'\n\nimport {\n CLEAN_SVG,\n JUSTIFY_CENTER_SVG,\n JUSTIFY_JUSTIFY_SVG,\n JUSTIFY_LEFT_SVG,\n JUSTIFY_RIGHT_SVG,\n TABLE_PROPERTY_SVG,\n} from '../../constants/svg'\nimport { isOfType } from '../../utils'\nimport $ from '../../utils/dom'\nimport { EDITOR_TO_SELECTION } from '../weak-maps'\n\nclass TableProperty implements IButtonMenu {\n readonly title = t('tableModule.tableProperty')\n\n iconSvg = TABLE_PROPERTY_SVG\n\n readonly tag = 'button'\n\n readonly showModal = true\n\n readonly modalWidth = 360\n\n readonly menu: string = 'table'\n\n readonly borderStyle = [\n { value: 'none', label: t('tableModule.borderStyle.none') },\n { value: 'solid', label: t('tableModule.borderStyle.solid') },\n { value: 'dotted', label: t('tableModule.borderStyle.dotted') },\n { value: 'dashed', label: t('tableModule.borderStyle.dashed') },\n { value: 'double', label: t('tableModule.borderStyle.double') },\n { value: 'groove', label: t('tableModule.borderStyle.groove') },\n { value: 'ridge', label: t('tableModule.borderStyle.ridge') },\n { value: 'inset', label: t('tableModule.borderStyle.inset') },\n { value: 'outset', label: t('tableModule.borderStyle.outset') },\n ]\n\n readonly textAlignOptions = [\n { value: 'left', label: t('justify.left'), svg: JUSTIFY_LEFT_SVG },\n { value: 'center', label: t('justify.center'), svg: JUSTIFY_CENTER_SVG },\n { value: 'right', label: t('justify.right'), svg: JUSTIFY_RIGHT_SVG },\n { value: 'justify', label: t('justify.justify'), svg: JUSTIFY_JUSTIFY_SVG },\n ]\n\n getValue(_editor: IDomEditor): string | boolean {\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n return true\n }\n return false\n }\n\n exec(_editor: IDomEditor, _value: string | boolean) {\n // 此处空着即可\n }\n\n getModalContentNode(editor: IDomEditor) {\n const [node] = Editor.nodes(editor, {\n match: isOfType(editor, 'table'),\n })\n\n return node\n }\n\n getModalPositionNode(_editor: IDomEditor) {\n return null\n }\n\n getModalContentElem(editor: IDomEditor) {\n const node = this.getModalContentNode(editor)\n\n if (!node) {\n return null\n }\n\n const [data, path] = node\n const $content = $(`
\n \n
\n ${t('tableModule.modal.bgColor')}\n \n \n \n \n \n \n
\n
\n ${t('tableModule.modal.align')}\n \n \n \n ${this.textAlignOptions\n .map(\n item => `\n ${item.svg}\n `\n )\n .join('')}\n \n \n
\n
\n \n
\n
`)\n\n // 初始化所有表单的值\n $content.find('[name]').each(elem => {\n $(elem).val(data[$(elem).attr('name')])\n })\n\n const updateTextAlignButton = value => {\n $content.find('.w-e-table-property-align-button').each(button => {\n const $buttonElem = $(button)\n const isActive = $buttonElem.attr('data-value') === value\n\n if (isActive) {\n $buttonElem.addClass('active')\n $buttonElem.attr('aria-pressed', 'true')\n } else {\n $buttonElem.removeClass('active')\n $buttonElem.attr('aria-pressed', 'false')\n }\n })\n }\n\n updateTextAlignButton($content.find('[name=\"textAlign\"]').val() || '')\n\n $content.find('.w-e-table-property-align-button').on('click', e => {\n const button = e.currentTarget\n\n if (button == null) {\n return\n }\n\n const $buttonElem = $(button)\n const value = $buttonElem.attr('data-value') || ''\n\n $content.find('[name=\"textAlign\"]').val(value)\n updateTextAlignButton(value)\n })\n\n const setSelectedColor = (elem, color) => {\n if (color) {\n $('.color-group-block', elem).css('background-color', color).empty()\n } else {\n $('.color-group-block', elem).css('background-color', '').html(CLEAN_SVG)\n }\n }\n\n $content.find('.color-group').each(elem => {\n const selectedColor = $('[type=\"hidden\"]', elem).val() || ''\n\n setSelectedColor(elem, selectedColor)\n\n const $elem = $(elem)\n\n $elem.on('click', () => {\n $content.find('.color-group .w-e-drop-panel').hide()\n let $panel = $elem.data('panel')\n\n if (!$panel) {\n $panel = this.getPanelContentElem(editor, {\n mark: $elem.data('mark'),\n selectedColor,\n callback: color => {\n $('[type=\"hidden\"]', elem).val(color || '')\n setSelectedColor(elem, color)\n $panel.hide()\n },\n })\n $elem.append($panel)\n $elem.data('panel', $panel)\n } else {\n $panel.show()\n }\n })\n })\n\n const $button = $content.find('.button-container button')\n\n $button.on('click', () => {\n const props = Array.from($content.find('[name]')).reduce((obj, elem) => {\n obj[$(elem).attr('name')] = $(elem).val()\n return obj\n }, {})\n\n const selection = EDITOR_TO_SELECTION.get(editor)\n\n if (this.menu === 'cell' && !!selection?.length) {\n selection.forEach(row => {\n row.forEach(cell => {\n Transforms.setNodes(editor, props, { at: cell[0][1] })\n })\n })\n } else {\n Transforms.setNodes(editor, props, { at: path })\n }\n\n setTimeout(() => {\n editor.focus()\n })\n })\n\n return $content[0]\n }\n\n getPanelContentElem(editor, { mark, selectedColor, callback }) {\n const $colorPanel = $('
    ')\n\n $colorPanel.on('click', 'li', e => {\n const { target } = e\n\n if (!target) {\n return\n }\n e.preventDefault()\n e.stopPropagation()\n\n const $li = $(target)\n const val = $li.attr('data-value')\n\n callback(val)\n })\n\n const colorConf = editor.getMenuConfig(mark)\n const { colors = [] } = colorConf\n\n colors.forEach(color => {\n const $block = $(`
    `)\n\n $block.css('background-color', color)\n\n const $li = $(`
  • `)\n\n if (selectedColor === color) {\n $li.addClass('active')\n }\n $li.append($block)\n\n $colorPanel.append($li)\n })\n\n let clearText = ''\n\n if (mark === 'color') {\n clearText = t('tableModule.color.default')\n }\n if (mark === 'bgColor') {\n clearText = t('tableModule.color.clear')\n }\n const $clearLi = $(`\n
  • \n ${CLEAN_SVG}\n ${clearText}\n
    • \n `)\n\n $colorPanel.prepend($clearLi)\n\n const $panel = $('
    ')\n\n $panel.append($colorPanel)\n return $panel\n }\n}\n\nexport default TableProperty\n","import { IButtonMenu, IDomEditor, t } from '@wangeditor-next/core'\nimport { Editor } from 'slate'\n\nimport { CELL_PROPERTY_SVG } from '../../constants/svg'\nimport { isOfType } from '../../utils'\nimport TableProperty from './TableProperty'\n\nclass CellProperty extends TableProperty implements IButtonMenu {\n readonly title = t('tableModule.cellProperty')\n\n readonly iconSvg = CELL_PROPERTY_SVG\n\n readonly tag = 'button'\n\n readonly showModal = true\n\n readonly modalWidth = 360\n\n readonly menu = 'cell'\n\n getModalContentNode(editor: IDomEditor) {\n const [node] = Editor.nodes(editor, {\n match: isOfType(editor, 'td'),\n })\n\n return node\n }\n}\n\nexport default CellProperty\n","/**\n * @description del col menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport {\n Editor, Path, Range, Transforms,\n} from 'slate'\n\nimport { DEL_COL_SVG } from '../../constants/svg'\nimport { filledMatrix } from '../../utils'\nimport { TableCellElement, TableElement } from '../custom-types'\n\nclass DeleteCol implements IButtonMenu {\n readonly title = t('tableModule.deleteCol')\n\n readonly iconSvg = DEL_COL_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const cellNode = DomEditor.getSelectedNodeByType(editor, 'table-cell')\n\n if (cellNode == null) {\n // 选区未处于 table cell node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n const [cellEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n universal: true,\n })\n const [selectedCellNode, selectedCellPath] = cellEntry\n\n // 如果只有一列，则删除整个表格\n const rowNode = DomEditor.getParentNode(editor, selectedCellNode)\n const colLength = rowNode?.children.length || 0\n\n if (!rowNode || colLength <= 1) {\n Transforms.removeNodes(editor, { mode: 'highest' }) // 删除整个表格\n return\n }\n\n // ------------------------- 不只有 1 列，则继续 -------------------------\n\n const tableNode = DomEditor.getParentNode(editor, rowNode)\n\n if (tableNode == null) { return }\n\n const matrix = filledMatrix(editor)\n let tdIndex = 0\n\n // eslint-disable-next-line no-labels\n out: for (let x = 0; x < matrix.length; x += 1) {\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [[, path]] = matrix[x][y]\n\n if (Path.equals(selectedCellPath, path)) {\n tdIndex = y\n // eslint-disable-next-line no-labels\n break out\n }\n }\n }\n\n Editor.withoutNormalizing(editor, () => {\n // 记录需要删除的单元格路径和已处理的合并单元格\n const cellsToDelete = new Set()\n const processedMergedCells = new Set()\n\n // 遍历每一行的第 tdIndex 列\n for (let x = 0; x < matrix.length; x += 1) {\n if (!matrix[x] || !matrix[x][tdIndex]) {\n continue\n }\n\n const [[, cellPath], {\n rtl, ltr, ttb, btt,\n }] = matrix[x][tdIndex]\n const cellPathKey = cellPath.join(',')\n\n // 判断是否是合并单元格\n if (rtl > 1 || ltr > 1 || ttb > 1 || btt > 1) {\n // 这是合并单元格的一部分\n // 找到真实单元格的位置（左上角的位置）\n // rtl表示从右到左的距离，所以真实单元格列 = 当前列 - (rtl - 1)\n // ttb表示从上到下的距离，所以真实单元格行 = 当前行 - (ttb - 1)\n const realCellRow = x - (ttb - 1)\n const realCellCol = tdIndex - (rtl - 1)\n\n // 安全检查：确保真实单元格位置存在\n if (realCellRow < 0 || realCellRow >= matrix.length\n || !matrix[realCellRow] || !matrix[realCellRow][realCellCol]) {\n continue\n }\n\n const [[realCellElement, realCellPath]] = matrix[realCellRow][realCellCol]\n const realCellPathKey = realCellPath.join(',')\n\n // 避免重复处理同一个合并单元格\n if (!processedMergedCells.has(realCellPathKey)) {\n processedMergedCells.add(realCellPathKey)\n\n const { rowSpan = 1, colSpan = 1 } = realCellElement\n const newColSpan = Math.max(colSpan - 1, 1)\n\n // 更新真实单元格的 colSpan\n Transforms.setNodes(\n editor,\n {\n rowSpan,\n colSpan: newColSpan,\n },\n { at: realCellPath },\n )\n }\n } else {\n // rtl = 1 且 ltr = 1 且 ttb = 1 且 btt = 1，说明这是独立的单元格，直接删除\n cellsToDelete.add(cellPathKey)\n }\n }\n\n // 删除独立的单元格\n const cellsToDeleteArray = Array.from(cellsToDelete)\n\n // 按路径深度降序排序，确保从深层到浅层删除，避免路径失效\n cellsToDeleteArray.sort((a, b) => {\n const pathA = a.split(',').map(Number)\n const pathB = b.split(',').map(Number)\n\n // 按行降序排序\n if (pathA[pathA.length - 2] !== pathB[pathB.length - 2]) {\n return pathB[pathB.length - 2] - pathA[pathA.length - 2]\n }\n\n // 同行内按列降序排序\n return pathB[pathB.length - 1] - pathA[pathA.length - 1]\n })\n\n for (const pathKey of cellsToDeleteArray) {\n const path = pathKey.split(',').map(Number)\n\n try {\n if (Editor.hasPath(editor, path)) {\n Transforms.removeNodes(editor, { at: path })\n }\n } catch (error) {\n console.warn('删除单元格失败:', path, error)\n }\n }\n\n // 调整表格的 columnWidths\n const [tableEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table'),\n universal: true,\n })\n\n if (tableEntry) {\n const [elemNode, tablePath] = tableEntry\n const { columnWidths = [] } = elemNode as TableElement\n const adjustColumnWidths = [...columnWidths]\n\n // 删除对应列的宽度\n adjustColumnWidths.splice(tdIndex, 1)\n\n Transforms.setNodes(editor, { columnWidths: adjustColumnWidths } as TableElement, {\n at: tablePath,\n })\n }\n })\n }\n}\n\nexport default DeleteCol\n","/**\n * @description del row menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport {\n Editor, Path, Range, Transforms,\n} from 'slate'\n\nimport { DEL_ROW_SVG } from '../../constants/svg'\nimport { filledMatrix } from '../../utils'\nimport { TableCellElement } from '../custom-types'\n\nclass DeleteRow implements IButtonMenu {\n readonly title = t('tableModule.deleteRow')\n\n readonly iconSvg = DEL_ROW_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const rowNode = DomEditor.getSelectedNodeByType(editor, 'table-row')\n\n if (rowNode == null) {\n // 选区未处于 table row node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n const [rowEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-row'),\n universal: true,\n })\n const [rowNode, rowPath] = rowEntry\n\n const tableNode = DomEditor.getParentNode(editor, rowNode)\n const rowsLength = tableNode?.children.length || 0\n\n if (rowsLength <= 1) {\n // row 只有一行，则删掉整个表格\n Transforms.removeNodes(editor, { mode: 'highest' })\n return\n }\n\n // row > 1 行，则删掉这一行\n const [cellEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n universal: true,\n })\n const [, cellPath] = cellEntry\n const matrix = filledMatrix(editor)\n let trIndex = 0\n\n // eslint-disable-next-line no-labels\n outer: for (let x = 0; x < matrix.length; x += 1) {\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [[, path]] = matrix[x][y]\n\n if (!Path.equals(cellPath, path)) {\n continue\n }\n trIndex = x\n // eslint-disable-next-line no-labels\n break outer\n }\n }\n\n Editor.withoutNormalizing(editor, () => {\n // 收集需要在下一行插入的新单元格信息\n const cellsToInsert: Array<{\n cell: TableCellElement\n columnIndex: number\n }> = []\n\n for (let y = 0; y < matrix[trIndex].length; y += 1) {\n const [[{ hidden }], { ttb, btt, rtl }] = matrix[trIndex][y]\n\n // 寻找跨行行为\n if (ttb > 1 || btt > 1) {\n // 找到显示中 rowSpan 节点\n const originalRowIndex = trIndex - (ttb - 1)\n\n // 安全检查：确保目标行和列都存在\n if (originalRowIndex < 0 || originalRowIndex >= matrix.length || !matrix[originalRowIndex] || !matrix[originalRowIndex][y]) {\n continue\n }\n\n const [[originalCell, path]] = matrix[originalRowIndex][y]\n const typedOriginalCell = originalCell as TableCellElement\n const { rowSpan = 1, colSpan = 1 } = typedOriginalCell\n\n if (hidden) {\n // 如果当前选中节点为隐藏节点，则向上寻找处理 rowSpan 逻辑\n Transforms.setNodes(\n editor,\n {\n rowSpan: Math.max(rowSpan - 1, 1),\n colSpan,\n },\n { at: path },\n )\n } else if (ttb === 1 && rtl === 1) {\n // 只处理合并单元格的真正位置（左上角）：ttb=1且rtl=1\n // 这样避免重复处理同一个合并单元格\n const hasNextRow = trIndex + 1 < matrix.length\n\n if (hasNextRow && rowSpan > 1) {\n // 创建新的单元格，继承原单元格的内容和属性\n const newCell: TableCellElement = {\n type: 'table-cell',\n rowSpan: rowSpan - 1, // 新单元格的rowSpan = 原rowSpan - 1\n colSpan, // 保持原来的colSpan\n hidden: false,\n children: typedOriginalCell.children.map(child => ({ ...child })), // 深拷贝继承原单元格的内容\n }\n\n // 继承原单元格的其他属性\n if (typedOriginalCell.isHeader) { newCell.isHeader = typedOriginalCell.isHeader }\n if (typedOriginalCell.width) { newCell.width = typedOriginalCell.width }\n if (typedOriginalCell.backgroundColor) { newCell.backgroundColor = typedOriginalCell.backgroundColor }\n if (typedOriginalCell.borderWidth) { newCell.borderWidth = typedOriginalCell.borderWidth }\n if (typedOriginalCell.borderStyle) { newCell.borderStyle = typedOriginalCell.borderStyle }\n if (typedOriginalCell.borderColor) { newCell.borderColor = typedOriginalCell.borderColor }\n if (typedOriginalCell.textAlign) { newCell.textAlign = typedOriginalCell.textAlign }\n\n // 记录需要插入的单元格信息\n cellsToInsert.push({\n cell: newCell,\n columnIndex: y,\n })\n } else {\n // 如果没有下一行，直接减少原始单元格的 rowSpan\n Transforms.setNodes(\n editor,\n {\n rowSpan: Math.max(rowSpan - 1, 1),\n colSpan,\n },\n { at: path },\n )\n }\n } else {\n // 处理其他跨行单元格的情况：非隐藏且非左上角原始位置\n // 这种情况下也需要减少原始单元格的 rowSpan\n Transforms.setNodes(\n editor,\n {\n rowSpan: Math.max(rowSpan - 1, 1),\n colSpan,\n },\n { at: path },\n )\n }\n }\n }\n\n // 删除当前行\n Transforms.removeNodes(editor, { at: rowPath })\n\n // 行删除时，对应的行元素及其高度属性会自动被移除，无需额外操作\n\n // 在下一行（现在变成了当前行）的对应位置插入新单元格\n if (cellsToInsert.length > 0) {\n // 删除行后，原来的下一行会移动到rowPath的位置\n const targetRowPath = rowPath\n\n try {\n // 按列索引排序，从左到右插入\n cellsToInsert.sort((a, b) => a.columnIndex - b.columnIndex)\n\n for (const { cell, columnIndex } of cellsToInsert) {\n try {\n // 尝试在对应的列位置插入\n const insertPath = [...targetRowPath, columnIndex]\n\n Transforms.insertNodes(editor, cell, { at: insertPath })\n } catch (error) {\n // 如果插入失败，尝试在行末尾插入\n try {\n const [targetRow] = Editor.node(editor, targetRowPath)\n const cellCount = (targetRow as any).children.length\n const endPath = [...targetRowPath, cellCount]\n\n Transforms.insertNodes(editor, cell, { at: endPath })\n } catch (fallbackError) {\n console.warn('插入新单元格失败:', fallbackError)\n }\n }\n }\n } catch (error) {\n console.warn('插入新单元格失败:', error)\n }\n }\n })\n }\n}\n\nexport default DeleteRow\n","/**\n * @description del table menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport { Transforms } from 'slate'\n\nimport { TRASH_SVG } from '../../constants/svg'\n\nclass DeleteTable implements IButtonMenu {\n readonly title = t('tableModule.deleteTable')\n\n readonly iconSvg = TRASH_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n if (editor.selection == null) { return true }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n // 选区未处于 table node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n // 删除表格\n Transforms.removeNodes(editor, { mode: 'highest' })\n }\n}\n\nexport default DeleteTable\n","/**\n * @description table full width menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport { Range, Transforms } from 'slate'\n\nimport { FULL_WIDTH_SVG } from '../../constants/svg'\nimport { TableElement } from '../custom-types'\n\nclass TableFullWidth implements IButtonMenu {\n readonly title = t('tableModule.widthAuto')\n\n readonly iconSvg = FULL_WIDTH_SVG\n\n readonly tag = 'button'\n\n getValue(editor: IDomEditor): string | boolean {\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table') as TableElement | null\n\n if (tableNode == null) { return false }\n return tableNode.width === '100%'\n }\n\n isActive(editor: IDomEditor): boolean {\n return !!this.getValue(editor)\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n // 选区未处于 table node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table') as TableElement\n\n if (!tableNode) { return }\n\n const props: Partial = {\n width: tableNode.width === '100%' ? 'auto' : '100%',\n }\n\n Transforms.setNodes(editor, props, { mode: 'highest' })\n }\n}\n\nexport default TableFullWidth\n","/**\n * @description table menu helpers\n * @author wangfupeng\n */\n\nimport { DomEditor, IDomEditor } from '@wangeditor-next/core'\n\nimport { TableCellElement, TableElement } from './custom-types'\n\n/**\n * 获取第一行所有 cells\n * @param tableNode table node\n */\nexport function getFirstRowCells(tableNode: TableElement): TableCellElement[] {\n const rows = tableNode.children || [] // 所有行\n\n if (rows.length === 0) { return [] }\n const firstRow = rows[0] || {} // 第一行\n const cells = firstRow.children || [] // 第一行所有 cell\n\n return cells\n}\n\n/**\n * 表格是否带有表头？\n * @param tableNode table node\n */\nexport function isTableWithHeader(tableNode: TableElement): boolean {\n const firstRowCells = getFirstRowCells(tableNode)\n\n return firstRowCells.every(cell => !!cell.isHeader)\n}\n\n/**\n * 单元格是否在第一行\n * @param editor editor\n * @param cellNode cell node\n */\nexport function isCellInFirstRow(editor: IDomEditor, cellNode: TableCellElement): boolean {\n const rowNode = DomEditor.getParentNode(editor, cellNode)\n\n if (rowNode == null) { return false }\n const tableNode = DomEditor.getParentNode(editor, rowNode)\n\n if (tableNode == null) { return false }\n\n const firstRowCells = getFirstRowCells(tableNode as TableElement)\n\n return firstRowCells.some(c => c === cellNode)\n}\n","/**\n * @description insert col menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport {\n Editor, Path, Range, Transforms,\n} from 'slate'\n\nimport { ADD_COL_SVG } from '../../constants/svg'\nimport { filledMatrix } from '../../utils'\nimport { TableCellElement, TableElement } from '../custom-types'\nimport { isTableWithHeader } from '../helpers'\n\nclass InsertCol implements IButtonMenu {\n readonly title = t('tableModule.insertCol')\n\n readonly iconSvg = ADD_COL_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n // 选区未处于 table cell node ，则禁用\n return true\n }\n\n // 检查当前单元格的宽度是否小于20px\n try {\n const [cellEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n universal: true,\n })\n\n if (!cellEntry) {\n return true\n }\n\n const [, selectedCellPath] = cellEntry\n const matrix = filledMatrix(editor)\n let tdIndex = -1\n\n // 找到当前单元格在矩阵中的列索引\n for (let x = 0; x < matrix.length; x += 1) {\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [[, path]] = matrix[x][y]\n\n if (Path.equals(selectedCellPath, path)) {\n tdIndex = y\n break\n }\n }\n if (tdIndex !== -1) { break }\n }\n\n if (tdIndex === -1) {\n return true\n }\n\n // 获取表格的列宽信息\n const tableElement = tableNode as TableElement\n const { columnWidths = [] } = tableElement\n\n // 检查当前列的宽度 - 如果小于20px则禁用插入列功能\n const currentColWidth = columnWidths[tdIndex]\n\n if (currentColWidth && currentColWidth < 20) {\n return true // 宽度限制：当前列宽度小于20px时禁用插入列功能\n }\n\n } catch (error) {\n // 如果检查过程中出现错误，为安全起见禁用功能\n return true\n }\n\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n const [cellEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n universal: true,\n })\n const [selectedCellNode, selectedCellPath] = cellEntry\n\n const rowNode = DomEditor.getParentNode(editor, selectedCellNode)\n\n if (rowNode == null) { return }\n const tableNode = DomEditor.getParentNode(editor, rowNode) as TableElement\n\n if (tableNode == null) { return }\n\n const matrix = filledMatrix(editor)\n let tdIndex = -1\n\n for (let x = 0; x < matrix.length; x += 1) {\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [[, path]] = matrix[x][y]\n\n if (Path.equals(selectedCellPath, path)) {\n tdIndex = y\n break\n }\n }\n if (tdIndex !== -1) { break }\n }\n\n if (tdIndex === -1) { return }\n\n const selectedColSpan = (selectedCellNode as TableCellElement).colSpan || 1\n const { insertPosition = 'before' } = editor.getMenuConfig('insertTableCol') || {}\n const normalizedInsertPosition = insertPosition === 'after' ? 'after' : 'before'\n const totalCols = matrix[0]?.length || 0\n const insertColIndex = normalizedInsertPosition === 'after'\n ? Math.min(tdIndex + selectedColSpan, totalCols)\n : tdIndex\n const mergeInspectColIndex = insertColIndex < totalCols ? insertColIndex : -1\n\n Editor.withoutNormalizing(editor, () => {\n // 记录已处理的合并单元格和需要跳过插入的行\n const processedMergedCells = new Set()\n const skipInsertForRows = new Set()\n\n // 遍历每一行的第 tdIndex 列，处理合并单元格\n for (let x = 0; x < matrix.length; x += 1) {\n if (mergeInspectColIndex < 0) {\n continue\n }\n\n // 安全检查：确保行和列都存在\n if (!matrix[x] || !matrix[x][mergeInspectColIndex]) {\n continue\n }\n\n const [[,], {\n rtl, ltr, ttb, btt,\n }] = matrix[x][mergeInspectColIndex]\n\n // 判断是否是合并单元格\n if (rtl > 1 || ltr > 1 || ttb > 1 || btt > 1) {\n // 这是合并单元格的一部分\n // 找到真实单元格的位置（左上角的位置）\n // rtl表示从右到左的距离，所以真实单元格列 = 当前列 - (rtl - 1)\n // ttb表示从上到下的距离，所以真实单元格行 = 当前行 - (ttb - 1)\n const realCellRow = x - (ttb - 1)\n const realCellCol = mergeInspectColIndex - (rtl - 1)\n\n // 安全检查：确保真实单元格位置存在\n if (realCellRow < 0 || realCellRow >= matrix.length\n || !matrix[realCellRow] || !matrix[realCellRow][realCellCol]) {\n continue\n }\n\n const [[realCellElement, realCellPath]] = matrix[realCellRow][realCellCol]\n const realCellPathKey = realCellPath.join(',')\n\n // 避免重复处理同一个合并单元格\n if (!processedMergedCells.has(realCellPathKey)) {\n processedMergedCells.add(realCellPathKey)\n\n const { rowSpan = 1, colSpan = 1 } = realCellElement\n const newColSpan = colSpan + 1\n\n // 更新真实单元格的 colSpan\n if (!realCellElement.hidden) {\n Transforms.setNodes(\n editor,\n {\n colSpan: newColSpan,\n },\n { at: realCellPath },\n )\n }\n\n // 标记所有被这个合并单元格影响的行，这些行不需要插入新的单元格\n // 从真实单元格的行开始，标记rowSpan行\n for (let r = 0; r < rowSpan; r += 1) {\n skipInsertForRows.add(realCellRow + r)\n }\n } else {\n // 如果已经处理过这个合并单元格，当前行也不需要插入新单元格\n skipInsertForRows.add(x)\n }\n }\n }\n\n // 遍历所有行，为需要插入的行添加新单元格\n for (let x = 0; x < matrix.length; x += 1) {\n // 如果这一行被合并单元格覆盖，则不插入新单元格\n if (skipInsertForRows.has(x)) {\n continue\n }\n\n const currentRow = matrix[x]\n\n // 安全检查：确保矩阵位置存在\n if (!currentRow || currentRow.length === 0) {\n continue\n }\n\n const newCell: TableCellElement = {\n type: 'table-cell',\n children: [{ text: '' }],\n }\n\n // 如果是第一行且表格有标题，设置为标题单元格\n if (x === 0 && isTableWithHeader(tableNode)) {\n newCell.isHeader = true\n }\n\n let insertPath: Path\n\n if (insertColIndex < currentRow.length) {\n const [[, pathAtInsertCol]] = currentRow[insertColIndex]\n\n insertPath = pathAtInsertCol as Path\n } else {\n const [[, lastCellPath]] = currentRow[currentRow.length - 1]\n\n insertPath = Path.next(lastCellPath as Path)\n }\n\n Transforms.insertNodes(editor, newCell, { at: insertPath })\n }\n\n // 调整 columnWidths\n const [tableEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table'),\n universal: true,\n })\n\n if (tableEntry) {\n const [elemNode, tablePath] = tableEntry\n const { columnWidths = [] } = elemNode as TableElement\n const adjustColumnWidths = [...columnWidths]\n\n // 获取当前列的宽度，如果没有设置则使用默认宽度\n const { minWidth = 60 } = editor.getMenuConfig('insertTable')\n const currentColWidth = columnWidths[tdIndex] || parseInt(minWidth.toString(), 10) || 60\n\n // 将当前列宽度一分为二\n const halfWidth = Math.floor(currentColWidth / 2)\n const remainingWidth = currentColWidth - halfWidth\n\n if (normalizedInsertPosition === 'after') {\n // 在当前位置后插入新列（右侧）\n adjustColumnWidths[tdIndex] = remainingWidth\n adjustColumnWidths.splice(tdIndex + 1, 0, halfWidth)\n } else {\n // 在当前位置前插入新列（左侧）\n adjustColumnWidths.splice(tdIndex, 0, halfWidth)\n // 更新原列宽度为剩余的一半\n adjustColumnWidths[tdIndex + 1] = remainingWidth\n }\n\n Transforms.setNodes(editor, { columnWidths: adjustColumnWidths } as TableElement, {\n at: tablePath,\n })\n }\n })\n }\n}\n\nexport default InsertCol\n","/**\n * @description insert row menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport {\n Editor, Path, Range, Transforms,\n} from 'slate'\n\nimport { ADD_ROW_SVG } from '../../constants/svg'\nimport { filledMatrix } from '../../utils'\nimport { TableCellElement, TableRowElement } from '../custom-types'\n\nclass InsertRow implements IButtonMenu {\n readonly title = t('tableModule.insertRow')\n\n readonly iconSvg = ADD_ROW_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n // 选区未处于 table cell node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n const [cellEntry] = Editor.nodes(editor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n universal: true,\n })\n const [, cellPath] = cellEntry\n\n const matrix = filledMatrix(editor)\n // 向下插入行为，先找到\n // 当前选区所在的 tr 索引\n let trIndex = 0\n /* eslint-disable no-labels */\n\n outer: for (let x = 0; x < matrix.length; x += 1) {\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [[, path]] = matrix[x][y]\n\n if (!Path.equals(cellPath, path)) {\n continue\n }\n trIndex = x\n // eslint-disable-next-line no-labels\n break outer\n }\n }\n\n // 获取表格的真实列数（使用matrix的列数，而不是当前行的physical cell数量）\n const cellsLength = matrix[trIndex]?.length || 0\n\n if (cellsLength === 0) { return }\n\n Editor.withoutNormalizing(editor, () => {\n // 向下添加 tr 索引\n const destIndex = trIndex + 1\n const isWithinBounds = destIndex >= 0 && destIndex < matrix.length\n const exitMerge: number[] = []\n\n for (let y = 0; isWithinBounds && y < matrix[trIndex].length; y += 1) {\n const [, { ttb, btt }] = matrix[trIndex][y]\n\n // 向上找到 1 元素为止\n if (ttb > 1 || btt > 1) {\n const originalRowIndex = trIndex - (ttb - 1)\n\n // 安全检查：确保目标行和列都存在\n if (originalRowIndex < 0 || originalRowIndex >= matrix.length || !matrix[originalRowIndex] || !matrix[originalRowIndex][y]) {\n continue\n }\n\n const [[element, path]] = matrix[originalRowIndex][y]\n const rowSpan = element.rowSpan || 1\n\n exitMerge.push(y)\n if (!element.hidden) {\n Transforms.setNodes(\n editor,\n {\n rowSpan: rowSpan + 1,\n },\n { at: path },\n )\n }\n }\n }\n\n // 拼接新的 row\n const { minRowHeight = 30 } = editor.getMenuConfig('insertTable') || {}\n const defaultRowHeight = parseInt(minRowHeight.toString(), 10) || 30\n const newRow: TableRowElement = { type: 'table-row', children: [], height: defaultRowHeight }\n\n // 只为不被合并单元格覆盖的位置创建td元素\n for (let i = 0; i < cellsLength; i += 1) {\n // 如果当前位置被合并单元格覆盖，则跳过（不创建td）\n if (exitMerge.includes(i)) {\n continue\n }\n\n const cell: TableCellElement = {\n type: 'table-cell',\n children: [{ text: '' }],\n }\n\n newRow.children.push(cell)\n }\n\n // 插入 row\n const rowPath = Path.parent(cellPath) // 获取 tr 的 path\n const newRowPath = Path.next(rowPath)\n\n Transforms.insertNodes(editor, newRow, { at: newRowPath })\n\n // 新插入的行已经在创建时设置了高度属性，无需额外操作\n })\n }\n}\n\nexport default InsertRow\n","/**\n * @description insert table menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IDomEditor, IDropPanelMenu, t,\n} from '@wangeditor-next/core'\nimport {\n Range, Transforms,\n} from 'slate'\n\nimport { TABLE_SVG } from '../../constants/svg'\nimport $, { Dom7Array, DOMElement } from '../../utils/dom'\nimport { TableCellElement, TableElement, TableRowElement } from '../custom-types'\n\nfunction genTableNode(editor: IDomEditor, rowNum: number, colNum: number): TableElement {\n // 拼接 rows\n const rows: TableRowElement[] = []\n const {\n minWidth = 60, minRowHeight = 30, tableFullWidth, tableHeader,\n } = editor.getMenuConfig('insertTable')\n const columnWidths: number[] = Array(colNum).fill(parseInt(minWidth, 10) || 60)\n\n for (let i = 0; i < rowNum; i += 1) {\n // 拼接 cells\n const cells: TableCellElement[] = []\n\n for (let j = 0; j < colNum; j += 1) {\n const cellNode: TableCellElement = {\n type: 'table-cell',\n children: [{ text: '' }],\n }\n\n if (i === 0) {\n cellNode.isHeader = tableHeader?.selected ?? true // 第一行默认是 th\n }\n cells.push(cellNode)\n }\n\n // 生成 row\n rows.push({\n type: 'table-row',\n children: cells,\n height: parseInt(minRowHeight, 10) || 30,\n })\n }\n\n return {\n type: 'table',\n width: tableFullWidth?.selected ? '100%' : 'auto',\n children: rows,\n columnWidths,\n }\n}\n\nclass InsertTable implements IDropPanelMenu {\n title = t('tableModule.insertTable')\n\n iconSvg = TABLE_SVG\n\n tag = 'button'\n\n showDropPanel = true // 点击 button 时显示 dropPanel\n\n private $content: Dom7Array | null = null\n\n getValue(_editor: IDomEditor): string | boolean {\n // 插入菜单，不需要 value\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 任何时候，都不用激活 menu\n return false\n }\n\n exec(_editor: IDomEditor, _value: string | boolean) {\n // 点击菜单时，弹出 modal 之前，不需要执行其他代码\n // 此处空着即可\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true } // 选区非折叠，禁用\n\n const selectedElems = DomEditor.getSelectedElems(editor)\n const hasVoidOrPreOrTable = selectedElems.some(elem => {\n const type = DomEditor.getNodeType(elem)\n\n if (type === 'pre') { return true }\n if (type === 'table') { return true }\n if (type === 'list-item') { return true }\n if (editor.isVoid(elem)) { return true }\n return false\n })\n\n if (hasVoidOrPreOrTable) { return true } // 匹配到，禁用\n\n return false\n }\n\n /**\n * 获取 panel 内容\n * @param editor editor\n */\n getPanelContentElem(editor: IDomEditor): DOMElement {\n // 已有，直接返回\n if (this.$content) { return this.$content[0] }\n\n // 初始化\n const $content = $('
    ')\n const $info = $('0 × 0') // 显示行列数量\n\n // 渲染 10 * 10 table ，以快速创建表格\n const $table = $('
    ')\n\n for (let i = 0; i < 10; i += 1) {\n const $tr = $('')\n\n for (let j = 0; j < 10; j += 1) {\n const $td = $('')\n\n $td.attr('data-x', j.toString())\n $td.attr('data-y', i.toString())\n $tr.append($td)\n\n // 绑定 mouseenter\n $td.on('mouseenter', (e: Event) => {\n const { target } = e\n\n if (target == null) { return }\n const $focusTd = $(target)\n const { x: focusX, y: focusY } = $focusTd.dataset()\n\n // 显示行列数量\n $info[0].innerHTML = `${focusX + 1} × ${focusY + 1}`\n\n // 修改 table td 样式\n $table.children().each(tr => {\n $(tr)\n .children()\n .each(td => {\n const $newTd = $(td)\n const { x, y } = $newTd.dataset()\n\n if (x <= focusX && y <= focusY) {\n $newTd.addClass('active')\n } else {\n $newTd.removeClass('active')\n }\n })\n })\n })\n\n // 绑定 click\n $td.on('click', (e: Event) => {\n e.preventDefault()\n const { target } = e\n\n if (target == null) { return }\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const $td = $(target)\n const { x, y } = $td.dataset()\n\n this.insertTable(editor, y + 1, x + 1)\n })\n }\n $table.append($tr)\n }\n $content.append($table)\n $content.append($info)\n\n // 记录，并返回\n this.$content = $content\n return $content[0]\n }\n\n private insertTable(editor: IDomEditor, rowNumStr: string, colNumStr: string) {\n const rowNum = parseInt(rowNumStr, 10)\n const colNum = parseInt(colNumStr, 10)\n\n if (!rowNum || !colNum) { return }\n if (rowNum <= 0 || colNum <= 0) { return }\n\n // 如果当前是空 p ，则删除该 p\n if (DomEditor.isSelectedEmptyParagraph(editor)) {\n Transforms.removeNodes(editor, { mode: 'highest' })\n }\n\n // 插入表格\n const tableNode = genTableNode(editor, rowNum, colNum)\n\n Transforms.insertNodes(editor, tableNode, { mode: 'highest' })\n }\n}\n\nexport default InsertTable\n","import {\n Editor,\n Element,\n Location,\n NodeEntry,\n} from 'slate'\n\nimport { isOfType } from '../utils'\nimport { EDITOR_TO_SELECTION, EDITOR_TO_SELECTION_SET } from './weak-maps'\n\nexport const TableCursor = {\n /** @returns {boolean} `true` if the selection is inside a table, otherwise `false`. */\n isInTable(editor: Editor, options: { at?: Location } = {}): boolean {\n const [table] = Editor.nodes(editor, {\n match: isOfType(editor, 'table'),\n at: options.at,\n })\n\n return !!table\n },\n /**\n * Retrieves a matrix representing the selected cells within a table.\n * @returns {NodeEntry[][]} A matrix containing the selected cells.\n */\n * selection(editor: Editor): Generator {\n const matrix = EDITOR_TO_SELECTION.get(editor)\n\n for (let x = 0; matrix && x < matrix.length; x += 1) {\n const cells: NodeEntry[] = []\n\n for (let y = 0; y < matrix[x].length; y += 1) {\n const [entry, { ltr: colSpan, ttb }] = matrix[x][y]\n\n if (ttb === 1) { cells.push(entry) }\n\n y += colSpan - 1\n }\n\n yield cells\n }\n },\n /** Clears the selection from the table */\n unselect(editor: Editor): void {\n // const matrix = EDITOR_TO_SELECTION.get(editor);\n\n // if (!matrix?.length) {\n // return;\n // }\n\n // for (let x = 0; x < matrix.length; x+=1) {\n // for (let y = 0; y < matrix[x].length; y+=1) {\n // const [[, path], { ltr: colSpan, ttb }] = matrix[x][y];\n // y += colSpan - 1;\n\n // if (ttb > 1) {\n // continue;\n // }\n\n // // no-op since the paths are the same\n // const noop: Operation = {\n // type: \"move_node\",\n // newPath: path,\n // path: path,\n // };\n // Transforms.transform(editor, noop);\n // }\n // }\n\n EDITOR_TO_SELECTION_SET.delete(editor)\n EDITOR_TO_SELECTION.delete(editor)\n // 清除选区\n // document.getSelection()?.removeAllRanges()\n },\n /**\n * Checks whether a given cell is part of the current table selection.\n * @returns {boolean} - Returns true if the cell is selected, otherwise false.\n */\n isSelected(editor: Editor, element: T): boolean {\n const selectedElements = EDITOR_TO_SELECTION_SET.get(editor)\n\n if (!selectedElements) {\n return false\n }\n\n return selectedElements.has(element)\n },\n\n hasSelected(editor: Editor) {\n return EDITOR_TO_SELECTION.has(editor)\n },\n}\n","import { IButtonMenu, IDomEditor, t } from '@wangeditor-next/core'\nimport {\n Editor, Node, Path, Transforms,\n} from 'slate'\n\nimport { MERGE_CELL_SVG } from '../../constants/svg'\nimport {\n CellElement, hasCommon,\n} from '../../utils'\nimport { TableCursor } from '../table-cursor'\nimport { EDITOR_TO_SELECTION } from '../weak-maps'\n\nclass MergeCell implements IButtonMenu {\n readonly title = t('tableModule.mergeCell')\n\n readonly iconSvg = MERGE_CELL_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n return !this.canMerge(editor)\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n this.merge(editor)\n // 释放选区\n TableCursor.unselect(editor)\n }\n\n /**\n * Checks if the current selection can be merged. Merging is not possible when any of the following conditions are met:\n * - The selection is empty.\n * - The selection is not within the same \"thead\", \"tbody,\" or \"tfoot\" section.\n * @returns {boolean} `true` if the selection can be merged, otherwise `false`.\n */\n canMerge(editor: Editor): boolean {\n const matrix = EDITOR_TO_SELECTION.get(editor)\n\n // cannot merge when selection is empty\n if (!matrix || !matrix.length) {\n return false\n }\n\n // prettier-ignore\n const [[, lastPath]] = matrix[matrix.length - 1][matrix[matrix.length - 1].length - 1]\n const [[, firstPath]] = matrix[0][0]\n\n // cannot merge when selection is not in common section\n if (!hasCommon(editor, [firstPath, lastPath], 'table')) {\n return false\n }\n\n return true\n }\n\n /**\n * Merges the selected cells in the table.\n * @returns void\n */\n merge(editor: Editor): void {\n if (!this.canMerge(editor)) {\n return\n }\n\n const selection = EDITOR_TO_SELECTION.get(editor)\n\n if (!selection || !selection.length) {\n return\n }\n\n const [[, basePath]] = selection[0][0]\n const [[, lastPath]] = Node.children(editor, basePath, { reverse: true })\n\n Editor.withoutNormalizing(editor, () => {\n // 收集所有真实的单元格（避免重复计算虚拟位置）\n const realCells = new Map()\n const cellsToDelete: Path[] = []\n\n // 计算实际的边界范围（考虑单元格的实际跨度）\n let minRow = Infinity\n let maxRow = -Infinity\n let minCol = Infinity\n let maxCol = -Infinity\n\n // 第一阶段：收集所有真实单元格并计算其实际占用的范围\n for (let x = 0; x < selection.length; x += 1) {\n for (let y = 0; y < selection[x].length; y += 1) {\n const [[element, path], { ttb }] = selection[x][y]\n const pathKey = path.join(',')\n\n // 只处理真实单元格（ttb === 1 表示单元格的实际位置，不是虚拟扩展）\n if (ttb === 1 && !realCells.has(pathKey)) {\n realCells.set(pathKey, {\n path, x, y, element,\n })\n\n // 获取当前单元格的跨度\n const { rowSpan = 1, colSpan = 1 } = element\n\n // 计算该单元格实际占用的范围\n const cellMinRow = x\n const cellMaxRow = x + rowSpan - 1\n const cellMinCol = y\n const cellMaxCol = y + colSpan - 1\n\n // 更新整体边界\n minRow = Math.min(minRow, cellMinRow)\n maxRow = Math.max(maxRow, cellMaxRow)\n minCol = Math.min(minCol, cellMinCol)\n maxCol = Math.max(maxCol, cellMaxCol)\n }\n }\n }\n\n // 计算正确的rowSpan和colSpan（基于实际占用的行列范围）\n const finalRowSpan = maxRow - minRow + 1\n const finalColSpan = maxCol - minCol + 1\n\n // 第二阶段：确定要删除的单元格\n for (const [, { path }] of realCells) {\n // 跳过基础单元格（第一个单元格作为合并后的目标）\n if (Path.equals(basePath, path)) {\n continue\n }\n\n cellsToDelete.push(path)\n }\n\n // 第三阶段：按路径降序排序并删除单元格\n cellsToDelete.sort((a, b) => {\n for (let i = 0; i < Math.min(a.length, b.length); i += 1) {\n if (a[i] !== b[i]) {\n return b[i] - a[i] // 降序\n }\n }\n return b.length - a.length\n })\n\n // 删除单元格并移动内容\n for (const path of cellsToDelete) {\n try {\n // 检查节点是否仍然存在\n if (!Editor.hasPath(editor, path)) {\n continue\n }\n\n // 移动单元格内容到基础单元格\n for (const [, childPath] of Node.children(editor, path, { reverse: true })) {\n Transforms.moveNodes(editor, {\n to: Path.next(lastPath),\n at: childPath,\n })\n }\n\n // 删除单元格\n Transforms.removeNodes(editor, { at: path })\n } catch (error) {\n // 静默处理删除失败的情况\n }\n }\n\n // 为基础单元格设置正确的rowSpan和colSpan属性\n Transforms.setNodes(editor, { rowSpan: finalRowSpan, colSpan: finalColSpan }, { at: basePath })\n })\n }\n}\n\nexport default MergeCell\n","import {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport { Editor, Path, Transforms } from 'slate'\n\nimport { SPLIT_CELL_SVG } from '../../constants/svg'\nimport { CellElement, isOfType } from '../../utils'\nimport { TableCellElement, TableElement } from '../custom-types'\nimport { isTableWithHeader } from '../helpers'\n// import { DEFAULT_WITH_TABLE_OPTIONS } from \"../../utils/options\";\n\nclass SplitCell implements IButtonMenu {\n readonly title = t('tableModule.splitCell')\n\n readonly iconSvg = SPLIT_CELL_SVG\n\n readonly tag = 'button'\n\n getValue(_editor: IDomEditor): string | boolean {\n // 无需获取 val\n return ''\n }\n\n isActive(_editor: IDomEditor): boolean {\n // 无需 active\n return false\n }\n\n isDisabled(editor: IDomEditor): boolean {\n // 查找当前选中的单元格，支持td和th两种类型\n const [cell] = Editor.nodes(editor, {\n match: n => {\n return DomEditor.checkNodeType(n, 'table-cell')\n },\n })\n\n if (!cell) {\n return true // 如果没有找到单元格，则禁用拆分功能\n }\n\n const [{ rowSpan = 1, colSpan = 1 }] = cell as CellElement[]\n\n // 只有当rowSpan或colSpan大于1时才能拆分\n if (rowSpan > 1 || colSpan > 1) {\n return false\n }\n\n return true\n }\n\n exec(editor: IDomEditor, _value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n this.split(editor)\n }\n\n /**\n * Splits either the cell at the current selection or a specified location. If a range\n * selection is present, all cells within the range will be split.\n * @param {Location} [options.at] - Splits the cell at the specified location. If no\n * location is specified it will split the cell at the current selection\n * @param {boolean} [options.all] - If true, splits all cells in the table\n * @returns void\n */\n split(editor: Editor, options: { at?: Location; all?: boolean } = {}): void {\n const [table, td] = Editor.nodes(editor, {\n match: isOfType(editor, 'table', 'th', 'td'),\n // @ts-ignore\n at: options.at,\n })\n\n if (!table || !td) {\n return\n }\n\n const [tableNode] = table as [TableElement, Path]\n const hasHeader = isTableWithHeader(tableNode)\n\n // 获取当前选中的单元格\n const [selectedCell, selectedCellPath] = td as [CellElement, Path]\n const { rowSpan = 1, colSpan = 1 } = selectedCell\n\n // 如果单元格未合并，无需拆分\n if (rowSpan === 1 && colSpan === 1) {\n return\n }\n\n Editor.withoutNormalizing(editor, () => {\n // 1. 重置当前单元格的rowSpan和colSpan\n Transforms.setNodes(editor, { rowSpan: 1, colSpan: 1 }, { at: selectedCellPath })\n\n // 2. 处理同行的其他列（colSpan > 1的情况）\n // 在当前单元格后面插入 colSpan-1 个新单元格\n for (let c = 1; c < colSpan; c += 1) {\n const newCell: TableCellElement = {\n type: 'table-cell',\n children: [{ text: '' }],\n }\n\n // 如果在第一行且表格有表头，设置isHeader\n const currentRowIndex = selectedCellPath[selectedCellPath.length - 2]\n\n if (currentRowIndex === 0 && hasHeader) {\n newCell.isHeader = true\n }\n\n // 在当前行的当前位置之后插入\n const currentRowPath = selectedCellPath.slice(0, -1)\n const insertIndex = selectedCellPath[selectedCellPath.length - 1] + c\n const insertPath = [...currentRowPath, insertIndex]\n\n try {\n Transforms.insertNodes(editor, newCell, { at: insertPath })\n } catch (error) {\n // 如果指定位置插入失败，在行末尾插入\n try {\n const [currentRow] = Editor.node(editor, currentRowPath)\n const cellsCount = (currentRow as any).children.length\n const fallbackPath = [...currentRowPath, cellsCount]\n\n Transforms.insertNodes(editor, newCell, { at: fallbackPath })\n } catch (fallbackError) {\n console.warn(`插入同行单元格失败: ${fallbackError instanceof Error ? fallbackError.message : String(fallbackError)}`)\n }\n }\n }\n\n // 3. 处理其他行（rowSpan > 1的情况）\n // 在下面的每一行都插入相应数量的单元格\n for (let r = 1; r < rowSpan; r += 1) {\n // 计算目标行路径\n const targetRowIndex = selectedCellPath[selectedCellPath.length - 2] + r\n const targetRowPath = [...selectedCellPath.slice(0, -2), targetRowIndex]\n\n try {\n // 检查目标行是否存在\n const [targetRow] = Editor.node(editor, targetRowPath)\n\n if (!targetRow) {\n console.warn(`目标行 ${targetRowIndex} 不存在`)\n continue\n }\n\n // 在目标行中插入colSpan个新单元格\n for (let c = 0; c < colSpan; c += 1) {\n const newCell: TableCellElement = {\n type: 'table-cell',\n children: [{ text: '' }],\n }\n\n // 计算插入位置\n const originalColumnIndex = selectedCellPath[selectedCellPath.length - 1]\n const insertIndex = originalColumnIndex + c\n const insertPath = [...targetRowPath, insertIndex]\n\n try {\n // 获取目标行当前的单元格数量\n const currentCellsCount = (targetRow as any).children.length\n\n // 如果插入位置超出当前行的范围，在行末尾插入\n if (insertIndex >= currentCellsCount) {\n const endPath = [...targetRowPath, currentCellsCount]\n\n Transforms.insertNodes(editor, newCell, { at: endPath })\n } else {\n Transforms.insertNodes(editor, newCell, { at: insertPath })\n }\n } catch (insertError) {\n // 最后的备用方案：在行末尾插入\n try {\n const updatedCellsCount = (targetRow as any).children.length\n const fallbackPath = [...targetRowPath, updatedCellsCount]\n\n Transforms.insertNodes(editor, newCell, { at: fallbackPath })\n } catch (finalError) {\n console.warn(`插入单元格到第${r}行失败: ${finalError instanceof Error ? finalError.message : String(finalError)}`)\n }\n }\n }\n } catch (rowError) {\n console.warn(`处理第${r}行时出错: ${rowError instanceof Error ? rowError.message : String(rowError)}`)\n }\n }\n })\n }\n}\n\nexport default SplitCell\n","/**\n * @description table header menu\n * @author wangfupeng\n */\n\nimport {\n DomEditor, IButtonMenu, IDomEditor, t,\n} from '@wangeditor-next/core'\nimport { Range, Transforms } from 'slate'\n\nimport { TABLE_HEADER_SVG } from '../../constants/svg'\nimport { TableElement } from '../custom-types'\nimport { getFirstRowCells, isTableWithHeader } from '../helpers'\n\nclass TableHeader implements IButtonMenu {\n readonly title = t('tableModule.header')\n\n readonly iconSvg = TABLE_HEADER_SVG\n\n readonly tag = 'button'\n\n // 是否已设置表头\n getValue(editor: IDomEditor): string | boolean {\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table') as TableElement\n\n if (tableNode == null) { return false }\n\n return isTableWithHeader(tableNode)\n }\n\n isActive(editor: IDomEditor): boolean {\n return !!this.getValue(editor)\n }\n\n isDisabled(editor: IDomEditor): boolean {\n const { selection } = editor\n\n if (selection == null) { return true }\n if (!Range.isCollapsed(selection)) { return true }\n\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table')\n\n if (tableNode == null) {\n // 选区未处于 table node ，则禁用\n return true\n }\n return false\n }\n\n exec(editor: IDomEditor, value: string | boolean) {\n if (this.isDisabled(editor)) { return }\n\n // 已经设置了表头，则取消。未设置表头，则设置\n const newValue = !value\n\n // 获取第一行所有 cell\n const tableNode = DomEditor.getSelectedNodeByType(editor, 'table') as TableElement\n\n if (tableNode == null) { return }\n const firstRowCells = getFirstRowCells(tableNode)\n\n // 设置 isHeader 属性\n firstRowCells.forEach(cell => Transforms.setNodes(\n editor,\n { isHeader: newValue },\n {\n at: DomEditor.findPath(editor, cell),\n },\n ))\n }\n}\n\nexport default TableHeader\n","/**\n * @description table menu\n * @author wangfupeng\n */\n\nimport CellProperty from './CellProperty'\nimport DeleteCol from './DeleteCol'\nimport DeleteRow from './DeleteRow'\nimport DeleteTable from './DeleteTable'\nimport FullWidth from './FullWidth'\nimport InsertCol from './InsertCol'\nimport InsertRow from './InsertRow'\nimport InsertTable from './InsertTable'\nimport MergeCell from './MergeCell'\nimport SplitCell from './SplitCell'\nimport TableHander from './TableHeader'\nimport TableProperty from './TableProperty'\n\nexport const insertTableMenuConf = {\n key: 'insertTable',\n config: {\n minWidth: 60,\n minRowHeight: 30,\n tableHeader: {\n selected: true,\n },\n tableFullWidth: {\n selected: false,\n },\n widthExportMode: 'explicit',\n },\n factory() {\n return new InsertTable()\n },\n}\n\nexport const deleteTableMenuConf = {\n key: 'deleteTable',\n factory() {\n return new DeleteTable()\n },\n}\n\nexport const insertTableRowConf = {\n key: 'insertTableRow',\n factory() {\n return new InsertRow()\n },\n}\n\nexport const deleteTableRowConf = {\n key: 'deleteTableRow',\n factory() {\n return new DeleteRow()\n },\n}\n\nexport const insertTableColConf = {\n key: 'insertTableCol',\n factory() {\n return new InsertCol()\n },\n}\n\nexport const deleteTableColConf = {\n key: 'deleteTableCol',\n factory() {\n return new DeleteCol()\n },\n}\n\nexport const tableHeaderMenuConf = {\n key: 'tableHeader',\n factory() {\n return new TableHander()\n },\n}\n\nexport const tableFullWidthMenuConf = {\n key: 'tableFullWidth',\n factory() {\n return new FullWidth()\n },\n}\n\n/** Meger / Split conf */\nexport const mergeTableCellConf = {\n key: 'mergeTableCell',\n factory() {\n return new MergeCell()\n },\n}\n\nexport const splitTableCellConf = {\n key: 'splitTableCell',\n factory() {\n return new SplitCell()\n },\n}\n\n/** set property conf */\nexport const setTablePropertyConf = {\n key: 'setTableProperty',\n factory() {\n return new TableProperty()\n },\n}\n\nexport const setTableCellPropertyConf = {\n key: 'setTableCellProperty',\n factory() {\n return new CellProperty()\n },\n}\n","/**\n * @description parse html\n * @author wangfupeng\n */\n\nimport { DomEditor, IDomEditor } from '@wangeditor-next/core'\nimport { Descendant, Text } from 'slate'\n\nimport $, { DOMElement, getStyleValue, getTagName } from '../utils/dom'\nimport { TableCellElement, TableElement, TableRowElement } from './custom-types'\n\nconst DEFAULT_PERCENT_TABLE_WIDTH = 600\n\nfunction parsePixelSize(value: string | null | undefined, fallback = 0): number {\n const parsedValue = parseInt(value || '', 10)\n\n if (Number.isNaN(parsedValue)) {\n return fallback\n }\n\n return parsedValue\n}\n\nfunction parseCssPixelSize(\n value: string | null | undefined,\n fallback = 0,\n percentageBase = 0,\n): number {\n const rawValue = (value || '').trim().toLowerCase()\n const parsedValue = parseFloat(rawValue)\n\n if (Number.isNaN(parsedValue)) {\n return fallback\n }\n\n if (rawValue.endsWith('pt')) {\n return Math.round((parsedValue * 4) / 3)\n }\n if (rawValue.endsWith('%')) {\n const base = percentageBase > 0 ? percentageBase : DEFAULT_PERCENT_TABLE_WIDTH\n\n return Math.round((parsedValue / 100) * base)\n }\n\n return Math.round(parsedValue)\n}\n\nfunction getColgroupWidths(\n colgroupElements: HTMLCollection | null,\n percentageBase: number,\n): number[] {\n if (!colgroupElements || colgroupElements.length === 0) { return [] }\n\n const columnWidths: number[] = []\n\n Array.from(colgroupElements).forEach((col: any) => {\n const span = parseInt(col.getAttribute('span') || '1', 10)\n const width = parseCssPixelSize(\n col.getAttribute('width') || getStyleValue($(col), 'width'),\n 90,\n percentageBase,\n )\n\n if (Number.isNaN(width)) { return }\n\n for (let i = 0; i < span; i += 1) {\n columnWidths.push(width)\n }\n })\n\n return columnWidths\n}\n\nfunction getTableWidthPixelBase($table: ReturnType): number {\n const styleWidth = getStyleValue($table, 'width')\n const widthAttr = $table.attr('width') || ''\n const rawWidth = styleWidth || widthAttr\n\n if (!rawWidth || rawWidth.trim() === '100%') {\n return 0\n }\n\n return parseCssPixelSize(rawWidth, 0)\n}\n\nfunction parseCellHtml(\n elem: DOMElement,\n children: Descendant[],\n editor: IDomEditor,\n): TableCellElement {\n const $elem = $(elem)\n const cellText = $elem.text().replace(/\\s+/gm, ' ').trim()\n\n children = children.filter(child => {\n if (DomEditor.getNodeType(child) === 'paragraph') { return true }\n if (Text.isText(child)) { return true }\n if (editor.isInline(child)) { return true }\n return false\n })\n\n // 无 children ，则用纯文本\n if (children.length === 0) {\n children = [{ text: $elem.text().replace(/\\s+/gm, ' ') }]\n }\n\n const colSpan = parseInt($elem.attr('colSpan') || '1', 10)\n const rowSpan = parseInt($elem.attr('rowSpan') || '1', 10)\n const hidden = getStyleValue($elem, 'display') === 'none' && cellText.length === 0\n const width = $elem.attr('width') || 'auto'\n\n return {\n type: 'table-cell',\n isHeader: getTagName($elem) === 'th',\n colSpan,\n rowSpan,\n width,\n // @ts-ignore\n children,\n hidden,\n }\n}\n\nexport const parseCellHtmlConf = {\n selector: 'td:not([data-w-e-type]),th:not([data-w-e-type])', // data-w-e-type 属性，留给自定义元素，保证扩展性\n parseElemHtml: parseCellHtml,\n}\n\nfunction parseRowHtml(\n elem: DOMElement,\n children: Descendant[],\n _editor: IDomEditor,\n): TableRowElement {\n const $elem = $(elem)\n const tableCellChildren: TableCellElement[] = []\n\n for (let i = 0; i < children.length; i += 1) {\n const child = children[i]\n\n // 确保是 table-cell 类型\n if (DomEditor.getNodeType(child) === 'table-cell') {\n const tableCell = child as TableCellElement\n\n // 如果是隐藏的单元格，则跳过（删除）\n if (tableCell.hidden) {\n continue\n }\n\n tableCellChildren.push(tableCell) // 只添加非隐藏的单元格\n }\n }\n\n // 解析行高度（style / class-mode data attr / legacy attr）\n const rowHeightRaw = getStyleValue($elem, 'height')\n || $elem.attr('data-w-e-row-height')\n || $elem.attr('height')\n const height = parsePixelSize(rowHeightRaw) || undefined\n\n return {\n type: 'table-row',\n height,\n children: tableCellChildren,\n }\n}\n\nexport const parseRowHtmlConf = {\n selector: 'tr:not([data-w-e-type])', // data-w-e-type 属性，留给自定义元素，保证扩展性\n parseElemHtml: parseRowHtml,\n}\n\nfunction parseTableHtml(\n elem: DOMElement,\n children: Descendant[],\n _editor: IDomEditor,\n): TableElement {\n const $elem = $(elem)\n const caption = ($elem.find('caption').text() || '').replace(/\\s+/gm, ' ').trim() || undefined\n\n // 计算宽度\n let tableWidth = 'auto'\n\n const styleWidth = getStyleValue($elem, 'width')\n const widthAttr = $elem.attr('width') || ''\n const isClassModeTable = $elem.hasClass('w-e-table-layout-fixed') || !!$elem.attr('data-w-e-table-height')\n\n if (styleWidth === '100%') { tableWidth = '100%' }\n if ($elem.attr('width') === '100%') { tableWidth = '100%' } // 兼容 v4 格式\n if (isClassModeTable && widthAttr && widthAttr !== 'auto' && widthAttr !== '100%') {\n tableWidth = widthAttr\n }\n\n // 计算高度\n const tableHeightRaw = getStyleValue($elem, 'height')\n || $elem.attr('data-w-e-table-height')\n || $elem.attr('height')\n const height = parsePixelSize(tableHeightRaw)\n\n const tableELement: TableElement = {\n type: 'table',\n width: tableWidth,\n caption,\n height,\n // @ts-ignore\n children: children.filter(child => DomEditor.getNodeType(child) === 'table-row'),\n }\n const tdList = $elem.find('tr')[0]?.children || []\n const colgroupElments: HTMLCollection = $elem.find('colgroup')[0]?.children || null\n const percentageBase = getTableWidthPixelBase($elem)\n const colgroupWidths = getColgroupWidths(colgroupElments, percentageBase)\n\n if (colgroupWidths.length > 0) {\n tableELement.columnWidths = colgroupWidths\n } else if (tdList.length > 0) {\n const columnWidths: number[] = []\n\n Array.from(tdList).forEach(td => {\n const colSpan = parseInt($(td).attr('colSpan') || '1', 10) // 获取 colSpan，默认为 1\n const width = parseCssPixelSize(getStyleValue($(td), 'width'), 90, percentageBase) // 获取 width，默认为 90\n\n // 根据 colSpan 的值来填充 columnWidths 数组\n columnWidths.push(width)\n for (let i = 1; i < colSpan; i += 1) {\n columnWidths.push(90)\n }\n })\n tableELement.columnWidths = columnWidths\n }\n return tableELement\n}\n\nexport const parseTableHtmlConf = {\n selector: 'table:not([data-w-e-type])', // data-w-e-type 属性，留给自定义元素，保证扩展性\n parseElemHtml: parseTableHtml,\n}\n","/**\n * @description parse style html\n * @author hsuna\n */\nimport { IDomEditor } from '@wangeditor-next/core'\nimport { Descendant } from 'slate'\n\nimport $, { DOMElement, getStyleValue } from '../utils/dom'\nimport { TableCellElement } from './custom-types'\n\n// 获取 var(--w-e-textarea-border-color) 变量的实际样式值\nconst DEFAULT_BORDER_COLOR = window\n ?.getComputedStyle(document.documentElement)\n ?.getPropertyValue('--w-e-textarea-border-color')\n\n/**\n * 将 CSS 尺寸字符串中的 'pt' 转换为 'px'\n * 转换比例: 1pt = 1.333333px (基于 W3C 推荐的 96 DPI 标准)\n * @param cssValue 包含 pt 单位的 CSS 字符串 (如 \"medium 1pt 1pt 0.5pt\")\n * @returns 转换后的 CSS 字符串 (如 \"medium 1.333333px 1.333333px 0.6666665px\")\n */\nfunction convertPtToPx(cssValue: string): string {\n if (!cssValue || typeof cssValue !== 'string' || !cssValue.includes('pt')) {\n return cssValue\n }\n\n // 使用正则匹配所有带 'pt' 单位的值，例如 '1pt', '0.5pt', '100pt'，并进行替换\n return cssValue.replace(/(\\d+(\\.\\d+)?)\\s*pt/g, (_, p1) => {\n // p1 是捕获到的数字部分 (如 '1' 或 '0.5')\n const ptValue = parseFloat(p1)\n // 1pt ≈ 1.333333px。为了简化和保证精度，使用 4/3\n const pxValue = ((ptValue * 4) / 3).toFixed(2)\n\n return `${pxValue}px`\n })\n}\n\nexport function parseStyleHtml(elem: DOMElement, node: Descendant, _editor: IDomEditor): Descendant {\n if (!['TABLE', 'TD', 'TH'].includes(elem.tagName)) { return node }\n\n const $elem = $(elem)\n\n const tableNode = node as TableCellElement\n let backgroundColor = getStyleValue($elem, 'background-color')\n\n if (!backgroundColor) { backgroundColor = getStyleValue($elem, 'background') } // word 背景色\n if (!backgroundColor) { backgroundColor = $elem.attr('bgcolor') || '' }\n if (!backgroundColor) { backgroundColor = $elem.attr('data-w-e-background-color') || '' }\n if (backgroundColor) {\n tableNode.backgroundColor = backgroundColor\n }\n\n let border = getStyleValue($elem, 'border')\n\n const dataBorderWidth = $elem.attr('data-w-e-border-width') || ''\n const dataBorderLine = $elem.attr('data-w-e-border-line') || ''\n const dataBorderColor = $elem.attr('data-w-e-border-color') || ''\n const borderAttr = $elem.attr('border') || ''\n const borderColorAttr = $elem.attr('bordercolor') || ''\n const classAttr = $elem.attr('class') || ''\n const classList = classAttr.trim().split(/\\s+/).filter(Boolean)\n let borderStyleFromClass = ''\n\n for (let i = 0; i < classList.length; i += 1) {\n const className = classList[i]\n\n if (!className.startsWith('w-e-table-border-style-')) { continue }\n borderStyleFromClass = className.replace('w-e-table-border-style-', '')\n break\n }\n\n const hasDataBorder = !!(dataBorderWidth || dataBorderLine || dataBorderColor || borderAttr || borderColorAttr || borderStyleFromClass)\n\n if (!border && elem.tagName === 'TD' && !hasDataBorder) {\n // https://github.com/wangeditor-next/wangEditor-next/blob/master/packages/table-module/src/assets/index.less#L20\n // TD存在默认的css样式，尝试用getComputedStyle获取不到，只能写死\n border = `1px solid ${DEFAULT_BORDER_COLOR}`\n }\n\n let [borderWidth, borderStyle, borderColor] = border?.split(' ') || []\n\n borderWidth = getStyleValue($elem, 'border-width') || borderWidth // border 宽度\n if (!borderWidth) { borderWidth = dataBorderWidth }\n if (!borderWidth) { borderWidth = borderAttr }\n if (borderWidth) {\n tableNode.borderWidth = convertPtToPx(borderWidth.trim())\n }\n borderStyle = getStyleValue($elem, 'border-style') || borderStyle // border 样式\n if (!borderStyle) { borderStyle = dataBorderLine }\n if (!borderStyle) { borderStyle = borderStyleFromClass }\n if (borderStyle) {\n tableNode.borderStyle = borderStyle === 'none' ? '' : borderStyle\n }\n borderColor = getStyleValue($elem, 'border-color') || borderColor // border 颜色\n if (!borderColor) { borderColor = borderColorAttr }\n if (!borderColor) { borderColor = dataBorderColor }\n if (borderColor) {\n tableNode.borderColor = borderColor\n }\n\n let textAlign = getStyleValue($elem, 'text-align')\n\n textAlign = getStyleValue($elem, 'text-align') || textAlign // 文本 对齐\n if (!textAlign) { textAlign = $elem.attr('align') || '' }\n if (!textAlign) { textAlign = $elem.attr('data-w-e-text-align') || '' }\n if (textAlign) {\n tableNode.textAlign = textAlign\n }\n return node\n}\n","/**\n * @description editor 插件，重写 editor API\n * @author wangfupeng\n */\n\nimport { DomEditor, IDomEditor } from '@wangeditor-next/core'\nimport {\n BaseText,\n Descendant,\n Editor,\n Element as SlateElement,\n Location,\n Node,\n NodeEntry,\n Path,\n Point,\n Text,\n Transforms,\n} from 'slate'\n\nimport { TableCursor } from './table-cursor'\nimport { EDITOR_TO_SELECTION } from './weak-maps'\nimport { withSelection } from './with-selection'\n\nconst CELL_BREAK = '\\n'\n\n// table cell 内部的删除处理\nfunction deleteHandler(newEditor: IDomEditor): boolean {\n const { selection } = newEditor\n\n if (selection == null) { return false }\n\n const [cellNodeEntry] = Editor.nodes(newEditor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n })\n\n if (cellNodeEntry) {\n const [, cellPath] = cellNodeEntry\n const start = Editor.start(newEditor, cellPath)\n\n if (Point.equals(selection.anchor, start)) {\n return true // 阻止删除 cell\n }\n }\n\n return false\n}\n\n/**\n * 删除 cell 内的换行，光标首尾在同一个位置的情况\n * @param newEditor\n * @returns 是否在内部处理了删除\n */\nfunction deleteCellBreak(newEditor: IDomEditor, unit: Parameters[0], direction: 'forward' | 'backward'): boolean {\n const { selection } = newEditor\n\n if (selection == null || unit === 'line') { return false }\n\n // 判断目标位置是否在同一个 cell 内，不在同一个 cell 内不处理\n const [cellNodeEntry] = Editor.nodes(newEditor, {\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n })\n\n // 根据删除的方向及当前的光标位置，获取到真实的删除位置\n let targetPoint: Point | undefined = selection.anchor\n\n if (direction === 'backward' && selection.anchor.offset === 0) {\n targetPoint = Editor.before(newEditor, selection)\n }\n\n if (direction === 'forward' && Editor.isEnd(newEditor, selection.anchor, selection.anchor.path)) {\n targetPoint = Editor.after(newEditor, selection)\n }\n\n if (targetPoint == null) { return false }\n const aboveCell = Editor.above(newEditor, {\n at: targetPoint,\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n })\n\n if (aboveCell == null || cellNodeEntry == null || !Path.equals(aboveCell[1], cellNodeEntry[1])) { return false }\n const targetNode = Editor.node(newEditor, targetPoint)\n\n if (!Text.isText(targetNode[0]) || targetNode[0].text.length < CELL_BREAK.length) { return false }\n\n // 处理光标在换行符首/尾的情况,|表示光标 |\\n \\n|\n const startOffset = direction === 'backward'\n ? targetPoint.offset - CELL_BREAK.length\n : targetPoint.offset\n const endOffset = direction === 'backward'\n ? targetPoint.offset\n : targetPoint.offset + CELL_BREAK.length\n\n if (startOffset < 0) { return false }\n\n const nodeText = Node.string(targetNode[0])\n const isBreak = nodeText.slice(startOffset, endOffset) === CELL_BREAK\n\n if (isBreak) {\n Transforms.insertText(newEditor, nodeText.slice(0, startOffset) + nodeText.slice(endOffset), {\n at: {\n anchor: Editor.start(newEditor, targetPoint.path),\n focus: Editor.end(newEditor, targetPoint.path),\n },\n })\n Transforms.select(newEditor, {\n anchor: { path: targetPoint.path, offset: startOffset },\n focus: { path: targetPoint.path, offset: startOffset },\n })\n return true\n }\n\n return false\n}\n\n/**\n * 判断该 location 有没有命中 table\n * @param editor editor\n * @param location location\n */\nfunction isTableLocation(editor: IDomEditor, location: Location): boolean {\n const tables = Editor.nodes(editor, {\n at: location,\n match: n => {\n const type = DomEditor.getNodeType(n)\n\n return type === 'table'\n },\n })\n\n const hasTable = !![...tables].find(() => true)\n\n return hasTable\n}\n\n/**\n * 检查当前选中的节点是否是受保护的节点类型（不应该被删除的节点）\n * @param editor editor\n * @returns 是否是受保护的节点\n */\nfunction isProtectedNode(editor: IDomEditor): boolean {\n // 检查是否是受保护的节点类型\n const protectedTypes = [\n 'paragraph',\n 'header1', 'header2', 'header3', 'header4', 'header5', 'header6',\n 'blockquote',\n 'list-item',\n 'todo',\n 'divider',\n ]\n\n for (const type of protectedTypes) {\n if (DomEditor.getSelectedNodeByType(editor, type)) {\n return true\n }\n }\n\n return false\n}\n\nfunction withTable(editor: T): T {\n const {\n insertBreak,\n deleteBackward,\n deleteForward,\n normalizeNode,\n insertData,\n handleTab,\n selectAll,\n deleteFragment,\n } = editor\n const newEditor = editor\n\n // 重写 insertBreak - cell 内换行，只换行文本，不拆分 node\n newEditor.insertBreak = () => {\n const selectedNode = DomEditor.getSelectedNodeByType(newEditor, 'table')\n\n if (selectedNode != null) {\n // 选中了 table ，则在 cell 内插入标准换行\n newEditor.insertText(CELL_BREAK)\n return\n }\n\n // 未选中 table ，默认的换行\n insertBreak()\n }\n\n // 重写 delete - cell 内删除，只删除文字，不删除 node\n newEditor.deleteBackward = unit => {\n const res = deleteHandler(newEditor)\n\n if (res) { return } // 命中 table cell ，自己处理删除\n\n if (deleteCellBreak(newEditor, unit, 'backward')) { return } // 命中了 cell 内删除换行符，自行处理删除\n\n // 防止从 table 后面的 p 删除时，删除最后一个 cell - issues/4221\n const { selection } = newEditor\n\n if (selection) {\n const before = Editor.before(newEditor, selection) // 前一个 location\n const tableCell = Editor.above(newEditor, {\n at: selection,\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n })\n\n if (before) {\n const isTableOnBeforeLocation = isTableLocation(newEditor, before) // before 是否是 table\n // 如果前面是 table, 当前是 paragraph ，则不执行删除。否则会删除 table 最后一个 cell\n // 兼容了 table 嵌套 p标签元素 selection数组五层的情况 - issues/342\n\n // 如果前面是 table, 当前是受保护的节点类型，则不执行删除\n if (!tableCell && isTableOnBeforeLocation && isProtectedNode(newEditor)) {\n return\n }\n }\n }\n\n // 执行默认的删除\n deleteBackward(unit)\n }\n\n // 重写 handleTab 在table内按tab时跳到下一个单元格\n newEditor.handleTab = () => {\n const selectedNode = DomEditor.getSelectedNodeByType(newEditor, 'table')\n\n if (selectedNode) {\n const above = Editor.above(editor) as NodeEntry\n\n // 常规情况下选中文字外层 table-cell 进行跳转\n if (DomEditor.checkNodeType(above[0], 'table-cell')) {\n Transforms.select(editor, above[1])\n }\n\n let next = Editor.next(editor)\n\n if (next) {\n if (next[0] && (next[0] as BaseText).text) {\n // 多个单元格同时选中按 tab 导致错位修复\n next = (Editor.above(editor, { at: next[1] }) as NodeEntry) ?? next\n }\n Transforms.select(editor, next[1])\n } else {\n const topLevelNodes = newEditor.children || []\n const topLevelNodesLength = topLevelNodes.length\n // 在最后一个单元格按tab时table末尾如果没有p则插入p后光标切到p上\n\n if (DomEditor.checkNodeType(topLevelNodes[topLevelNodesLength - 1], 'table')) {\n const p = DomEditor.genEmptyParagraph()\n\n Transforms.insertNodes(newEditor, p, { at: [topLevelNodesLength] })\n // 在表格末尾插入p后再次执行使光标切到p上\n newEditor.handleTab()\n }\n }\n return\n }\n\n handleTab()\n }\n\n newEditor.deleteForward = unit => {\n const res = deleteHandler(newEditor)\n\n if (res) { return }\n\n if (deleteCellBreak(newEditor, unit, 'forward')) { return }\n\n // 防止从 table 前面的 p 删除时，删除第一个 cell\n const { selection } = newEditor\n\n if (selection) {\n const after = Editor.after(newEditor, selection) // 后一个 location\n const tableCell = Editor.above(newEditor, {\n at: selection,\n match: n => DomEditor.checkNodeType(n, 'table-cell'),\n })\n\n if (after) {\n const isTableOnAfterLocation = isTableLocation(newEditor, after) // after 是否是 table\n // 如果后面是 table, 当前是 paragraph，则不执行删除\n\n // 如果后面是 table, 当前是受保护的节点类型，则不执行删除\n if (!tableCell && isTableOnAfterLocation && isProtectedNode(newEditor)) {\n return\n }\n }\n }\n\n // 执行默认的删除\n deleteForward(unit)\n }\n\n // 重新 normalize\n newEditor.normalizeNode = ([node, path]) => {\n const type = DomEditor.getNodeType(node)\n\n if (type !== 'table') {\n // 未命中 table ，执行默认的 normalizeNode\n return normalizeNode([node, path])\n }\n\n // -------------- table 是 editor 最后一个节点，需要后面插入 p --------------\n const isLast = DomEditor.isLastNode(newEditor, node)\n\n if (isLast) {\n const p = DomEditor.genEmptyParagraph()\n\n Transforms.insertNodes(newEditor, p, { at: [path[0] + 1] })\n }\n }\n\n // 重写 insertData - 粘贴文本\n newEditor.insertData = (data: DataTransfer) => {\n const tableNode = DomEditor.getSelectedNodeByType(newEditor, 'table')\n\n if (tableNode == null) {\n insertData(data) // 执行默认的 insertData\n return\n }\n\n // 获取文本，并插入到 cell\n const text = data.getData('text/plain')\n\n // 单图或图文 插入\n if (text === '\\n' || /]+>/.test(data.getData('text/html'))) {\n insertData(data)\n return\n }\n\n Editor.insertText(newEditor, text)\n }\n\n // 重写 table-cell 中的全选\n newEditor.selectAll = () => {\n const selection = newEditor.selection\n\n if (selection == null) {\n selectAll()\n return\n }\n\n const cell = DomEditor.getSelectedNodeByType(newEditor, 'table-cell')\n\n if (cell == null) {\n selectAll()\n return\n }\n\n const { anchor, focus } = selection\n\n if (!Path.equals(anchor.path.slice(0, 3), focus.path.slice(0, 3))) {\n // 选中了多个 cell ，忽略\n selectAll()\n return\n }\n\n const text = Node.string(cell)\n const textLength = text.length\n\n if (textLength === 0) {\n selectAll()\n return\n }\n\n const path = DomEditor.findPath(newEditor, cell)\n const start = Editor.start(newEditor, path)\n const end = Editor.end(newEditor, path)\n const newSelection = {\n anchor: start,\n focus: end,\n }\n\n newEditor.select(newSelection) // 选中 table-cell 内部的全部文字\n }\n\n // 重写 deleteFragment - 批量选中 table-cell 时只清空单元格内容，不破坏表格结构\n newEditor.deleteFragment = options => {\n const tableSelection = EDITOR_TO_SELECTION.get(newEditor)\n\n if (tableSelection && tableSelection.length > 0) {\n const selectedCellPaths: Path[] = []\n\n tableSelection.forEach(row => {\n row.forEach(cell => {\n const [, cellPath] = cell[0]\n\n if (!selectedCellPaths.some(path => Path.equals(path, cellPath))) {\n selectedCellPaths.push(cellPath)\n }\n })\n })\n\n const firstCellPath = selectedCellPaths[0]\n\n selectedCellPaths.forEach(cellPath => {\n // 在复杂操作后 path 可能失效，跳过即可\n if (!Node.has(newEditor, cellPath)) { return }\n\n const start = Editor.start(newEditor, cellPath)\n const end = Editor.end(newEditor, cellPath)\n\n // 每次只选中单个 cell 的内容，再走原生 deleteFragment\n // 避免跨 cell 删除触发 merge_node，导致表格结构错乱\n Transforms.select(newEditor, {\n anchor: start,\n focus: end,\n })\n deleteFragment(options)\n })\n\n TableCursor.unselect(newEditor)\n\n if (firstCellPath && Node.has(newEditor, firstCellPath)) {\n const start = Editor.start(newEditor, firstCellPath)\n\n Transforms.select(newEditor, start)\n }\n\n return\n }\n\n deleteFragment(options)\n }\n\n /**\n * 光标选区行为新增\n */\n withSelection(newEditor)\n\n /**\n * 添加获取表格批量选择的方法\n */\n newEditor.getTableSelection = () => {\n return EDITOR_TO_SELECTION.get(newEditor) || null\n }\n\n /**\n * 重写mark和node操作方法以支持表格批量选择\n */\n const { addMark: originalAddMark, removeMark: originalRemoveMark } = newEditor\n const originalTransforms = { ...Transforms }\n\n newEditor.addMark = (key: string, value: any) => {\n const tableSelection = EDITOR_TO_SELECTION.get(newEditor)\n\n if (tableSelection && tableSelection.length > 0) {\n // 表格批量选择：对每个选中的单元格应用mark\n // 保存当前选择状态\n const originalSelection = newEditor.selection\n\n tableSelection.forEach(row => {\n row.forEach(cell => {\n const [, cellPath] = cell[0]\n\n // 为每个单元格设置选择范围（选中整个单元格的内容）\n const start = Editor.start(newEditor, cellPath)\n const end = Editor.end(newEditor, cellPath)\n\n // 设置选择范围到当前单元格\n Transforms.select(newEditor, { anchor: start, focus: end })\n\n // 在当前单元格范围内应用原始的 addMark 方法\n originalAddMark(key, value)\n })\n })\n\n // 恢复原始选择状态\n if (originalSelection) {\n Transforms.select(newEditor, originalSelection)\n }\n } else {\n // 常规选择：使用原有逻辑\n originalAddMark(key, value)\n }\n }\n\n newEditor.removeMark = (key: string) => {\n const tableSelection = EDITOR_TO_SELECTION.get(newEditor)\n\n if (tableSelection && tableSelection.length > 0) {\n // 表格批量选择：对每个选中的单元格移除mark\n // 保存当前选择状态\n const originalSelection = newEditor.selection\n\n tableSelection.forEach(row => {\n row.forEach(cell => {\n const [, cellPath] = cell[0]\n\n // 为每个单元格设置选择范围（选中整个单元格的内容）\n const start = Editor.start(newEditor, cellPath)\n const end = Editor.end(newEditor, cellPath)\n\n // 设置选择范围到当前单元格\n Transforms.select(newEditor, { anchor: start, focus: end })\n\n // 在当前单元格范围内应用原始的 removeMark 方法\n originalRemoveMark(key)\n })\n })\n\n // 恢复原始选择状态\n if (originalSelection) {\n Transforms.select(newEditor, originalSelection)\n }\n } else {\n // 常规选择：使用原有逻辑\n originalRemoveMark(key)\n }\n }\n\n /**\n * 重写Transforms.setNodes以支持表格批量选择（如对齐功能）\n */\n Transforms.setNodes = (targetEditor, props, options = {}) => {\n // 只有当传入的editor是当前newEditor且有表格选择时才特殊处理\n if (targetEditor === newEditor) {\n const tableSelection = EDITOR_TO_SELECTION.get(newEditor)\n\n if (tableSelection && tableSelection.length > 0) {\n // 排除合并单元格操作\n if ('hidden' in props || 'rowSpan' in props || 'colSpan' in props) {\n originalTransforms.setNodes(targetEditor, props, options)\n return\n }\n // 表格批量选择：对所有选中的单元格应用属性\n tableSelection.forEach(row => {\n row.forEach(cell => {\n const [, cellPath] = cell[0]\n\n originalTransforms.setNodes(targetEditor, props, {\n ...options,\n at: cellPath,\n })\n })\n })\n return\n }\n }\n\n // 常规情况：使用原有逻辑\n originalTransforms.setNodes(targetEditor, props, options)\n }\n\n // 可继续修改其他 newEditor API ...\n\n // 返回 editor ，重要！\n return newEditor\n}\n\nexport default withTable\n","/**\n * @description pre parse html\n * @author wangfupeng\n */\n\nimport $, { DOMElement, getTagName } from '../utils/dom'\n\nfunction hasExplicitColgroupWidths($table: ReturnType): boolean {\n const colgroupElements = $table.find('colgroup')\n\n for (let i = 0; i < colgroupElements.length; i += 1) {\n const colgroup = colgroupElements[i] as HTMLTableColElement\n\n for (let j = 0; j < colgroup.children.length; j += 1) {\n const col = colgroup.children[j] as HTMLTableColElement\n const widthAttr = (col.getAttribute('width') || '').trim().toLowerCase()\n const styleWidth = (col.style.width || '').trim().toLowerCase()\n\n if (widthAttr && widthAttr !== 'auto') {\n return true\n }\n if (styleWidth && styleWidth !== 'auto') {\n return true\n }\n }\n }\n\n return false\n}\n\nfunction hasExplicitCellWidths($table: ReturnType): boolean {\n const $cells = $table.find('td, th')\n\n for (let i = 0; i < $cells.length; i += 1) {\n const cell = $cells[i] as HTMLTableCellElement\n const widthAttr = (cell.getAttribute('width') || '').trim().toLowerCase()\n const styleWidth = (cell.style.width || '').trim().toLowerCase()\n\n if (widthAttr && widthAttr !== 'auto') {\n return true\n }\n if (styleWidth && styleWidth !== 'auto') {\n return true\n }\n }\n\n return false\n}\n\nfunction isAutoWidthFixedLayoutTable($table: ReturnType): boolean {\n const widthAttr = ($table.attr('width') || '').trim().toLowerCase()\n const styleWidth = ($table[0] as HTMLTableElement).style.width.trim().toLowerCase()\n const tableLayout = ($table[0] as HTMLTableElement).style.tableLayout.trim().toLowerCase()\n\n const isClassModeTable =\n $table.hasClass('w-e-table-layout-fixed') || !!$table.attr('data-w-e-table-height')\n const isAutoWidth = widthAttr === 'auto' || styleWidth === 'auto'\n\n if (isClassModeTable) {\n return false\n }\n if (!isAutoWidth) {\n return false\n }\n if (tableLayout !== 'fixed') {\n return false\n }\n\n return true\n}\n\nfunction measureColumnWidthsFromLayout(tableElem: HTMLTableElement): number[] {\n if (typeof document === 'undefined' || !document.body) {\n return []\n }\n\n const sandbox = document.createElement('div')\n\n sandbox.style.position = 'fixed'\n sandbox.style.top = '-10000px'\n sandbox.style.left = '0'\n sandbox.style.visibility = 'hidden'\n sandbox.style.pointerEvents = 'none'\n\n const tableClone = tableElem.cloneNode(true) as HTMLTableElement\n\n sandbox.appendChild(tableClone)\n document.body.appendChild(sandbox)\n\n try {\n const firstRow = tableClone.querySelector('tr')\n\n if (!firstRow) {\n return []\n }\n\n const cells = Array.from(firstRow.children).filter(cell => {\n const tag = cell.tagName.toLowerCase()\n\n return tag === 'td' || tag === 'th'\n }) as HTMLTableCellElement[]\n\n if (cells.length === 0) {\n return []\n }\n\n const measuredWidths: number[] = []\n\n for (let i = 0; i < cells.length; i += 1) {\n const cell = cells[i]\n const span = parseInt(cell.getAttribute('colspan') || '1', 10)\n const safeSpan = Number.isFinite(span) && span > 0 ? span : 1\n const cellWidth = cell.getBoundingClientRect().width\n\n if (!Number.isFinite(cellWidth) || cellWidth <= 0) {\n return []\n }\n\n const widthPerColumn = Math.max(1, Math.round(cellWidth / safeSpan))\n\n for (let j = 0; j < safeSpan; j += 1) {\n measuredWidths.push(widthPerColumn)\n }\n }\n\n return measuredWidths\n } finally {\n sandbox.remove()\n }\n}\n\nfunction applyMeasuredColumnWidths(tableElem: HTMLTableElement, columnWidths: number[]) {\n if (columnWidths.length === 0) {\n return\n }\n\n const existingColgroup = tableElem.querySelector('colgroup')\n\n if (existingColgroup) {\n existingColgroup.remove()\n }\n\n const colgroupElem = document.createElement('colgroup')\n\n colgroupElem.setAttribute('contentEditable', 'false')\n columnWidths.forEach(width => {\n const colElem = document.createElement('col')\n\n colElem.setAttribute('width', `${width}`)\n colgroupElem.appendChild(colElem)\n })\n\n const firstRow = tableElem.querySelector('tr')\n\n if (firstRow) {\n tableElem.insertBefore(colgroupElem, firstRow)\n } else {\n tableElem.appendChild(colgroupElem)\n }\n}\n\nfunction tryApplyAutoFittedColumnWidths($table: ReturnType) {\n if (!isAutoWidthFixedLayoutTable($table)) {\n return\n }\n if (hasExplicitColgroupWidths($table)) {\n return\n }\n if (hasExplicitCellWidths($table)) {\n return\n }\n\n const columnWidths = measureColumnWidthsFromLayout($table[0] as HTMLTableElement)\n\n if (columnWidths.length === 0) {\n return\n }\n\n applyMeasuredColumnWidths($table[0] as HTMLTableElement, columnWidths)\n}\n\nfunction normalizeCellParagraphs(cellHtml: string): string {\n const container = document.createElement('div')\n\n container.innerHTML = cellHtml\n\n const normalizedNodes: Node[] = []\n let hasMeaningfulContent = false\n\n Array.from(container.childNodes).forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n if ((node.textContent || '').trim()) {\n normalizedNodes.push(node.cloneNode(true))\n hasMeaningfulContent = true\n }\n return\n }\n\n if (!(node instanceof HTMLElement) || node.tagName.toLowerCase() !== 'p') {\n normalizedNodes.push(node.cloneNode(true))\n hasMeaningfulContent = true\n return\n }\n\n const paragraphHtml = node.innerHTML\n const trimmedHtml = paragraphHtml.trim()\n\n if (!trimmedHtml || trimmedHtml === ' ') {\n return\n }\n\n if (hasMeaningfulContent) {\n normalizedNodes.push(document.createElement('br'))\n }\n\n const paragraphContainer = document.createElement('div')\n\n paragraphContainer.innerHTML = paragraphHtml\n\n Array.from(paragraphContainer.childNodes).forEach(childNode => {\n normalizedNodes.push(childNode.cloneNode(true))\n })\n hasMeaningfulContent = true\n })\n\n container.replaceChildren(...normalizedNodes)\n\n return container.innerHTML\n}\n\n/**\n * pre-prase table ，去掉 和处理单元格中的

    标签\n * @param table table elem\n */\nfunction preParse(tableElem: DOMElement): DOMElement {\n const $table = $(tableElem)\n const tagName = getTagName($table)\n\n if (tagName !== 'table') {\n return tableElem\n }\n\n // 没有 则直接返回\n const $tbody = $table.find('tbody')\n\n if ($tbody.length === 0) {\n return tableElem\n }\n\n // 去掉 ，把 移动到 下面\n const $tr = $table.find('tr')\n\n $table.append($tr)\n $tbody.remove()\n\n const $cells = $table.find('td, th')\n\n for (let i = 0; i < $cells.length; i += 1) {\n const cell = $cells[i]\n const $cell = $(cell)\n\n // 设置 width 属性为 auto\n $cell.attr('width', 'auto')\n\n // 直接处理单元格中的所有

    标签\n let cellHtml = $cell.html() || ''\n\n // 先清理Word特殊标签\n cellHtml = cellHtml.replace(/]*>[\\s\\S]*?<\\/o:p>/gi, '') // 删除 标签\n cellHtml = cellHtml.replace(/<\\/o:p>/gi, '') // 删除可能的自闭合标签\n\n cellHtml = normalizeCellParagraphs(cellHtml)\n\n $cell.html(cellHtml)\n }\n\n tryApplyAutoFittedColumnWidths($table)\n\n return $table[0]\n}\n\nexport const preParseTableHtmlConf = {\n selector: 'table',\n preParseHtml: preParse,\n}\n","import { DomEditor, IDomEditor, isHTMLElememt } from '@wangeditor-next/core'\nimport throttle from 'lodash.throttle'\nimport {\n Editor,\n Element as SlateElement,\n Path,\n Transforms,\n} from 'slate'\n\nimport $ from '../utils/dom'\nimport { TableElement } from './custom-types'\n\n/** *\n * 计算 cell border 距离 table 左侧距离\n */\nfunction getCumulativeWidths(columnWidths: number[]) {\n const cumulativeWidths: number[] = []\n let totalWidth = 0\n\n for (const width of columnWidths) {\n totalWidth += width\n cumulativeWidths.push(totalWidth)\n }\n\n return cumulativeWidths\n}\n\n/** *\n * 用于计算拖动 cell 时，cell 宽度变化的比例\n */\nexport function getColumnWidthRatios(columnWidths: number[]) {\n const columnWidthsRatio: number[] = []\n const totalWidth = columnWidths.reduce((a, b) => a + b, 0)\n\n for (const width of columnWidths) {\n columnWidthsRatio.push(width / totalWidth)\n }\n\n return columnWidthsRatio\n}\n\n/**\n * 监听 table 内部变化，如新增行、列，删除行列等操作，引起的高度变化。\n * ResizeObserver 需要即时释放，以免引起内存泄露\n */\nlet resizeObserver: ResizeObserver | null = null\n\nfunction getTableRowHeights(table: Element): number[] {\n const tableRows = Array.from(table.querySelectorAll('tr'))\n\n return tableRows.map(row => {\n const rowRect = row.getBoundingClientRect()\n\n return Math.max(1, Math.round(rowRect.height * 100) / 100)\n })\n}\n\nexport function observerTableResize(editor: IDomEditor, elm: Node | undefined) {\n if (isHTMLElememt(elm)) {\n const table = elm.querySelector('table')\n\n if (table) {\n resizeObserver = new ResizeObserver(([{ contentRect }]) => {\n const rowHeights = getTableRowHeights(table)\n\n // 当非拖动引起的宽度变化，需要调整 columnWidths\n Transforms.setNodes(\n editor,\n {\n scrollWidth: contentRect.width,\n height: contentRect.height,\n rowHeights,\n } as TableElement,\n { mode: 'highest' },\n )\n })\n resizeObserver.observe(table)\n }\n }\n}\n\nexport function unObserveTableResize() {\n if (resizeObserver) {\n resizeObserver?.disconnect()\n resizeObserver = null\n }\n}\n\n// 是否为光标选区行为\nlet isSelectionOperation = false\n// 拖拽列宽相关信息\nlet isMouseDownForResize = false\nlet clientXWhenMouseDown = 0\nlet editorWhenMouseDown: IDomEditor | null = null\nlet tablePathWhenMouseDown: Path | null = null\nconst $window = $(window)\n\nfunction onMouseDown(event: Event) {\n const elem = event.target as HTMLElement\n // 判断是否为光标选区行为，对列宽变更行为进行过滤\n // console.log('onMouseDown', elem)\n\n if (elem.closest('[data-block-type=\"table-cell\"]')) {\n isSelectionOperation = true\n } else if (elem.tagName === 'DIV' && elem.closest('.column-resizer-item')) {\n if (editorWhenMouseDown === null || tablePathWhenMouseDown === null) { return }\n\n // 记录必要信息\n isMouseDownForResize = true\n const { clientX } = event as MouseEvent\n\n clientXWhenMouseDown = clientX\n document.body.style.cursor = 'col-resize'\n event.preventDefault()\n }\n\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n $window.on('mousemove', onMouseMove)\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n $window.on('mouseup', onMouseUp)\n}\n\n$window.on('mousedown', onMouseDown)\n\n/**\n * 计算相邻列宽度调整（用于中间列拖动）\n * 修改为：拖拽时当前列宽度增加，其他列宽度不变，整体表格宽度增加\n */\nfunction calculateAdjacentWidths(columnWidths: number[], resizingIndex: number, widthChange: number, editor: IDomEditor): number[] {\n const newWidths = [...columnWidths]\n\n // 获取最小宽度配置\n const { minWidth = 60 } = editor.getMenuConfig('insertTable')\n const minColumnWidth = parseInt(minWidth.toString(), 10) || 60\n\n // 直接增加当前列的宽度，其他列保持不变\n const currentWidth = newWidths[resizingIndex]\n const newWidth = Math.max(minColumnWidth, currentWidth + widthChange) // 确保不小于最小宽度\n\n newWidths[resizingIndex] = Math.floor(newWidth * 100) / 100\n\n return newWidths\n}\n\n/**\n * 根据鼠标位置计算列宽度\n * 修改为：拖拽时当前列宽度增加，其他列宽度不变，整体表格宽度增加\n * @param columnWidths 当前列宽度数组\n * @param resizingIndex 正在调整的边界索引\n * @param mousePositionInTable 鼠标相对于表格左边的位置\n * @param cumulativeWidths 列宽度的累积和数组\n * @param editor 编辑器实例\n * @returns 调整后的列宽度数组\n */\nfunction calculateAdjacentWidthsByBorderPosition(\n columnWidths: number[],\n resizingIndex: number,\n mousePositionInTable: number,\n cumulativeWidths: number[],\n editor: IDomEditor,\n): number[] {\n const newWidths = [...columnWidths]\n\n // 检查边界范围\n if (resizingIndex < 0 || resizingIndex >= columnWidths.length) {\n return newWidths\n }\n\n // 获取最小宽度配置\n const { minWidth = 60 } = editor.getMenuConfig('insertTable')\n const minColumnWidth = parseInt(minWidth.toString(), 10) || 60\n\n // 计算当前边界的左边界位置（前面所有列的宽度总和）\n const leftBoundary = resizingIndex === 0 ? 0 : cumulativeWidths[resizingIndex - 1]\n\n // 计算鼠标位置相对于当前列左边界的偏移\n const mouseOffset = mousePositionInTable - leftBoundary\n\n // 确保不小于最小宽度\n const newWidth = Math.max(minColumnWidth, mouseOffset)\n\n // 直接设置当前列的宽度，其他列保持不变\n newWidths[resizingIndex] = Math.floor(newWidth * 100) / 100\n\n return newWidths\n}\n\nconst onMouseMove = throttle((event: Event) => {\n if (!isMouseDownForResize) { return }\n if (editorWhenMouseDown === null) { return }\n if (tablePathWhenMouseDown === null) { return }\n event.preventDefault()\n\n const { clientX } = event as MouseEvent\n const widthChange = clientX - clientXWhenMouseDown // 计算宽度变化\n\n let tableNode: TableElement | null = null\n let tablePath: Path | null = null\n\n try {\n const [node, path] = Editor.node(editorWhenMouseDown, tablePathWhenMouseDown)\n\n if (Editor.isEditor(node) || !SlateElement.isElement(node) || node.type !== 'table') {\n return\n }\n\n tableNode = node as TableElement\n tablePath = path\n } catch {\n return\n }\n\n if (tableNode === null || tablePath === null) { return }\n\n const {\n width: tableWidth = 'auto',\n columnWidths = [],\n resizingIndex = -1,\n scrollWidth = 0,\n } = tableNode\n\n if (columnWidths.length === 0 || resizingIndex < 0 || resizingIndex >= columnWidths.length) {\n return\n }\n\n let adjustColumnWidths: number[]\n let baseColumnWidths = columnWidths\n let tableDom: HTMLElement | null = null\n\n try {\n tableDom = DomEditor.toDOMNode(editorWhenMouseDown, tableNode)\n } catch {\n tableDom = null\n }\n\n if (tableWidth === '100%' && scrollWidth > 0) {\n const totalColumnWidth = columnWidths.reduce((sum, width) => sum + width, 0)\n\n if (totalColumnWidth > 0) {\n baseColumnWidths = getColumnWidthRatios(columnWidths).map(ratio => ratio * scrollWidth)\n }\n }\n\n // 所有列都采用相同的拖拽逻辑：当前列宽度增加，其他列不变\n const tableElement = tableDom?.querySelector('.table')\n\n if (tableElement) {\n const tableRect = tableElement.getBoundingClientRect()\n const mousePositionInTable = clientX - tableRect.left // 鼠标相对于表格左边的位置\n\n // 计算边界的新位置\n const cumulativeWidths = getCumulativeWidths(baseColumnWidths)\n const newBorderPosition = mousePositionInTable\n\n // 根据新的边界位置计算列宽度\n adjustColumnWidths = calculateAdjacentWidthsByBorderPosition(\n baseColumnWidths,\n resizingIndex,\n newBorderPosition,\n cumulativeWidths,\n editorWhenMouseDown,\n )\n } else {\n // 如果找不到表格元素，则使用简单的宽度变化逻辑\n adjustColumnWidths = calculateAdjacentWidths(baseColumnWidths, resizingIndex, widthChange, editorWhenMouseDown)\n }\n\n const nextTableProps: Partial = {\n columnWidths: adjustColumnWidths,\n }\n\n // 用户在自适应表格中手动拖拽列宽时，切回显式列宽模式，保证拖拽边界与鼠标位置一致。\n if (tableWidth === '100%') {\n nextTableProps.width = 'auto'\n }\n\n // 应用新的列宽度\n Transforms.setNodes(editorWhenMouseDown, nextTableProps as TableElement, {\n at: tablePath,\n })\n}, 100)\n\nfunction onMouseUp(_event: Event) {\n // Flush any throttled trailing mousemove before clearing drag state.\n // Fast drags can queue the last movement; without flush the final width change is lost.\n if (isMouseDownForResize) {\n onMouseMove.flush()\n }\n onMouseMove.cancel()\n\n isSelectionOperation = false\n isMouseDownForResize = false\n editorWhenMouseDown = null\n tablePathWhenMouseDown = null\n document.body.style.cursor = ''\n\n // 解绑事件\n $window.off('mousemove', onMouseMove)\n $window.off('mouseup', onMouseUp)\n}\n/**\n * 鼠标移动时，判断在哪个 Cell border 上\n * Class 先 visible 后 highlight @跟随飞书\n * 避免光标选区功能收到干扰\n */\nexport function handleCellBorderVisible(\n editor: IDomEditor,\n elemNode: SlateElement,\n e: MouseEvent,\n scrollWidth: number,\n) {\n if (editor.isDisabled()) { return }\n if (isSelectionOperation || isMouseDownForResize) { return }\n\n const {\n width: tableWidth = 'auto',\n columnWidths = [],\n isHoverCellBorder,\n resizingIndex,\n } = elemNode as TableElement\n\n // Cell Border 宽度为 10px\n const { clientX, target } = e\n // 当单元格合并的时候，鼠标在 cell 中间，则不显示 cell border\n\n if (isHTMLElememt(target)) {\n const rect = target.getBoundingClientRect()\n\n if (clientX > rect.x + 5 && clientX < rect.x + rect.width - 5) {\n if (isHoverCellBorder) {\n Transforms.setNodes(\n editor,\n { isHoverCellBorder: false, resizingIndex: -1 } as TableElement,\n { mode: 'highest' },\n )\n }\n return\n }\n }\n if (isHTMLElememt(target)) {\n const parent = target.closest('.table')\n\n if (parent) {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { clientX } = e\n const rect = parent.getBoundingClientRect()\n const widths = tableWidth === '100%'\n ? getColumnWidthRatios(columnWidths).map(v => v * scrollWidth)\n : columnWidths\n\n const cumulativeWidths = getCumulativeWidths(widths)\n\n // 鼠标移动时，计算当前鼠标位置，判断在哪个 Cell border 上\n for (let i = 0; i < cumulativeWidths.length; i += 1) {\n if (\n clientX - rect.x >= cumulativeWidths[i] - 5\n && clientX - rect.x < cumulativeWidths[i] + 5\n ) {\n // 节流，防止多次引起Transforms.setNodes重绘\n if (resizingIndex === i) { return }\n Transforms.setNodes(\n editor,\n { isHoverCellBorder: true, resizingIndex: i } as TableElement,\n { mode: 'highest' },\n )\n return\n }\n }\n }\n }\n\n // 鼠标移出时，重置\n if (isHoverCellBorder === true) {\n Transforms.setNodes(editor, { isHoverCellBorder: false, resizingIndex: -1 } as TableElement, {\n mode: 'highest',\n })\n }\n}\n\n/**\n * 设置 class highlight\n * 将 render-cell.tsx 拖动功能迁移至 div.column-resize\n */\nexport function handleCellBorderHighlight(editor: IDomEditor, e: MouseEvent) {\n if (e.type === 'mouseenter') {\n Transforms.setNodes(editor, { isResizing: true } as TableElement, { mode: 'highest' })\n } else {\n Transforms.setNodes(editor, { isResizing: false } as TableElement, { mode: 'highest' })\n }\n}\n\nexport function handleCellBorderMouseDown(editor: IDomEditor, elemNode: SlateElement) {\n if (isMouseDownForResize) { return } // 此时正在修改列宽\n editorWhenMouseDown = editor\n\n try {\n tablePathWhenMouseDown = DomEditor.findPath(editor, elemNode)\n } catch {\n tablePathWhenMouseDown = null\n }\n}\n","import { DomEditor, IDomEditor, isHTMLElememt } from '@wangeditor-next/core'\nimport throttle from 'lodash.throttle'\nimport { Editor, Element as SlateElement, Transforms } from 'slate'\n\nimport { isOfType } from '../utils'\nimport $ from '../utils/dom'\nimport { TableElement, TableRowElement } from './custom-types'\n\n/**\n * 计算行高度的比例\n */\nexport function getRowHeightRatios(rowHeights: number[]) {\n const rowHeightRatios: number[] = []\n const totalHeight = rowHeights.reduce((a, b) => a + b, 0)\n\n for (const height of rowHeights) {\n rowHeightRatios.push(height / totalHeight)\n }\n\n return rowHeightRatios\n}\n\n/**\n * 计算累积行高度\n */\nfunction getCumulativeHeights(rowHeights: number[]) {\n const cumulativeHeights: number[] = []\n let totalHeight = 0\n\n for (const height of rowHeights) {\n totalHeight += height\n cumulativeHeights.push(totalHeight)\n }\n\n return cumulativeHeights\n}\n\nfunction getRowHeightsForResize(tableNode: TableElement): number[] {\n const { children: tableRows, rowHeights = [] } = tableNode\n\n const hasValidSnapshot = (\n rowHeights.length === tableRows.length\n && rowHeights.every(height => Number.isFinite(height) && height > 0)\n )\n\n if (hasValidSnapshot) {\n return rowHeights\n }\n\n return tableRows.map(row => (row as TableRowElement).height || 30)\n}\n\n// 行拖拽相关状态\nlet isMouseDownForRowResize = false\nlet clientYWhenMouseDown = 0\nlet editorWhenMouseDownForRow: IDomEditor | null = null\nconst $window = $(window)\n\n/**\n * 计算行高度调整\n */\nfunction calculateRowHeights(rowHeights: number[], resizingRowIndex: number, heightChange: number, editor: IDomEditor): number[] {\n const newHeights = [...rowHeights]\n\n // 获取最小高度配置\n const { minRowHeight = 30 } = editor.getMenuConfig('insertTable') || {}\n const minHeight = parseInt(minRowHeight.toString(), 10) || 30\n\n // 直接增加当前行的高度，其他行保持不变\n const currentHeight = newHeights[resizingRowIndex]\n const newHeight = Math.max(minHeight, currentHeight + heightChange)\n\n newHeights[resizingRowIndex] = Math.floor(newHeight * 100) / 100\n\n return newHeights\n}\n\n/**\n * 根据鼠标位置计算行高度\n */\nfunction calculateRowHeightsByBorderPosition(\n rowHeights: number[],\n resizingRowIndex: number,\n mousePositionInTable: number,\n cumulativeHeights: number[],\n editor: IDomEditor,\n): number[] {\n const newHeights = [...rowHeights]\n\n // 检查边界范围\n if (resizingRowIndex < 0 || resizingRowIndex >= rowHeights.length) {\n return newHeights\n }\n\n // 获取最小高度配置\n const { minRowHeight = 30 } = editor.getMenuConfig('insertTable') || {}\n const minHeight = parseInt(minRowHeight.toString(), 10) || 30\n\n // 计算当前边界的上边界位置\n const topBoundary = resizingRowIndex === 0 ? 0 : cumulativeHeights[resizingRowIndex - 1]\n\n // 计算鼠标位置相对于当前行上边界的偏移\n const mouseOffset = mousePositionInTable - topBoundary\n\n // 确保不小于最小高度\n const newHeight = Math.max(minHeight, mouseOffset)\n\n // 直接设置当前行的高度，其他行保持不变\n newHeights[resizingRowIndex] = Math.floor(newHeight * 100) / 100\n\n return newHeights\n}\n\nfunction onMouseMoveForRowHandler(event: Event) {\n if (!isMouseDownForRowResize) { return }\n if (editorWhenMouseDownForRow === null) { return }\n event.preventDefault()\n\n const { clientY } = event as MouseEvent\n const heightChange = clientY - clientYWhenMouseDown\n\n const [[elemNode]] = Editor.nodes(editorWhenMouseDownForRow, {\n match: isOfType(editorWhenMouseDownForRow, 'table'),\n })\n const tableNode = elemNode as TableElement\n const { resizingRowIndex = -1 } = tableNode\n\n // 优先使用 ResizeObserver 采集到的真实 DOM 行高\n const rowHeights = getRowHeightsForResize(tableNode)\n\n let adjustRowHeights: number[]\n const selectedTableNode = DomEditor.getSelectedNodeByType(editorWhenMouseDownForRow, 'table') as TableElement\n const tableDom = DomEditor.toDOMNode(editorWhenMouseDownForRow, selectedTableNode)\n\n const tableElement = tableDom.querySelector('.table')\n\n if (tableElement) {\n const tableRect = tableElement.getBoundingClientRect()\n const mousePositionInTable = clientY - tableRect.top\n\n // 计算边界的新位置\n const cumulativeHeights = getCumulativeHeights(rowHeights)\n const newBorderPosition = mousePositionInTable\n\n // 根据新的边界位置计算行高度\n adjustRowHeights = calculateRowHeightsByBorderPosition(rowHeights, resizingRowIndex, newBorderPosition, cumulativeHeights, editorWhenMouseDownForRow)\n } else {\n // 如果找不到表格元素，则使用简单的高度变化逻辑\n adjustRowHeights = calculateRowHeights(rowHeights, resizingRowIndex, heightChange, editorWhenMouseDownForRow)\n }\n\n // 直接更新对应行元素的高度\n const currentTableNode = DomEditor.getSelectedNodeByType(editorWhenMouseDownForRow, 'table') as TableElement\n\n if (currentTableNode && resizingRowIndex >= 0 && resizingRowIndex < adjustRowHeights.length) {\n const tablePath = DomEditor.findPath(editorWhenMouseDownForRow, currentTableNode)\n const rowPath = [...tablePath, resizingRowIndex]\n\n try {\n Transforms.setNodes(\n editorWhenMouseDownForRow,\n { height: adjustRowHeights[resizingRowIndex] } as TableRowElement,\n { at: rowPath },\n )\n } catch (error) {\n // 如果路径不存在，忽略错误\n console.warn('更新行高度失败:', error)\n }\n }\n}\n\nconst onMouseMoveForRowThrottled = throttle(onMouseMoveForRowHandler, 100)\n\nfunction onMouseUpForRow(_event: Event) {\n isMouseDownForRowResize = false\n editorWhenMouseDownForRow = null\n document.body.style.cursor = ''\n\n // 解绑事件\n $window.off('mousemove', onMouseMoveForRowThrottled)\n $window.off('mouseup', onMouseUpForRow)\n}\n\n/**\n * 鼠标移动时，判断在哪个行边界上\n */\nexport function handleRowBorderVisible(\n editor: IDomEditor,\n elemNode: SlateElement,\n e: MouseEvent,\n) {\n if (editor.isDisabled()) { return }\n if (isMouseDownForRowResize) { return }\n\n const tableNode = elemNode as TableElement\n const { isHoverRowBorder, resizingRowIndex } = tableNode\n\n const { target } = e\n\n if (isHTMLElememt(target)) {\n const parent = target.closest('.table')\n\n if (parent) {\n const { clientY: mouseY } = e\n const rect = parent.getBoundingClientRect()\n\n // 优先使用 ResizeObserver 采集到的真实 DOM 行高\n const actualRowHeights = getRowHeightsForResize(tableNode)\n const cumulativeHeights = getCumulativeHeights(actualRowHeights)\n\n // 鼠标移动时，计算当前鼠标位置，判断在哪个行边界上\n for (let i = 0; i < cumulativeHeights.length; i += 1) {\n if (\n mouseY - rect.y >= cumulativeHeights[i] - 5\n && mouseY - rect.y < cumulativeHeights[i] + 5\n ) {\n // 节流，防止多次引起Transforms.setNodes重绘\n if (resizingRowIndex === i) { return }\n Transforms.setNodes(\n editor,\n { isHoverRowBorder: true, resizingRowIndex: i } as TableElement,\n { mode: 'highest' },\n )\n return\n }\n }\n }\n }\n\n // 鼠标移出时，重置\n if (isHoverRowBorder === true) {\n Transforms.setNodes(editor, { isHoverRowBorder: false, resizingRowIndex: -1 } as TableElement, {\n mode: 'highest',\n })\n }\n}\n\n/**\n * 设置行拖拽高亮\n */\nexport function handleRowBorderHighlight(editor: IDomEditor, e: MouseEvent) {\n if (e.type === 'mouseenter') {\n Transforms.setNodes(editor, { isResizingRow: true } as TableElement, { mode: 'highest' })\n } else {\n Transforms.setNodes(editor, { isResizingRow: false } as TableElement, { mode: 'highest' })\n }\n}\n\nexport function handleRowBorderMouseDown(editor: IDomEditor, _elemNode: SlateElement) {\n if (isMouseDownForRowResize) { return }\n editorWhenMouseDownForRow = editor\n}\n\nfunction onMouseDownForRow(event: Event) {\n const elem = event.target as HTMLElement\n\n if (elem.tagName === 'DIV' && elem.closest('.row-resizer-item')) {\n if (editorWhenMouseDownForRow === null) { return }\n\n // 记录必要信息\n isMouseDownForRowResize = true\n const { clientY } = event as MouseEvent\n\n clientYWhenMouseDown = clientY\n document.body.style.cursor = 'row-resize'\n event.preventDefault()\n }\n\n $window.on('mousemove', onMouseMoveForRowThrottled)\n $window.on('mouseup', onMouseUpForRow)\n}\n\n$window.on('mousedown', onMouseDownForRow)\n","/**\n * @description render elem\n * @author wangfupeng\n */\n\nimport renderTableCell from './render-cell'\nimport renderTableRow from './render-row'\nimport renderTable from './render-table'\n\nexport const renderTableConf = {\n type: 'table',\n renderElem: renderTable,\n}\n\nexport const renderTableRowConf = {\n type: 'table-row',\n renderElem: renderTableRow,\n}\n\nexport const renderTableCellConf = {\n type: 'table-cell',\n renderElem: renderTableCell,\n}\n","/**\n * @description render table\n * @author wangfupeng\n */\n\nimport { DomEditor, IDomEditor } from '@wangeditor-next/core'\nimport debounce from 'lodash.debounce'\nimport {\n Editor,\n Element as SlateElement,\n Path, Point, Range,\n} from 'slate'\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { h, jsx, VNode } from 'snabbdom'\n\nimport {\n getColumnWidthRatios,\n handleCellBorderHighlight,\n handleCellBorderMouseDown,\n handleCellBorderVisible,\n observerTableResize,\n unObserveTableResize,\n} from '../column-resize'\nimport { TableElement, TableRowElement } from '../custom-types'\nimport {\n handleRowBorderHighlight,\n handleRowBorderMouseDown,\n handleRowBorderVisible,\n} from '../row-resize'\nimport { TableCursor } from '../table-cursor'\n\n/**\n * 计算 table 是否可编辑。如果选区跨域 table 和外部内容，删除，会导致 table 结构打乱。所以，有时要让 table 不可编辑\n * @param editor editor\n * @param tableElem table elem\n */\nfunction getContentEditable(editor: IDomEditor, tableElem: SlateElement): boolean {\n if (editor.isDisabled()) { return false }\n\n const { selection } = editor\n\n if (selection == null) { return true }\n if (Range.isCollapsed(selection)) { return true }\n\n const { anchor, focus } = selection\n const tablePath = DomEditor.findPath(editor, tableElem)\n\n const tableStart = Editor.start(editor, tablePath)\n const tableEnd = Editor.end(editor, tablePath)\n const isAnchorInTable = Point.compare(anchor, tableEnd) <= 0 && Point.compare(anchor, tableStart) >= 0\n const isFocusInTable = Point.compare(focus, tableEnd) <= 0 && Point.compare(focus, tableStart) >= 0\n\n // 选区在 table 内部，且选中了同一个单元格。表格可以编辑\n if (isAnchorInTable && isFocusInTable) {\n if (Path.equals(anchor.path.slice(0, 3), focus.path.slice(0, 3))) {\n return true\n }\n }\n\n return false\n}\n\nfunction renderTable(elemNode: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode {\n // 是否可编辑\n const editable = getContentEditable(editor, elemNode)\n\n // 宽度和高度\n const {\n width: tableWidth = 'auto',\n caption,\n height,\n columnWidths = [],\n rowHeights = [],\n scrollWidth = 0,\n isHoverCellBorder,\n resizingIndex,\n isResizing,\n isHoverRowBorder,\n resizingRowIndex,\n isResizingRow,\n } = elemNode as TableElement\n\n // 光标是否选中\n const selected = DomEditor.isNodeSelected(editor, elemNode)\n // 光标是否有选区\n const [isSelecting] = TableCursor.selection(editor)\n // 列宽之间比值\n const columnWidthRatios = getColumnWidthRatios(columnWidths)\n\n const vnode = (\n {\n // @ts-ignore 阻止光标定位到 table 后面\n if (e.target.tagName === 'DIV') { e.preventDefault() }\n\n if (editor.isDisabled()) { return }\n\n // @ts-ignore 如果用户行为是获取焦点输入文本时，需释放选区\n if (e.target.closest('[data-block-type=\"table-cell\"]')) {\n TableCursor.unselect(editor)\n }\n\n // 是否需要定位到 table 内部\n const tablePath = DomEditor.findPath(editor, elemNode)\n const tableStart = Editor.start(editor, tablePath)\n const { selection } = editor\n\n if (selection == null) {\n editor.select(tableStart) // 选中 table 内部\n return\n }\n const { path } = selection.anchor\n\n if (path[0] === tablePath[0]) { return } // 当前选区，就在 table 内部\n // @ts-ignore\n if (e.target.tagName === 'DIV') {\n editor.select(tableStart)\n } // 选中 table 内部\n },\n }}\n >\n a + b, 0)}px`,\n }}\n on={{\n mousemove: debounce(\n (e: MouseEvent) => {\n if (!TableCursor.hasSelected(editor)) {\n handleCellBorderVisible(editor, elemNode, e, scrollWidth)\n handleRowBorderVisible(editor, elemNode, e)\n }\n },\n 25,\n ),\n }}\n >\n {\n caption ? (\n

    \n ) : null\n }\n \n {\n /**\n * 剔除 firstRowCells，因单元格合并 表头 th，会计算错误。\n * 使用 columnWidth 数组长度代表列数\n * 拖动行为及变量设置均参考 飞书\n */\n columnWidths.map(width => {\n return \n })\n }\n \n {children}\n
    {caption}
    \n\n

    \n {columnWidths.map((width, index) => {\n let minWidth = width\n /**\n * table width 为 100% 模式时\n * columnWidths 表示的是比例\n * 1. 需要计算出真实的宽度\n */\n\n if (tableWidth === '100%') {\n minWidth = columnWidthRatios[index] * scrollWidth\n }\n\n return (\n
    \n handleCellBorderHighlight(editor, e),\n mouseleave: (e: MouseEvent) => handleCellBorderHighlight(editor, e),\n mousedown: (_e: MouseEvent) => handleCellBorderMouseDown(editor, elemNode),\n }}\n >\n
    \n
    \n
    \n )\n })}\n \n\n
    \n {(elemNode as TableElement).children.map((rowNode, index) => {\n const totalTableWidth = columnWidths.reduce((a, b) => a + b, 0)\n const rowHeightFromObserver = rowHeights[index]\n const rowHeight = Number.isFinite(rowHeightFromObserver) && rowHeightFromObserver > 0\n ? rowHeightFromObserver\n : (rowNode as TableRowElement).height || 30\n\n return (\n
    \n handleRowBorderHighlight(editor, e),\n mouseleave: (e: MouseEvent) => handleRowBorderHighlight(editor, e),\n mousedown: (_e: MouseEvent) => handleRowBorderMouseDown(editor, elemNode),\n }}\n >\n
    \n
    \n
    \n )\n })}\n \n \n )\n\n /**\n * 移出直接返回 vnode\n * 添加 ObserverResize 监听行为\n * 监听 table 内部变化，更新 table resize-bar 高度\n */\n const containerVnode = h(\n 'div',\n {\n hook: {\n insert: ({ elm }: VNode) => observerTableResize(editor, elm),\n destroy: () => {\n unObserveTableResize()\n },\n },\n },\n vnode,\n )\n\n return containerVnode\n}\n\nexport default renderTable\n","/**\n * @description render row\n * @author wangfupeng\n */\n\nimport { IDomEditor } from '@wangeditor-next/core'\nimport { Element as SlateElement } from 'slate'\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { jsx, VNode } from 'snabbdom'\n\nimport { TableRowElement } from '../custom-types'\n\nfunction renderTableRow(\n elemNode: SlateElement,\n children: VNode[] | null,\n _editor: IDomEditor,\n): VNode {\n const { height } = elemNode as TableRowElement\n\n const vnode = (\n \n {children}\n \n )\n\n return vnode\n}\n\nexport default renderTableRow\n","/**\n * @description render cell\n * @author wangfupeng\n */\n\nimport { IDomEditor } from '@wangeditor-next/core'\nimport { Element as SlateElement } from 'slate'\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { jsx, VNode } from 'snabbdom'\n\nimport { TableCellElement } from '../custom-types'\nimport { isCellInFirstRow } from '../helpers'\nimport { TableCursor } from '../table-cursor'\n\nfunction renderTableCell(\n cellNode: SlateElement,\n children: VNode[] | null,\n editor: IDomEditor,\n): VNode {\n const isFirstRow = isCellInFirstRow(editor, cellNode as TableCellElement)\n const {\n colSpan = 1,\n rowSpan = 1,\n isHeader = false,\n hidden = false,\n } = cellNode as TableCellElement\n const selected = TableCursor.isSelected(editor, cellNode)\n\n // ------------------ 不是第一行，直接渲染 ------------------\n if (!isFirstRow) {\n return (\n