@talrace/ngx-noder 0.0.29 → 0.0.31

package/fesm2022/talrace-ngx-noder.mjs

@@ -113,8 +113,8 @@ const DEFAULT_TOOLBAR_STYLES = () => ({
     highlightColor: DEFAULT_BACKGROUND_COLOR
 });
 const DEFAULT_BACKGROUND_COLOR = 'transparent';
-const DEFAULT_FONT_FAMILY = 'Roboto';
-const DEFAULT_FONT_SIZE = 14;
+const DEFAULT_FONT_FAMILY = 'Times New Roman';
+const DEFAULT_FONT_SIZE = 11;
 const DEFAULT_FONT_COLOR = '#000';
 const HYPERLINK_FONT_COLOR = '#0000EE';
 const DEFAULT_HEADING_STYLE_ID = 'Default';
@@ -460,6 +460,7 @@ class EditorService {
         this._insertTableColumns$ = new Subject();
         this._removeTableRows$ = new Subject();
         this._removeTableColumns$ = new Subject();
+        this._removeTable$ = new Subject();
         this._removeRight$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
@@ -596,6 +597,9 @@ class EditorService {
     get removeTableColumns$() {
         return this._removeTableColumns$.asObservable();
     }
+    get removeTable$() {
+        return this._removeTable$.asObservable();
+    }
     get removeRight$() {
         return this._removeRight$.asObservable();
     }
@@ -750,6 +754,9 @@ class EditorService {
     removeTableColumns(insertIndex, startIndex, endIndex, sessionId) {
         this._removeTableColumns$.next({ insertIndex, startIndex, endIndex, sessionId });
     }
+    removeTable(insertIndex, sessionId) {
+        this._removeTable$.next({ insertIndex, sessionId });
+    }
     removeRight() {
         this._removeRight$.next();
     }
@@ -961,6 +968,7 @@ var CommandType;
     CommandType[CommandType["RemoveParagraphAndAddNumbering"] = 29] = "RemoveParagraphAndAddNumbering";
     CommandType[CommandType["RestoreParagraphAndAddNumbering"] = 30] = "RestoreParagraphAndAddNumbering";
     CommandType[CommandType["MoveRange"] = 31] = "MoveRange";
+    CommandType[CommandType["RemoveTable"] = 32] = "RemoveTable";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1096,6 +1104,194 @@ class ContentHelper {
     }
 }
 
+class BreakModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ElementModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class FormatHelper {
+    static sliceSection(formats, startIndex, endIndex) {
+        let result = [];
+        for (const format of formats) {
+            if (format.startIndex >= startIndex && format.endIndex <= endIndex) {
+                result.push(new FormatModel({ ...format }));
+            }
+            else if (format.startIndex < startIndex && format.endIndex > endIndex) {
+                result.push(new FormatModel({ startIndex, endIndex, textStyle: new TextStyleModel(format.textStyle) }));
+            }
+            else if (format.startIndex < startIndex && format.endIndex >= startIndex) {
+                result.push(new FormatModel({ startIndex, endIndex: format.endIndex, textStyle: new TextStyleModel(format.textStyle) }));
+            }
+            else if (format.startIndex <= endIndex && format.endIndex > endIndex) {
+                result.push(new FormatModel({ startIndex: format.startIndex, endIndex, textStyle: new TextStyleModel(format.textStyle) }));
+            }
+        }
+        return result;
+    }
+    static shiftIndexes(formats, offset) {
+        for (const format of formats) {
+            format.startIndex += offset;
+            format.endIndex += offset;
+        }
+    }
+}
+
+class BordersStyleModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ImageModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.border) {
+                fields.border = new BordersStyleModel(fields.border);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class IndexedElementHelper {
+    static sliceSection(elements, startIndex, endIndex) {
+        return elements.filter(x => x.insertIndex >= startIndex && x.insertIndex < endIndex);
+    }
+    static shiftIndexes(elements, offset) {
+        for (const element of elements) {
+            element.insertIndex += offset;
+        }
+    }
+}
+
+class LinkModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class LinkHelper {
+    static sliceSection(links, start, end) {
+        return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter((link) => link !== null);
+    }
+    static shiftIndexes(links, offset) {
+        for (const link of links) {
+            link.startIndex += offset;
+            link.endIndex += offset;
+        }
+    }
+    static sliceFormats(links, startIndex, endIndex) {
+        const result = [];
+        for (const link of links) {
+            const absoluteFormats = link.formats.map(x => ({
+                ...x,
+                startIndex: x.startIndex + link.startIndex,
+                endIndex: x.endIndex + link.startIndex
+            }));
+            const slicedLinkFormats = FormatHelper.sliceSection(absoluteFormats, startIndex, endIndex);
+            result.push(...slicedLinkFormats);
+        }
+        return result;
+    }
+    static getPartialLink(link, selectionStart, selectionEnd) {
+        if (link.endIndex < selectionStart || link.startIndex > selectionEnd) {
+            return null;
+        }
+        const newStart = Math.max(link.startIndex, selectionStart);
+        const newEnd = Math.min(link.endIndex, selectionEnd);
+        const newFormats = link.formats
+            .map(format => {
+            const formatStart = link.startIndex + format.startIndex;
+            const formatEnd = link.startIndex + format.endIndex;
+            if (formatEnd < newStart || formatStart > newEnd) {
+                return null;
+            }
+            const newFormatStart = Math.max(formatStart, newStart) - newStart;
+            const newFormatEnd = Math.min(formatEnd, newEnd) - newStart;
+            return new FormatModel({ ...format, startIndex: newFormatStart, endIndex: newFormatEnd });
+        })
+            .filter((format) => format !== null);
+        return new LinkModel({ ...link, startIndex: newStart, endIndex: newEnd, formats: newFormats });
+    }
+}
+
+class ParagraphModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.paragraphStyle) {
+                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class RestoreModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class MarginsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TableModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.margins) {
+                fields.margins = new MarginsModel(fields.margins);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TabModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ContentsOperationsHelper {
+    static GetRestoreFromSlice(contents, startIndex, count) {
+        const endIndex = startIndex + count;
+        const text = contents.content.slice(startIndex, endIndex);
+        const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex);
+        const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
+        const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
+        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
+        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
+        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
+        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
+        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
+        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links });
+    }
+}
+
 class CreateEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -1202,41 +1398,6 @@ var EdgeType;
     EdgeType[EdgeType["Footer"] = 1] = "Footer";
 })(EdgeType || (EdgeType = {}));
 
