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

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

@@ -0,0 +1,499 @@
+"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, {
+    MIN_NEW_COL_WIDTH: function() {
+        return MIN_NEW_COL_WIDTH;
+    },
+    StyledTable: function() {
+        return StyledTable;
+    },
+    StyledTableCell: function() {
+        return StyledTableCell;
+    },
+    StyledTableHeader: function() {
+        return StyledTableHeader;
+    },
+    StyledTableKit: function() {
+        return StyledTableKit;
+    },
+    TableDefaultAttributes: function() {
+        return TableDefaultAttributes;
+    }
+});
+const _core = require("@tiptap/core");
+const _extensiontable = require("@tiptap/extension-table");
+const _state = require("@tiptap/pm/state");
+const _tables = require("@tiptap/pm/tables");
+const _utils = require("../utils");
+const _views = require("../views");
+const _tableresizingextension = require("./table-resizing.extension");
+const MIN_NEW_COL_WIDTH = 5.0;
+/**
+ * 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,
+    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 = _extensiontable.TableCell.extend({
+    addAttributes () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            ...commonCellAttributes
+        };
+    }
+});
+const StyledTableHeader = _extensiontable.TableHeader.extend({
+    addAttributes () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            ...commonCellAttributes
+        };
+    }
+});
+const StyledTable = _extensiontable.Table.extend({
+    // name: 'styledTable',
+    // draggable: true,
+    addAttributes () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...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 {}; // Không có gì để 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 }) {
+        const colwidths = node.attrs?.['colwidths'];
+        const domNodes = [];
+        // Render <colgroup> nếu có colwidths
+        if (colwidths) {
+            const colgroup = [
+                'colgroup',
+                {}
+            ];
+            colwidths.forEach((width)=>{
+                colgroup.push([
+                    'col',
+                    {
+                        style: width ? `width: ${width}%` : null
+                    }
+                ]);
+            });
+            domNodes.push(colgroup);
+        }
+        // Thêm <tbody> (0 là 'content hole')
+        domNodes.push([
+            'tbody',
+            0
+        ]);
+        // Merge các HTML attributes (bao gồm cả global attributes)
+        // HTMLAttributes đã được Tiptap merge sẵn từ getRenderedAttributes
+        return [
+            'table',
+            HTMLAttributes,
+            ...domNodes
+        ];
+    },
+    addCommands () {
+        const parent = this.parent?.() ?? {};
+        return {
+            ...parent,
+            // Table
+            setTableBorder: (border)=>({ chain, state })=>{
+                    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 = (0, _utils.getCursorCellInfo)(state);
+                    if (!cellInfo) return false;
+                    const currentBorder = cellInfo?.tableNode?.attrs?.['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
+                    }).run();
+                },
+            insertTable: ({ rows, cols, withHeaderRow })=>({ tr, dispatch, editor })=>{
+                    const { schema } = editor.state;
+                    // --- BƯỚC 1: Tính toán colWidths ---
+                    const calculatedColWidths = [];
+                    const defaultWidth = 100 / cols;
+                    for(let i = 0; i < cols; i += 1){
+                        calculatedColWidths.push(defaultWidth);
+                    }
+                    // Ví dụ: cols = 3 -> calculatedColWidths = [33.33, 33.33, 33.33]
+                    // --- BƯỚC 2: Tạo nội dung bảng (rows, cells) ---
+                    // Chúng ta phải tự xây dựng các node con
+                    const cellType = schema.nodes['tableCell'];
+                    const headerType = schema.nodes['tableHeader'];
+                    const rowType = schema.nodes['tableRow'];
+                    const tableRows = [];
+                    // Hàm trợ giúp tạo 1 cell rỗng
+                    const createEmptyCell = (type)=>{
+                        const emptyParagraph = schema.nodes['paragraph'].create();
+                        return type.create(null, emptyParagraph);
+                    };
+                    // Tạo các hàng
+                    for(let r = 0; r < rows; r += 1){
+                        const tableCells = [];
+                        for(let c = 0; c < cols; c += 1){
+                            let cellNode;
+                            // Nếu là hàng đầu tiên và có 'withHeaderRow'
+                            if (r === 0 && withHeaderRow) {
+                                cellNode = createEmptyCell(headerType);
+                            } else {
+                                cellNode = createEmptyCell(cellType);
+                            }
+                            tableCells.push(cellNode);
+                        }
+                        // Thêm hàng mới vào mảng các hàng
+                        tableRows.push(rowType.create(null, tableCells));
+                    }
+                    // --- BƯỚC 3: Tạo node Table chính VỚI ATTRIBUTE 'colwidths' ---
+                    const tableNode = schema.nodes['table'].create({
+                        // Đây là mấu chốt: gán mảng % của chúng ta vào đây
+                        colwidths: calculatedColWidths
+                    }, tableRows // Nội dung (các node 'tableRow')
+                    );
+                    // --- BƯỚC 4: Dispatch transaction (Original code)---
+                    if (dispatch) {
+                        const offset = tr.selection.from + 1;
+                        tr.replaceSelectionWith(tableNode).scrollIntoView().setSelection(_state.TextSelection.near(tr.doc.resolve(offset)));
+                    }
+                    return true;
+                },
+            // 2. LỆNH ADDCOLUMNAFTER
+            addColumnAfter: ()=>({ state, dispatch })=>{
+                    const $cell = (0, _tables.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 = _tables.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
+                        (0, _tables.addColumnAfter)(state, (modifiedTr)=>{
+                            // Add our colwidth changes to the same transaction
+                            modifiedTr.setNodeMarkup(tablePos, null, {
+                                ...table.attrs,
+                                colwidths: newColWidths
+                            });
+                            // Now dispatch the complete transaction
+                            dispatch(modifiedTr.scrollIntoView());
+                        });
+                    }
+                    return true;
+                },
+            // 3. LỆNH ADDCOLUMNBEFORE
+            addColumnBefore: ()=>({ state, dispatch })=>{
+                    const $cell = (0, _tables.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 = _tables.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) {
+                        (0, _tables.addColumnBefore)(state, (modifiedTr)=>{
+                            modifiedTr.setNodeMarkup(tablePos, null, {
+                                ...table.attrs,
+                                colwidths: newColWidths
+                            });
+                            dispatch(modifiedTr.scrollIntoView());
+                        });
+                    }
+                    return true;
+                },
+            // 4. LỆNH DELETECOLUMN
+            deleteColumn: ()=>({ state, dispatch })=>{
+                    const $cell = (0, _tables.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 = _tables.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) {
+                        (0, _tables.deleteColumn)(state, (modifiedTr)=>{
+                            modifiedTr.setNodeMarkup(tablePos, null, {
+                                ...table.attrs,
+                                colwidths: newColWidths
+                            });
+                            dispatch(modifiedTr.scrollIntoView());
+                        });
+                    }
+                    return true;
+                },
+            // Cell
+            setCellBorder: (border)=>({ chain, state })=>{
+                    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 = cellPos?.attrs?.['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
+                    }).updateAttributes('tableHeader', {
+                        verticalAlign: align ?? null
+                    }).run();
+                },
+            setCellTextAlign: (align)=>({ chain })=>{
+                    return chain().focus().updateAttributes('tableCell', {
+                        textAlign: align ?? null
+                    }).updateAttributes('tableHeader', {
+                        textAlign: align ?? null
+                    }).run();
+                },
+            setCellBackgroundColor: (color)=>({ chain })=>{
+                    // Set all cells to the same background color
+                    return chain().focus().updateAttributes('tableCell', {
+                        backgroundColor: color ?? null
+                    }).updateAttributes('tableHeader', {
+                        backgroundColor: color ?? null
+                    }).run();
+                }
+        };
+    },
+    addNodeView () {
+        // 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 null;
+            }
+            // Editor is editable → use custom NodeView with handle
+            return (0, _views.createTableNodeView)(props);
+        };
+    }
+});
+const StyledTableKit = _core.Extension.create({
+    name: 'styledTableKit',
+    addExtensions () {
+        const extensions = [];
+        if (this.options.table !== false) {
+            extensions.push(StyledTable.configure({
+                ...this.options.table,
+                resizable: false
+            }));
+        }
+        if (this.options.tableRow !== false) {
+            extensions.push(_extensiontable.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 (this.options.table?.resizable !== false) {
+            extensions.push(_tableresizingextension.PercentageColumnResizing);
+        }
+        return extensions;
+    }
+});

package/src/extensions/text-case.extension.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from '@tiptap/core';
+import { TextCaseType } from '../types';
+export interface TextCaseOptions {
+    type: TextCaseType;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        textCase: {
+            textCase: (type: TextCaseOptions['type']) => ReturnType;
+        };
+    }
+}
+export declare const TextCase: Extension<TextCaseOptions, any>;

package/src/extensions/text-case.extension.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TextCase", {
+    enumerable: true,
+    get: function() {
+        return TextCase;
+    }
+});
+const _core = require("@tiptap/core");
+const _state = require("@tiptap/pm/state");
+const TextCase = _core.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(_state.TextSelection.create(tr.doc, $from.pos, $from.pos + newText.length));
+                    return true;
+                }
+        };
+    }
+});

package/src/index.d.ts

@@ -0,0 +1,7 @@
+export * from './constants';
+export * from './extensions';
+export * from './models';
+export * from './nodes';
+export * from './types';
+export * from './utils';
+export * from './views';

package/src/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./constants"), exports);
+_export_star(require("./extensions"), exports);
+_export_star(require("./models"), exports);
+_export_star(require("./nodes"), exports);
+_export_star(require("./types"), exports);
+_export_star(require("./utils"), exports);
+_export_star(require("./views"), 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/models/color.model.d.ts

@@ -0,0 +1,14 @@
+export declare class Color {
+    readonly value: string;
+    readonly name: string;
+    readonly type?: 'rgb' | 'hex';
+    private constructor();
+    static from(value: string, name?: string, type?: 'rgb' | 'hex'): Color;
+    static fromArray(colors: (string | {
+        value: string;
+        name?: string;
+        type?: 'rgb' | 'hex';
+    })[]): Color[];
+    equals(color: Color): boolean;
+    is(color: string): boolean;
+}

package/src/models/color.model.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Color", {
+    enumerable: true,
+    get: function() {
+        return Color;
+    }
+});
+const _utils = require("../utils");
+class Color {
+    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 === (0, _utils.normalizeColor)(color);
+    }
+    constructor(value, name, type){
+        const normalizedColor = (0, _utils.normalizeColor)(value);
+        if (!normalizedColor) {
+            throw new Error('Invalid or unsupported color.');
+        }
+        this.value = normalizedColor;
+        this.name = name ?? normalizedColor;
+        this.type = type;
+        Object.freeze(this);
+    }
+}

package/src/models/index.d.ts

@@ -0,0 +1 @@
+export * from './color.model';

package/src/models/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./color.model"), 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;
+}