@talrace/ngx-noder 0.0.14 → 0.0.16

package/fesm2022/talrace-ngx-noder.mjs

@@ -447,6 +447,7 @@ class BaseNoderComponent extends DestroyComponent {
         this._isFocused = false;
         this.cdr.detectChanges();
     }
+    receiveStyle(_textStyle) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseNoderComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BaseNoderComponent, inputs: { content: "content", sessionId: "sessionId", contentWidth: "contentWidth", generalProperties: "generalProperties" }, host: { properties: { "class.focused": "this.focused", "attr.data-session-id": "this.sessionId", "attr.data-insert-index": "this.insertIndex" } }, usesInheritance: true, ngImport: i0 }); }
 }
@@ -481,6 +482,7 @@ class OperationsHistoryInfoModel {
 class EditorService {
     constructor() {
         this._styles$ = new BehaviorSubject({});
+        this._receiveTextStyle$ = new Subject();
         this._isViewOnly$ = new BehaviorSubject(false);
         this._isViewOnly = false;
         this._clipboardData$ = new BehaviorSubject('');
@@ -511,7 +513,7 @@ class EditorService {
         this._insertTableColumns$ = new Subject();
         this._removeTableRows$ = new Subject();
         this._removeTableColumns$ = new Subject();
-        this._removeImage$ = new Subject();
+        this._removeRight$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
         this._redo$ = new Subject();
@@ -525,7 +527,7 @@ class EditorService {
         this._keyDown$ = new Subject();
         this._updateEdges$ = new Subject();
         this._insertText$ = new Subject();
-        this._blurCustomComponent$ = new Subject();
+        this._removeLeft$ = new Subject();
         this._removeCustomElementsData$ = new Subject();
     }
     set styles(value) {
@@ -537,6 +539,9 @@ class EditorService {
     get styles$() {
         return this._styles$.asObservable();
     }
+    get receiveTextStyle$() {
+        return this._receiveTextStyle$.asObservable();
+    }
     get isViewOnly$() {
         return this._isViewOnly$.asObservable();
     }
@@ -642,8 +647,8 @@ class EditorService {
     get removeTableColumns$() {
         return this._removeTableColumns$.asObservable();
     }
-    get removeImage$() {
-        return this._removeImage$.asObservable();
+    get removeRight$() {
+        return this._removeRight$.asObservable();
     }
     get resizeTableColumns$() {
         return this._resizeTableColumns$.asObservable();
@@ -684,12 +689,15 @@ class EditorService {
     get insertText$() {
         return this._insertText$.asObservable();
     }
-    get blurCustomComponent$() {
-        return this._blurCustomComponent$.asObservable();
+    get removeLeft$() {
+        return this._removeLeft$.asObservable();
     }
     get removeCustomElementsData$() {
         return this._removeCustomElementsData$.asObservable();
     }
+    receiveTextStyle(component) {
+        this._receiveTextStyle$.next(component);
+    }
     setIsViewOnly(value) {
         this._isViewOnly = value;
         this._isViewOnly$.next(value);
@@ -769,8 +777,8 @@ class EditorService {
     removeTableColumns(insertIndex, startIndex, endIndex, sessionId) {
         this._removeTableColumns$.next({ insertIndex, startIndex, endIndex, sessionId });
     }
-    removeImage(insertIndex) {
-        this._removeImage$.next({ insertIndex });
+    removeRight() {
+        this._removeRight$.next();
     }
     resizeTableColumns(resizeTableColumns, sessionId) {
         this._resizeTableColumns$.next({
@@ -814,8 +822,8 @@ class EditorService {
     insertText(text) {
         this._insertText$.next(text);
     }
-    blurCustomComponent() {
-        this._blurCustomComponent$.next();
+    removeLeft() {
+        this._removeLeft$.next();
     }
     removeCustomElementsData(elements) {
         this._removeCustomElementsData$.next(elements);
@@ -3681,14 +3689,25 @@ class Selection {
         this.anchor = null;
         this.cursor = new CursorParagraph(0, 0);
         this.isDisabled = false;
+        this.focusedComponent = null;
         this.keepLinePositionX = null;
     }
+    get isFocused() {
+        return !!this.focusedComponent;
+    }
     get isEmpty() {
         return this.anchor === null || (this.anchor.row === this.cursor.row && this.anchor.column === this.cursor.column);
     }
     get isBackwards() {
         return this.anchor.row > this.cursor.row || (this.anchor.row === this.cursor.row && this.anchor.column > this.cursor.column);
     }
+    get selectedRange() {
+        if (!this.focusedComponent) {
+            return this.range;
+        }
+        const cursor = new CursorParagraph(this.cursor.row, this.cursor.column);
+        return new Range(cursor, cursor);
+    }
     get range() {
         const cursor = new CursorParagraph(this.cursor.row, this.cursor.column);
         if (this.isEmpty) {
@@ -3697,19 +3716,40 @@ class Selection {
         const anchor = new CursorParagraph(this.anchor.row, this.anchor.column);
         return this.isBackwards ? new Range(cursor, anchor) : new Range(anchor, cursor);
     }
+    focus(component, position) {
+        if (component === this.focusedComponent) {
+            return;
+        }
+        this.focusedComponent?.instance.blur();
+        component.instance.focus();
+        this.focusedComponent = component;
+        this.cursor = position;
+        this.anchor = new CursorParagraph(position.row, position.column + 1);
+        this.keepLinePositionX = null;
+    }
+    blur() {
+        this.focusedComponent?.instance.blur();
+        this.focusedComponent = null;
+    }
     placeCursor(cursor) {
         this.cursor = cursor;
         this.anchor = null;
         this.keepLinePositionX = null;
+        this.focusedComponent?.instance.blur();
+        this.focusedComponent = null;
     }
     moveCursor(cursor) {
         this.cursor = cursor;
         this.keepLinePositionX = null;
+        this.focusedComponent?.instance.blur();
+        this.focusedComponent = null;
     }
     placeSelection(cursor, anchor) {
         this.cursor = cursor;
         this.anchor = anchor;
         this.keepLinePositionX = null;
+        this.focusedComponent?.instance.blur();
+        this.focusedComponent = null;
     }
     moveSelection(position) {
         if (!this.anchor) {
@@ -3720,6 +3760,8 @@ class Selection {
     clearSelection() {
         this.anchor = null;
         this.keepLinePositionX = null;
+        this.focusedComponent?.instance.blur();
+        this.focusedComponent = null;
     }
     disableSelection() {
         this.isDisabled = true;
@@ -4093,6 +4135,7 @@ class Editor {
             // Update cursor because tab characters can influence the cursor position.
             this.renderer.updateCursor();
         };
+        this.subscriptions.push(this.receiveTextStyleSubscription());
         this.customElementTagNames = [...this.externalElementTagNames, this.imageTagName, this.tableCellTagName, this.edgeElementTagName];
         this.history = new OperationHistory(editorService, regulatorService);
         this.selection = new Selection();
@@ -4108,7 +4151,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.searchOptionSubscription(), this.replaceSubscription(), this.setTextStylesSubscription(), this.setParagraphStylesSubscription(), this.changeElementStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.removeNumberingsSubscription(), this.setImageStyleSubscription(), this.createCustomComponentSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTextSubscription(), this.endMousePressSubscription(), this.disableSelectionSubscription(), this.changedTableSizeSubscription(), this.changedEdgeSizeSubscription(), this.imageLoadedSubscription(), this.changedEdgeSubscription(), this.insertTableRowsSubscription(), this.insertTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableColumnsSubscription(), this.removedImageSubscription(), this.resizeTableColumnsSubscription(), this.insertTableSubscription(), this.undoSubscription(), this.redoSubscription(), this.clipboardDataSubscription(), this.cutSelectedSubscription(), this.copySelectedSubscription(), this.pasteFromClipboardSubscription(), this.selectAllSubscription(), this.removeSelectedSubscription(), this.printSubscription(), this.updateEdgeSubscription(), this.blurCustomComponentSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.changeElementStyleSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.replaceSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -4116,7 +4159,7 @@ class Editor {
         this.mouseHandler.destroy();
         this.inputHandler.destroy();
         this.documentHandler.destroy();
-        this.blurCustomComponent();
+        this.selection.blur();
     }
     selectPageDown() {
         const config = this.mainRenderer.layerConfig;
@@ -4334,7 +4377,6 @@ class Editor {
         this.applyTextStyles(new TextStyleModel({ underline: !this.session.editorService.styles.underline }));
     }
     applyTextStyles(textStyle) {
-        this.blurCustomComponent();
         if (!this.selection.isEmpty) {
             const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
             this.saveApplyTextStyleToHistory(partIndexes.startIndex, partIndexes.endIndex, textStyle);
@@ -4390,7 +4432,9 @@ class Editor {
         this.renderer.updateCursor();
     }
     focus() {
-        this.textInput.input.focus();
+        if (!this.textInput.isFocused && !this.selection.isFocused) {
+            this.textInput.input.focus();
+        }
     }
     openSearch() {
         this.editorService.openSearchDialog = true;
@@ -4753,6 +4797,7 @@ class Editor {
         this.removeCustomElementsData();
         this.session.remove(this.selection.range);
         this.onSelectionChange();
+        this.focus();
     }
     removeCustomElementsData() {
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start.row, this.selection.range.start.column);
@@ -4821,7 +4866,7 @@ class Editor {
         if (this.textInput.isFocused) {
             return;
         }
-        this.blurCustomComponent();
+        this.selection.blur();
         this.textInput.isFocused = true;
         this.renderer.showCursor();
     }
@@ -4831,7 +4876,7 @@ class Editor {
             this.focusCustomComponent(customElement);
         }
         else {
-            this.blurCustomComponent();
+            this.selection.blur();
         }
     }
     onLeftClick(event) {
@@ -4840,15 +4885,17 @@ class Editor {
             this.focusCustomComponent(customElement);
             return;
         }
-        this.blurCustomComponent();
-        if (!this.textInput.isFocused) {
-            this.textInput.input.focus();
-        }
         const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         if (event.shiftKey) {
             this.selection.moveSelection(position);
         }
-        else if (event.ctrlKey) {
+        else {
+            this.selection.placeCursor(position);
+        }
+        this.focus();
+        this.onSelectionChange();
+        event.preventDefault();
+        if (event.ctrlKey) {
             const link = this.getLinkModel(event);
             if (link) {
                 window.open(link.link);
@@ -4856,11 +4903,6 @@ class Editor {
                 return;
             }
         }
-        else {
-            this.selection.placeCursor(position);
-        }
-        this.onSelectionChange();
-        event.preventDefault();
         this.mouseHandler.startMousePress(this);
     }
     onDoubleClick(event) {
@@ -4877,7 +4919,6 @@ class Editor {
             this.focusCustomComponent(customElement);
             return;
         }
-        this.blurCustomComponent();
         event.preventDefault();
         const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         if (!isEdgeEdit && this.mainSession.customComponents.edges.isEdit) {
@@ -4895,7 +4936,6 @@ class Editor {
             this.focusCustomComponent(customElement);
             return;
         }
-        this.blurCustomComponent();
         event.preventDefault();
         const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         const start = new CursorParagraph(position.row, 0);
@@ -4909,7 +4949,6 @@ class Editor {
             this.focusCustomComponent(customElement);
             return;
         }
-        this.blurCustomComponent();
         event.preventDefault();
         this.selection.selectAll(this.session.model);
         this.onSelectionChange();
@@ -4979,11 +5018,12 @@ class Editor {
      * Returns the string of text currently highlighted.
      */
     getSelectedText() {
-        if (this.selection.isEmpty) {
+        const selectionRange = this.selection.selectedRange;
+        if (selectionRange.isEmpty) {
             return '';
         }
-        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end);
+        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, selectionRange.start);
+        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, selectionRange.end);
         let elementIndexes = [];
         ContentHelper.setIndexesElementsInInterval(this.session.model.breaks, elementIndexes, startIndex, endIndex);
         ContentHelper.setIndexesElementsInInterval(this.session.model.tables, elementIndexes, startIndex, endIndex);
@@ -4991,7 +5031,7 @@ class Editor {
         ContentHelper.setIndexesElementsInInterval(this.session.model.elements, elementIndexes, startIndex, endIndex);
         ContentHelper.setIndexesElementsInInterval(this.session.model.tabs, elementIndexes, startIndex, endIndex);
         elementIndexes.sort((a, b) => b - a);
-        let textInterval = this.session.displayData.getTextRange(this.selection.range);
+        let textInterval = this.session.displayData.getTextRange(selectionRange);
         elementIndexes.forEach(x => {
             textInterval = textInterval.slice(0, x) + textInterval.slice(x + 1);
         });
@@ -5005,7 +5045,7 @@ class Editor {
     }
     onSelectionChange() {
         this.session.applyToolbarStyles();
-        this.renderer.updateSelection(this.selection.range);
+        this.renderer.updateSelection(this.selection.selectedRange);
         if (this.selection.isEmpty) {
             this.renderer.updateCursor();
         }
@@ -5036,22 +5076,13 @@ class Editor {
         const component = this.session.customComponents.images.find(x => x.instance.insertIndex === index) ??
             this.session.customComponents.tables.find(x => x.instance.insertIndex === index) ??
             this.session.customComponents.customElements.find(x => x.instance.insertIndex === index);
-        if (!component || component === this.focusedComponent) {
+        if (!component) {
             return;
         }
-        this.focusedComponent?.instance.blur();
-        component.instance.focus();
-        this.focusedComponent = component;
         const position = this.session.displayData.indexToPosition(index, 0);
-        this.selection.placeCursor(position);
+        this.selection.focus(component, position);
         this.onSelectionChange();
     }
-    blurCustomComponent() {
-        if (this.focusedComponent) {
-            this.focusedComponent.instance.blur();
-            this.focusedComponent = null;
-        }
-    }
     isEmptyNumberingParagraph(paragraphIndex) {
         const currentLine = this.session.displayData.getParagraphContent(paragraphIndex);
         return currentLine.length === 0 && this.session.model.paragraphs[paragraphIndex].paragraphStyle.numberingId !== null;
@@ -5110,13 +5141,6 @@ class Editor {
         this.session.removeTableColumns(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
     }
-    removeImage(insertIndex) {
-        const range = this.session.displayData.indexesToRange(insertIndex, insertIndex + 1);
-        this.saveRemoveToHistory(range);
-        this.session.remove(range);
-        this.renderer.updateCursor();
-        this.textInput.input.focus();
-    }
     resizeTableColumns(resizeTableColumns, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
         const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, resizeTableColumns.insertIndex);
@@ -5134,6 +5158,14 @@ class Editor {
         }
         this.scrollCursorIntoMainView();
     }
+    provideTextStyle(component) {
+        const session = this.regulatorService.getSession(component.sessionId);
+        const format = session.model.formats.find(x => x.startIndex <= component.insertIndex && x.endIndex >= component.insertIndex);
+        component.receiveStyle(format.textStyle);
+    }
+    receiveTextStyleSubscription() {
+        return this.editorService.receiveTextStyle$.subscribe(x => this.provideTextStyle(x));
+    }
     searchOptionSubscription() {
         return this.editorService.searchOptions$.subscribe(searchOptions => {
             this.find(searchOptions);
@@ -5246,10 +5278,8 @@ class Editor {
             this.removeTableColumns(data.insertIndex, data.startIndex, data.endIndex, data.sessionId);
         });
     }
-    removedImageSubscription() {
-        return this.editorService.removeImage$.subscribe(data => {
-            this.removeImage(data.insertIndex);
-        });
+    removeRightSubscription() {
+        return this.editorService.removeRight$.subscribe(() => this.removeRight());
     }
     resizeTableColumnsSubscription() {
         return this.editorService.resizeTableColumns$.subscribe(data => {
@@ -5263,7 +5293,6 @@ class Editor {
     }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
-            this.blurCustomComponent();
             this.insert(x);
             this.focus();
         });
@@ -5282,8 +5311,8 @@ class Editor {
             this.scrollCursorIntoMainView();
         });
     }
-    blurCustomComponentSubscription() {
-        return this.editorService.blurCustomComponent$.subscribe(() => this.blurCustomComponent());
+    removeLeftSubscription() {
+        return this.editorService.removeLeft$.subscribe(() => this.removeLeft());
     }
     printSubscription() {
         return this.editorService.print$.subscribe(() => this.onPrint());
@@ -8269,25 +8298,25 @@ class CustomComponentHelper {
 }
 
 class ImageInputHandler {
-    constructor(editorService, image) {
+    constructor(editorService) {
         this.editorService = editorService;
-        this.image = image;
-        this.imageComponentTagName = 'APP-NOD-IMAGE';
         this.undoRedoActions = {};
         this.imageKeyDownSubscription = fromEvent(document, 'keydown').subscribe(event => this.onKeyDown(event));
-        this.clickSubscription = fromEvent(document, 'click').subscribe(event => this.onClick(event.target));
         this.fillUndoRedoActions();
     }
     destroy() {
         this.imageKeyDownSubscription?.unsubscribe();
-        this.clickSubscription?.unsubscribe();
     }
     onKeyDown(event) {
         if (this.editorService.isViewOnly) {
             return;
         }
-        if (['Backspace', 'Delete'].includes(event.code)) {
-            this.editorService.removeImage(this.image.insertIndex);
+        if ('Backspace' === event.code) {
+            this.editorService.removeLeft();
+            return;
+        }
+        if ('Delete' === event.code) {
+            this.editorService.removeRight();
             return;
         }
         const keyCombination = this.getKeyCombination(event);
@@ -8298,6 +8327,7 @@ class ImageInputHandler {
         }
         if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && event.key.length === 1) {
             this.editorService.insertText(event.key);
+            event.preventDefault();
         }
     }
     getKeyCombination(event) {
@@ -8310,16 +8340,6 @@ class ImageInputHandler {
         this.undoRedoActions['Ctrl-KeyY'] = () => this.editorService.redo();
         this.undoRedoActions['Command-KeyY'] = () => this.editorService.redo();
     }
-    onClick(element) {
-        let currentElement = element;
-        while (currentElement) {
-            if (currentElement.tagName === this.imageComponentTagName) {
-                return;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        this.editorService.blurCustomComponent();
-    }
 }
 
 var Direction;
@@ -8548,7 +8568,7 @@ class NoderImageComponent extends BaseNoderComponent {
         this.cdr.markForCheck();
     }
     focus() {
-        this.inputHandler = new ImageInputHandler(this.editorService, this);
+        this.inputHandler = new ImageInputHandler(this.editorService);
         super.focus();
     }
     blur() {
@@ -8893,6 +8913,9 @@ class LinkOperationsHelper {
     }
     static merge(links, start, end) {
         const firstIndex = links.findIndex(x => x.endIndex >= start);
+        if (firstIndex === -1) {
+            return;
+        }
         for (let link of links) {
             if (link.startIndex <= start && link.endIndex >= end) {
                 const newLink = links[firstIndex + 1];
@@ -10075,6 +10098,21 @@ class EditSession {
             this.editorService.changedEdge(this.sessionId);
         }
     }
+    provideTextStyle(start, end) {
+        const components = this.customComponents.customElements;
+        let i = components.findIndex(x => x.instance.content.insertIndex >= start);
+        if (i === -1) {
+            return;
+        }
+        let j = this.model.formats.findIndex(x => x.endIndex >= components[i].instance.content.insertIndex);
+        while (i < components.length && components[i].instance.content.insertIndex <= end) {
+            while (this.model.formats[j].endIndex < components[i].instance.content.insertIndex) {
+                j++;
+            }
+            components[i].instance.receiveStyle(this.model.formats[j].textStyle);
+            i++;
+        }
+    }
     removeByDocumentIndexes(startIndex, endIndex) {
         const startParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex);
         const endParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex);
@@ -10118,6 +10156,7 @@ class EditSession {
         OperationsHelper.applyTextStyle(this.model, startIndex, endIndex, textStyle);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.setTextStyle(textStyle);
+        this.provideTextStyle(startIndex, endIndex);
     }
     applyParagraphStyle(startIndex, endIndex, paragraphStyle) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
@@ -10189,6 +10228,7 @@ class EditSession {
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
+        this.provideTextStyle(startIndex, endIndex);
     }
     restoreParagraphStyles(paragraphs) {
         const startIndex = paragraphs[0].insertIndex;
@@ -10562,7 +10602,7 @@ class CursorLayer {
         this.addAnimationClass();
     }
     detectVisibility() {
-        const selectionRange = this.session.selection.range;
+        const selectionRange = this.session.selection.selectedRange;
         if (selectionRange.isEmpty) {
             DomHelper.removeCssClass(this.layer, 'selecting');
             return;
@@ -11602,7 +11642,7 @@ class RegulatorService {
         const previous = this.currentSession;
         this.selection.clearSelection();
         this.currentSession.renderer.hideCursor();
-        this.currentSession.renderer.updateSelection(this.selection.range);
+        this.currentSession.renderer.updateSelection(this.selection.selectedRange);
         this.currentSession = session;
         this.currentSession.renderer.showCursor();
         this.arrangeEdgesForSessionChange(previous.session, session.session);
@@ -14099,11 +14139,11 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: i0.Injector }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n        <div class=\"separator\"></div>\n    </div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n        <div class=\"separator\"></div>\n    </div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', template: "<ng-container *ngIf=\"{ isViewOnly: editorService.isViewOnly$ | async } as data\">\n    <app-nod-undo-redo\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (undo)=\"undo.emit()\"\n        (redo)=\"redo.emit()\" />\n    <app-nod-print (print)=\"print.emit()\" />\n    <div class=\"separator\"></div>\n    <app-nod-font\n        [isDisabled]=\"data.isViewOnly\"\n        [styles]=\"styles\"\n        (selectFont)=\"onApplyFontFamily($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-size\n        [isDisabled]=\"data.isViewOnly\"\n        [fontSize]=\"styles.fontSize\"\n        (selectFontSize)=\"onApplyFontSize($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-font-style\n        [isDisabled]=\"data.isViewOnly\"\n        [bold]=\"styles.bold\"\n        [italic]=\"styles.italic\"\n        [underline]=\"styles.underline\"\n        [fontColor]=\"styles.fontColor\"\n        [highlightColor]=\"styles.highlightColor\"\n        (selectFontColor)=\"onApplyFontColor($event)\"\n        (toggleBold)=\"onApplyBold()\"\n        (toggleItalic)=\"onApplyItalic()\"\n        (toggleUnderline)=\"onApplyUnderline()\"\n        (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-format\n        [isDisabled]=\"data.isViewOnly\"\n        [alignment]=\"styles.alignment\"\n        (selectAlignment)=\"onApplyAlignment($event)\" />\n    <div class=\"separator\"></div>\n    <app-nod-numbering\n        [isDisabled]=\"data.isViewOnly\"\n        [selectedNumberingType]=\"numberingType\"\n        [selectedNumberingTemplate]=\"numberingTemplateType\"\n        (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n        (removeNumberings)=\"removeNumberings.emit()\" />\n    <div class=\"separator\"></div>\n    <div class=\"insert-buttons\">\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-image\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertImage.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-image\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-table\"\n            [class.active-button]=\"showInsertTableMenu\"\n            [disabled]=\"data.isViewOnly\"\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\" />\n        </button>\n        <button\n            mat-button\n            id=\"toolbar-actions-menu-item-insert-link\"\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"insertLink.emit()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-link-on\" />\n        </button>\n    </div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"separator\"></div>\n    <div\n        *ngIf=\"elements.length\"\n        class=\"custom-elements\">\n        <button\n            *ngFor=\"let element of elements\"\n            mat-button\n            [disabled]=\"data.isViewOnly\"\n            (click)=\"onCreateElement(element)\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"{{ element.icon }}\"></mat-icon>\n        </button>\n    </div>\n</ng-container>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:1px solid;opacity:.1;height:100%;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']