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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "license": "MIT",
   "author": "Realestatedoc (Redoc)",
@@ -8,10 +8,20 @@
     "Duc Phuong (Jack) <tdp99.business@gmail.com>"
   ],
   "description": "Framework-agnostic core library for Document Engine",
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
+  "main": "./index.esm.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.esm.js"
+    }
+  },
   "files": [
-    "src/**/*.js",
+    "index.esm.js",
+    "index.d.ts",
     "src/**/*.d.ts",
     "README.md",
     "LICENSE.md",
@@ -57,6 +67,5 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.10"
-  },
-  "module": "./src/index.js"
+  }
 }

package/src/constants/indent.constant.js

@@ -1 +0,0 @@
-export const INDENT_DEFAULT = 40; // in pixels

package/src/constants/index.js

@@ -1 +0,0 @@
-export * from './indent.constant';

package/src/constants/table.constant.js

@@ -1 +0,0 @@
-export const MIN_NEW_COL_WIDTH = 5.0;

package/src/extensions/clear-content.extension.js

@@ -1,9 +0,0 @@
-import { Extension } from '@tiptap/core';
-export const ClearContent = Extension.create({
-    name: 'clearContent',
-    addCommands () {
-        return {
-            clear: ()=>({ chain })=>chain().focus().clearContent().run()
-        };
-    }
-});

package/src/extensions/indent.extension.js

@@ -1,59 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { INDENT_DEFAULT } from '../constants';
-export const Indent = Extension.create({
-    name: 'indent',
-    addOptions () {
-        return {
-            types: [
-                'paragraph',
-                'heading'
-            ],
-            indent: INDENT_DEFAULT
-        };
-    },
-    addGlobalAttributes () {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    indent: {
-                        parseHTML: (element)=>{
-                            return Number(element.style.marginLeft.replace('px', ''));
-                        },
-                        renderHTML: (attributes)=>{
-                            return {
-                                style: `margin-left: ${attributes['indent']}px`
-                            };
-                        }
-                    }
-                }
-            }
-        ];
-    },
-    addCommands () {
-        return {
-            increaseIndent: ()=>({ state, chain })=>{
-                    const currentNode = state.selection.$head.parent;
-                    const nodeType = currentNode.type;
-                    if (!this.options.types.includes(nodeType.name)) return false;
-                    const currentIndent = currentNode.attrs['indent'] || 0;
-                    const newIndent = currentIndent + this.options.indent;
-                    return chain().updateAttributes(nodeType, {
-                        indent: newIndent
-                    }).run();
-                },
-            decreaseIndent: ()=>({ state, chain })=>{
-                    const currentNode = state.selection.$head.parent;
-                    const nodeType = currentNode.type;
-                    if (!this.options.types.includes(nodeType.name)) return false;
-                    const currentIndent = currentNode.attrs['indent'] || 0;
-                    const newIndent = currentIndent - this.options.indent;
-                    if (newIndent < 0) return false;
-                    if (newIndent === 0) return chain().resetAttributes(nodeType, 'indent').run();
-                    return chain().updateAttributes(nodeType, {
-                        indent: newIndent
-                    }).run();
-                }
-        };
-    }
-});

package/src/extensions/index.js

@@ -1,8 +0,0 @@
-export * from './clear-content.extension';
-export * from './indent.extension';
-export * from './ordered-list.extension';
-export * from './reset-format.extension';
-export * from './reset-on-enter.extension';
-export * from './restricted-editing.extension';
-export * from './table-style.extension';
-export * from './text-case.extension';

package/src/extensions/ordered-list.extension.js

@@ -1,47 +0,0 @@
-import { OrderedList } from '@tiptap/extension-list';
-export const CustomOrderedList = OrderedList.extend({
-    name: 'customOrderedList',
-    addOptions () {
-        return {
-            ...this.parent?.(),
-            listStyleType: 'decimal'
-        };
-    },
-    addAttributes () {
-        return {
-            ...this.parent?.(),
-            'data-list-style-type': {
-                default: this.options.listStyleType,
-                parseHTML: (element)=>{
-                    // Priority 1: Parse from data-list-style-type attribute (our format)
-                    const dataAttr = element.getAttribute('data-list-style-type');
-                    if (dataAttr) return dataAttr;
-                    // Priority 2: Parse from CSS list-style-type property (other editors' format)
-                    const styleAttr = element.style.listStyleType;
-                    if (styleAttr) return styleAttr;
-                    // Default fallback
-                    return this.options.listStyleType;
-                },
-                renderHTML: (attributes)=>{
-                    const styleType = attributes['data-list-style-type'];
-                    if (!styleType || styleType === 'decimal') return {
-                        'data-list-style-type': 'decimal'
-                    };
-                    return {
-                        'data-list-style-type': attributes['data-list-style-type']
-                    };
-                }
-            }
-        };
-    },
-    addCommands () {
-        return {
-            ...this.parent?.(),
-            setListStyle: (listStyleType)=>({ chain })=>{
-                    return chain().focus().updateAttributes('customOrderedList', {
-                        'data-list-style-type': listStyleType
-                    }).run();
-                }
-        };
-    }
-});

