@talrace/ngx-noder 19.0.58 → 19.0.60

package/fesm2022/talrace-ngx-noder.mjs

@@ -720,6 +720,7 @@ class EditorService {
         this._setCommentsVisibility$ = new Subject();
         this._getCommentText$ = new Subject();
         this._replaceCommentText$ = new Subject();
+        this._insertNextElement$ = new Subject();
         this._requestContentsInsertion$ = new Subject();
         this._insertContents$ = new Subject();
         this._startNewList$ = new Subject();
@@ -1030,6 +1031,9 @@ class EditorService {
     get replaceCommentText$() {
         return this._replaceCommentText$.asObservable();
     }
+    get insertNextElement$() {
+        return this._insertNextElement$.asObservable();
+    }
     get requestContentsInsertion$() {
         return this._requestContentsInsertion$.asObservable();
     }
@@ -1045,6 +1049,9 @@ class EditorService {
     get setNumberingValue$() {
         return this._setNumberingValue$.asObservable();
     }
+    insertNextElement(data) {
+        this._insertNextElement$.next(data);
+    }
     requestContentsInsertion(contents, from) {
         this._requestContentsInsertion$.next({ contents, from });
     }
@@ -2086,6 +2093,14 @@ class ContentHelper {
     }
 }
 
+class ContentsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class BreakModel {
     constructor(fields) {
         if (fields) {
@@ -2112,14 +2127,6 @@ class ContentOperationsHelper {
     }
 }
 
-class ContentsModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ElementModel {
     constructor(fields) {
         if (fields) {
@@ -8178,8 +8185,8 @@ class DisplayData extends EventEmitting {
             paragraphSettings.calculateDistanceFromTop(pageHeight, this.pagesSpace, pageVerticalData.marginTop, prevFormatsData);
         }
         this.pagesFormat.forEach((x, i) => {
-            const pagesHeight = this.getPageFormatParagraphs(i).reduce((sum, y) => sum + y.paragraphSettings.height, 0);
-            x.updateData(pagesHeight);
+            const paragraphs = this.getPageFormatParagraphs(i);
+            x.updateData(this.getPhysicalHeight(paragraphs));
         });
         this.allPagesHeight = 0;
         this.pagesFormat.forEach((x, i) => {
@@ -8200,7 +8207,7 @@ class DisplayData extends EventEmitting {
         });
     }
     getAllParagraphsHeight() {
-        return this.paragraphs.reduce((sum, x) => sum + x.paragraphSettings.height, 0);
+        return this.getPhysicalHeight(this.paragraphs);
     }
     destroy() {
         this.removeAllListeners('pagesCountChanged');
@@ -8382,12 +8389,13 @@ class DisplayData extends EventEmitting {
         for (let i = 0; i < content.length; i++) {
             const breakType = BreakHelper.getBreakType(this.model.breaks, content[i], contentIndex);
             const customComponent = breakType === null ? this.getOrGenerateComponent(contentIndex, content[i]) : null;
-            let newTokens = breakType !== null ? [DisplayTokenHelper.getBreakToken(content[i], fontString, breakType, contentIndex)] : null;
-            newTokens = customComponent === null ? [DisplayTokenHelper.getSymbolToken(content[i], fontString, contentIndex)] : null;
-            newTokens ??=
-                customComponent.instance instanceof NoderTableComponent
-                    ? DisplayTokenHelper.getTableTokens(customComponent, fontString, contentIndex, withNumbering)
-                    : DisplayTokenHelper.getComponentTokens(customComponent, fontString, contentIndex);
+            let newTokens = breakType !== null
+                ? [DisplayTokenHelper.getBreakToken(content[i], fontString, breakType, contentIndex)]
+                : customComponent !== null
+                    ? customComponent.instance instanceof NoderTableComponent
+                        ? DisplayTokenHelper.getTableTokens(customComponent, fontString, contentIndex, withNumbering)
+                        : DisplayTokenHelper.getComponentTokens(customComponent, fontString, contentIndex)
+                    : [DisplayTokenHelper.getSymbolToken(content[i], fontString, contentIndex)];
             contentIndex++;
             if (contentIndex > format.endIndex) {
                 format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
@@ -8638,6 +8646,15 @@ class DisplayData extends EventEmitting {
             paragraph.paragraphSettings.startInsertIndex = paragraph.startIndex;
         }
     }
+    getPhysicalHeight(paragraphs) {
+        const bounds = paragraphs
+            .flatMap(x => x.paragraphSettings?.textLinesInfo || [])
+            .reduce((acc, line) => ({
+            cursorY: acc.cursorY + line.offsetBefore + line.height + line.offsetAfter + (line.endPageOffset || 0),
+            maxBottom: Math.max(acc.maxBottom, acc.cursorY + line.offsetBefore + line.height)
+        }), { cursorY: 0, maxBottom: 0 });
+        return Math.max(bounds.cursorY, bounds.maxBottom);
+    }
 }
 
 class NoderEdgeComponent extends DestroyComponent {
@@ -15284,7 +15301,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.onSetCommentsVisibility(!!this.model.comments.length);
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.toggleGrammarChecksSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription(), this.startNewListSubscription(), this.continueNumberingSubscription(), this.setNumberingValueSubscription(), this.insertContentsSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.toggleGrammarChecksSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription(), this.startNewListSubscription(), this.continueNumberingSubscription(), this.setNumberingValueSubscription(), this.insertContentsSubscription(), this.insertNextElementSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -16659,6 +16676,36 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    insertNextElement(element) {
+        const selectionRange = this.selection.selectedRange;
+        const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, selectionRange.end) + 1;
+        const currentFormat = structuredClone(FormatStyleHelper.getFormatAtIndex(this.session.model.formats, insertIndex));
+        currentFormat.startIndex = 0;
+        currentFormat.endIndex = 1;
+        const nextElementContents = new ContentsModel({
+            content: ` ${CUSTOM_ELEMENT_MARKER}`,
+            paragraphs: [],
+            elements: [new ElementModel({ guid: element.guid, type: element.type, id: element.id, insertIndex: 1 })],
+            formats: [currentFormat],
+            breaks: [],
+            images: [],
+            tables: [],
+            tabs: [],
+            links: [],
+            comments: []
+        });
+        this.insertContent(insertIndex, nextElementContents);
+        setTimeout(() => {
+            // Need to skip micro tasks for a render element before focus
+            const component = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === insertIndex + 1);
+            if (component) {
+                const position = this.session.displayData.indexToPosition(component.instance.insertIndex, 0);
+                this.selection.focus(component, position);
+                this.onSelectionChange();
+                this.scrollCursorIntoMainView();
+            }
+        });
+    }
     insertContent(insertIndex, contents) {
         const insertContents = new InsertContentsModel({ insertIndex, contents });
         this.saveInsertContentsToHistory(insertContents);
@@ -16872,7 +16919,7 @@ class Editor {
         const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, insertIndex);
         this.selection.placeCursor(beforeTable);
         this.history.pushRemoveTableRows(insertIndex, startIndex, endIndex);
-        this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableRowsCommand(startIndex, endIndex, insertIndex, this.targets));
+        this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableRowsCommand(insertIndex, startIndex, endIndex, this.targets));
         this.session.removeTableRows(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
         this.onContentChange();
@@ -16882,7 +16929,7 @@ class Editor {
         const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, insertIndex);
         this.selection.placeCursor(beforeTable);
         this.history.pushRemoveTableColumns(insertIndex, startIndex, endIndex);
-        this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableColumnsCommand(startIndex, endIndex, insertIndex, this.targets));
+        this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableColumnsCommand(insertIndex, startIndex, endIndex, this.targets));
         this.session.removeTableColumns(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
         this.onContentChange();
@@ -17285,6 +17332,11 @@ class Editor {
             this.scrollCursorIntoMainView();
         }
     }
+    insertNextElementSubscription() {
+        return this.editorService.insertNextElement$.subscribe(element => {
+            this.insertNextElement(element);
+        });
+    }
     insertContentsSubscription() {
         return this.editorService.insertContents$.subscribe(contents => {
             const start = this.selection.range.start;