@phuong-tran-redoc/document-engine-core 0.0.12

package/src/extensions/restricted-editing.extension.js

@@ -0,0 +1,384 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EditableRegion: function() {
+        return EditableRegion;
+    },
+    RestrictedEditing: function() {
+        return RestrictedEditing;
+    }
+});
+const _core = require("@tiptap/core");
+const _state = require("@tiptap/pm/state");
+const EditableRegion = _core.Node.create({
+    name: 'editableRegion',
+    group: 'inline',
+    inline: true,
+    content: 'text*',
+    selectable: false,
+    parseHTML () {
+        return [
+            {
+                tag: 'span[data-editable-region]'
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes }) {
+        return [
+            'span',
+            (0, _core.mergeAttributes)(HTMLAttributes, {
+                'data-editable-region': 'true',
+                class: 'editable-region'
+            }),
+            0
+        ];
+    }
+});
+const RestrictedEditing = _core.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?.(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?.(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?.(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?.(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?.(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?.(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 () {
+        const key = new _state.PluginKey('restricted-editing');
+        const editor = this.editor;
+        const editableRegionNodeName = this.options.editableRegionNodeName;
+        const disabledNodeTypes = this.options.disabledNodeTypes ?? [];
+        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 _state.Plugin({
+                key,
+                filterTransaction: (tr, state)=>{
+                    // In standard mode, do not restrict edits
+                    if (this.storage.mode === 'standard') return true;
+                    if (!tr.docChanged) return true;
+                    if (tr.getMeta('restrictedEditing')?.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 = step?.toJSON?.().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)=>{
+                        if (node.type === type) {
+                            const contentText = node.textContent ?? '';
+                            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;
+                }
+            })
+        ];
+    }
+});

package/src/extensions/table-resizing.extension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Extension PercentageColumnResizing
+ * * Thay thế logic resize cột mặc định bằng logic dựa trên %.
+ */
+export declare const PercentageColumnResizing: Extension<any, any>;

package/src/extensions/table-resizing.extension.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PercentageColumnResizing", {
+    enumerable: true,
+    get: function() {
+        return PercentageColumnResizing;
+    }
+});
+const _core = require("@tiptap/core");
+const _state = require("@tiptap/pm/state");
+const _tables = require("@tiptap/pm/tables");
+const _view = require("@tiptap/pm/view");
+const _utils = require("../utils");
+/**
+ * Hàm xử lý khi di chuột (kéo)
+ */ function handleMouseMoveEvent(event, dragInfo) {
+    if (!dragInfo.isDragging) return;
+    event.preventDefault();
+    const { startX, tableWidthPx, initialLeftWidth, initialRightWidth, leftColIndex, tablePos, tableNode, view } = dragInfo;
+    // 1. Tính toán delta (pixel)
+    const deltaX = event.clientX - startX;
+    // 2. Chuyển delta pixel sang delta percentage
+    // Đây là logic quan trọng nhất
+    const deltaPercent = deltaX / tableWidthPx * 100;
+    // 3. Tính toán width mới
+    let newLeftWidth = initialLeftWidth + deltaPercent;
+    let newRightWidth = initialRightWidth - deltaPercent;
+    // 4. Áp dụng ràng buộc (ví dụ: min-width 5%)
+    const minWidth = 5; // Cấu hình min-width
+    if (newLeftWidth < minWidth) {
+        const diff = minWidth - newLeftWidth;
+        newLeftWidth = minWidth;
+        newRightWidth = newRightWidth - diff; // Cột phải bù phần bị thiếu
+    } else if (newRightWidth < minWidth) {
+        const diff = minWidth - newRightWidth;
+        newRightWidth = minWidth;
+        newLeftWidth = newLeftWidth - diff; // Cột trái bù phần bị thiếu
+    }
+    // Đảm bảo không có cột nào bị âm (nếu kéo quá nhanh)
+    if (newLeftWidth < 0) newLeftWidth = 0;
+    if (newRightWidth < 0) newRightWidth = 0;
+    // 5. Tạo mảng colwidths mới
+    const newColWidths = [
+        ...tableNode?.attrs?.['colwidths']
+    ];
+    newColWidths[leftColIndex] = newLeftWidth;
+    newColWidths[leftColIndex + 1] = newRightWidth;
+    // 6. Dispatch transaction để cập nhật state
+    if (tableNode && view) {
+        const tr = view.state.tr.setNodeMarkup(tablePos, null, {
+            ...tableNode.attrs,
+            colwidths: newColWidths
+        });
+        // Dùng dispatchTransaction để Tiptap/ProseMirror tự cập nhật UI
+        view.dispatch(tr);
+    }
+}
+/**
+ * Hàm xử lý khi nhả chuột (kết thúc kéo)
+ */ function handleMouseUpEvent(event, dragInfo) {
+    if (!dragInfo.isDragging) return;
+    event.preventDefault();
+    // Reset trạng thái
+    dragInfo = {
+        isDragging: false,
+        startX: 0,
+        tablePos: -1,
+        tableNode: null,
+        tableWidthPx: 0,
+        leftColIndex: -1,
+        initialLeftWidth: 0,
+        initialRightWidth: 0,
+        view: null
+    };
+}
+const PercentageColumnResizing = _core.Extension.create({
+    name: 'percentageColumnResizing',
+    addProseMirrorPlugins () {
+        // Một đối tượng tạm thời để lưu trữ trạng thái kéo-thả
+        // Chúng ta không dùng Plugin State vì nó không cần thiết phải "undo"
+        let dragInfo = {
+            isDragging: false,
+            startX: 0,
+            tablePos: -1,
+            tableNode: null,
+            tableWidthPx: 0,
+            leftColIndex: -1,
+            initialLeftWidth: 0,
+            initialRightWidth: 0,
+            view: null
+        };
+        const editorInstance = this.editor;
+        return [
+            new _state.Plugin({
+                key: new _state.PluginKey('percentageColumnResizing'),
+                props: {
+                    /**
+           * Vẽ các resize handles vào DOM
+           */ decorations (state) {
+                        if (!editorInstance?.isEditable) return;
+                        const decorations = [];
+                        const { doc } = state;
+                        const tableTypes = (0, _tables.tableNodeTypes)(state.schema);
+                        // Duyệt qua tất cả node trong document
+                        doc.descendants((node, pos)=>{
+                            if (node.type.name !== tableTypes.table.name) return;
+                            const colwidths = node.attrs['colwidths'];
+                            if (!colwidths || colwidths.length === 0) return;
+                            let accumulatedWidth = 0;
+                            // Tạo handle cho N-1 cột (không cần cho cột cuối)
+                            for(let i = 0; i < colwidths.length - 1; i++){
+                                accumulatedWidth += colwidths[i] ?? 0;
+                                // Tạo một widget 'div' để làm handle
+                                const handle = document.createElement('div');
+                                handle.className = 'pm-col-resizer';
+                                handle.style.left = `calc(${accumulatedWidth}% - 2px)`;
+                                // Lưu vị trí cột để biết đang resize cột nào
+                                handle.setAttribute('data-col-index', i.toString());
+                                handle.setAttribute('data-table-pos', pos.toString());
+                                // Đặt widget ngay sau thẻ <table> (pos + 1)
+                                decorations.push(_view.Decoration.widget(pos + 1, handle));
+                            }
+                        });
+                        return _view.DecorationSet.create(doc, decorations);
+                    },
+                    /**
+           * Xử lý sự kiện mousedown trên handle
+           */ handleDOMEvents: {
+                        mousedown (view, event) {
+                            const target = event.target;
+                            // Chỉ kích hoạt khi click vào handle
+                            if (!target.classList.contains('pm-col-resizer')) return false;
+                            event.preventDefault();
+                            const colIndex = parseInt(target.getAttribute('data-col-index') ?? '0', 10);
+                            const tablePos = parseInt(target.getAttribute('data-table-pos') ?? '0', 10);
+                            const tableNode = view.state.doc.nodeAt(tablePos);
+                            const colwidths = tableNode?.attrs['colwidths'];
+                            if (!tableNode || !colwidths) return false;
+                            // Get table DOM element (handles NodeView wrappers and nested tables)
+                            const tableDOM = (0, _utils.getTableDOMFromView)(view, tablePos);
+                            if (!tableDOM) return false;
+                            // Lưu thông tin cần thiết cho việc kéo
+                            dragInfo = {
+                                isDragging: true,
+                                startX: event.clientX,
+                                tablePos: tablePos,
+                                tableNode: tableNode,
+                                tableWidthPx: tableDOM.offsetWidth,
+                                leftColIndex: colIndex,
+                                initialLeftWidth: colwidths[colIndex],
+                                initialRightWidth: colwidths[colIndex + 1],
+                                view: view
+                            };
+                            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; // Đã xử lý event
+                        }
+                    }
+                }
+            })
+        ];
+    }
+});

package/src/extensions/table-style.extension.d.ts

@@ -0,0 +1,41 @@
+import { Extension, Node } from '@tiptap/core';
+import { TableKitOptions, TableOptions } from '@tiptap/extension-table';
+export declare const MIN_NEW_COL_WIDTH = 5;
+export declare const TableDefaultAttributes: {
+    border: {
+        style: string;
+        color: string;
+        width: string;
+    };
+    backgroundColor: null;
+    colwidths: null;
+    cellBorder: {
+        style: string;
+        color: string;
+        width: string;
+    };
+    cellBackgroundColor: null;
+    cellVerticalAlign: string;
+    cellTextAlign: null;
+};
+export type TableBorder = {
+    style?: string | null;
+    color?: string | null;
+    width?: string | null;
+} | null | undefined;
+export declare const StyledTableCell: Node<import("@tiptap/extension-table").TableCellOptions, any>;
+export declare const StyledTableHeader: Node<import("@tiptap/extension-table").TableHeaderOptions, any>;
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tableStyles: {
+            setCellBorder: (border: TableBorder) => ReturnType;
+            setCellBackgroundColor: (color: string | null) => ReturnType;
+            setCellVerticalAlign: (align: 'top' | 'middle' | 'bottom' | null) => ReturnType;
+            setCellTextAlign: (align: 'left' | 'center' | 'right' | 'justify' | null) => ReturnType;
+            setTableBorder: (border: TableBorder) => ReturnType;
+            setTableBackgroundColor: (color: string | null) => ReturnType;
+        };
+    }
+}
+export declare const StyledTable: Node<TableOptions, any>;
+export declare const StyledTableKit: Extension<TableKitOptions, any>;