package/src/extensions/reset-format.extension.js

@@ -1,9 +0,0 @@
-import { Extension } from '@tiptap/core';
-export const ResetFormat = Extension.create({
-    name: 'resetFormat',
-    addCommands () {
-        return {
-            resetFormat: ()=>({ chain })=>chain().focus().unsetAllMarks().clearNodes().run()
-        };
-    }
-});

package/src/extensions/reset-on-enter.extension.js

@@ -1,37 +0,0 @@
-import { Extension } from '@tiptap/core';
-/*
- * Clear:
- * - textStyle mark
- * - indent attribute
- */ // Clears formats on Enter so the new line has default formats
-export const ResetOnEnter = Extension.create({
-    name: 'resetOnEnter',
-    addKeyboardShortcuts () {
-        return {
-            Enter: ()=>{
-                const disabledNodes = [
-                    'listItem',
-                    'blockquote'
-                ];
-                if (disabledNodes.some((type)=>this.editor.isActive(type))) {
-                    return false; //Let the default Enter behavior proceed
-                }
-                // Handle Enter ourselves so we can both clear marks and reset indent on the new line
-                return this.editor.chain().focus().unsetAllMarks().splitBlock({
-                    keepMarks: false
-                }).command(({ state, commands })=>{
-                    const parent = state.selection.$head.parent;
-                    const nodeType = parent.type;
-                    const typesToReset = [
-                        'paragraph',
-                        'heading'
-                    ];
-                    if (typesToReset.includes(nodeType.name)) {
-                        return commands.resetAttributes(nodeType, 'indent');
-                    }
-                    return true;
-                }).run();
-            }
-        };
-    }
-});

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

@@ -1,376 +0,0 @@
-import { Extension, Node, mergeAttributes } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-// Editable inline region where typing is allowed
-export const EditableRegion = Node.create({
-    name: 'editableRegion',
-    group: 'inline',
-    inline: true,
-    content: 'text*',
-    selectable: false,
-    parseHTML () {
-        return [
-            // ----------------------------------------------------------
-            // RULE 1: Standard Tiptap Format (highest priority)
-            // ----------------------------------------------------------
-            {
-                tag: 'span[data-editable-region]'
-            },
-            // ----------------------------------------------------------
-            // RULE 2: CKEditor Format (lowest priority)
-            // ----------------------------------------------------------
-            {
-                tag: 'span.restricted-editing-exception'
-            }
-        ];
-    },
-    renderHTML ({ HTMLAttributes }) {
-        return [
-            'span',
-            mergeAttributes(HTMLAttributes, {
-                'data-editable-region': 'true',
-                class: 'editable-region'
-            }),
-            0
-        ];
-    }
-});
-export const RestrictedEditing = Extension.create({
-    name: 'restrictedEditing',
-    addOptions () {
-        return {
-            editableRegionNodeName: 'editableRegion',
-            disabledNodeTypes: [
-                'listItem',
-                'blockquote'
-            ],
-            initialMode: 'restricted'
-        };
-    },
-    addStorage () {
-        return {
-            mode: this.options.initialMode
-        };
-    },
-    addCommands () {
-        return {
-            wrapSelectionInEditableRegion: ()=>({ state, dispatch })=>{
-                    // 0. Always return false if the editable region node is not registered
-                    const type = state.schema.nodes[this.options.editableRegionNodeName];
-                    if (!type) return false;
-                    const { from, to, empty } = state.selection;
-                    // 1. Insert an empty editable region with a zero-width space
-                    if (empty) {
-                        const node = type.create(null, state.schema.text('\u200b'));
-                        const tr = state.tr.replaceSelectionWith(node, false);
-                        tr.setMeta('restrictedEditing', {
-                            allow: true
-                        });
-                        dispatch?.(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 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 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;
-                }
-            })
-        ];
-    }
-});