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

package/src/nodes/dynamic-field.node.d.ts

@@ -0,0 +1,49 @@
+import { Node } from '@tiptap/core';
+/**
+ * Interface for Dynamic Field node attributes
+ */
+export interface DynamicFieldAttributes {
+    fieldId: string;
+    label: string;
+}
+/**
+ * Interface for Dynamic Field item
+ */
+export interface DynamicFieldItem {
+    id: string;
+    label: string;
+    description?: string;
+}
+/**
+ * Interface for Dynamic Field category
+ */
+export interface DynamicFieldCategory {
+    key: string;
+    label: string;
+    description?: string;
+    fields: DynamicFieldItem[];
+}
+/**
+ * Interface for Dynamic Field options
+ */
+export interface DynamicFieldOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+/**
+ * TypeScript declaration for the insertDynamicField command
+ */
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        dynamicField: {
+            insertDynamicField: (attributes: DynamicFieldAttributes) => ReturnType;
+        };
+    }
+}
+/**
+ * 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.
+ */
+export declare const DynamicField: Node<DynamicFieldOptions, any>;

package/src/nodes/dynamic-field.node.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DynamicField", {
+    enumerable: true,
+    get: function() {
+        return DynamicField;
+    }
+});
+const _core = require("@tiptap/core");
+const DynamicField = _core.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 [
+            {
+                tag: 'span[data-field-id]'
+            }
+        ];
+    },
+    /**
+   * 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',
+            (0, _core.mergeAttributes)(HTMLAttributes, {
+                class: 'dynamic-field',
+                'data-field-id': fieldId,
+                'data-label': label
+            }),
+            label || ''
+        ];
+    },
+    /**
+   * 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: {}
+        };
+    }
+});

package/src/nodes/heading.node.d.ts

@@ -0,0 +1,8 @@
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        removeHeading: {
+            removeHeading: () => ReturnType;
+        };
+    }
+}
+export declare const NotumHeading: import("@tiptap/core").Node<import("@tiptap/extension-heading").HeadingOptions, any>;

package/src/nodes/heading.node.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NotumHeading", {
+    enumerable: true,
+    get: function() {
+        return NotumHeading;
+    }
+});
+const _extensionheading = require("@tiptap/extension-heading");
+require("@tiptap/extension-paragraph");
+const NotumHeading = _extensionheading.Heading.extend({
+    addCommands () {
+        return {
+            ...this.parent?.(),
+            removeHeading: ()=>({ editor, chain })=>{
+                    if (!editor.isActive('heading')) return false;
+                    return chain().setParagraph().run();
+                }
+        };
+    }
+});

package/src/nodes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './heading.node';
+export * from './dynamic-field.node';
+export * from './page-break.node';

package/src/nodes/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./heading.node"), exports);
+_export_star(require("./dynamic-field.node"), exports);
+_export_star(require("./page-break.node"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/src/nodes/page-break.node.d.ts

@@ -0,0 +1,9 @@
+import { Node } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        pageBreak: {
+            insertPageBreak: () => ReturnType;
+        };
+    }
+}
+export declare const PageBreak: Node<any, any>;

package/src/nodes/page-break.node.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PageBreak", {
+    enumerable: true,
+    get: function() {
+        return PageBreak;
+    }
+});
+const _core = require("@tiptap/core");
+const PageBreak = _core.Node.create({
+    name: 'pageBreak',
+    group: 'block',
+    atom: true,
+    selectable: true,
+    parseHTML () {
+        return [
+            {
+                tag: 'div[data-page-break]'
+            }
+        ];
+    },
+    renderHTML ({ HTMLAttributes }) {
+        return [
+            'div',
+            (0, _core.mergeAttributes)(HTMLAttributes, {
+                'data-page-break': 'true',
+                class: 'document-engine-page-break',
+                style: 'break-before: page;'
+            }),
+            [
+                'span',
+                {
+                    class: 'document-engine-page-break-label'
+                },
+                'Page break'
+            ]
+        ];
+    },
+    addCommands () {
+        return {
+            insertPageBreak: ()=>({ chain })=>{
+                    return chain().insertContent({
+                        type: this.name
+                    }).run();
+                }
+        };
+    }
+});

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ordered-list.type';
+export * from './text-case.type';

package/src/types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./ordered-list.type"), exports);
+_export_star(require("./text-case.type"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/src/types/ordered-list.type.d.ts

@@ -0,0 +1 @@
+export type ListStyleType = 'decimal' | 'lower-alpha-dot' | 'lower-alpha-parens' | 'lower-roman-parens';

package/src/types/ordered-list.type.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/src/types/text-case.type.d.ts

@@ -0,0 +1 @@
+export type TextCaseType = 'uppercase' | 'lowercase' | 'capitalize';

package/src/types/text-case.type.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/src/utils/color.util.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+export declare function normalizeColor(color: string): string | null;

package/src/utils/color.util.js

@@ -0,0 +1,41 @@
+/**
+ * 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
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "normalizeColor", {
+    enumerable: true,
+    get: function() {
+        return normalizeColor;
+    }
+});
+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;
+}

package/src/utils/dom.util.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from '@tiptap/core';
+export declare function getClosestDomElement(editor: Editor, selector: string): HTMLElement | null;

package/src/utils/dom.util.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getClosestDomElement", {
+    enumerable: true,
+    get: function() {
+        return getClosestDomElement;
+    }
+});
+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;
+}

package/src/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color.util';
+export * from './dom.util';
+export * from './table.util';
+export * from './text.util';

package/src/utils/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./color.util"), exports);
+_export_star(require("./dom.util"), exports);
+_export_star(require("./table.util"), exports);
+_export_star(require("./text.util"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/src/utils/table.util.d.ts

@@ -0,0 +1,36 @@
+import { Node as PMNode } from '@tiptap/pm/model';
+import { EditorState } from '@tiptap/pm/state';
+import { TableMap } from '@tiptap/pm/tables';
+import { EditorView } from '@tiptap/pm/view';
+export declare function getCursorCellInfo(state: EditorState): {
+    rowIndex: number;
+    colIndex: number;
+    cellIndex: number;
+    tableStart: number;
+    tableNode: PMNode;
+    map: TableMap;
+} | null;
+/**
+ * Lấy tất cả các node cell (tableCell, tableHeader) trong vùng chọn hiện tại.
+ */
+interface SelectedCell {
+    pos: number;
+    node: PMNode;
+}
+export declare function getSelectedCells(state: EditorState): SelectedCell[];
+/**
+ * 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.
+ */
+export declare function getCombinedCellAttributeValue(cells: SelectedCell[], attributeName: string, fallbackValue?: unknown): unknown;
+/**
+ * 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
+ */
+export declare function getTableDOMFromView(view: EditorView, tablePos: number): HTMLTableElement | null;
+export {};

