@phuong-tran-redoc/document-engine-core 0.1.0 → 0.1.2

package/index.esm.js

@@ -0,0 +1,2238 @@
+import { Extension, Node, mergeAttributes } from '@tiptap/core';
+import { OrderedList, BulletList, ListItem } from '@tiptap/extension-list';
+import { PluginKey, Plugin, TextSelection, NodeSelection } from '@tiptap/pm/state';
+import { TableCell, TableHeader, Table, TableRow } from '@tiptap/extension-table';
+import { selectionCell, findTable, TableMap, CellSelection, tableNodeTypes, deleteColumn, addColumnBefore, addColumnAfter } from '@tiptap/pm/tables';
+import { isEqual } from 'lodash-es';
+import { DOMSerializer } from '@tiptap/pm/model';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import Blockquote from '@tiptap/extension-blockquote';
+import Bold from '@tiptap/extension-bold';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import { Document } from '@tiptap/extension-document';
+import { HardBreak } from '@tiptap/extension-hard-break';
+import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
+import { Image } from '@tiptap/extension-image';
+import Italic from '@tiptap/extension-italic';
+import Link from '@tiptap/extension-link';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import Strike from '@tiptap/extension-strike';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+import { Text } from '@tiptap/extension-text';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import { Heading } from '@tiptap/extension-heading';
+import { __awaiter } from 'tslib';
+
+const INDENT_DEFAULT = 40; // in pixels
+
+const ClearContent = Extension.create({
+    name: 'clearContent',
+    addCommands() {
+        return {
+            clear: () => ({ chain }) => chain().focus().clearContent().run(),
+        };
+    },
+});
+
+const Indent = Extension.create({
+    name: 'indent',
+    addOptions() {
+        return {
+            types: ['paragraph', 'heading'],
+            indent: INDENT_DEFAULT,
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    indent: {
+                        parseHTML: (element) => {
+                            return Number(element.style.marginLeft.replace('px', ''));
+                        },
+                        renderHTML: (attributes) => {
+                            return { style: `margin-left: ${attributes['indent']}px` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            increaseIndent: () => ({ state, chain }) => {
+                const currentNode = state.selection.$head.parent;
+                const nodeType = currentNode.type;
+                if (!this.options.types.includes(nodeType.name))
+                    return false;
+                const currentIndent = currentNode.attrs['indent'] || 0;
+                const newIndent = currentIndent + this.options.indent;
+                return chain().updateAttributes(nodeType, { indent: newIndent }).run();
+            },
+            decreaseIndent: () => ({ state, chain }) => {
+                const currentNode = state.selection.$head.parent;
+                const nodeType = currentNode.type;
+                if (!this.options.types.includes(nodeType.name))
+                    return false;
+                const currentIndent = currentNode.attrs['indent'] || 0;
+                const newIndent = currentIndent - this.options.indent;
+                if (newIndent < 0)
+                    return false;
+                if (newIndent === 0)
+                    return chain().resetAttributes(nodeType, 'indent').run();
+                return chain().updateAttributes(nodeType, { indent: newIndent }).run();
+            },
+        };
+    },
+});
+
+const CustomOrderedList = OrderedList.extend({
+    name: 'customOrderedList',
+    addOptions() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { listStyleType: 'decimal' });
+    },
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { 'data-list-style-type': {
+                default: this.options.listStyleType,
+                parseHTML: (element) => {
+                    // Priority 1: Parse from data-list-style-type attribute (our format)
+                    const dataAttr = element.getAttribute('data-list-style-type');
+                    if (dataAttr)
+                        return dataAttr;
+                    // Priority 2: Parse from CSS list-style-type property (other editors' format)
+                    const styleAttr = element.style.listStyleType;
+                    if (styleAttr)
+                        return styleAttr;
+                    // Default fallback
+                    return this.options.listStyleType;
+                },
+                renderHTML: (attributes) => {
+                    const styleType = attributes['data-list-style-type'];
+                    if (!styleType || styleType === 'decimal')
+                        return { 'data-list-style-type': 'decimal' };
+                    return { 'data-list-style-type': attributes['data-list-style-type'] };
+                },
+            } });
+    },
+    addCommands() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { setListStyle: (listStyleType) => ({ chain }) => {
+                return chain().focus().updateAttributes('customOrderedList', { 'data-list-style-type': listStyleType }).run();
+            } });
+    },
+});
+
+const ResetFormat = Extension.create({
+    name: 'resetFormat',
+    addCommands() {
+        return {
+            resetFormat: () => ({ chain }) => chain().focus().unsetAllMarks().clearNodes().run(),
+        };
+    },
+});
+
+/*
+ * Clear:
+ * - textStyle mark
+ * - indent attribute
+ */
+// Clears formats on Enter so the new line has default formats
+const ResetOnEnter = Extension.create({
+    name: 'resetOnEnter',
+    addKeyboardShortcuts() {
+        return {
+            Enter: () => {
+                const disabledNodes = ['listItem', 'blockquote'];
+                if (disabledNodes.some((type) => this.editor.isActive(type))) {
+                    return false; //Let the default Enter behavior proceed
+                }
+                // Handle Enter ourselves so we can both clear marks and reset indent on the new line
+                return this.editor
+                    .chain()
+                    .focus()
+                    .unsetAllMarks()
+                    .splitBlock({ keepMarks: false })
+                    .command(({ state, commands }) => {
+                    const parent = state.selection.$head.parent;
+                    const nodeType = parent.type;
+                    const typesToReset = ['paragraph', 'heading'];
+                    if (typesToReset.includes(nodeType.name)) {
+                        return commands.resetAttributes(nodeType, 'indent');
+                    }
+                    return true;
+                })
+                    .run();
+            },
+        };
+    },
+});
+
+// Editable inline region where typing is allowed
+const EditableRegion = Node.create({
+    name: 'editableRegion',
+    group: 'inline',
+    inline: true,
+    content: 'text*',
+    selectable: false,
+    parseHTML() {
+        return [
+            // ----------------------------------------------------------
+            // RULE 1: Standard Tiptap Format (highest priority)
+            // ----------------------------------------------------------
+            { tag: 'span[data-editable-region]' },
+            // ----------------------------------------------------------
+            // RULE 2: CKEditor Format (lowest priority)
+            // ----------------------------------------------------------
+            { tag: 'span.restricted-editing-exception' },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'span',
+            mergeAttributes(HTMLAttributes, {
+                'data-editable-region': 'true',
+                class: 'editable-region',
+            }),
+            0,
+        ];
+    },
+});
+const RestrictedEditing = Extension.create({
+    name: 'restrictedEditing',
+    addOptions() {
+        return {
+            editableRegionNodeName: 'editableRegion',
+            disabledNodeTypes: ['listItem', 'blockquote'],
+            initialMode: 'restricted',
+        };
+    },
+    addStorage() {
+        return {
+            mode: this.options.initialMode,
+        };
+    },
+    addCommands() {
+        return {
+            wrapSelectionInEditableRegion: () => ({ state, dispatch }) => {
+                // 0. Always return false if the editable region node is not registered
+                const type = state.schema.nodes[this.options.editableRegionNodeName];
+                if (!type)
+                    return false;
+                const { from, to, empty } = state.selection;
+                // 1. Insert an empty editable region with a zero-width space
+                if (empty) {
+                    const node = type.create(null, state.schema.text('\u200b'));
+                    const tr = state.tr.replaceSelectionWith(node, false);
+                    tr.setMeta('restrictedEditing', { allow: true });
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                    return true;
+                }
+                // Disallow wrapping when selection contains non-text inline nodes
+                let containsNonTextInline = false;
+                state.doc.nodesBetween(from, to, (node) => {
+                    if (node.isInline && !node.isText) {
+                        containsNonTextInline = true;
+                        return false;
+                    }
+                    return undefined;
+                });
+                if (containsNonTextInline) {
+                    return false;
+                }
+                const multiLine = state.doc.textBetween(from, to, '\n', '\n').includes('\n');
+                let tr = state.tr;
+                if (multiLine) {
+                    // Wrap each textblock segment independently
+                    const ranges = [];
+                    state.doc.nodesBetween(from, to, (node, pos) => {
+                        if (node.isTextblock) {
+                            const s = Math.max(from, pos + 1);
+                            const e = Math.min(to, pos + node.nodeSize - 1);
+                            if (e > s)
+                                ranges.push({ s, e });
+                        }
+                        return undefined;
+                    });
+                    // Apply replacements from end to start to keep positions stable
+                    for (let i = ranges.length - 1; i >= 0; i--) {
+                        const { s, e } = ranges[i];
+                        const text = state.doc.textBetween(s, e, '\n', '\n');
+                        if (text.length === 0)
+                            continue;
+                        const node = type.create(null, state.schema.text(text));
+                        tr = tr.replaceRangeWith(s, e, node);
+                    }
+                }
+                else {
+                    const text = state.doc.textBetween(from, to, '\n', '\n');
+                    if (text.length === 0)
+                        return false;
+                    const node = type.create(null, state.schema.text(text));
+                    tr = tr.replaceRangeWith(from, to, node);
+                }
+                tr.setMeta('restrictedEditing', { allow: true });
+                dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                return true;
+            },
+            removeEditableRegion: () => ({ state, dispatch }) => {
+                const type = state.schema.nodes[this.options.editableRegionNodeName];
+                if (!type)
+                    return false;
+                const $pos = state.selection.$head;
+                for (let depth = $pos.depth; depth >= 0; depth--) {
+                    const node = $pos.node(depth);
+                    if (node.type === type) {
+                        const from = $pos.before(depth);
+                        const to = $pos.after(depth);
+                        const tr = state.tr.replaceWith(from, to, node.content);
+                        tr.setMeta('restrictedEditing', { allow: true });
+                        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                        return true;
+                    }
+                }
+                return false;
+            },
+            toggleEditableRegion: () => ({ state, dispatch, commands }) => {
+                const type = state.schema.nodes[this.options.editableRegionNodeName];
+                if (!type)
+                    return false;
+                const { from, to, empty } = state.selection;
+                const findRegionAtPos = (pos) => {
+                    const $pos = state.doc.resolve(pos);
+                    for (let depth = $pos.depth; depth >= 0; depth--) {
+                        const node = $pos.node(depth);
+                        if (node.type === type) {
+                            const nodeFrom = $pos.before(depth);
+                            const nodeTo = $pos.after(depth);
+                            return { from: nodeFrom, to: nodeTo, node };
+                        }
+                    }
+                    return null;
+                };
+                // Cursor case: inside a region -> unwrap that region; else insert empty region
+                if (empty) {
+                    const region = findRegionAtPos(from);
+                    if (region) {
+                        const tr = state.tr.replaceWith(region.from, region.to, region.node.content);
+                        tr.setMeta('restrictedEditing', { allow: true });
+                        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                        return true;
+                    }
+                    const node = type.create(null, state.schema.text('\u200b'));
+                    const tr = state.tr.replaceSelectionWith(node, false);
+                    tr.setMeta('restrictedEditing', { allow: true });
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                    return true;
+                }
+                // Range case: unwrap only if the entire selection is inside the SAME region; otherwise
+                // if selection is completely outside all regions, wrap it; else ignore
+                const regionStart = findRegionAtPos(from);
+                const regionEnd = findRegionAtPos(Math.max(from, to - 1));
+                if (regionStart && regionEnd && regionStart.from === regionEnd.from && regionStart.to === regionEnd.to) {
+                    const tr = state.tr.replaceWith(regionStart.from, regionStart.to, regionStart.node.content);
+                    tr.setMeta('restrictedEditing', { allow: true });
+                    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.scrollIntoView());
+                    return true;
+                }
+                // If neither endpoint is in a region, ensure there is no region intersecting the range
+                if (!regionStart && !regionEnd) {
+                    let hasRegionInside = false;
+                    state.doc.nodesBetween(from, to, (node) => {
+                        if (node.type === type) {
+                            hasRegionInside = true;
+                            return false;
+                        }
+                        return undefined;
+                    });
+                    if (!hasRegionInside) {
+                        return commands.wrapSelectionInEditableRegion();
+                    }
+                }
+                return false;
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Enter: () => {
+                // Get the current selection
+                const selection = this.editor.state.selection;
+                const $from = selection.$from;
+                if (!selection.empty)
+                    return false;
+                let editableRegionInfo = null;
+                for (let d = $from.depth; d > 0; d--) {
+                    const node = $from.node(d);
+                    if (node.type.name === 'editableRegion') {
+                        editableRegionInfo = {
+                            node: node,
+                            depth: d,
+                            // Position of the entire node (before the opening tag)
+                            posBefore: $from.before(d),
+                            // Position of the entire node (after the closing tag)
+                            posAfter: $from.after(d),
+                            // Position of the start of the content inside the node
+                            contentStartPos: $from.start(d),
+                            // Position of the end of the content inside the node
+                            contentEndPos: $from.end(d),
+                        };
+                        break;
+                    }
+                }
+                if (!editableRegionInfo)
+                    return false;
+                const atStart = $from.pos === editableRegionInfo.contentStartPos;
+                const atEnd = $from.pos === editableRegionInfo.contentEndPos;
+                // If cursor is at the start of the editable region, add a new paragraph before the editable region
+                if (atStart) {
+                    return this.editor
+                        .chain()
+                        .insertContentAt(editableRegionInfo.posBefore, '<p></p>')
+                        .focus(editableRegionInfo.posBefore - 2)
+                        .run();
+                }
+                // If cursor is at the end of the editable region, add a new paragraph after the editable region
+                if (atEnd) {
+                    return this.editor
+                        .chain()
+                        .insertContentAt(editableRegionInfo.posAfter, '<p></p>')
+                        .focus(editableRegionInfo.posAfter + 1)
+                        .run();
+                }
+                // If cursor is in the middle of the editable region, return false
+                return false;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        var _a;
+        const key = new PluginKey('restricted-editing');
+        const editor = this.editor;
+        const editableRegionNodeName = this.options.editableRegionNodeName;
+        const disabledNodeTypes = (_a = this.options.disabledNodeTypes) !== null && _a !== void 0 ? _a : [];
+        const getEditableRegionBounds = (doc, schema, pos) => {
+            const $pos = doc.resolve(pos);
+            const type = schema.nodes[editableRegionNodeName];
+            for (let depth = $pos.depth; depth >= 0; depth--) {
+                if ($pos.node(depth).type === type) {
+                    return { depth, from: $pos.start(depth), to: $pos.end(depth) };
+                }
+            }
+            return null;
+        };
+        const rangesFromTransaction = (tr) => {
+            const ranges = [];
+            for (let i = 0; i < tr.steps.length; i++) {
+                const map = tr.mapping.maps[i];
+                const forward = tr.mapping.slice(i + 1);
+                map.forEach((oldStart, oldEnd, newStart, newEnd) => {
+                    const finalNewFrom = forward.map(newStart, 1);
+                    const finalNewTo = forward.map(newEnd, -1);
+                    ranges.push({ oldFrom: oldStart, oldTo: oldEnd, newFrom: finalNewFrom, newTo: finalNewTo });
+                });
+            }
+            return ranges;
+        };
+        return [
+            new Plugin({
+                key,
+                filterTransaction: (tr, state) => {
+                    var _a, _b;
+                    // In standard mode, do not restrict edits
+                    if (this.storage.mode === 'standard')
+                        return true;
+                    if (!tr.docChanged)
+                        return true;
+                    if ((_a = tr.getMeta('restrictedEditing')) === null || _a === void 0 ? void 0 : _a.allow)
+                        return true;
+                    // Allow while the document is still the default empty state
+                    if (editor.isEmpty)
+                        return true;
+                    // In restricted mode: disable mark/style/attr changes from other extensions entirely
+                    const disallowedStepTypes = new Set(['addMark', 'removeMark', 'setNodeMarkup']);
+                    for (const step of tr.steps) {
+                        const t = (_b = step === null || step === void 0 ? void 0 : step.toJSON) === null || _b === void 0 ? void 0 : _b.call(step).stepType;
+                        if (t && disallowedStepTypes.has(t)) {
+                            return false;
+                        }
+                    }
+                    if (disabledNodeTypes.some((type) => editor.isActive(type))) {
+                        return true;
+                    }
+                    const ranges = rangesFromTransaction(tr);
+                    if (ranges.length === 0)
+                        return true;
+                    for (const range of ranges) {
+                        // Pre-change validation (against state.doc)
+                        const preStart = getEditableRegionBounds(state.doc, state.schema, range.oldFrom);
+                        const preEnd = getEditableRegionBounds(state.doc, state.schema, range.oldTo);
+                        if (!preStart || !preEnd)
+                            return false;
+                        if (preStart.from !== preEnd.from || preStart.to !== preEnd.to)
+                            return false;
+                        // Post-change validation (against final tr.doc)
+                        const postStart = getEditableRegionBounds(tr.doc, state.schema, range.newFrom);
+                        const postEnd = getEditableRegionBounds(tr.doc, state.schema, range.newTo);
+                        if (!postStart || !postEnd)
+                            return false;
+                        if (postStart.from !== postEnd.from || postStart.to !== postEnd.to)
+                            return false;
+                    }
+                    return true;
+                },
+                appendTransaction: (_transactions, _oldState, newState) => {
+                    const type = newState.schema.nodes[editableRegionNodeName];
+                    if (!type)
+                        return null;
+                    const isRestricted = this.storage.mode === 'restricted';
+                    const edits = [];
+                    newState.doc.descendants((node, pos) => {
+                        var _a;
+                        if (node.type === type) {
+                            const contentText = (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+                            if (contentText.length === 0) {
+                                if (isRestricted) {
+                                    // Ensure a single space exists inside empty region
+                                    const innerFrom = pos + 1;
+                                    const innerTo = pos + node.nodeSize - 1;
+                                    edits.push({ kind: 'fill', from: innerFrom, to: innerTo });
+                                }
+                                else {
+                                    // Remove empty region
+                                    edits.push({ kind: 'delete', from: pos, to: pos + node.nodeSize });
+                                }
+                            }
+                        }
+                    });
+                    if (edits.length === 0)
+                        return null;
+                    // Apply in descending order of from
+                    edits.sort((a, b) => b.from - a.from);
+                    const tr = newState.tr;
+                    for (const e of edits) {
+                        if (e.kind === 'delete') {
+                            tr.delete(e.from, e.to);
+                        }
+                        else {
+                            const textNode = newState.schema.text(' ');
+                            tr.replaceWith(e.from, e.to, textNode);
+                        }
+                    }
+                    tr.setMeta('restrictedEditing', { allow: true });
+                    return tr;
+                },
+            }),
+        ];
+    },
+});
+
+const MIN_NEW_COL_WIDTH = 5.0;
+
+/**
+ * Normalizes a color value to lowercase hex format
+ * Supports hex (#RGB, #RRGGBB) and rgb(r, g, b) formats
+ *
+ * @param color - Color value to normalize
+ * @returns Normalized hex color or null if invalid
+ *
+ * @example
+ * normalizeColor('#FF0000') // '#ff0000'
+ * normalizeColor('rgb(255, 0, 0)') // '#ff0000'
+ * normalizeColor('#F00') // '#f00'
+ * normalizeColor('invalid') // null
+ */
+function normalizeColor(color) {
+    if (!color)
+        return null;
+    const trimmed = color.trim().toLowerCase();
+    if (trimmed === 'transparent')
+        return trimmed;
+    // Check if it's a valid hex color
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed)) {
+        return trimmed;
+    }
+    // Try to parse RGB
+    const rgbMatch = trimmed.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+    if (rgbMatch) {
+        const r = Math.max(0, Math.min(255, parseInt(rgbMatch[1], 10)));
+        const g = Math.max(0, Math.min(255, parseInt(rgbMatch[2], 10)));
+        const b = Math.max(0, Math.min(255, parseInt(rgbMatch[3], 10)));
+        const toHex = (n) => n.toString(16).padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    return null;
+}
+
+function getClosestDomElement(editor, selector) {
+    const { view, state } = editor;
+    const { selection } = state;
+    const { from } = selection;
+    if (!from)
+        return null;
+    let domNodeAtPos = null;
+    // Ưu tiên tìm DOM node của 'nearest parent element' của vị trí from
+    // Nếu from là trong text, $from.parent.nodeDOM có thể chính xác hơn
+    try {
+        const resolvedPos = state.doc.resolve(from);
+        domNodeAtPos = view.domAtPos(resolvedPos.pos).node; // Bắt đầu từ node ở vị trí from
+        // Nếu domNodeAtPos không phải là HTMLElement (ví dụ, là một Text node),
+        // thì cố gắng lấy element cha của nó trong DOM
+        if (domNodeAtPos && !(domNodeAtPos instanceof HTMLElement)) {
+            domNodeAtPos = domNodeAtPos.parentElement;
+        }
+    }
+    catch (e) {
+        // Xử lý trường hợp hiếm gặp khi nodeDOM(from) không trả về gì hợp lệ
+        console.warn('Could not find DOM node at cursor position:', e);
+        return null;
+    }
+    if (!domNodeAtPos)
+        return null;
+    const boundary = editor.view.dom;
+    // Tìm kiếm từ domNodeAtPos lên trên cho đến khi gặp editor container
+    let currentElement = domNodeAtPos;
+    while (currentElement && currentElement !== boundary) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
+
+function getCursorCellInfo(state) {
+    // 1. Dùng selectionCell để tìm vị trí bắt đầu của ô chứa con trỏ
+    try {
+        const cellInfo = selectionCell(state);
+        // Nếu không tìm thấy (con trỏ không nằm trong ô nào), trả về null
+        if (!cellInfo)
+            return null;
+        // cellInfo.$pos là một ResolvedPos trỏ tới vị trí bắt đầu của ô
+        const table = findTable(cellInfo);
+        if (!table)
+            return null;
+        const map = TableMap.get(table.node);
+        // 2. Lấy vị trí tương đối của ô so với bảng
+        const cellOffset = cellInfo.pos - table.start;
+        // 3. Tìm chỉ số (index) của ô này trong "bản đồ" của bảng
+        const cellIndex = map.map.indexOf(cellOffset);
+        if (cellIndex === -1) {
+            return null;
+        }
+        // 4. Từ chỉ số, tính ra rowIndex và colIndex
+        const rowIndex = Math.floor(cellIndex / map.width);
+        const colIndex = cellIndex % map.width;
+        return {
+            rowIndex,
+            colIndex,
+            cellIndex,
+            tableStart: table.start,
+            tableNode: table.node,
+            map,
+        };
+    }
+    catch (_a) {
+        // selectionCell throws RangeError when cursor is not in a table
+        return null;
+    }
+}
+function getSelectedCells(state) {
+    const { selection } = state;
+    const cells = [];
+    // Trường hợp chọn nhiều ô
+    if (selection instanceof CellSelection) {
+        selection.forEachCell((node, pos) => cells.push({ pos, node }));
+        return cells;
+    }
+    // Trường hợp con trỏ nằm trong một ô
+    if (selection.empty) {
+        // Tìm node cell cha gần nhất
+        const cell = selection.$head.node(-1);
+        if (!cell || !(cell.type.name === 'tableCell' || cell.type.name === 'tableHeader'))
+            return cells;
+        // Lấy vị trí bắt đầu của node cell
+        const cellPos = selection.$head.start(-1);
+        cells.push({ pos: cellPos, node: cell });
+    }
+    return cells;
+}
+/**
+ * Quyết định giá trị thuộc tính cuối cùng từ một danh sách các cell đã chọn.
+ * @param cells Danh sách các cell được chọn.
+ * @param attributeName Tên của thuộc tính cần lấy (ví dụ: 'backgroundColor').
+ * @returns Giá trị chung, hoặc MIXED_VALUE nếu các giá trị không đồng nhất.
+ */
+function getCombinedCellAttributeValue(cells, attributeName, fallbackValue) {
+    // Không có cell nào được chọn
+    if (cells.length === 0)
+        return fallbackValue;
+    const firstValue = cells[0].node.attrs[attributeName];
+    for (let i = 1; i < cells.length; i++) {
+        const currentValue = cells[i].node.attrs[attributeName];
+        // Dùng isEqual để so sánh object (quan trọng cho thuộc tính 'border')
+        if (!isEqual(currentValue, firstValue))
+            return undefined;
+    }
+    return firstValue;
+}
+/**
+ * Get the actual table DOM element from a node position
+ * Handles both direct table elements and NodeView wrappers
+ * Uses :scope selector to avoid selecting nested tables
+ *
+ * @export For use in other table-related extensions
+ */
+function getTableDOMFromView(view, tablePos) {
+    const nodeDOMEl = view.nodeDOM(tablePos);
+    if (!nodeDOMEl)
+        return null;
+    // Case 1: nodeDOMEl is the table itself
+    if (nodeDOMEl.tagName === 'TABLE') {
+        return nodeDOMEl;
+    }
+    // Case 2: nodeDOMEl is a NodeView wrapper (figure.widget)
+    // Structure: figure.widget > table.widget-content
+    // Use :scope to only get direct child, avoiding nested tables in cells
+    const tableDOM = nodeDOMEl.querySelector(':scope > table.widget-content');
+    return tableDOM;
+}
+
+function getSelectedText(editor) {
+    const { state } = editor;
+    const { selection } = state;
+    // 1. Kiểm tra nếu selection rỗng (chỉ là con trỏ) hoặc không phải là TextSelection
+    if (selection.empty || !(selection instanceof TextSelection)) {
+        return null;
+    }
+    // 2. Lấy text giữa điểm đầu và điểm cuối của selection
+    const { from, to } = selection;
+    return state.doc.textBetween(from, to, ' '); // Trả về text
+}
+/**
+ * Tìm instance và range (from, to) của một mark cụ thể tại vị trí con trỏ.
+ * @param editor The Tiptap editor instance.
+ * @param markName Tên của mark cần tìm (vd: 'link').
+ * @returns Object chứa from, to, và mark instance nếu tìm thấy, ngược lại trả về null.
+ */
+function getActiveMarkRange(editor, markName) {
+    const { state } = editor;
+    const { $from } = state.selection;
+    const { doc } = state;
+    // 2. Lấy instance của mark tại vị trí con trỏ
+    const activeMarks = $from.marks();
+    const targetMark = activeMarks.find((mark) => mark.type.name === markName);
+    // Nếu không có mark active, thoát ngay
+    if (!targetMark)
+        return null;
+    const markType = targetMark.type;
+    // 3. Quét ngược về đầu để tìm vị trí `from`
+    let from = $from.pos;
+    // Giới hạn việc quét trong node cha hiện tại ($from.start())
+    while (from > $from.start() && doc.rangeHasMark(from - 1, from, markType)) {
+        from--;
+    }
+    // 4. Quét xuôi về cuối để tìm vị trí `to`
+    let to = $from.pos;
+    // Giới hạn việc quét trong node cha hiện tại ($from.end())
+    while (to < $from.end() && doc.rangeHasMark(to, to + 1, markType)) {
+        to++;
+    }
+    // 5. Trả về kết quả
+    return { from, to, mark: targetMark };
+}
+
+class HandleNodeView {
+    constructor(node, view, getPos) {
+        // Store event listeners for cleanup
+        this.eventCleanups = [];
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        // 1. Dùng <figure> làm wrapper, KHÔNG set contentEditable vì sẽ chặn tất cả
+        this.dom = document.createElement('figure');
+        this.dom.classList.add('widget');
+        // Make the widget draggable (via the handle with data-drag-handle attribute)
+        // this.dom.draggable = true;
+        // 2. Tạo Handle kéo thả
+        this.createBlockHandle(view, getPos);
+        // 3. Tạo Nội dung (do lớp con định nghĩa)
+        const contentElement = this.createContentElement(node);
+        contentElement.classList.add('widget-content');
+        // 4. Tạo các nút "Type Around"
+        const typeAround = this.createTypeAround(view, getPos, node);
+        // 5. Lắp ráp cấu trúc: Handle -> Nội dung -> TypeAround
+        // this.dom.append(handle, contentElement, typeAround);
+        this.dom.append(contentElement, typeAround);
+        // 6. Setup drag handling for ProseMirror
+        // this.setupDragHandling(view, getPos, node);
+    }
+    setupDragHandling(view, getPos, node) {
+        const handleDragStart = (event) => {
+            const pos = getPos();
+            if (pos === undefined || !event.dataTransfer)
+                return;
+            // Let ProseMirror know which node is being dragged
+            // Store node position and allow move effect
+            event.dataTransfer.effectAllowed = 'move';
+            // ProseMirror expects this format
+            const slice = view.state.doc.slice(pos, pos + node.nodeSize);
+            const serializer = DOMSerializer.fromSchema(view.state.schema);
+            const dom = document.createElement('div');
+            dom.appendChild(serializer.serializeFragment(slice.content));
+            event.dataTransfer.setDragImage(this.dom, 0, 0);
+            event.dataTransfer.setData('text/html', dom.innerHTML);
+            // Add dragging state
+            this.dom.classList.add('widget-dragging');
+        };
+        const handleDragEnd = () => {
+            this.dom.classList.remove('widget-dragging');
+        };
+        this.dom.addEventListener('dragstart', handleDragStart);
+        this.dom.addEventListener('dragend', handleDragEnd);
+        this.eventCleanups.push(() => {
+            this.dom.removeEventListener('dragstart', handleDragStart);
+            this.dom.removeEventListener('dragend', handleDragEnd);
+        });
+    }
+    createBlockHandle(view, getPos) {
+        const handle = document.createElement('div');
+        handle.className = 'widget__selection-handle';
+        handle.innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" height="24px" fill="currentColor" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"/></svg>';
+        handle.contentEditable = 'false';
+        // handle.draggable = true;
+        handle.setAttribute('data-drag-handle', '');
+        handle.setAttribute('data-block-handle', ''); // Mark để dễ check trong stopEvent
+        // Logic click-to-select (only on click, not drag)
+        let isDragging = false;
+        const handleMouseDown = () => {
+            isDragging = false;
+            // Let drag happen naturally, don't prevent
+        };
+        const handleClick = (event) => {
+            var _a;
+            // Only select if it was a click, not a drag
+            if (!isDragging && event.button === 0) {
+                event.preventDefault();
+                event.stopPropagation();
+                const pos = (_a = getPos()) !== null && _a !== void 0 ? _a : 0;
+                const tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos));
+                view.dispatch(tr);
+            }
+            isDragging = false;
+        };
+        handle.addEventListener('mousedown', handleMouseDown);
+        // handle.addEventListener('dragstart', handleDragStart);
+        handle.addEventListener('click', handleClick);
+        // Store cleanup
+        this.eventCleanups.push(() => {
+            handle.removeEventListener('mousedown', handleMouseDown);
+            // handle.removeEventListener('dragstart', handleDragStart);
+            handle.removeEventListener('click', handleClick);
+        });
+        return handle;
+    }
+    createTypeAround(view, getPos, node) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'type-around';
+        const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>';
+        const buttonBefore = document.createElement('div');
+        buttonBefore.className = 'widget__type-around__button widget__type-around__button_before';
+        buttonBefore.title = 'Insert paragraph before';
+        buttonBefore.innerHTML = icon;
+        const buttonAfter = document.createElement('div');
+        buttonAfter.className = 'widget__type-around__button widget__type-around__button_after';
+        buttonAfter.title = 'Insert paragraph after';
+        buttonAfter.innerHTML = icon;
+        // Logic chèn node 'paragraph' mới
+        const handleInsert = (position) => {
+            const currentPos = getPos();
+            if (currentPos === undefined)
+                return;
+            const newNode = view.state.schema.nodes['paragraph'].create();
+            let insertPos;
+            if (position === 'before') {
+                insertPos = currentPos;
+            }
+            else {
+                const tableStartPos = view.state.doc.resolve(currentPos);
+                const tableIndex = tableStartPos.index();
+                insertPos = tableStartPos.posAtIndex(tableIndex + 1);
+            }
+            const tr = view.state.tr.insert(insertPos, newNode);
+            const mappedInsertPos = tr.mapping.map(insertPos, -1);
+            const selectionPos = mappedInsertPos + 1;
+            // Di chuyển con trỏ vào node mới
+            view.dispatch(tr.setSelection(TextSelection.create(tr.doc, selectionPos)));
+            view.focus();
+        };
+        // Button Before event handlers
+        const beforeMouseDown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const beforeClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleInsert('before');
+        };
+        buttonBefore.addEventListener('mousedown', beforeMouseDown);
+        buttonBefore.addEventListener('click', beforeClick);
+        // Button After event handlers
+        const afterMouseDown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const afterClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleInsert('after');
+        };
+        buttonAfter.addEventListener('mousedown', afterMouseDown);
+        buttonAfter.addEventListener('click', afterClick);
+        // Store cleanup functions
+        this.eventCleanups.push(() => {
+            buttonBefore.removeEventListener('mousedown', beforeMouseDown);
+            buttonBefore.removeEventListener('click', beforeClick);
+            buttonAfter.removeEventListener('mousedown', afterMouseDown);
+            buttonAfter.removeEventListener('click', afterClick);
+        });
+        wrapper.append(buttonBefore, buttonAfter);
+        return wrapper;
+    }
+    /**
+     * Ngăn các sự kiện từ handle và type-around buttons lan truyền vào editor
+     * CHỈ chặn events từ các controls, KHÔNG chặn events từ content
+     *
+     * QUAN TRỌNG:
+     * - return true = ProseMirror BỎ QUA event này
+     * - return false = ProseMirror XỬ LÝ event này (table editing, selection, drag, etc.)
+     */
+    stopEvent(event) {
+        const target = event.target;
+        // Chỉ chặn events từ control elements (handle, type-around buttons)
+        const isControl = target.closest('[data-block-handle]') ||
+            target.closest('.widget__type-around__button') ||
+            target.closest('.type-around');
+        if (!isControl) {
+            // Event từ table content → cho ProseMirror xử lý
+            return false;
+        }
+        // Event từ control → chặn hầu hết, NHƯNG cho phép một số events quan trọng
+        const eventType = event.type;
+        // Cho phép drag events để ProseMirror handle drag & drop
+        if (eventType === 'dragstart' || eventType === 'drag' || eventType === 'dragend') {
+            return false; // Let ProseMirror handle drag
+        }
+        // Cho phép focus events để không phá navigation
+        if (eventType === 'focus' || eventType === 'blur') {
+            return false;
+        }
+        // Chặn các events khác từ controls
+        return true;
+    }
+    selectNode() {
+        this.dom.classList.add('ProseMirror-selectednode');
+    }
+    deselectNode() {
+        this.dom.classList.remove('ProseMirror-selectednode');
+    }
+    destroy() {
+        // Cleanup all event listeners
+        this.eventCleanups.forEach((cleanup) => cleanup());
+        this.eventCleanups = [];
+        // Remove DOM
+        this.dom.remove();
+    }
+}
+class TableNodeView extends HandleNodeView {
+    createContentElement() {
+        // Create table element
+        const table = document.createElement('table');
+        // Apply table styles (border and backgroundColor)
+        this.updateTableStyles(table);
+        // Create tbody - this is the contentDOM where ProseMirror renders <tr>s
+        const tbody = document.createElement('tbody');
+        this.contentDOM = tbody;
+        table.appendChild(tbody);
+        // Render colgroup
+        this.updateColgroup(table);
+        return table;
+    }
+    /**
+     * Get table element from DOM
+     * Query from this.dom instead of storing reference to avoid stale references
+     */
+    getTableElement() {
+        return this.dom.querySelector('table');
+    }
+    update(node) {
+        // Check if node actually changed
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        // Update node reference
+        this.node = node;
+        // Get table element
+        const table = this.getTableElement();
+        if (!table) {
+            return true;
+        }
+        // Update table styles if border or backgroundColor changed
+        this.updateTableStyles(table);
+        // Update colgroup if colwidths changed
+        this.updateColgroup(table);
+        return true;
+    }
+    updateTableStyles(table) {
+        const border = this.node.attrs['border'];
+        const backgroundColor = this.node.attrs['backgroundColor'];
+        // Reset styles
+        // (Chúng ta reset để xử lý trường hợp attribute bị xóa)
+        table.style.borderStyle = '';
+        table.style.borderColor = '';
+        table.style.borderWidth = '';
+        table.style.backgroundColor = '';
+        // Apply backgroundColor
+        if (backgroundColor) {
+            table.style.backgroundColor = backgroundColor;
+        }
+        // Apply border
+        if (border) {
+            if (border.style)
+                table.style.borderStyle = border.style;
+            if (border.color)
+                table.style.borderColor = border.color;
+            if (border.width)
+                table.style.borderWidth = border.width;
+        }
+    }
+    updateColgroup(table) {
+        // Remove existing colgroup if exists
+        const existingColgroup = table.querySelector('colgroup');
+        if (existingColgroup) {
+            existingColgroup.remove();
+        }
+        // Render new colgroup if colwidths exist
+        const colwidths = this.node.attrs['colwidths'];
+        if (colwidths && colwidths.length > 0) {
+            const colgroup = document.createElement('colgroup');
+            colwidths.forEach((width) => {
+                const col = document.createElement('col');
+                if (width) {
+                    col.style.width = `${width}%`;
+                }
+                colgroup.appendChild(col);
+            });
+            // Insert before tbody
+            const tbody = table.querySelector('tbody');
+            if (tbody) {
+                table.insertBefore(colgroup, tbody);
+            }
+            else {
+                table.appendChild(colgroup);
+            }
+        }
+    }
+}
+// Factory function for Tiptap NodeView
+const createTableNodeView = (props) => {
+    return new TableNodeView(props.node, props.view, props.getPos);
+};
+class PageBreakNodeView extends HandleNodeView {
+    createContentElement() {
+        // Create page break container
+        const pageBreakDiv = document.createElement('div');
+        pageBreakDiv.className = 'document-engine-page-break';
+        pageBreakDiv.setAttribute('data-page-break', 'true');
+        pageBreakDiv.style.cssText = 'break-before: page;';
+        pageBreakDiv.contentEditable = 'false';
+        // Create label
+        const label = document.createElement('span');
+        label.className = 'document-engine-page-break-label';
+        label.textContent = 'Page break';
+        label.contentEditable = 'false';
+        pageBreakDiv.appendChild(label);
+        return pageBreakDiv;
+    }
+}
+// Factory function for PageBreak NodeView
+const createPageBreakNodeView = (props) => {
+    return new PageBreakNodeView(props.node, props.view, props.getPos);
+};
+
+/**
+ * Handler for mouse move (dragging)
+ */
+function handleMouseMoveEvent(event, dragInfo) {
+    var _a;
+    if (!dragInfo.isDragging)
+        return;
+    event.preventDefault();
+    const { startX, tableWidthPx, initialLeftWidth, initialRightWidth, leftColIndex, tablePos, tableNode, view } = dragInfo;
+    // 1. Compute the delta (pixels)
+    const deltaX = event.clientX - startX;
+    // 2. Convert the pixel delta into a percentage delta
+    // This is the most important piece of logic
+    const deltaPercent = (deltaX / tableWidthPx) * 100;
+    // 3. Compute the new widths
+    let newLeftWidth = initialLeftWidth + deltaPercent;
+    let newRightWidth = initialRightWidth - deltaPercent;
+    // 4. Apply constraints (e.g. min-width 5%)
+    const minWidth = 5; // min-width configuration
+    if (newLeftWidth < minWidth) {
+        const diff = minWidth - newLeftWidth;
+        newLeftWidth = minWidth;
+        newRightWidth = newRightWidth - diff; // Right column absorbs the shortfall
+    }
+    else if (newRightWidth < minWidth) {
+        const diff = minWidth - newRightWidth;
+        newRightWidth = minWidth;
+        newLeftWidth = newLeftWidth - diff; // Left column absorbs the shortfall
+    }
+    // Make sure no column goes negative (in case of a very fast drag)
+    if (newLeftWidth < 0)
+        newLeftWidth = 0;
+    if (newRightWidth < 0)
+        newRightWidth = 0;
+    // 5. Build the new colwidths array
+    const newColWidths = [...(_a = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs) === null || _a === void 0 ? void 0 : _a['colwidths']];
+    newColWidths[leftColIndex] = newLeftWidth;
+    newColWidths[leftColIndex + 1] = newRightWidth;
+    // 6. Dispatch a transaction to update the state
+    if (tableNode && view) {
+        const tr = view.state.tr.setNodeMarkup(tablePos, null, Object.assign(Object.assign({}, tableNode.attrs), { colwidths: newColWidths }));
+        // Use dispatchTransaction so Tiptap/ProseMirror updates the UI itself
+        view.dispatch(tr);
+    }
+}
+/**
+ * Handler for mouse up (end of drag)
+ */
+function handleMouseUpEvent(event, dragInfo) {
+    if (!dragInfo.isDragging)
+        return;
+    event.preventDefault();
+    // Reset the state
+    dragInfo = {
+        isDragging: false,
+        startX: 0,
+        tablePos: -1,
+        tableNode: null,
+        tableWidthPx: 0,
+        leftColIndex: -1,
+        initialLeftWidth: 0,
+        initialRightWidth: 0,
+        view: null,
+    };
+}
+/**
+ * Extension PercentageColumnResizing
+ * * Replaces the default column-resize logic with percentage-based logic.
+ */
+const PercentageColumnResizing = Extension.create({
+    name: 'percentageColumnResizing',
+    addProseMirrorPlugins() {
+        // A temporary object to hold the drag-and-drop state
+        // We don't use Plugin State because this state never needs to be "undone"
+        let dragInfo = {
+            isDragging: false,
+            startX: 0,
+            tablePos: -1,
+            tableNode: null,
+            tableWidthPx: 0,
+            leftColIndex: -1,
+            initialLeftWidth: 0,
+            initialRightWidth: 0,
+            view: null,
+            // finalColWidths: null,
+        };
+        const editorInstance = this.editor;
+        return [
+            new Plugin({
+                key: new PluginKey('percentageColumnResizing'),
+                props: {
+                    /**
+                     * Draw the resize handles into the DOM
+                     */
+                    decorations(state) {
+                        if (!(editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.isEditable))
+                            return;
+                        const decorations = [];
+                        const { doc } = state;
+                        const tableTypes = tableNodeTypes(state.schema);
+                        // Walk every node in the document
+                        doc.descendants((node, pos) => {
+                            var _a;
+                            if (node.type.name !== tableTypes.table.name)
+                                return;
+                            const colwidths = node.attrs['colwidths'];
+                            if (!colwidths || colwidths.length === 0)
+                                return;
+                            let accumulatedWidth = 0;
+                            // Create a handle for N-1 columns (the last column doesn't need one)
+                            for (let i = 0; i < colwidths.length - 1; i++) {
+                                accumulatedWidth += (_a = colwidths[i]) !== null && _a !== void 0 ? _a : 0;
+                                // Create a 'div' widget to act as the handle
+                                const handle = document.createElement('div');
+                                handle.className = 'pm-col-resizer';
+                                handle.style.left = `calc(${accumulatedWidth}% - 2px)`;
+                                // Store the column position so we know which column is being resized
+                                handle.setAttribute('data-col-index', i.toString());
+                                handle.setAttribute('data-table-pos', pos.toString());
+                                // Place the widget right after the <table> tag (pos + 1)
+                                decorations.push(Decoration.widget(pos + 1, handle));
+                            }
+                        });
+                        return DecorationSet.create(doc, decorations);
+                    },
+                    /**
+                     * Handle the mousedown event on a handle
+                     */
+                    handleDOMEvents: {
+                        mousedown(view, event) {
+                            var _a, _b;
+                            const target = event.target;
+                            // Only trigger when clicking on a handle
+                            if (!target.classList.contains('pm-col-resizer'))
+                                return false;
+                            event.preventDefault();
+                            const colIndex = parseInt((_a = target.getAttribute('data-col-index')) !== null && _a !== void 0 ? _a : '0', 10);
+                            const tablePos = parseInt((_b = target.getAttribute('data-table-pos')) !== null && _b !== void 0 ? _b : '0', 10);
+                            const tableNode = view.state.doc.nodeAt(tablePos);
+                            const colwidths = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs['colwidths'];
+                            if (!tableNode || !colwidths)
+                                return false;
+                            // Get table DOM element (handles NodeView wrappers and nested tables)
+                            const tableDOM = getTableDOMFromView(view, tablePos);
+                            if (!tableDOM)
+                                return false;
+                            // Store the info needed for dragging
+                            dragInfo = {
+                                isDragging: true,
+                                startX: event.clientX,
+                                tablePos: tablePos,
+                                tableNode: tableNode,
+                                tableWidthPx: tableDOM.offsetWidth, // <-- Get the table width (px)
+                                leftColIndex: colIndex,
+                                initialLeftWidth: colwidths[colIndex],
+                                initialRightWidth: colwidths[colIndex + 1],
+                                view: view,
+                                // finalColWidths: null,
+                            };
+                            const handleMouseMove = (event) => handleMouseMoveEvent(event, dragInfo);
+                            const handleMouseUp = (event) => {
+                                handleMouseUpEvent(event, dragInfo);
+                                window.removeEventListener('mousemove', handleMouseMove, true);
+                                window.removeEventListener('mouseup', handleMouseUp, true);
+                            };
+                            window.addEventListener('mousemove', handleMouseMove, true);
+                            window.addEventListener('mouseup', handleMouseUp, true);
+                            return true; // Event handled
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+/**
+ * Calculate new column widths when adding a column, ensuring no column goes below MIN_NEW_COL_WIDTH
+ * @param oldColWidths - Array of current column widths
+ * @returns Array of adjusted column widths (without the new column inserted yet)
+ */
+function calculateColumnWidthsForNewColumn(oldColWidths) {
+    // Find columns that can contribute (above minimum)
+    const columnsAboveMin = oldColWidths.filter((w) => w > MIN_NEW_COL_WIDTH);
+    // If not enough space, proportionally reduce all columns
+    if (columnsAboveMin.length === 0) {
+        const reduction = MIN_NEW_COL_WIDTH / oldColWidths.length;
+        return oldColWidths.map((w) => w - reduction);
+    }
+    // Calculate available space from columns above minimum
+    const availableSpace = columnsAboveMin.reduce((sum, w) => sum + (w - MIN_NEW_COL_WIDTH), 0);
+    // If we have enough space, only tax columns above minimum
+    if (availableSpace >= MIN_NEW_COL_WIDTH) {
+        return oldColWidths.map((w) => {
+            if (w > MIN_NEW_COL_WIDTH) {
+                const contribution = ((w - MIN_NEW_COL_WIDTH) / availableSpace) * MIN_NEW_COL_WIDTH;
+                return Math.max(MIN_NEW_COL_WIDTH, w - contribution);
+            }
+            return w;
+        });
+    }
+    // Not enough space even from columns above min, reduce proportionally
+    const reduction = MIN_NEW_COL_WIDTH / oldColWidths.length;
+    return oldColWidths.map((w) => w - reduction);
+}
+const TableDefaultAttributes = {
+    border: {
+        style: 'double',
+        color: '#e5e7eb',
+        width: '1px',
+    },
+    backgroundColor: null,
+    colwidths: null, // Array of column widths as percentages
+    cellBorder: {
+        style: 'solid',
+        color: '#e5e7eb',
+        width: '1px',
+    },
+    cellBackgroundColor: null,
+    cellVerticalAlign: 'middle',
+    cellTextAlign: null,
+};
+// Extend TableCell and TableHeader to support styling attributes
+const commonCellAttributes = {
+    backgroundColor: {
+        default: null,
+        renderHTML: (attrs) => attrs.backgroundColor ? { style: `background-color: ${attrs.backgroundColor};` } : {},
+        parseHTML: (element) => element.style.getPropertyValue('background-color') || null,
+    },
+    border: {
+        default: TableDefaultAttributes.cellBorder,
+        renderHTML: (attrs) => {
+            const border = attrs['border'];
+            if (!border)
+                return {};
+            const styles = [];
+            if (border.style)
+                styles.push(`border-style: ${border.style}`);
+            if (border.color)
+                styles.push(`border-color: ${border.color}`);
+            if (border.width)
+                styles.push(`border-width: ${border.width}`);
+            return styles.length ? { style: styles.join('; ') + ';' } : {};
+        },
+        parseHTML: (element) => {
+            const style = element.style.getPropertyValue('border-style');
+            const color = element.style.getPropertyValue('border-color');
+            const width = element.style.getPropertyValue('border-width');
+            if (!style && !color && !width)
+                return null;
+            return {
+                style: style || null,
+                color: color || null,
+                width: width || null,
+            };
+        },
+    },
+    verticalAlign: {
+        default: TableDefaultAttributes.cellVerticalAlign,
+        renderHTML: (attrs) => attrs.verticalAlign ? { style: `vertical-align: ${attrs.verticalAlign};` } : {},
+        parseHTML: (element) => element.style.getPropertyValue('vertical-align') || null,
+    },
+    textAlign: {
+        default: TableDefaultAttributes.cellTextAlign,
+        renderHTML: (attrs) => attrs.textAlign ? { style: `text-align: ${attrs.textAlign};` } : {},
+        parseHTML: (element) => element.style.getPropertyValue('text-align') || null,
+    },
+};
+const StyledTableCell = TableCell.extend({
+    addAttributes() {
+        var _a, _b;
+        const parent = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : {};
+        return Object.assign(Object.assign({}, parent), commonCellAttributes);
+    },
+});
+const StyledTableHeader = TableHeader.extend({
+    addAttributes() {
+        var _a, _b;
+        const parent = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : {};
+        return Object.assign(Object.assign({}, parent), commonCellAttributes);
+    },
+});
+// Extend Table node to support width (%) and alignment (left|center|right)
+const StyledTable = Table.extend({
+    // name: 'styledTable',
+    // draggable: true,
+    addOptions() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { enableNodeView: true });
+    },
+    addAttributes() {
+        var _a, _b;
+        const parent = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : {};
+        return Object.assign(Object.assign({}, parent), { border: {
+                default: null,
+                renderHTML: (attrs) => {
+                    const border = attrs.border;
+                    if (!border)
+                        return {};
+                    const styles = [];
+                    if (border.style)
+                        styles.push(`border-style: ${border.style}`);
+                    if (border.color)
+                        styles.push(`border-color: ${border.color}`);
+                    if (border.width)
+                        styles.push(`border-width: ${border.width}`);
+                    return styles.length ? { style: styles.join('; ') + ';' } : {};
+                },
+                parseHTML: (element) => {
+                    const style = element.style.getPropertyValue('border-style');
+                    const color = element.style.getPropertyValue('border-color');
+                    const width = element.style.getPropertyValue('border-width');
+                    if (!style && !color && !width)
+                        return null;
+                    return { style: style || null, color: color || null, width: width || null };
+                },
+            }, backgroundColor: {
+                default: null,
+                renderHTML: (attrs) => attrs.backgroundColor ? { style: `background-color: ${attrs.backgroundColor};` } : {},
+                parseHTML: (element) => element.style.getPropertyValue('background-color') || null,
+            }, colwidths: {
+                default: null,
+                renderHTML: (attributes) => {
+                    if (!attributes['colwidths']) {
+                        return {}; // Nothing to render
+                    }
+                    return {
+                        'data-colwidths': JSON.stringify(attributes['colwidths']),
+                    };
+                },
+                parseHTML: (element) => {
+                    // Only get cols from direct child colgroup (not from nested tables)
+                    const colgroup = element.querySelector(':scope > colgroup');
+                    if (!colgroup)
+                        return null;
+                    const cols = colgroup.querySelectorAll('col');
+                    if (cols.length === 0)
+                        return null;
+                    const colwidths = [];
+                    cols.forEach((col) => {
+                        const width = col.getAttribute('style');
+                        if (width) {
+                            const match = width.match(/width:\s*(\d+(?:\.\d+)?)%/);
+                            colwidths.push(match ? parseFloat(match[1]) : null);
+                        }
+                        else {
+                            colwidths.push(null);
+                        }
+                    });
+                    return colwidths.length > 0 ? colwidths : null;
+                },
+            } });
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        var _a;
+        const colwidths = (_a = node.attrs) === null || _a === void 0 ? void 0 : _a['colwidths'];
+        const domNodes = [];
+        // Render <colgroup> when colwidths are present
+        if (colwidths) {
+            const colgroup = ['colgroup', {}];
+            colwidths.forEach((width) => {
+                colgroup.push(['col', { style: width ? `width: ${width}%` : null }]);
+            });
+            domNodes.push(colgroup);
+        }
+        // Add <tbody> (0 is the 'content hole')
+        domNodes.push(['tbody', 0]);
+        // Merge the HTML attributes (including global attributes)
+        // HTMLAttributes has already been merged by Tiptap via getRenderedAttributes
+        return ['table', HTMLAttributes, ...domNodes];
+    },
+    addCommands() {
+        var _a, _b;
+        const parent = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : {};
+        return Object.assign(Object.assign({}, parent), { 
+            // Table
+            setTableBorder: (border) => ({ chain, state }) => {
+                var _a, _b;
+                if (!border)
+                    return chain().focus().updateAttributes('table', { border: null }).run();
+                // Get current table border and merge with new values
+                // Find the table node
+                const cellInfo = getCursorCellInfo(state);
+                if (!cellInfo)
+                    return false;
+                const currentBorder = ((_b = (_a = cellInfo === null || cellInfo === void 0 ? void 0 : cellInfo.tableNode) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b['border']) || {};
+                const mergedBorder = {
+                    style: border.style !== undefined ? border.style : currentBorder.style || null,
+                    color: border.color !== undefined ? border.color : currentBorder.color || null,
+                    width: border.width !== undefined ? border.width : currentBorder.width || null,
+                };
+                return chain().focus().updateAttributes('table', { border: mergedBorder }).run();
+            }, setTableBackgroundColor: (color) => ({ chain }) => {
+                return chain()
+                    .focus()
+                    .updateAttributes('table', { backgroundColor: color !== null && color !== void 0 ? color : null })
+                    .run();
+            }, insertTable: ({ rows, cols, withHeaderRow }) => ({ tr, dispatch, editor }) => {
+                const { schema } = editor.state;
+                // --- STEP 1: Compute colWidths ---
+                const calculatedColWidths = [];
+                const defaultWidth = 100 / cols;
+                for (let i = 0; i < cols; i += 1) {
+                    calculatedColWidths.push(defaultWidth);
+                }
+                // Example: cols = 3 -> calculatedColWidths = [33.33, 33.33, 33.33]
+                // --- STEP 2: Build the table content (rows, cells) ---
+                // We have to build the child nodes ourselves
+                const cellType = schema.nodes['tableCell'];
+                const headerType = schema.nodes['tableHeader'];
+                const rowType = schema.nodes['tableRow'];
+                const tableRows = [];
+                // Helper to create a single empty cell
+                const createEmptyCell = (type) => {
+                    const emptyParagraph = schema.nodes['paragraph'].create();
+                    return type.create(null, emptyParagraph);
+                };
+                // Create the rows
+                for (let r = 0; r < rows; r += 1) {
+                    const tableCells = [];
+                    for (let c = 0; c < cols; c += 1) {
+                        let cellNode;
+                        // If this is the first row and 'withHeaderRow' is set
+                        if (r === 0 && withHeaderRow) {
+                            cellNode = createEmptyCell(headerType);
+                        }
+                        else {
+                            cellNode = createEmptyCell(cellType);
+                        }
+                        tableCells.push(cellNode);
+                    }
+                    // Add the new row to the rows array
+                    tableRows.push(rowType.create(null, tableCells));
+                }
+                // --- STEP 3: Create the main Table node WITH the 'colwidths' ATTRIBUTE ---
+                const tableNode = schema.nodes['table'].create({
+                    // This is the key part: assign our percentage array here
+                    colwidths: calculatedColWidths,
+                }, tableRows // Content (the 'tableRow' nodes)
+                );
+                // --- STEP 4: Dispatch transaction (Original code)---
+                if (dispatch) {
+                    const offset = tr.selection.from + 1;
+                    tr.replaceSelectionWith(tableNode)
+                        .scrollIntoView()
+                        .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+                }
+                return true;
+            }, 
+            // 2. ADDCOLUMNAFTER COMMAND
+            addColumnAfter: () => ({ state, dispatch }) => {
+                const $cell = selectionCell(state);
+                if (!$cell)
+                    return false;
+                const table = $cell.node(-1);
+                const tablePos = $cell.start(-1) - 1;
+                const oldColWidths = table.attrs['colwidths'];
+                // Calculate column index
+                const map = TableMap.get(table);
+                const cellPosInTable = $cell.pos - $cell.start(-1);
+                const colIndex = map.colCount(cellPosInTable);
+                // Calculate new column widths - ensure no column goes below MIN_NEW_COL_WIDTH
+                const newColWidths = calculateColumnWidthsForNewColumn(oldColWidths);
+                // Insert new column width
+                newColWidths.splice(colIndex + 1, 0, MIN_NEW_COL_WIDTH);
+                if (dispatch) {
+                    // Use the prosemirror-tables function directly to add column
+                    // This modifies the transaction but doesn't dispatch it
+                    addColumnAfter(state, (modifiedTr) => {
+                        // Add our colwidth changes to the same transaction
+                        modifiedTr.setNodeMarkup(tablePos, null, Object.assign(Object.assign({}, table.attrs), { colwidths: newColWidths }));
+                        // Now dispatch the complete transaction
+                        dispatch(modifiedTr.scrollIntoView());
+                    });
+                }
+                return true;
+            }, 
+            // 3. ADDCOLUMNBEFORE COMMAND
+            addColumnBefore: () => ({ state, dispatch }) => {
+                const $cell = selectionCell(state);
+                if (!$cell)
+                    return false;
+                const table = $cell.node(-1);
+                const tablePos = $cell.start(-1) - 1;
+                const oldColWidths = table.attrs['colwidths'];
+                // Calculate column index
+                const map = TableMap.get(table);
+                const cellPosInTable = $cell.pos - $cell.start(-1);
+                const colIndex = map.colCount(cellPosInTable);
+                // Calculate new column widths - ensure no column goes below MIN_NEW_COL_WIDTH
+                const newColWidths = calculateColumnWidthsForNewColumn(oldColWidths);
+                // Insert new column width at current column index (before)
+                newColWidths.splice(colIndex, 0, MIN_NEW_COL_WIDTH);
+                if (dispatch) {
+                    addColumnBefore(state, (modifiedTr) => {
+                        modifiedTr.setNodeMarkup(tablePos, null, Object.assign(Object.assign({}, table.attrs), { colwidths: newColWidths }));
+                        dispatch(modifiedTr.scrollIntoView());
+                    });
+                }
+                return true;
+            }, 
+            // 4. DELETECOLUMN COMMAND
+            deleteColumn: () => ({ state, dispatch }) => {
+                const $cell = selectionCell(state);
+                if (!$cell)
+                    return false;
+                const table = $cell.node(-1);
+                const tablePos = $cell.start(-1) - 1;
+                const oldColWidths = table.attrs['colwidths'];
+                // Calculate column index
+                const map = TableMap.get(table);
+                const cellPosInTable = $cell.pos - $cell.start(-1);
+                const colIndex = map.colCount(cellPosInTable);
+                // Get width of column being removed
+                const removedWidth = oldColWidths[colIndex];
+                // Create array of remaining columns
+                const remainingWidths = oldColWidths.filter((_, i) => i !== colIndex);
+                // Distribute removed width among remaining columns
+                const gainPerCol = removedWidth / remainingWidths.length;
+                const newColWidths = remainingWidths.map((w) => w + gainPerCol);
+                if (dispatch) {
+                    deleteColumn(state, (modifiedTr) => {
+                        modifiedTr.setNodeMarkup(tablePos, null, Object.assign(Object.assign({}, table.attrs), { colwidths: newColWidths }));
+                        dispatch(modifiedTr.scrollIntoView());
+                    });
+                }
+                return true;
+            }, 
+            // Cell
+            setCellBorder: (border) => ({ chain, state }) => {
+                var _a;
+                if (!border)
+                    return chain()
+                        .focus()
+                        .updateAttributes('tableCell', { border: null })
+                        .updateAttributes('tableHeader', { border: null })
+                        .run();
+                // Get current border and merge with new values
+                const { selection } = state;
+                const { $from } = selection;
+                const cellPos = $from.node(-1);
+                const currentBorder = ((_a = cellPos === null || cellPos === void 0 ? void 0 : cellPos.attrs) === null || _a === void 0 ? void 0 : _a['border']) || {};
+                const mergedBorder = {
+                    style: border.style ? border.style : currentBorder.style || null,
+                    color: border.color ? border.color : currentBorder.color || null,
+                    width: border.width ? border.width : currentBorder.width || null,
+                };
+                return chain()
+                    .focus()
+                    .updateAttributes('tableCell', { border: mergedBorder })
+                    .updateAttributes('tableHeader', { border: mergedBorder })
+                    .run();
+            }, setCellVerticalAlign: (align) => ({ chain }) => {
+                return chain()
+                    .focus()
+                    .updateAttributes('tableCell', { verticalAlign: align !== null && align !== void 0 ? align : null })
+                    .updateAttributes('tableHeader', { verticalAlign: align !== null && align !== void 0 ? align : null })
+                    .run();
+            }, setCellTextAlign: (align) => ({ chain }) => {
+                return chain()
+                    .focus()
+                    .updateAttributes('tableCell', { textAlign: align !== null && align !== void 0 ? align : null })
+                    .updateAttributes('tableHeader', { textAlign: align !== null && align !== void 0 ? align : null })
+                    .run();
+            }, setCellBackgroundColor: (color) => ({ chain }) => {
+                // Set all cells to the same background color
+                return chain()
+                    .focus()
+                    .updateAttributes('tableCell', { backgroundColor: color !== null && color !== void 0 ? color : null })
+                    .updateAttributes('tableHeader', { backgroundColor: color !== null && color !== void 0 ? color : null })
+                    .run();
+            } });
+    },
+    addNodeView() {
+        const options = this.options;
+        if (options.enableNodeView === false) {
+            return null;
+        }
+        // Only use custom NodeView (with handle) when editor is editable
+        return ((props) => {
+            // Check if editor is editable
+            if (!props.editor.isEditable) {
+                // Return undefined to use default table rendering (no widget wrapper)
+                return undefined;
+            }
+            // Editor is editable → use custom NodeView with handle
+            return createTableNodeView(props);
+        });
+    },
+});
+// Convenience export for consumers who want the full set
+const StyledTableKit = Extension.create({
+    name: 'styledTableKit',
+    addExtensions() {
+        var _a;
+        const extensions = [];
+        if (this.options.table !== false) {
+            extensions.push(StyledTable.configure(Object.assign(Object.assign({}, this.options.table), { resizable: false })));
+        }
+        if (this.options.tableRow !== false) {
+            extensions.push(TableRow.configure(this.options.tableRow));
+        }
+        if (this.options.tableHeader !== false) {
+            extensions.push(StyledTableHeader.configure(this.options.tableHeader));
+        }
+        if (this.options.tableCell !== false) {
+            extensions.push(StyledTableCell.configure(this.options.tableCell));
+        }
+        if (((_a = this.options.table) === null || _a === void 0 ? void 0 : _a.resizable) !== false) {
+            extensions.push(PercentageColumnResizing);
+        }
+        return extensions;
+    },
+});
+
+const TextCase = Extension.create({
+    name: 'textCase',
+    addOptions() {
+        return {
+            type: 'uppercase',
+        };
+    },
+    addCommands() {
+        return {
+            textCase: (type) => ({ tr, state }) => {
+                const { $from, $to, empty } = tr.selection;
+                // If selection is empty, return false
+                if (empty)
+                    return false;
+                // If selection is not empty, get the text of the selection
+                const text = state.doc.textBetween($from.pos, $to.pos, '\n', '\n');
+                // If text is empty, return false
+                if (text.length === 0)
+                    return false;
+                let newText = text;
+                // Change the text case
+                switch (type) {
+                    case 'uppercase':
+                        newText = text.toUpperCase();
+                        break;
+                    case 'lowercase':
+                        newText = text.toLowerCase();
+                        break;
+                    case 'capitalize':
+                        newText = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+                        break;
+                }
+                tr.replaceWith($from.pos, $to.pos, state.schema.text(newText));
+                tr.setSelection(TextSelection.create(tr.doc, $from.pos, $from.pos + newText.length));
+                return true;
+            },
+        };
+    },
+});
+
+/**
+ * Dynamic Field Node Extension
+ *
+ * This extension creates atomic, non-editable inline nodes that represent
+ * dynamic fields (e.g., {{customer_name}}) in document templates.
+ * These fields can be programmatically replaced with actual data later.
+ */
+const DynamicField = Node.create({
+    name: 'dynamicField',
+    /**
+     * Node group configuration
+     * - 'inline': Makes the node behave as inline content
+     * - 'atom': true is critical for non-editable, atomic behavior
+     * - 'selectable': true allows users to select the entire node
+     * - 'draggable': false prevents users from dragging the node
+     */
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    draggable: false,
+    /**
+     * Define the attributes that this node can store
+     */
+    addAttributes() {
+        return {
+            fieldId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-field-id'),
+                renderHTML: (attributes) => {
+                    if (!attributes['fieldId'])
+                        return {};
+                    return {
+                        'data-field-id': attributes['fieldId'],
+                    };
+                },
+            },
+            label: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-label'),
+                renderHTML: (attributes) => {
+                    if (!attributes['label'])
+                        return {};
+                    return {
+                        'data-label': attributes['label'],
+                    };
+                },
+            },
+        };
+    },
+    /**
+     * Parse HTML to recognize dynamic field spans when loading/pasting content
+     */
+    parseHTML() {
+        return [
+            // ----------------------------------------------------------
+            // RULE 1: Standard Tiptap Format (Ưu tiên cao nhất)
+            // ----------------------------------------------------------
+            { tag: 'span[data-field-id]' },
+            // ----------------------------------------------------------
+            // RULE 2: Legacy CKEditor Format (Migration Layer)
+            // ----------------------------------------------------------
+            {
+                // Selector CSS để nhận diện node của CKEditor
+                tag: 'span.red-dynamic-field',
+                // Hàm này chạy khi Tiptap tìm thấy tag trên
+                getAttrs: (node) => {
+                    if (typeof node === 'string')
+                        return false;
+                    const element = node;
+                    // 1. Trích xuất ID từ nội dung text: "{{ref}}" -> "ref"
+                    const rawText = element.innerText || element.textContent || '';
+                    // Regex để xóa dấu {{ và }} và khoảng trắng thừa
+                    const id = rawText.replace(/{{|}}/g, '').trim();
+                    // 2. Trích xuất Label từ attribute cũ
+                    // CKEditor dùng 'value', 'dynamicfieldname' hoặc 'name'
+                    const label = element.getAttribute('value') ||
+                        element.getAttribute('dynamicfieldname') ||
+                        element.getAttribute('name') ||
+                        id; // Fallback nếu không tìm thấy label
+                    // Trả về object khớp với cấu trúc 'addAttributes' ở trên
+                    return {
+                        fieldId: id,
+                        label: label,
+                    };
+                },
+            },
+        ];
+    },
+    /**
+     * Render the node as HTML
+     * Creates a span element with Tailwind classes for styling
+     * and stores attributes in data-* attributes for robustness
+     */
+    renderHTML({ HTMLAttributes, node }) {
+        const { fieldId, label } = node.attrs;
+        return [
+            'span',
+            mergeAttributes(HTMLAttributes, {
+                class: 'dynamic-field red-dynamic-field',
+                'data-field-id': fieldId,
+                'data-label': label,
+            }),
+            // label || '',
+            fieldId ? `{{${fieldId}}}` : '',
+        ];
+    },
+    /**
+     * NODE VIEW: Đây là phần giúp hiển thị giao diện giống CKEditor Widget
+     * Thay vì render ra text thuần, ta render ra một DOM element được style sẵn
+     */
+    addNodeView() {
+        return ({ node }) => {
+            // 1. Tạo thẻ bao bọc (Wrapper)
+            const dom = document.createElement('span');
+            // 2. Thêm class để style (Dùng Tailwind như techstack của bạn )
+            // Bạn có thể thêm class 'ck-widget' nếu muốn dùng lại CSS cũ
+            dom.classList.add('dynamic-field', 'red-dynamic-field');
+            // 3. Gán dữ liệu label vào nội dung hiển thị
+            const { label, fieldId } = node.attrs;
+            dom.textContent = label || fieldId || 'Unknown Field';
+            return { dom };
+        };
+    },
+    /**
+     * Add custom commands for inserting dynamic fields
+     */
+    addCommands() {
+        return {
+            insertDynamicField: (attributes) => ({ chain }) => {
+                if (!attributes.fieldId || !attributes.label) {
+                    console.error('[DynamicField] Both fieldId and label are required.');
+                    return false;
+                }
+                return chain().insertContent({ type: this.name, attrs: attributes }).run();
+            },
+        };
+    },
+    /**
+     * Default options
+     */
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+});
+
+const NotumHeading = Heading.extend({
+    addCommands() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { removeHeading: () => ({ editor, chain }) => {
+                if (!editor.isActive('heading'))
+                    return false;
+                return chain().setParagraph().run();
+            } });
+    },
+});
+
+/**
+ * `image-ref` — a semantic, URL-free reference to a media asset.
+ *
+ * Renders a `<figure data-block="image-ref" data-image-id="…">` (with an optional
+ * `<figcaption>`), decoupling document content from the resolved image URL. The
+ * consumer hydrates the figure by attribute (`data-image-id`) at render time —
+ * the document itself never embeds a URL or any presentation. In the editor the
+ * node shows a placeholder (it has no URL to display); resolving and showing the
+ * real image is the consumer's / media-picker's job.
+ */
+const ImageRef = Node.create({
+    name: 'imageRef',
+    group: 'block',
+    atom: true,
+    selectable: true,
+    draggable: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    addAttributes() {
+        return {
+            imageId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-image-id'),
+                renderHTML: (attributes) => {
+                    if (!attributes['imageId'])
+                        return {};
+                    return { 'data-image-id': attributes['imageId'] };
+                },
+            },
+            caption: {
+                default: null,
+                // Caption is rendered as <figcaption> text content (below), not a data
+                // attribute — so parse it back from the figcaption child for round-trip.
+                parseHTML: (element) => {
+                    var _a;
+                    const figcaption = element.querySelector(':scope > figcaption');
+                    return ((_a = figcaption === null || figcaption === void 0 ? void 0 : figcaption.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || null;
+                },
+                renderHTML: () => ({}),
+            },
+            captionPosition: {
+                default: null,
+                // Normalize to the typed union: absent attribute stays `null` (preserves
+                // the byte-identical round-trip), any present-but-unknown value coerces to
+                // `'bottom'` so a non-`'top' | 'bottom'` string can never leak through.
+                parseHTML: (element) => {
+                    const raw = element.getAttribute('data-caption-position');
+                    if (raw === null)
+                        return null;
+                    return raw === 'top' ? 'top' : 'bottom';
+                },
+                renderHTML: (attributes) => {
+                    if (!attributes['captionPosition'])
+                        return {};
+                    return { 'data-caption-position': attributes['captionPosition'] };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'figure[data-block="image-ref"]' }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        const { caption } = node.attrs;
+        const figure = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+            'data-block': 'image-ref',
+        });
+        // No <img> is emitted — the asset is URL-free. The caption order relative to
+        // the (not-yet-resolved) image is carried by `data-caption-position` for the
+        // consumer to honor at hydration time; the figure itself just holds the text.
+        if (!caption) {
+            return ['figure', figure];
+        }
+        const figcaption = ['figcaption', {}, caption];
+        return ['figure', figure, figcaption];
+    },
+    /**
+     * Editor-only placeholder. The DOM here is chrome (never serialized — that is
+     * `renderHTML`'s job); it just shows which media the block references.
+     */
+    addNodeView() {
+        return ({ node }) => {
+            const { imageId, caption, captionPosition } = node.attrs;
+            const dom = document.createElement('figure');
+            dom.classList.add('image-ref-placeholder');
+            dom.setAttribute('data-block', 'image-ref');
+            if (imageId)
+                dom.setAttribute('data-image-id', imageId);
+            if (captionPosition)
+                dom.setAttribute('data-caption-position', captionPosition);
+            dom.style.cssText = 'margin:1rem 0;display:flex;flex-direction:column;gap:.5rem;';
+            const box = document.createElement('div');
+            box.style.cssText =
+                'display:flex;align-items:center;gap:.5rem;padding:1rem;border:1px dashed currentColor;' +
+                    'border-radius:.5rem;opacity:.65;font-size:.875rem;justify-content:center;';
+            box.textContent = `🖼  image-ref · id: ${imageId || '—'}`;
+            const figcaption = document.createElement('figcaption');
+            figcaption.style.cssText = 'font-size:.8125rem;opacity:.7;text-align:center;';
+            if (caption)
+                figcaption.textContent = caption;
+            if (caption && captionPosition === 'top') {
+                dom.append(figcaption, box);
+            }
+            else {
+                dom.append(box);
+                if (caption)
+                    dom.append(figcaption);
+            }
+            return { dom };
+        };
+    },
+    addCommands() {
+        return {
+            insertImageRef: (attributes) => ({ chain }) => {
+                if (!attributes.imageId) {
+                    console.error('[ImageRef] imageId is required.');
+                    return false;
+                }
+                return chain().insertContent({ type: this.name, attrs: attributes }).run();
+            },
+        };
+    },
+});
+
+const PageBreak = Node.create({
+    name: 'pageBreak',
+    group: 'block',
+    atom: true,
+    selectable: true,
+    // addNodeView() {
+    //   return createPageBreakNodeView;
+    // },
+    parseHTML() {
+        return [
+            // ----------------------------------------------------------
+            // RULE 1: Standard Tiptap Format (Ưu tiên cao nhất)
+            // ----------------------------------------------------------
+            { tag: 'div[data-page-break]' },
+            // ----------------------------------------------------------
+            // RULE 2: CKEditor Format (Ưu tiên thấp nhất)
+            // ----------------------------------------------------------
+            { tag: 'div.page-break' },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, {
+                'data-page-break': 'true',
+                class: 'document-engine-page-break',
+                style: 'break-before: page; page-break-before: always;',
+            }),
+            ['span', { class: 'document-engine-page-break-label' }, 'Page break'],
+        ];
+    },
+    addCommands() {
+        return {
+            insertPageBreak: () => ({ chain }) => {
+                return chain().insertContent({ type: this.name }).run();
+            },
+        };
+    },
+});
+
+/**
+ * Canonical default extension list for headless (Node-safe) serialization.
+ *
+ * This is the schema half of the editor's runtime kit (`DocumentEngineKit` in
+ * the Angular wrapper): every node, mark, and HTML-affecting attribute the
+ * editor can persist, so {@link generateHTML} can turn stored document JSON back
+ * into HTML without a browser.
+ *
+ * It deliberately omits editing-only plugins (history/undo-redo, drop/gap
+ * cursors, placeholder, character count, list keymaps, trailing node). Those
+ * shape the live editing experience but contribute nothing to serialized
+ * output, and some attach view-level behavior that has no meaning headless.
+ *
+ * Only `renderHTML` is exercised during serialization — node views (which touch
+ * the DOM, e.g. `DynamicField.addNodeView`) are never invoked here, so this list
+ * is safe to import and run in Node.
+ *
+ * Callers needing a different schema (e.g. restricted-editing regions, or a
+ * trimmed set) should pass their own array to {@link generateHTML} instead.
+ */
+const defaultExtensions = [
+    // Structure
+    Document,
+    Paragraph,
+    Text,
+    NotumHeading,
+    HardBreak,
+    HorizontalRule,
+    Blockquote,
+    CodeBlock,
+    // Lists
+    BulletList,
+    ListItem,
+    CustomOrderedList,
+    // Marks
+    Bold,
+    Italic,
+    Underline,
+    Strike,
+    Code,
+    Link,
+    Subscript,
+    Superscript,
+    TextStyleKit,
+    // Block-level alignment (emits `text-align` only when explicitly set).
+    // NOTE: `Indent` is intentionally excluded — its `renderHTML` emits an empty
+    // `style=""` on every block even when unset, which pollutes otherwise-semantic
+    // output. Consumers that persist indentation can pass a custom extension array.
+    TextAlign.configure({ types: ['paragraph', 'heading'] }),
+    // Content nodes
+    Image,
+    ImageRef,
+    PageBreak,
+    DynamicField,
+    // Tables (table / row / header / cell nodes)
+    StyledTableKit,
+];
+
+/**
+ * Serialize a Tiptap/ProseMirror document (JSON) to an HTML string.
+ *
+ * Environment-aware and Node-safe. Tiptap ships two serializers and the wrong
+ * one throws:
+ * - `@tiptap/html` needs a real `document` (browser / jsdom).
+ * - `@tiptap/html/server` is backed by happy-dom and runs headlessly in Node.
+ *
+ * The serializer is chosen at call time from whether a DOM is present, and
+ * imported lazily — so the heavy happy-dom build is never pulled into a browser
+ * editor bundle that only ever edits (and never serializes server-side), and
+ * Node backends never touch the browser-only build. This is why the function is
+ * async.
+ *
+ * @param doc        The document as ProseMirror JSON (a `doc` node).
+ * @param extensions Schema to serialize against. Defaults to
+ *                   {@link defaultExtensions} (the editor's canonical kit). Pass
+ *                   a custom array when your documents use a different schema.
+ * @returns Semantic HTML. Presentation styling and sanitization (e.g. DOMPurify)
+ *          are the consumer's responsibility — this helper does neither.
+ */
+function generateHTML(doc_1) {
+    return __awaiter(this, arguments, void 0, function* (doc, extensions = defaultExtensions) {
+        if (typeof document !== 'undefined') {
+            // browser / jsdom: uses the ambient DOM
+            const serializer = yield import('@tiptap/html');
+            return serializer.generateHTML(doc, extensions);
+        }
+        // Node: happy-dom backed, no real DOM needed. The specifier is built at runtime
+        // (not a static string literal) and flagged for webpack/vite so browser
+        // bundlers (esbuild/webpack/vite) can't statically resolve it and therefore
+        // never pull happy-dom — and its Node built-ins — into a client bundle. The
+        // `typeof document` guard means this branch never executes in a browser anyway.
+        const serverEntry = ['@tiptap', 'html', 'server'].join('/');
+        const serializer = yield import(/* webpackIgnore: true */ /* @vite-ignore */ serverEntry);
+        return serializer.generateHTML(doc, extensions);
+    });
+}
+
+/**
+ * The current schema version. `EditorDocument`s authored by this build of the
+ * editor carry this value, and {@link migrateDoc} upgrades older documents up to
+ * it.
+ *
+ * Bump this by exactly one whenever a schema change requires transforming stored
+ * content, and add the matching entry (keyed by the previous version) to
+ * {@link docMigrations}.
+ */
+const LATEST_SCHEMA_VERSION = 1;
+/**
+ * Ordered migration steps, keyed by the source version they upgrade from.
+ *
+ * v0.1.0 ships an identity (empty) set: there is nothing to migrate yet, but the
+ * registry, walker ({@link migrateDoc}), and version field exist so future
+ * schema bumps are non-breaking. To add one, e.g. for the 1 -> 2 bump:
+ *
+ * ```ts
+ * export const docMigrations: DocMigrationRegistry = {
+ *   1: (doc) => ({ schemaVersion: 2, content: transformV1ToV2(doc.content) }),
+ * };
+ * ```
+ *
+ * Each entry must be pure (no mutation, no browser APIs).
+ */
+const docMigrations = {};
+
+/**
+ * Upgrade a stored document to {@link LATEST_SCHEMA_VERSION} by applying each
+ * registered migration in order.
+ *
+ * Pure and idempotent: a document already at the latest version is returned
+ * unchanged (a re-stamped copy), so batch runs are safe to re-run. A document
+ * with a missing/invalid `schemaVersion` is treated as version 1 (the earliest).
+ *
+ * @param doc        The document to migrate.
+ * @param migrations Registry to apply. Defaults to {@link docMigrations}; the
+ *                   override exists for testing the walker in isolation.
+ * @param latest     Target version. Defaults to {@link LATEST_SCHEMA_VERSION}.
+ * @returns A new `EditorDocument` at `latest`.
+ */
+function migrateDoc(doc, migrations = docMigrations, latest = LATEST_SCHEMA_VERSION) {
+    let current = Object.assign(Object.assign({}, doc), { schemaVersion: Number.isInteger(doc.schemaVersion) && doc.schemaVersion >= 1 ? doc.schemaVersion : 1 });
+    while (current.schemaVersion < latest) {
+        const migrate = migrations[current.schemaVersion];
+        if (!migrate) {
+            throw new Error(`[migrateDoc] No migration registered for schema version ${current.schemaVersion} ` +
+                `(target ${latest}).`);
+        }
+        const next = migrate(current);
+        if (next.schemaVersion <= current.schemaVersion) {
+            throw new Error(`[migrateDoc] Migration from version ${current.schemaVersion} did not advance the ` +
+                `version (got ${next.schemaVersion}); migrations must be strictly increasing.`);
+        }
+        current = next;
+    }
+    return current;
+}
+
+class Color {
+    constructor(value, name, type) {
+        const normalizedColor = normalizeColor(value);
+        if (!normalizedColor) {
+            throw new Error('Invalid or unsupported color.');
+        }
+        this.value = normalizedColor;
+        this.name = name !== null && name !== void 0 ? name : normalizedColor;
+        this.type = type;
+        Object.freeze(this);
+    }
+    static from(value, name, type) {
+        return new Color(value, name, type);
+    }
+    static fromArray(colors) {
+        return colors.map((color) => {
+            if (typeof color === 'string') {
+                return new Color(color);
+            }
+            return new Color(color.value, color.name, color.type);
+        });
+    }
+    equals(color) {
+        return this.value === color.value;
+    }
+    is(color) {
+        return this.value === normalizeColor(color);
+    }
+}
+
+export { ClearContent, Color, CustomOrderedList, DynamicField, EditableRegion, HandleNodeView, INDENT_DEFAULT, ImageRef, Indent, LATEST_SCHEMA_VERSION, NotumHeading, PageBreak, PageBreakNodeView, ResetFormat, ResetOnEnter, RestrictedEditing, StyledTable, StyledTableCell, StyledTableHeader, StyledTableKit, TableDefaultAttributes, TableNodeView, TextCase, createPageBreakNodeView, createTableNodeView, defaultExtensions, docMigrations, generateHTML, getActiveMarkRange, getClosestDomElement, getCombinedCellAttributeValue, getCursorCellInfo, getSelectedCells, getSelectedText, getTableDOMFromView, migrateDoc, normalizeColor };