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

package/src/utils/dom.util.js

@@ -1,33 +0,0 @@
-export 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.js

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

package/src/utils/table.util.js

@@ -1,95 +0,0 @@
-import { CellSelection, findTable, selectionCell, TableMap } from '@tiptap/pm/tables';
-import { isEqual } from 'lodash-es';
-export 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  {
-        // selectionCell throws RangeError when cursor is not in a table
-        return null;
-    }
-}
-export 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.
- */ export 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
- */ export 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.js

@@ -1,46 +0,0 @@
-import { TextSelection } from '@tiptap/pm/state';
-export 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.
- */ export 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
-    };
-}

package/src/views/block-handler.js

@@ -1,311 +0,0 @@
-import { DOMSerializer } from '@tiptap/pm/model';
-import { NodeSelection, TextSelection } from '@tiptap/pm/state';
-export class HandleNodeView {
-    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 handleDragStart = ()=>{
-            isDragging = true;
-        };
-        const handleClick = (event)=>{
-            // Only select if it was a click, not a drag
-            if (!isDragging && event.button === 0) {
-                event.preventDefault();
-                event.stopPropagation();
-                const pos = getPos() ?? 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();
-    }
-    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ả
-        const handle = 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);
-    }
-}
-export 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
-export const createTableNodeView = (props)=>{
-    return new TableNodeView(props.node, props.view, props.getPos);
-};
-export 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
-export const createPageBreakNodeView = (props)=>{
-    return new PageBreakNodeView(props.node, props.view, props.getPos);
-};

package/src/views/index.js

@@ -1 +0,0 @@
-export * from './block-handler';