@phuong-tran-redoc/document-engine-core 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-core",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "license": "MIT",
   "author": "Duc Phuong (Jack) <tdp99.business@gmail.com>",

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

@@ -122,6 +122,12 @@ export const StyledTableHeader = TableHeader.extend({
 export const StyledTable = Table.extend({
     // name: 'styledTable',
     // draggable: true,
+    addOptions () {
+        return {
+            ...this.parent?.(),
+            enableNodeView: true
+        };
+    },
     addAttributes () {
         const parent = this.parent?.() ?? {};
         return {
@@ -431,12 +437,16 @@ export const StyledTable = Table.extend({
         };
     },
     addNodeView () {
+        const options = this.options;
+        if (options.enableNodeView === false) {
+            return undefined;
+        }
         // 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;
+                return undefined;
             }
             // Editor is editable → use custom NodeView with handle
             return createTableNodeView(props);

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

@@ -4,10 +4,22 @@ export const PageBreak = Node.create({
     group: 'block',
     atom: true,
     selectable: true,
+    // addNodeView() {
+    //   return createPageBreakNodeView;
+    // },
     parseHTML () {
         return [
+            // ----------------------------------------------------------
+            // RULE 1: Standard Tiptap Format (Ưu tiên cao nhất)
+            // ----------------------------------------------------------
             {
                 tag: 'div[data-page-break]'
+            },
+            // ----------------------------------------------------------
+            // RULE 2: CKEditor Format (Ưu tiên thấp nhất)
+            // ----------------------------------------------------------
+            {
+                tag: 'div.page-break'
             }
         ];
     },
@@ -17,7 +29,7 @@ export const PageBreak = Node.create({
             mergeAttributes(HTMLAttributes, {
                 'data-page-break': 'true',
                 class: 'document-engine-page-break',
-                style: 'break-before: page;'
+                style: 'break-before: page; page-break-before: always;'
             }),
             [
                 'span',

package/src/views/block-handler.d.ts

@@ -42,3 +42,7 @@ export declare class TableNodeView extends HandleNodeView {
     private updateColgroup;
 }
 export declare const createTableNodeView: (props: NodeViewRendererProps) => TableNodeView;
+export declare class PageBreakNodeView extends HandleNodeView {
+    createContentElement(): HTMLElement;
+}
+export declare const createPageBreakNodeView: (props: NodeViewRendererProps) => PageBreakNodeView;

package/src/views/block-handler.js

@@ -288,3 +288,24 @@ export class TableNodeView extends HandleNodeView {
 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);
+};