package/src/utils/table.util.js

@@ -0,0 +1,103 @@
+"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, {
+    getCombinedCellAttributeValue: function() {
+        return getCombinedCellAttributeValue;
+    },
+    getCursorCellInfo: function() {
+        return getCursorCellInfo;
+    },
+    getSelectedCells: function() {
+        return getSelectedCells;
+    },
+    getTableDOMFromView: function() {
+        return getTableDOMFromView;
+    }
+});
+const _tables = require("@tiptap/pm/tables");
+const _lodashes = require("lodash-es");
+function getCursorCellInfo(state) {
+    // 1. Dùng selectionCell để tìm vị trí bắt đầu của ô chứa con trỏ
+    const cellInfo = (0, _tables.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 = (0, _tables.findTable)(cellInfo);
+    if (!table) return null;
+    const map = _tables.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
+    };
+}
+function getSelectedCells(state) {
+    const { selection } = state;
+    const cells = [];
+    // Trường hợp chọn nhiều ô
+    if (selection instanceof _tables.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;
+}
+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 (!(0, _lodashes.isEqual)(currentValue, firstValue)) return undefined;
+    }
+    return firstValue;
+}
+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;
+}

package/src/utils/text.util.d.ts

@@ -0,0 +1,9 @@
+import { Editor, MarkRange } from '@tiptap/core';
+export declare function getSelectedText(editor: Editor): string | null;
+/**
+ * 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.
+ */
+export declare function getActiveMarkRange(editor: Editor, markName: string): MarkRange | null;

package/src/utils/text.util.js

@@ -0,0 +1,59 @@
+"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, {
+    getActiveMarkRange: function() {
+        return getActiveMarkRange;
+    },
+    getSelectedText: function() {
+        return getSelectedText;
+    }
+});
+const _state = require("@tiptap/pm/state");
+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 _state.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
+}
+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
+    };
+}