-class ElementModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class FormatHelper {
-    static sliceSection(formats, startIndex, endIndex) {
-        let result = [];
-        for (const format of formats) {
-            if (format.startIndex >= startIndex && format.endIndex <= endIndex) {
-                result.push(new FormatModel({ ...format }));
-            }
-            else if (format.startIndex < startIndex && format.endIndex > endIndex) {
-                result.push(new FormatModel({ startIndex, endIndex, textStyle: new TextStyleModel(format.textStyle) }));
-            }
-            else if (format.startIndex < startIndex && format.endIndex >= startIndex) {
-                result.push(new FormatModel({ startIndex, endIndex: format.endIndex, textStyle: new TextStyleModel(format.textStyle) }));
-            }
-            else if (format.startIndex <= endIndex && format.endIndex > endIndex) {
-                result.push(new FormatModel({ startIndex: format.startIndex, endIndex, textStyle: new TextStyleModel(format.textStyle) }));
-            }
-        }
-        return result;
-    }
-    static shiftIndexes(formats, offset) {
-        for (const format of formats) {
-            format.startIndex += offset;
-            format.endIndex += offset;
-        }
-    }
-}
-
 class ImageDataModel {
     constructor(fields) {
         if (fields) {
@@ -1256,17 +1417,6 @@ class ImageHelper {
     }
 }
 
-class IndexedElementHelper {
-    static sliceSection(elements, startIndex, endIndex) {
-        return elements.filter(x => x.insertIndex >= startIndex && x.insertIndex <= endIndex);
-    }
-    static shiftIndexes(elements, offset) {
-        for (const element of elements) {
-            element.insertIndex += offset;
-        }
-    }
-}
-
 class InputHandler extends BaseHandler {
     constructor(textarea, editor) {
         super();
@@ -1531,59 +1681,6 @@ class InsertTabModel {
     }
 }
 
-class LinkModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class LinkHelper {
-    static sliceSection(links, start, end) {
-        return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter((link) => link !== null);
-    }
-    static shiftIndexes(links, offset) {
-        for (const link of links) {
-            link.startIndex += offset;
-            link.endIndex += offset;
-        }
-    }
-    static sliceFormats(links, startIndex, endIndex) {
-        const result = [];
-        for (const link of links) {
-            const absoluteFormats = link.formats.map(x => ({
-                ...x,
-                startIndex: x.startIndex + link.startIndex,
-                endIndex: x.endIndex + link.startIndex
-            }));
-            const slicedLinkFormats = FormatHelper.sliceSection(absoluteFormats, startIndex, endIndex);
-            result.push(...slicedLinkFormats);
-        }
-        return result;
-    }
-    static getPartialLink(link, selectionStart, selectionEnd) {
-        if (link.endIndex < selectionStart || link.startIndex > selectionEnd) {
-            return null;
-        }
-        const newStart = Math.max(link.startIndex, selectionStart);
-        const newEnd = Math.min(link.endIndex, selectionEnd);
-        const newFormats = link.formats
-            .map(format => {
-            const formatStart = link.startIndex + format.startIndex;
-            const formatEnd = link.startIndex + format.endIndex;
-            if (formatEnd < newStart || formatStart > newEnd) {
-                return null;
-            }
-            const newFormatStart = Math.max(formatStart, newStart) - newStart;
-            const newFormatEnd = Math.min(formatEnd, newEnd) - newStart;
-            return new FormatModel({ ...format, startIndex: newFormatStart, endIndex: newFormatEnd });
-        })
-            .filter((format) => format !== null);
-        return new LinkModel({ ...link, startIndex: newStart, endIndex: newEnd, formats: newFormats });
-    }
-}
-
 var MouseButton;
 (function (MouseButton) {
     MouseButton[MouseButton["Left"] = 0] = "Left";
@@ -2861,7 +2958,7 @@ class RemoveTableColumnsModel {
     }
 }
 
-class RemoveTableRowsModel {
+class RemoveTableModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -2869,15 +2966,7 @@ class RemoveTableRowsModel {
     }
 }
 
-class ResizeTableColumnsModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class RestoreNumberingsModel {
+class RemoveTableRowsModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -2885,7 +2974,7 @@ class RestoreNumberingsModel {
     }
 }
 
-class RestoreParagraphStylesModel {
+class ResizeTableColumnsModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -2893,7 +2982,7 @@ class RestoreParagraphStylesModel {
     }
 }
 
-class MarginsModel {
+class RestoreNumberingsModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -2901,12 +2990,9 @@ class MarginsModel {
     }
 }
 
-class TableModel {
+class RestoreParagraphStylesModel {
     constructor(fields) {
         if (fields) {
-            if (fields.margins) {
-                fields.margins = new MarginsModel(fields.margins);
-            }
             Object.assign(this, fields);
         }
     }
@@ -3016,6 +3102,10 @@ class OperationHistory {
         const undoStep = new RestoreTableModel({ insertIndex, oldTable });
         this.addToHistory(undoStep, redoStep);
     }
+    pushRemoveTable(insertIndex, restoreModel) {
+        const redoStep = new RemoveTableModel({ insertIndex });
+        this.addToHistory(restoreModel, redoStep);
+    }
     pushResizeTableColumns(resizeTableColumns) {
         const redoStep = new ResizeTableColumnsModel({
             cellIndex: resizeTableColumns.cellIndex,
@@ -3136,17 +3226,6 @@ class PageHelper {
     }
 }
 
-class ParagraphModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.paragraphStyle) {
-                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
 const DisplayValue = {
     char: 1,
     customContent: 3,
@@ -3445,6 +3524,9 @@ class RenderingHelper {
             // eslint-disable-next-line prettier/prettier
             `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor}`);
             lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
+            if (lineInfo.wordSpacing) {
+                lineEl.style.wordSpacing = `${lineInfo.wordSpacing}px`;
+            }
         }
         return lineEl;
     }
@@ -4528,14 +4610,6 @@ class ReplaceModel {
     }
 }
 
-class RestoreModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class RestoreParagraphAndAddNumberingModel {
     constructor(fields) {
         if (fields) {
@@ -4621,6 +4695,9 @@ class CommandModel {
             if (fields.removeParagraphAndAddNumbering) {
                 fields.removeParagraphAndAddNumbering = new RemoveParagraphAndAddNumberingModel(fields.removeParagraphAndAddNumbering);
             }
+            if (fields.removeTable) {
+                fields.removeTable = new RemoveTableModel(fields.removeTable);
+            }
             if (fields.removeTableColumns) {
                 fields.removeTableColumns = new RemoveTableColumnsModel(fields.removeTableColumns);
             }
@@ -4732,6 +4809,10 @@ class SaveCommandsHelper {
         const removeTableRows = new RemoveTableRowsModel({ startIndex, endIndex, insertIndex });
         return new CommandModel({ commandType: CommandType.RemoveTableRows, removeTableRows, targets });
     }
+    static getRemoveTableCommand(insertIndex, targets) {
+        const removeTable = new RemoveTableModel({ insertIndex });
+        return new CommandModel({ commandType: CommandType.RemoveTable, removeTable, targets });
+    }
     static getRestoreTextStylesCommand(formats, targets) {
         const restoreTextStyles = new RestoreTextStylesModel({ formats });
         return new CommandModel({ commandType: CommandType.RestoreTextStyles, restoreTextStyles, targets });
@@ -5479,7 +5560,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), 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.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), 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.removeTableSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -5885,9 +5966,8 @@ class Editor {
             command = SaveCommandsHelper.getInsertStyledTextCommand(text, insertIndex, textStyle, this.targets);
         }
         else if (operation instanceof RestoreModel) {
-            const deepCopy = structuredClone(operation);
-            this.session.restore(deepCopy);
-            command = SaveCommandsHelper.getRestoreCommand(deepCopy, this.targets);
+            this.session.restore(structuredClone(operation));
+            command = SaveCommandsHelper.getRestoreCommand(structuredClone(operation), this.targets);
         }
         else if (operation instanceof ApplyTextStyleModel) {
             this.session.applyTextStyle(operation.startIndex, operation.endIndex, new TextStyleModel(operation.textStyle));
@@ -6011,6 +6091,10 @@ class Editor {
             this.moveRange(operation);
             command = SaveCommandsHelper.getMoveRangeCommand(operation, []);
         }
+        else if (operation instanceof RemoveTableModel) {
+            this.session.removeTable(operation.insertIndex);
+            command = SaveCommandsHelper.getRemoveTableCommand(operation.insertIndex, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -6054,6 +6138,12 @@ class Editor {
         this.history.pushInsertStyledText(index, text, style);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertStyledTextCommand(text, index, style, this.targets));
     }
+    saveRemoveTableToHistory(insertIndex) {
+        const restoreModel = ContentsOperationsHelper.GetRestoreFromSlice(this.session.model, insertIndex, 1);
+        restoreModel.endIndex = insertIndex;
+        this.history.pushRemoveTable(insertIndex, restoreModel);
+        this.commandsService.createCommand(SaveCommandsHelper.getRemoveTableCommand(insertIndex, this.targets));
+    }
     saveInsertElementToHistory(model) {
         this.history.pushInsertElement(model);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertElementCommand(model, this.targets));
@@ -6335,7 +6425,7 @@ class Editor {
             this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
         }
         else {
-            const edgeType = this.getClickedEdgeType(event.clientY);
+            const edgeType = this.getEdgeTypeByPosition(event.clientY);
             if (edgeType !== null) {
                 this.createEdges(edgeType, PageType.Default);
             }
@@ -6398,7 +6488,15 @@ class Editor {
         this.onSelectionChange();
     }
     onDragMove(event) {
-        this.setCurrentSession(event.target);
+        const target = document.elementFromPoint(event.clientX, event.clientY);
+        const customElement = this.getCustomElement(target);
+        if (customElement) {
+            const elementSessionId = +customElement.attributes.getNamedItem('data-session-id').value;
+            this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
+        }
+        else {
+            this.regulatorService.setMainSessionAsCurrent();
+        }
         const cursorPosition = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         if (cursorPosition.row === this.selection.cursor.row && cursorPosition.column === this.selection.cursor.column) {
             return;
@@ -6615,6 +6713,14 @@ class Editor {
         this.session.removeTableColumns(insertIndex, startIndex, endIndex);
         this.changedTableSize(insertIndex, sessionId);
     }
+    removeTable(insertIndex, sessionId) {
+        this.regulatorService.setCustomSessionAsCurrent(sessionId);
+        const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, insertIndex);
+        this.selection.placeCursor(beforeTable);
+        this.saveRemoveTableToHistory(insertIndex);
+        this.session.removeTable(insertIndex);
+        this.onSelectionChange();
+    }
     resizeTableColumns(resizeTableColumns, sessionId) {
         this.regulatorService.setCustomSessionAsCurrent(sessionId);
         const beforeTable = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, resizeTableColumns.insertIndex);
@@ -6638,7 +6744,7 @@ class Editor {
         const format = session.model.formats.find(x => x.startIndex <= component.insertIndex && x.endIndex >= component.insertIndex);
         component.receiveStyle(format.textStyle);
     }
-    getClickedEdgeType(mousePosition) {
+    getEdgeTypeByPosition(mousePosition) {
         const positionY = mousePosition + this.mainSession.scrollTop - this.mainRenderer.container.getBoundingClientRect().top;
         const fullPageHeight = this.mainSession.displayData.pagesSpace + this.mainSession.displayData.pageHeight;
         const clickedPage = Math.floor(positionY / fullPageHeight) + 1;
@@ -6775,6 +6881,11 @@ class Editor {
             this.removeTableColumns(data.insertIndex, data.startIndex, data.endIndex, data.sessionId);
         });
     }
+    removeTableSubscription() {
+        return this.editorService.removeTable$.subscribe(data => {
+            this.removeTable(data.insertIndex, data.sessionId);
+        });
+    }
     removeRightSubscription() {
         return this.editorService.removeRight$.subscribe(() => this.removeRight());
     }
@@ -7545,8 +7656,9 @@ class TableOverlayMenuComponent {
         const removeColumnsMessage = this.selectedRowsCount > 1
             ? this.translateService.instant('NODER.COMPLEX_LABEL.REMOVE_COLUMNS', { count: this.selectedColumnsCount })
             : this.translateService.instant('NODER.LABEL.REMOVE_COLUMN');
+        const removeTableMessage = this.translateService.instant('NODER.LABEL.REMOVE_TABLE');
         this.insertMessages = { insertRowsAboveMessage, insertRowsBelowMessage, insertColumnsLeftMessage, insertColumnsRightMessage };
-        this.removeMessages = { removeRowsMessage, removeColumnsMessage };
+        this.removeMessages = { removeRowsMessage, removeColumnsMessage, removeTableMessage };
     }
     onInsertRowsAbove() {
         this.editorService.insertTableRows(this.tableInsertIndex, this.selectedRowsCount, this.targets.rowIndexes.startIndex, this.selectionRange.rowIndexes.startIndex, this.sessionId);
@@ -7572,12 +7684,16 @@ class TableOverlayMenuComponent {
         this.editorService.removeTableColumns(this.tableInsertIndex, this.selectionRange.cellIndexes.startIndex, this.selectionRange.cellIndexes.endIndex, this.sessionId);
         this.overlayService.close();
     }
+    onRemoveTable() {
+        this.editorService.removeTable(this.tableInsertIndex, this.sessionId);
+        this.overlayService.close();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableOverlayMenuComponent, isStandalone: false, selector: "app-nod-table-overlay-menu", inputs: { selectionRange: "selectionRange", targets: "targets", canRemoveRows: "canRemoveRows", canRemoveColumns: "canRemoveColumns", tableInsertIndex: "tableInsertIndex", sessionId: "sessionId" }, ngImport: i0, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableOverlayMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-table-overlay-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"] }]
+            args: [{ selector: 'app-nod-table-overlay-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsAbove()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsAboveMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertRowsBelow()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertRowsBelowMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsLeft()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsLeftMessage }}\n</div>\n<div\n    class=\"menu-item\"\n    (click)=\"onInsertColumnsRight()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-add\"></mat-icon>\n    {{ insertMessages.insertColumnsRightMessage }}\n</div>\n<ng-container *ngIf=\"canRemoveRows || canRemoveColumns\">\n    <div class=\"menu-separator\">\n        <div class=\"menu-separator-top\"></div>\n        <div class=\"menu-separator-bottom\"></div>\n    </div>\n    <div\n        *ngIf=\"canRemoveRows\"\n        class=\"menu-item\"\n        (click)=\"onRemoveRows()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeRowsMessage }}\n    </div>\n    <div\n        *ngIf=\"canRemoveColumns\"\n        class=\"menu-item\"\n        (click)=\"onRemoveColumns()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeColumnsMessage }}\n    </div>\n    <div\n        class=\"menu-item\"\n        (click)=\"onRemoveTable()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-delete\"></mat-icon>\n        {{ removeMessages.removeTableMessage }}\n    </div>\n</ng-container>\n", styles: [":host{position:absolute;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 6px 2px #3c404326;overflow-y:auto;background:#fff;cursor:default;font-size:13px;margin:0;padding:6px 0}.menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;min-height:20px;color:#202124;font-size:16px;letter-spacing:.2px;line-height:20px;padding:6px}.menu-item:hover{background-color:#0000001a}.mat-icon{margin-right:6px;width:20px;height:20px;font-size:20px}.menu-separator{-webkit-user-select:none;user-select:none}.menu-separator .menu-separator-top{padding:4px}.menu-separator .menu-separator-bottom{border-top:1px solid #dadce0;padding:4px}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }, { type: i4.TranslateService }], propDecorators: { selectionRange: [{
                 type: Input
             }], targets: [{
@@ -7622,6 +7738,7 @@ class TableSelection {
             if (this.session.isEdgeOrWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
                 return;
             }
+            event.stopPropagation();
             event.preventDefault();
             if (this.editorService.isViewOnly) {
                 return;
@@ -9084,7 +9201,26 @@ class DisplayData extends EventEmitting {
             }
             const isAfterPageBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
             const lineInfo = DisplayTokenHelper.getLineInfoFromToken(prevToken, wrapTokens[0], wrapTokens, isAfterPageBreak);
-            lineInfo.backgroundColor = model.paragraphs[paragraphIndex].paragraphStyle.backgroundColor;
+            const paragraphStyle = model.paragraphs[paragraphIndex].paragraphStyle;
+            lineInfo.backgroundColor = paragraphStyle.backgroundColor;
+            const isLastLineOfParagraph = !wrapLimit || prevToken.isLineBreak;
+            if (paragraphStyle.alignment === Alignment$1.justify && !isLastLineOfParagraph && wrapTokens.length > 1) {
+                let currentLineWidth = 0;
+                let spaceCount = 0;
+                for (const token of wrapTokens) {
+                    currentLineWidth += token.width;
+                    if (token.displayValue === DisplayValue.space) {
+                        spaceCount++;
+                    }
+                }
+                const { left, right, firstLine, hanging } = lineInfo.indent;
+                const indent = left + right + firstLine - hanging || 0;
+                const availableWidth = this.contentWidth - indent;
+                const whitespaceDeficit = availableWidth - currentLineWidth;
+                if (spaceCount > 0 && whitespaceDeficit > 0) {
+                    lineInfo.wordSpacing = whitespaceDeficit / spaceCount;
+                }
+            }
             rowInfos.push(lineInfo);
             if (!wrapLimit) {
                 break;
@@ -9807,57 +9943,6 @@ class EdgeSessionSourceModel {
     }
 }
 
-class BreakModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class BordersStyleModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ImageModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.border) {
-                fields.border = new BordersStyleModel(fields.border);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class TabModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ContentsOperationsHelper {
-    static GetRestoreFromSlice(contents, startIndex, count) {
-        const endIndex = startIndex + count;
-        const text = contents.content.slice(startIndex, endIndex);
-        const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex);
-        const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
-        const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
-        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
-        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
-        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
-        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
-        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links });
-    }
-}
-
 class CustomComponentHelper {
     static applyRemovingComponents(components, startIndex, endIndex) {
         let firstRemovingIndex = null;
@@ -11350,6 +11435,11 @@ class OperationsHelper {
                     this.moveRange(document, model);
                     break;
                 }
+                case CommandType.RemoveTable: {
+                    const model = command.removeTable;
+                    this.removeTable(contents, model.insertIndex);
+                    break;
+                }
             }
         });
     }
@@ -11646,6 +11736,9 @@ class OperationsHelper {
     static removeTableColumns(document, insertIndex, startIndex, endIndex, contentWidth) {
         TableOperationsHelper.removeTableColumns(document.tables, insertIndex, startIndex, endIndex, contentWidth);
     }
+    static removeTable(document, insertIndex) {
+        this.delete(document, insertIndex, 1);
+    }
     static restoreTable(document, insertIndex, oldTable) {
         TableOperationsHelper.restoreTable(document.tables, insertIndex, oldTable);
     }
@@ -12187,7 +12280,7 @@ class EditSession {
     createRestoreFromSlice(paragraphStart, indexInStart, paragraphEnd, indexInEnd) {
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, paragraphStart, indexInStart);
         const endIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, paragraphEnd, indexInEnd);
-        return ContentsOperationsHelper.GetRestoreFromSlice(this.model, startIndex, endIndex);
+        return ContentsOperationsHelper.GetRestoreFromSlice(this.model, startIndex, endIndex - startIndex);
     }
     addComponent(customElements, model, componentType) {
         const customElement = this.customContentService.componentService.createComponent(componentType, {
@@ -12318,6 +12411,20 @@ class EditSession {
         OperationsHelper.removeTableColumns(this.model, insertIndex, startIndex, endIndex, this.displayData.contentWidth);
         table.instance.updateTable();
     }
+    removeTable(insertIndex) {
+        const position = this.displayData.indexToPosition(insertIndex, 0);
+        const endPosition = this.displayData.indexToPosition(insertIndex + 1, 0);
+        this.displayData.removeRange(new Range(position, endPosition));
+        CustomComponentHelper.applyRemovingComponents(this.customComponents.tables, insertIndex, insertIndex);
+        OperationsHelper.removeTable(this.model, insertIndex);
+        this.selection.placeCursor(position);
+        this.displayData.resetAllNumberingInfo(position.row);
+        this.displayData.updateNextLineIndexes(position.row, position.row);
+        if (endPosition.row - position.row && this.type !== 'cell') {
+            this.displayData.updateNumberingsDataOnChange(position.row + 1);
+        }
+        this.applyToolbarStyles();
+    }
     resizeTableColumns(resizeTableColumns) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === resizeTableColumns.insertIndex);
         this.displayData.resetNumberingInfoByTableCell(table);
@@ -14514,7 +14621,7 @@ class FontComponent {
     constructor() {
         this.isDisabled = false;
         this.selectFont = new EventEmitter();
-        this.fonts = ['Arial', DEFAULT_FONT_FAMILY, 'Times New Roman', 'Verdana'];
+        this.fonts = ['Arial', DEFAULT_FONT_FAMILY, 'Roboto', 'Verdana'];
         this.font = DEFAULT_FONT_FAMILY;
     }
     set styles(value) {
@@ -14552,7 +14659,7 @@ class FontSizeComponent {
     constructor() {
         this.selectFontSize = new EventEmitter();
         this.fontSizeControl = new FormControl(0);
-        this.fontSizes = [8, 9, 10, 11, 12, DEFAULT_FONT_SIZE, 18, 24, 30, 36, 48, 60, 72, 96];
+        this.fontSizes = [8, 9, 10, DEFAULT_FONT_SIZE, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96];
     }
     set isDisabled(value) {
         this._isDisabled = value;
@@ -14743,11 +14850,11 @@ class FormatComponent {
         this.selectAlignment.emit(format);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FormatComponent, isStandalone: false, selector: "app-nod-format", inputs: { isDisabled: "isDisabled", alignment: "alignment" }, outputs: { selectAlignment: "selectAlignment" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"], dependencies: [{ kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormatComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-format', standalone: false, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-format', standalone: false, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\"\n    [value]=\"alignment\"\n    (change)=\"onSelectFormat($event.value)\">\n    <mat-button-toggle\n        [value]=\"alignments.Left\"\n        [matTooltip]=\"'NODER.TOOLTIP.LEFT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignleft\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Center\"\n        [matTooltip]=\"'NODER.TOOLTIP.CENTER' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-aligncenter\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Right\"\n        [matTooltip]=\"'NODER.TOOLTIP.RIGHT' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-alignright\"></mat-icon>\n    </mat-button-toggle>\n    <mat-button-toggle\n        [value]=\"alignments.Justify\"\n        [matTooltip]=\"'NODER.TOOLTIP.JUSTIFY' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-align\"></mat-icon>\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], alignment: [{