@talrace/ngx-noder 0.0.46 → 0.0.47

package/fesm2022/talrace-ngx-noder.mjs

@@ -40,6 +40,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
@@ -576,6 +578,10 @@ class EditorService {
         this._removeRight$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
+        this._updateTableBorderStyle$ = new Subject();
+        this._updateTableBorderWidth$ = new Subject();
+        this._updateTableBorders$ = new Subject();
+        this._isTableSelected$ = new BehaviorSubject(false);
         this._redo$ = new Subject();
         this._undo$ = new Subject();
         this._print$ = new Subject();
@@ -601,7 +607,10 @@ class EditorService {
         this._leftIndentParagraph$ = new Subject();
         this._tabSettings$ = new Subject();
         this._rightIndentParagraph$ = new Subject();
-        this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
+        this._paragraphStyle$ = new BehaviorSubject({
+            paragraphStyle: new ParagraphStyleModel(),
+            numberingModel: null
+        });
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -747,6 +756,21 @@ class EditorService {
     get insertTable$() {
         return this._insertTable$.asObservable();
     }
+    get updateTableBorderStyle$() {
+        return this._updateTableBorderStyle$.asObservable();
+    }
+    get updateTableBorderWidth$() {
+        return this._updateTableBorderWidth$.asObservable();
+    }
+    get updateTableBorders$() {
+        return this._updateTableBorders$.asObservable();
+    }
+    get isTableSelected() {
+        return this._isTableSelected$.value;
+    }
+    get isTableSelected$() {
+        return this._isTableSelected$.asObservable();
+    }
     get redo$() {
         return this._redo$.asObservable();
     }
@@ -847,8 +871,8 @@ class EditorService {
     applyRightIndentParagraph(value) {
         this._rightIndentParagraph$.next(value);
     }
-    paragraphStyle(value) {
-        this._paragraphStyle$.next(value);
+    paragraphStyle(value, numbering = null) {
+        this._paragraphStyle$.next({ paragraphStyle: value, numberingModel: numbering });
     }
     applyRightMarginPageFormat(value) {
         this._rightMarginPageFormat$.next(value);
@@ -980,6 +1004,21 @@ class EditorService {
     insertTable(tableData) {
         this._insertTable$.next(tableData);
     }
+    updateTableBorderStyle(style) {
+        this._updateTableBorderStyle$.next(style);
+    }
+    updateTableBorderWidth(width) {
+        this._updateTableBorderWidth$.next(width);
+    }
+    updateTableBorders(borders) {
+        this._updateTableBorders$.next(borders);
+    }
+    setIsTableSelected(value) {
+        if (this.isTableSelected === value) {
+            return;
+        }
+        this._isTableSelected$.next(value);
+    }
     undo() {
         this._undo$.next();
     }
@@ -1199,10 +1238,13 @@ class DefaultImageApiService {
 class GrammarService {
     constructor() {
         this.debounceTime = 3000;
+        this.maxConcurrentRequests = 3;
         this.paragraphSubjects = new Map();
         this.debounceSubscriptions = new Map();
         this.grammarCheckRequests = new Subject();
         this.grammarCheckResults = new Subject();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
     }
     get grammarCheckRequests$() {
         return this.grammarCheckRequests.asObservable();
@@ -1218,27 +1260,44 @@ class GrammarService {
         subject.next(paragraph);
     }
     removeParagraph(sessionId, paragraphId) {
-        const subject = this.paragraphSubjects.get(`${sessionId}-${paragraphId}`);
-        const subscription = this.debounceSubscriptions.get(`${sessionId}-${paragraphId}`);
+        const key = `${sessionId}-${paragraphId}`;
+        const subject = this.paragraphSubjects.get(key);
+        const subscription = this.debounceSubscriptions.get(key);
+        this.requestQueue = this.requestQueue.filter(x => x.id !== key);
         if (subject) {
             subject.complete();
-            this.paragraphSubjects.delete(`${sessionId}-${paragraphId}`);
+            this.paragraphSubjects.delete(key);
         }
         if (subscription) {
             subscription.unsubscribe();
-            this.debounceSubscriptions.delete(`${sessionId}-${paragraphId}`);
+            this.debounceSubscriptions.delete(key);
         }
     }
     publishGrammarCheckResults(paragraphId, errors) {
         this.grammarCheckResults.next({ paragraphId, errors });
+        this.requestsInFlight--;
+        this.processQueue();
+    }
+    enqueueParagraphs(sessionId, paragraphs) {
+        const requests = paragraphs
+            .filter(x => x.content.trim().length > 0 && !this.requestQueue.some(y => y.id === `${sessionId}-${x.id}`))
+            .map(x => ({ id: `${sessionId}-${x.id}`, paragraph: x.content }));
+        this.requestQueue.unshift(...requests);
+        this.processQueue();
     }
     destroy() {
-        this.paragraphSubjects.forEach(subject => subject.complete());
+        for (const [, subject] of this.paragraphSubjects) {
+            subject.complete();
+        }
         this.paragraphSubjects.clear();
-        this.debounceSubscriptions.forEach(subscription => subscription.unsubscribe());
+        for (const [, subscription] of this.debounceSubscriptions) {
+            subscription.unsubscribe();
+        }
         this.debounceSubscriptions.clear();
         this.grammarCheckRequests.complete();
         this.grammarCheckResults.complete();
+        this.requestQueue = [];
+        this.requestsInFlight = 0;
     }
     registerParagraph(sessionId, paragraph) {
         if (this.paragraphSubjects.has(`${sessionId}-${paragraph.id}`)) {
@@ -1248,9 +1307,22 @@ class GrammarService {
         this.paragraphSubjects.set(`${sessionId}-${paragraph.id}`, subject);
         const subscription = subject
             .pipe(distinctUntilChanged((x, y) => x.content.trim() === y.content.trim()), debounceTime(this.debounceTime), filter(x => x.content.trim().length > 0))
-            .subscribe(x => this.grammarCheckRequests.next({ id: `${sessionId}-${x.id}`, paragraph: x.content }));
+            .subscribe(x => this.enqueueGrammarCheck(`${sessionId}-${x.id}`, x.content));
         this.debounceSubscriptions.set(`${sessionId}-${paragraph.id}`, subscription);
     }
+    enqueueGrammarCheck(id, paragraph) {
+        this.requestQueue = this.requestQueue.filter(x => x.id !== id);
+        const request = { id, paragraph };
+        this.requestQueue.unshift(request);
+        this.processQueue();
+    }
+    processQueue() {
+        while (this.requestsInFlight <= this.maxConcurrentRequests && this.requestQueue.length > 0) {
+            const request = this.requestQueue.shift();
+            this.requestsInFlight++;
+            this.grammarCheckRequests.next(request);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarService, providedIn: 'root' }); }
 }
@@ -1300,6 +1372,7 @@ var CommandType;
     CommandType[CommandType["RemoveInsertedPageFormat"] = 34] = "RemoveInsertedPageFormat";
     CommandType[CommandType["RestorePageFormats"] = 35] = "RestorePageFormats";
     CommandType[CommandType["ApplyParagraphs"] = 36] = "ApplyParagraphs";
+    CommandType[CommandType["ApplyTableCellsStyles"] = 37] = "ApplyTableCellsStyles";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1378,6 +1451,14 @@ class ApplyParagraphStyleModel {
     }
 }
 
+class ApplyTableCellsStylesModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyTextStyleModel {
     constructor(fields) {
         if (fields) {
@@ -2087,6 +2168,14 @@ class MoveRangeModel {
     }
 }
 
+let CellDataModel$1 = class CellDataModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+};
+
 class RemoveEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -2218,6 +2307,19 @@ class OperationHistory {
         const undoStep = new DeleteModel({ startIndex: model.insertIndex, count });
         this.addToHistory(undoStep, model);
     }
+    pushApplyTableCellsStyles(currentTable, model, targets) {
+        const undoStep = new ApplyTableCellsStylesModel({
+            insertIndex: model.insertIndex,
+            cellsData: model.cellsData.map(x => {
+                return new CellDataModel$1({
+                    rowIndex: x.rowIndex,
+                    cellIndex: x.cellIndex,
+                    borders: currentTable.rows[x.rowIndex].cells[x.cellIndex].borders
+                });
+            })
+        });
+        this.addToHistory(undoStep, model, null, targets);
+    }
     pushInsertStyledText(insertIndex, text, style) {
         const redoStep = new InsertStyledTextModel({ insertIndex, text, textStyle: style });
         const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
@@ -4261,6 +4363,18 @@ class ParagraphOperationsHelper {
     }
 }
 
+var Borders;
+(function (Borders) {
+    Borders[Borders["Bottom"] = 0] = "Bottom";
+    Borders[Borders["Top"] = 1] = "Top";
+    Borders[Borders["Left"] = 2] = "Left";
+    Borders[Borders["Right"] = 3] = "Right";
+    Borders[Borders["Empty"] = 4] = "Empty";
+    Borders[Borders["All"] = 5] = "All";
+    Borders[Borders["Outside"] = 6] = "Outside";
+    Borders[Borders["Inside"] = 7] = "Inside";
+})(Borders || (Borders = {}));
+
 class ColumnModel {
     constructor(fields) {
         if (fields) {
@@ -4269,6 +4383,55 @@ class ColumnModel {
     }
 }
 
+var LineStyles;
+(function (LineStyles) {
+    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
+    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
+    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
+    LineStyles[LineStyles["Dash"] = 3] = "Dash";
+    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
+    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
+    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
+    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
+    LineStyles[LineStyles["Single"] = 8] = "Single";
+    LineStyles[LineStyles["Thick"] = 9] = "Thick";
+    LineStyles[LineStyles["Double"] = 10] = "Double";
+    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
+    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
+    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
+    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
+    LineStyles[LineStyles["Triple"] = 15] = "Triple";
+    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
+    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
+    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
+    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
+    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
+    LineStyles[LineStyles["Wave"] = 25] = "Wave";
+    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
+    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
+    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
+    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
+    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
+    LineStyles[LineStyles["Outset"] = 31] = "Outset";
+    LineStyles[LineStyles["Inset"] = 32] = "Inset";
+    LineStyles[LineStyles["Nil"] = 33] = "Nil";
+})(LineStyles || (LineStyles = {}));
+
+var Positions;
+(function (Positions) {
+    Positions[Positions["Top"] = 0] = "Top";
+    Positions[Positions["Right"] = 1] = "Right";
+    Positions[Positions["Bottom"] = 2] = "Bottom";
+    Positions[Positions["Left"] = 3] = "Left";
+    Positions[Positions["All"] = 4] = "All";
+    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
+    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
+})(Positions || (Positions = {}));
+
 var ResizerSide;
 (function (ResizerSide) {
     ResizerSide[ResizerSide["Left"] = 0] = "Left";
@@ -4285,6 +4448,13 @@ class RowModel {
     }
 }
 
+class SelectionRangeModel {
+    constructor(rowIndexes, cellIndexes) {
+        this.rowIndexes = rowIndexes;
+        this.cellIndexes = cellIndexes;
+    }
+}
+
 var VerticalMerge;
 (function (VerticalMerge) {
     VerticalMerge["Restart"] = "restart";
@@ -4637,6 +4807,206 @@ class TableOperationsHelper {
             }
         });
     }
+    static applyTableCellsStyles(tables, insertIndex, cellData) {
+        const table = tables.find(x => x.insertIndex === insertIndex);
+        for (const cellDataItem of cellData) {
+            if (cellDataItem.rowIndex < 0 || cellDataItem.rowIndex >= table.rows.length) {
+                continue;
+            }
+            if (cellDataItem.cellIndex < 0 || cellDataItem.cellIndex >= table.rows[cellDataItem.rowIndex].cells.length) {
+                continue;
+            }
+            table.rows[cellDataItem.rowIndex].cells[cellDataItem.cellIndex].borders = cellDataItem.borders?.length
+                ? cellDataItem.borders
+                : null;
+        }
+    }
+    static getApplyTableCellsBordersStyle(style, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ lineStyle: style })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBordersWidth(width, table, selection) {
+        const cellsMap = this.getApplyBordersStylesCells(table, selection, [
+            Positions.Top,
+            Positions.Bottom,
+            Positions.Right,
+            Positions.Left
+        ]);
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, new BordersStyleModel({ width })),
+            insertIndex: table.insertIndex
+        });
+    }
+    static getApplyTableCellsBorders(border, table, selection) {
+        let cellsMap = new Map();
+        let targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Single });
+        switch (border) {
+            case Borders.Top:
+                // Upper border - only for the top row and their upper neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                break;
+            case Borders.Bottom:
+                // The bottom border is only for the bottom row and their lower neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                break;
+            case Borders.Left:
+                // Left border - only for the left column and its left neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                break;
+            case Borders.Right:
+                // Right border - only for the right column and its right neighbors
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                break;
+            case Borders.All:
+                // Add all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                break;
+            case Borders.Outside: {
+                // Outer borders - combination of Top, Bottom, Left, Right
+                cellsMap = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.startIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                const bottomCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.endIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Bottom]);
+                this.mergeCellStyles(cellsMap, bottomCells);
+                const leftCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.startIndex }), [Positions.Left]);
+                this.mergeCellStyles(cellsMap, leftCells);
+                const rightCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: selection.cellIndexes.endIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Right]);
+                this.mergeCellStyles(cellsMap, rightCells);
+                break;
+            }
+            case Borders.Inside: {
+                // Horizontal inner borders (between lines)
+                for (let rowIndex = selection.rowIndexes.startIndex + 1; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+                    const horizontalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: rowIndex, endIndex: rowIndex }, { startIndex: selection.cellIndexes.startIndex, endIndex: selection.cellIndexes.endIndex }), [Positions.Top]);
+                    this.mergeCellStyles(cellsMap, horizontalCells);
+                }
+                // Vertical inner borders (between columns)
+                for (let cellIndex = selection.cellIndexes.startIndex + 1; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                    const verticalCells = this.getApplyBordersStylesCells(table, new SelectionRangeModel({ startIndex: selection.rowIndexes.startIndex, endIndex: selection.rowIndexes.endIndex }, { startIndex: cellIndex, endIndex: cellIndex }), [Positions.Left]);
+                    this.mergeCellStyles(cellsMap, verticalCells);
+                }
+                break;
+            }
+            case Borders.Empty:
+                // Remove all borders from the selected cells
+                cellsMap = this.getApplyBordersStylesCells(table, selection, [
+                    Positions.Top,
+                    Positions.Bottom,
+                    Positions.Right,
+                    Positions.Left
+                ]);
+                targetBorderStyle = new BordersStyleModel({ lineStyle: LineStyles.Nil });
+                break;
+        }
+        if (!cellsMap.size) {
+            return null;
+        }
+        return new ApplyTableCellsStylesModel({
+            cellsData: this.getCellDataFromBorderCells(cellsMap, targetBorderStyle),
+            insertIndex: table.insertIndex
+        });
+    }
+    static mergeCellStyles(existingCellsMap, newCellsMap) {
+        for (const [key, newCell] of newCellsMap) {
+            if (existingCellsMap.has(key)) {
+                // Add the position to the existing cell
+                const existingCell = existingCellsMap.get(key);
+                const newPositions = newCell.updatePositions.filter(y => !existingCell.updatePositions.includes(y));
+                existingCell.updatePositions.push(...newPositions);
+            }
+            else {
+                existingCellsMap.set(key, { ...newCell });
+            }
+        }
+    }
+    static getApplyBordersStylesCells(table, selection, defaultPositions) {
+        const result = new Map();
+        for (let rowIndex = selection.rowIndexes.startIndex; rowIndex <= selection.rowIndexes.endIndex; rowIndex++) {
+            for (let cellIndex = selection.cellIndexes.startIndex; cellIndex <= selection.cellIndexes.endIndex; cellIndex++) {
+                // Upper border - add to the current cell and its upper neighbor
+                if (rowIndex === selection.rowIndexes.startIndex && defaultPositions.includes(Positions.Top)) {
+                    this.addPositionsToCell(result, table, rowIndex - 1, cellIndex, [Positions.Bottom]);
+                }
+                // Bottom border - add to the current cell and its lower neighbor
+                if (rowIndex === selection.rowIndexes.endIndex && defaultPositions.includes(Positions.Bottom)) {
+                    this.addPositionsToCell(result, table, rowIndex + 1, cellIndex, [Positions.Top]);
+                }
+                // Left border - add to the current cell and its left neighbor
+                if (cellIndex === selection.cellIndexes.startIndex && defaultPositions.includes(Positions.Left)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex - 1, [Positions.Right]);
+                }
+                // Right border - add to the current cell and its right neighbor
+                if (cellIndex === selection.cellIndexes.endIndex && defaultPositions.includes(Positions.Right)) {
+                    this.addPositionsToCell(result, table, rowIndex, cellIndex + 1, [Positions.Left]);
+                }
+                this.addPositionsToCell(result, table, rowIndex, cellIndex, defaultPositions);
+            }
+        }
+        return result;
+    }
+    static addPositionsToCell(cellsMap, table, rowIndex, cellIndex, positions) {
+        if (rowIndex < 0 || rowIndex >= table.rows.length || cellIndex < 0 || cellIndex >= table.rows[rowIndex].cells.length) {
+            return;
+        }
+        const key = `${rowIndex},${cellIndex}`;
+        const cell = table.rows[rowIndex].cells[cellIndex];
+        if (cellsMap.has(key)) {
+            // Combine positions if the cell already exists in the Map
+            const existing = cellsMap.get(key);
+            positions.forEach(x => {
+                if (!existing.updatePositions.includes(x)) {
+                    existing.updatePositions.push(x);
+                }
+            });
+        }
+        else {
+            // Add a new cell
+            cellsMap.set(key, { cell, rowIndex, cellIndex, updatePositions: [...positions] });
+        }
+    }
+    static getCellDataFromBorderCells(cellsMap, updateBorderData) {
+        if (!cellsMap.size) {
+            return [];
+        }
+        const cellsData = [];
+        for (const cellData of cellsMap.values()) {
+            const newBorders = [];
+            const existingBorders = cellData.cell.borders ?? [];
+            // Add or update borders with new data
+            cellData.updatePositions.forEach(x => {
+                const border = existingBorders.find(y => y.position === x) ??
+                    new BordersStyleModel({ position: x, lineStyle: LineStyles.Single, width: 1 });
+                newBorders.push(new BordersStyleModel({ ...border, ...updateBorderData }));
+            });
+            // Add existing borders without updates
+            existingBorders
+                .filter(x => !cellData.updatePositions.includes(x.position))
+                .forEach(x => newBorders.push(new BordersStyleModel({ ...x })));
+            cellsData.push(new CellDataModel$1({
+                rowIndex: cellData.rowIndex,
+                cellIndex: cellData.cellIndex,
+                borders: newBorders.length ? newBorders : null
+            }));
+        }
+        return cellsData;
+    }
 }
 
 class TabOperationsHelper {
@@ -4893,6 +5263,11 @@ class OperationsHelper {
                     this.applyParagraphs(contents, model.paragraphs);
                     break;
                 }
+                case CommandType.ApplyTableCellsStyles: {
+                    const model = command.applyTableCellsStyles;
+                    this.applyTableCellsStyles(contents, model);
+                    break;
+                }
             }
         });
     }
@@ -5082,6 +5457,9 @@ class OperationsHelper {
         }
         return result;
     }
+    static applyTableCellsStyles(document, model) {
+        TableOperationsHelper.applyTableCellsStyles(document.tables, model.insertIndex, model.cellsData);
+    }
     static insertStyledText(document, text, index, style) {
         document.content = ContentOperationsHelper.insertContent(document.content, text, index);
         FormatOperationsHelper.insertStyledContent(document.formats, index, text.length, style);
@@ -5358,9 +5736,10 @@ class PositionHelper {
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
         const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
+        const markerWidth = paragraphInfo.lineIndex === 0 ? (paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].markerWidth ?? 0) : 0;
         const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
         return {
-            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin,
+            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
             lineHeight: paragraphInfo.lineHeight,
             sizeCurrent: size,
@@ -5410,7 +5789,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5437,7 +5817,8 @@ class PositionHelper {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (lineInfo.markerWidth ?? 0) : 0;
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
         const wordSpacing = lineInfo.wordSpacing ?? 0;
         while (indexInLine < tokens.length) {
             const token = tokens[indexInLine];
@@ -5475,7 +5856,8 @@ class PositionHelper {
         }
         const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin;
+        const markerWidth = lineIndex === 0 ? (textLineInfo.markerWidth ?? 0) : 0;
+        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
         while (column < tokens.length) {
             const token = tokens[column];
             if (width < token.width) {
@@ -5589,7 +5971,7 @@ class RenderingHelper {
         const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
+        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - currentParagraph.textLinesInfo[splitIndex].markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         let isLastLineFragment = false;
@@ -6456,7 +6838,9 @@ class TextLayer {
         else {
             const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
                 ? 0
-                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
+                : paragraphSettings.numberingData.width +
+                    paragraphSettings.numberingData.paddingLeft -
+                    paragraphSettings.textLinesInfo[0].markerWidth;
             const lineInfo = paragraphSettings.textLinesInfo[0];
             const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft, this.session.generalProperties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
@@ -6772,6 +7156,9 @@ class CommandModel {
             if (fields.applyParagraphStyle) {
                 fields.applyParagraphStyle = new ApplyParagraphStyleModel(fields.applyParagraphStyle);
             }
+            if (fields.applyTableCellsStyles) {
+                fields.applyTableCellsStyles = new ApplyTableCellsStylesModel(fields.applyTableCellsStyles);
+            }
             if (fields.applyTextStyle) {
                 fields.applyTextStyle = new ApplyTextStyleModel(fields.applyTextStyle);
             }
@@ -6924,6 +7311,9 @@ class SaveCommandsHelper {
     static getInsertTableCommand(insertTable, targets) {
         return new CommandModel({ commandType: CommandType.InsertTable, insertTable, targets });
     }
+    static getApplyTableCellsStylesCommand(applyTableCellsStyles, targets) {
+        return new CommandModel({ commandType: CommandType.ApplyTableCellsStyles, applyTableCellsStyles, targets });
+    }
     static getInsertTableColumnsCommand(columnsCount, inheritIndex, insertIndex, targetIndex, targets) {
         const insertTableColumns = new InsertTableColumnsModel({ count: columnsCount, inheritIndex, insertIndex, targetIndex });
         return new CommandModel({ commandType: CommandType.InsertTableColumns, insertTableColumns, targets });
@@ -7831,7 +8221,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        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.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
+        this.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.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8016,6 +8406,34 @@ class Editor {
         this.onContentChange();
         this.rerenderMarker();
     }
+    applyTableCellsStyles(data, handler) {
+        if (!this.session.isCell()) {
+            return;
+        }
+        const source = this.regulatorService.getSessionModel(this.session.sessionId).source;
+        const tableSession = this.regulatorService.getSession(this.regulatorService.currentSession.parentSessionId);
+        const tableComponent = tableSession.customComponents.tables.find(x => x.instance.sessionId === tableSession.sessionId && x.instance.insertIndex === source.table.insertIndex)?.instance;
+        if (!tableComponent) {
+            return;
+        }
+        const selection = tableComponent.tableSelection.selectionRange
+            ? tableComponent.tableSelection.selectionRange
+            : new SelectionRangeModel({ startIndex: source.cellComponent.rowIndex, endIndex: source.cellComponent.rowIndex }, { startIndex: source.cellComponent.cellIndex, endIndex: source.cellComponent.cellIndex });
+        const applyModel = handler(data, tableComponent.table, selection);
+        if (!applyModel) {
+            return;
+        }
+        const tableSessionModel = this.regulatorService.getSessionModel(tableSession.sessionId);
+        this.saveApplyTableCellsStylesToHistory(tableComponent.table, applyModel, this.regulatorService.getTargets(tableSessionModel));
+        tableSession.applyTableCellsStyles(applyModel);
+        const newCellSession = tableComponent.getCellSession(source.cellComponent.rowIndex, source.cellComponent.cellIndex);
+        this.regulatorService.setCustomSessionAsCurrent(newCellSession.sessionId);
+        this.changedTableSize(applyModel.insertIndex, tableSession.sessionId);
+        // restore table cells selection and highlight
+        this.selection.disableSelection();
+        tableComponent.tableSelection.selectionRange = selection;
+        tableComponent.tableSelection.highlightCurrentSelectionCells();
+    }
     replaceBy(model) {
         const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
@@ -8378,6 +8796,11 @@ class Editor {
             this.session.applyParagraphs(deepCopy.paragraphs);
             command = SaveCommandsHelper.getApplyParagraphsCommand(deepCopy.paragraphs, this.targets);
         }
+        else if (operation instanceof ApplyTableCellsStylesModel) {
+            this.session.applyTableCellsStyles(operation);
+            this.changedTableSize(operation.insertIndex, this.session.sessionId);
+            command = SaveCommandsHelper.getApplyTableCellsStylesCommand(operation, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -8435,6 +8858,10 @@ class Editor {
         this.history.pushInsertTable(model);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTableCommand(model, this.targets));
     }
+    saveApplyTableCellsStylesToHistory(table, model, targets) {
+        this.history.pushApplyTableCellsStyles(table, model, targets);
+        this.commandsService.createCommand(SaveCommandsHelper.getApplyTableCellsStylesCommand(model, targets));
+    }
     saveApplyTextStyleToHistory(startIndex, endIndex, textStyle) {
         const formats = FormatHelper.sliceSection(this.session.model.formats, startIndex, endIndex);
         const linkFormats = LinkHelper.sliceFormats(this.session.model.links, startIndex, endIndex);
@@ -8685,7 +9112,7 @@ class Editor {
         this.onSelectionChange();
         const paragraph = this.session.displayData.paragraphs[position.row];
         const error = this.grammarChecker.getError(this.session.sessionId, paragraph.id, position.column);
-        if (error && !this.overlayService.overlayRef) {
+        if (!this.editorService.isViewOnly && error && !this.overlayService.overlayRef) {
             const target = event.target;
             const lineEl = target.closest('.noder-line');
             if (lineEl) {
@@ -8910,6 +9337,7 @@ class Editor {
     initMainSession() {
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
@@ -8925,7 +9353,9 @@ class Editor {
         this.editorService.setHasSelection(!this.selection.isEmpty);
         const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
         const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
-        this.editorService.paragraphStyle(this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle);
+        const paragraphStyle = this.session.model.paragraphs[this.selection.selectedRange.start.row].paragraphStyle;
+        const numbering = this.session.generalProperties.numberings.find(x => x.numberingId === paragraphStyle.numberingId) ?? null;
+        this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
@@ -9128,6 +9558,7 @@ class Editor {
     viewOnlyModeSubscription() {
         return this.editorService.isViewOnly$.subscribe(() => {
             this.selection?.clearSelection();
+            this.renderer.loop.schedule({ grammar: true });
         });
     }
     applyLeftMarginPageFormatSubscription() {
@@ -9306,9 +9737,16 @@ class Editor {
         });
     }
     insertTableSubscription() {
-        return this.editorService.insertTable$.subscribe(data => {
-            this.insertTable(data);
-        });
+        return this.editorService.insertTable$.subscribe(data => this.insertTable(data));
+    }
+    updateTableBorderStyleSubscription() {
+        return this.editorService.updateTableBorderStyle$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersStyle(data, table, selection)));
+    }
+    updateTableBorderWidthSubscription() {
+        return this.editorService.updateTableBorderWidth$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBordersWidth(data, table, selection)));
+    }
+    updateTableBordersSubscription() {
+        return this.editorService.updateTableBorders$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBorders(data, table, selection)));
     }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
@@ -9435,6 +9873,7 @@ class Editor {
         }
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
+        this.container.nativeElement.style.width = `${pageWidth}px`;
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.model.tables.forEach(table => {
             this.changeColumnsWidth(table.columns, scalingRatio);
@@ -9691,8 +10130,10 @@ class DisplayTokenHelper {
             offsetBefore: prevToken.indentBefore,
             offsetAfter: prevToken.indentAfter,
             lineSpacing: prevToken.lineSpacing,
+            markerWidth: prevToken.markerWidth,
             isAfterPageBreak,
-            isEndedByPageBreak: prevToken.isPageBreak
+            isEndedByPageBreak: prevToken.isPageBreak,
+            isNumbering: prevToken.isNumbering
         });
         if (firstWrapToken) {
             info.align = firstWrapToken.align;
@@ -9704,6 +10145,8 @@ class DisplayTokenHelper {
             info.offsetAfter = firstWrapToken.indentAfter;
             info.lineSpacing = firstWrapToken.lineSpacing;
             info.hasTable = firstWrapToken.isTable;
+            info.isNumbering = firstWrapToken.isNumbering;
+            info.markerWidth = firstWrapToken.markerWidth;
         }
         let fontSize = 0;
         let ascent = 0;
@@ -9947,7 +10390,7 @@ class NoderTableCellComponent {
         this.editorService.disableSelection();
     }
     onStartResizing(event, border) {
-        if (this.session.isWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+        if (this.session.isCellWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
             return;
         }
         event.stopPropagation();
@@ -10017,55 +10460,6 @@ class RowDataModel {
     }
 }
 
-var LineStyles;
-(function (LineStyles) {
-    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
-    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
-    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
-    LineStyles[LineStyles["Dash"] = 3] = "Dash";
-    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
-    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
-    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
-    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
-    LineStyles[LineStyles["Single"] = 8] = "Single";
-    LineStyles[LineStyles["Thick"] = 9] = "Thick";
-    LineStyles[LineStyles["Double"] = 10] = "Double";
-    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
-    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
-    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
-    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
-    LineStyles[LineStyles["Triple"] = 15] = "Triple";
-    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
-    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
-    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
-    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
-    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
-    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
-    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
-    LineStyles[LineStyles["Wave"] = 25] = "Wave";
-    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
-    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
-    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
-    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
-    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
-    LineStyles[LineStyles["Outset"] = 31] = "Outset";
-    LineStyles[LineStyles["Inset"] = 32] = "Inset";
-    LineStyles[LineStyles["Nil"] = 33] = "Nil";
-})(LineStyles || (LineStyles = {}));
-
-var Positions;
-(function (Positions) {
-    Positions[Positions["Top"] = 0] = "Top";
-    Positions[Positions["Right"] = 1] = "Right";
-    Positions[Positions["Bottom"] = 2] = "Bottom";
-    Positions[Positions["Left"] = 3] = "Left";
-    Positions[Positions["All"] = 4] = "All";
-    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
-    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
-})(Positions || (Positions = {}));
-
 class TableCellHelper {
     static setCellBorders(cell, borders) {
         if (!borders?.length || !cell) {
@@ -10155,13 +10549,6 @@ class TableCellHelper {
     }
 }
 
-class SelectionRangeModel {
-    constructor(rowIndexes, cellIndexes) {
-        this.rowIndexes = rowIndexes;
-        this.cellIndexes = cellIndexes;
-    }
-}
-
 class TableOverlayMenuComponent {
     constructor(editorService, overlayService, translateService) {
         this.editorService = editorService;
@@ -10460,10 +10847,20 @@ class TableSelection {
         };
         const cellIndexes = {
             startIndex: 0,
-            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length))
+            endIndex: Math.max(...this.rowMatrix.map(x => x.cells.length - 1))
         };
         this.selectionRange = new SelectionRangeModel(rowIndexes, cellIndexes);
     }
+    highlightCurrentSelectionCells() {
+        if (!this.selectionRange) {
+            return;
+        }
+        for (let i = this.selectionRange.rowIndexes.startIndex; i <= this.selectionRange.rowIndexes.endIndex; i++) {
+            for (let j = this.selectionRange.cellIndexes.startIndex; j <= this.selectionRange.cellIndexes.endIndex; j++) {
+                this.rowMatrix[i].cells[j].highlightCell();
+            }
+        }
+    }
     clearSelection() {
         if (!this.selectionRange) {
             return;
@@ -11124,8 +11521,15 @@ class NumberingHelper {
         paragraph.numberingData.markerTextStyle = markerTextStyle;
         paragraph.numberingData.width = markerSizes.width;
         paragraph.numberingData.height = markerSizes.height;
-        const indentHanging = paragraphStyle.indentHanging ? paragraphStyle.indentHanging : numberingLevel.indentHanging;
-        paragraph.numberingData.paddingLeft = numberingLevel.indentLeft - indentHanging;
+        const indentLeft = paragraphStyle.indentLeft ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        let indent = 0;
+        if (!paragraphStyle.indentHanging && !paragraphStyle.indentFirstLine) {
+            indent = -numberingLevel.indentHanging;
+        }
+        else {
+            indent = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+        }
+        paragraph.numberingData.paddingLeft = indentLeft + indent;
     }
     static getMarkerSizes(marker, markerStyle) {
         let width = 0;
@@ -11497,11 +11901,6 @@ class DisplayData extends EventEmitting {
         });
         this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
-    emitAllParagraphs() {
-        for (const paragraph of this.paragraphs) {
-            this.ParagraphInfoChanges.next(new ParagraphInfoAdded(paragraph));
-        }
-    }
     insertText(position, text) {
         const endPoint = this.insertTextAndReturnEndCursorPosition(text, position);
         return endPoint;
@@ -11973,6 +12372,8 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
+                    isNumbering: lineInfo.isNumbering,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
                     isTab: false
@@ -12102,9 +12503,11 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
+                    markerWidth: lineInfo.markerWidth,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false
+                    isTab: false,
+                    isNumbering: lineInfo.isNumbering
                 });
                 tokens.push(token);
                 if (charCode !== prevCharCode ||
@@ -12180,6 +12583,8 @@ class DisplayData extends EventEmitting {
                 indentRight: lineInfo.indent.right,
                 indentBefore: lineInfo.offsetBefore,
                 indentAfter: lineInfo.offsetAfter,
+                markerWidth: lineInfo.markerWidth,
+                isNumbering: lineInfo.isNumbering,
                 isPageBreak: false,
                 isLineBreak: false,
                 isTab: false,
@@ -12198,13 +12603,16 @@ class DisplayData extends EventEmitting {
                 lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing
             });
         }
-        const indentLeft = this.getParagraphIndentLeft(model, paragraph);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const { indent, markerWidth } = this.getParagraphIndentLeft(model, paragraph);
+        return this.getLineInfoModel(paragraph, indent, markerWidth);
     }
     getParagraphIndentLeft(model, paragraph) {
         const numberingId = paragraph.paragraphStyle.numberingId;
         if (numberingId === null) {
-            return paragraph.paragraphStyle.indentLeft;
+            return {
+                indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, paragraph.paragraphStyle.indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+                markerWidth: 0
+            };
         }
         const level = paragraph.paragraphStyle.numberingLevel;
         const paragraphIndex = model.paragraphs.indexOf(paragraph);
@@ -12216,23 +12624,35 @@ class DisplayData extends EventEmitting {
         const marker = NumberingHelper.getMarker(levelModel, numberingId, model.paragraphs, paragraphIndex, this.generalProperties.numberingInfo);
         const markerSizes = NumberingHelper.getMarkerSizes(marker, markerTextStyle);
         markerWidth = markerSizes.width;
-        const hangingIndent = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
-        let paragraphIndent = levelModel.indentLeft - hangingIndent + markerWidth + markerWidth / marker.length;
-        return paragraphIndent;
+        let indentHanging = levelModel.indentHanging;
+        let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
+        if (paragraph.paragraphStyle.indentFirstLine || paragraph.paragraphStyle.indentHanging) {
+            if (paragraph.paragraphStyle.indentFirstLine) {
+                indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
+                indentHanging = 0;
+            }
+            else {
+                indentHanging = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
+            }
+        }
+        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft ? paragraph.paragraphStyle.indentLeft : levelModel.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return { indent, markerWidth: markerWidth + markerWidth / marker.length };
     }
     getLineInfoFromTextLine(index) {
         const paragraph = ParagraphStyleHelper.getParagraphAtIndex(this.model.paragraphs, index);
         const indentLeft = this.getIndentLeftFromTextLine(index);
-        return this.getLineInfoModel(paragraph, indentLeft);
+        const indent = new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, paragraph.paragraphStyle.indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        return this.getLineInfoModel(paragraph, indent, 0);
     }
-    getLineInfoModel(paragraph, indentLeft) {
-        const indentHanging = paragraph.paragraphStyle.numberingId === null ? paragraph.paragraphStyle.indentHanging : 0;
+    getLineInfoModel(paragraph, indent, markerWidth) {
         return new LineInfoModel({
             align: paragraph.paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
-            indent: new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, indentHanging ?? DEFAULT_PARAGRAPH_STYLE.indentHanging, indentLeft ?? DEFAULT_PARAGRAPH_STYLE.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight),
+            indent,
             offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
             offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing
+            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            isNumbering: !!markerWidth,
+            markerWidth
         });
     }
     getIndentLeftFromTextLine(insertIndex) {
@@ -13281,12 +13701,15 @@ class EditSession {
         return paragraphContent.substring(startColumn || 0, endColumn || paragraphContent.length);
     }
     isEdgeOrWithinEdge() {
-        return this.isEdge() || this.isWithinEdge();
+        return this.isEdge() || this.isCellWithinEdge();
     }
     isEdge() {
         return this.type === 'edge';
     }
-    isWithinEdge() {
+    isCell() {
+        return this.type === 'cell' || this.type === 'cellWithinEdge';
+    }
+    isCellWithinEdge() {
         return this.type === 'cellWithinEdge';
     }
     onRendered() {
@@ -13607,6 +14030,11 @@ class EditSession {
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
+    applyTableCellsStyles(model) {
+        const table = this.customComponents.tables.find(x => x.instance.insertIndex === model.insertIndex);
+        OperationsHelper.applyTableCellsStyles(this.model, model);
+        table.instance.updateTable();
+    }
     removeMoveRange(moveModel) {
         const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount - 1;
         const startPosition = this.displayData.indexToPosition(moveModel.sourceStartIndex, 0);
@@ -13833,11 +14261,12 @@ class GrammarChecker {
     constructor(grammarService) {
         this.grammarService = grammarService;
         this.ignoreKey = 'grammar-ignore';
-        this.paragraphSessionMap = new Map();
+        this.sessionMap = new Map();
         this.paragraphErrorMap = new Map();
+        this.checkedParagraphs = new Map();
         this.sessionSubscriptions = new Map();
-        this.sessions = [];
         this.ignoreList = [];
+        this.visibilitySubscriptions = new Map();
         try {
             const ignoreListJson = sessionStorage.getItem(this.ignoreKey);
             this.ignoreList = JSON.parse(ignoreListJson) ?? [];
@@ -13845,59 +14274,43 @@ class GrammarChecker {
         catch {
             this.ignoreList = [];
         }
-        this.checkResultsSubscription = grammarService.grammarCheckResults$.subscribe(result => {
-            const session = this.paragraphSessionMap.get(result.paragraphId);
-            if (session) {
-                const filteredErrors = this.filterErrors(result.errors);
-                this.paragraphErrorMap.set(result.paragraphId, filteredErrors);
-                const id = +result.paragraphId.split('-')[1];
-                session.renderer.updateGrammarHighlights(id, filteredErrors);
-            }
-        });
+        this.checkResultsSubscription = grammarService.grammarCheckResults$.subscribe(x => this.processGrammarCheckResults(x));
     }
     registerSession(session) {
-        if (this.sessions.some(x => x.sessionId === session.sessionId)) {
+        if (this.sessionMap.has(session.sessionId)) {
             return;
         }
-        this.sessions.push(session);
-        const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => {
-            if (x instanceof ParagraphInfosRemoved) {
-                for (const id of x.ids) {
-                    const errors = this.paragraphErrorMap.get(`${session.sessionId}-${id}`);
-                    if (errors?.length) {
-                        session.renderer.removeGrammarHighlights(id);
-                    }
-                    this.grammarService.removeParagraph(session.sessionId, id);
-                    this.paragraphSessionMap.delete(`${session.sessionId}-${id}`);
-                    this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
-                }
+        this.sessionMap.set(session.sessionId, session);
+        const updateSubscription = session.session.paragraphInfoChanges$.subscribe(x => this.processParagraphChange(session, x));
+        this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
+        this.visibilitySubscriptions.set(session.sessionId, session.renderer.ParagraphsAppeared$.subscribe(x => {
+            if (session.session.editorService.isViewOnly) {
                 return;
             }
-            this.adjustHighlights(x, session);
-            this.grammarService.updateParagraphContent(session.sessionId, x.paragraph);
-            this.paragraphSessionMap.set(`${session.sessionId}-${x.paragraph.id}`, session);
-        });
-        this.sessionSubscriptions.set(session.sessionId, [updateSubscription]);
+            const filtered = x.filter(y => !this.checkedParagraphs.get(session.sessionId)?.has(y.id));
+            this.grammarService.enqueueParagraphs(session.sessionId, filtered);
+        }));
     }
     unregisterSession(sessionId) {
-        const session = this.sessions.find(x => x.sessionId === sessionId);
+        const session = this.sessionMap.get(sessionId);
         if (!session) {
             return;
         }
-        this.sessions.splice(this.sessions.indexOf(session), 1);
+        this.sessionMap.delete(sessionId);
         const subscriptions = this.sessionSubscriptions.get(sessionId);
         if (subscriptions?.length) {
             for (const subscription of subscriptions) {
                 subscription.unsubscribe();
             }
         }
+        const visibilitySubscription = this.visibilitySubscriptions.get(sessionId);
+        visibilitySubscription?.unsubscribe();
+        this.visibilitySubscriptions.delete(sessionId);
         this.sessionSubscriptions.delete(sessionId);
-        for (const [id, mappedSession] of this.paragraphSessionMap.entries()) {
-            if (mappedSession.sessionId === sessionId) {
-                const paragraphId = +id.split('-')[1];
-                this.grammarService.removeParagraph(sessionId, paragraphId);
-                this.paragraphSessionMap.delete(id);
-            }
+        this.checkedParagraphs.delete(sessionId);
+        for (const paragraph of session.session.displayData.paragraphs) {
+            this.grammarService.removeParagraph(sessionId, paragraph.id);
+            this.paragraphErrorMap.delete(`${sessionId}-${paragraph.id}`);
         }
     }
     getError(sessionId, paragraphId, cursorIndex) {
@@ -13912,16 +14325,13 @@ class GrammarChecker {
         const ignoreJson = JSON.stringify(this.ignoreList);
         sessionStorage.setItem(this.ignoreKey, ignoreJson);
         for (const [key, errors] of this.paragraphErrorMap) {
-            const session = this.paragraphSessionMap.get(key);
+            const session = this.sessionMap.get(this.getSessionIdFromKey(key));
             const paragraphId = key.split('-')[1];
             const filteredErrors = this.filterErrors(errors);
             this.paragraphErrorMap.set(key, filteredErrors);
             session.renderer.updateGrammarHighlights(+paragraphId, filteredErrors);
         }
     }
-    filterErrors(grammarErrors) {
-        return grammarErrors.filter(x => !this.ignoreList.some(y => y.type === x.type && y.text.toLowerCase() === x.text.toLowerCase()));
-    }
     destroy() {
         this.checkResultsSubscription.unsubscribe();
         for (const subscriptions of this.sessionSubscriptions.values()) {
@@ -13930,10 +14340,45 @@ class GrammarChecker {
             }
         }
         this.sessionSubscriptions.clear();
-        this.paragraphSessionMap.clear();
-        this.sessions.length = 0;
+        this.sessionMap.clear();
+        this.checkedParagraphs.clear();
         this.grammarService.destroy();
     }
+    filterErrors(grammarErrors) {
+        return grammarErrors.filter(x => !this.ignoreList.some(y => y.type === x.type && y.text.toLowerCase() === x.text.toLowerCase()));
+    }
+    processGrammarCheckResults(result) {
+        const session = this.sessionMap.get(this.getSessionIdFromKey(result.paragraphId));
+        if (session) {
+            const paragraphId = +result.paragraphId.split('-')[1];
+            if (this.checkedParagraphs.has(session.sessionId)) {
+                this.checkedParagraphs.get(session.sessionId).add(paragraphId);
+            }
+            else {
+                this.checkedParagraphs.set(session.sessionId, new Set([paragraphId]));
+            }
+            const filteredErrors = this.filterErrors(result.errors);
+            this.paragraphErrorMap.set(result.paragraphId, filteredErrors);
+            const id = +result.paragraphId.split('-')[1];
+            session.renderer.updateGrammarHighlights(id, filteredErrors);
+        }
+    }
+    processParagraphChange(session, change) {
+        if (change instanceof ParagraphInfosRemoved) {
+            for (const id of change.ids) {
+                const errors = this.paragraphErrorMap.get(`${session.sessionId}-${id}`);
+                if (errors?.length) {
+                    session.renderer.removeGrammarHighlights(id);
+                }
+                this.grammarService.removeParagraph(session.sessionId, id);
+                this.paragraphErrorMap.delete(`${session.sessionId}-${id}`);
+                this.checkedParagraphs.get(session.sessionId).delete(id);
+            }
+            return;
+        }
+        this.adjustHighlights(change, session);
+        this.grammarService.updateParagraphContent(session.sessionId, change.paragraph);
+    }
     adjustHighlights(changes, session) {
         const errors = this.paragraphErrorMap.get(`${session.sessionId}-${changes.paragraph.id}`);
         if (!errors?.length || changes instanceof ParagraphInfoAdded) {
@@ -13969,6 +14414,10 @@ class GrammarChecker {
         this.paragraphErrorMap.set(`${session.sessionId}-${changes.paragraph.id}`, newErrors);
         session.renderer.updateGrammarHighlights(changes.paragraph.id, newErrors);
     }
+    getSessionIdFromKey(paragraphKey) {
+        const parts = paragraphKey.split('-');
+        return parts.length > 1 ? +parts[0] : null;
+    }
 }
 
 class MainSessionSourceModel {
@@ -14127,7 +14576,7 @@ class HighlightLayer {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin;
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + (lineInfo.markerWidth ?? 0);
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
@@ -14190,7 +14639,8 @@ class GrammarHighlightLayer extends HighlightLayer {
         this.errorsByParagraph = new Map();
     }
     update(config) {
-        if (!config?.isVisible || !this.errorsByParagraph.size) {
+        if (!config?.isVisible || !this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
+            this.element.innerHTML = '';
             return;
         }
         this.config = config;
@@ -14472,6 +14922,9 @@ class SelectionLayer extends HighlightLayer {
 }
 
 class Renderer extends EventEmitting {
+    get ParagraphsAppeared$() {
+        return this.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, session) {
         super();
         this.session = session;
@@ -14497,6 +14950,8 @@ class Renderer extends EventEmitting {
         };
         this.isVisible = false;
         this.changes = new RenderChangesModel();
+        this.ParagraphsAppeared = new Subject();
+        this.visibilitySubject = new Subject();
         this.textareaSize = {
             height: 1,
             width: 1
@@ -14515,6 +14970,9 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
+        this.visibilitySubscription = this.visibilitySubject
+            .pipe(debounceTime(3000), filter(x => x))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14562,6 +15020,7 @@ class Renderer extends EventEmitting {
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
             this.renderGrammarHighlights();
+            this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
     }
@@ -14694,6 +15153,7 @@ class Renderer extends EventEmitting {
     destroy() {
         this.session.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.textLayer.destroy();
+        this.visibilitySubscription.unsubscribe();
         DomHelper.removeChildren(this.container);
     }
     renderFull() {
@@ -14750,6 +15210,14 @@ class Renderer extends EventEmitting {
             this.container.appendChild(this.content);
         }
     }
+    paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.ParagraphsAppeared.next(this.session.displayData.paragraphs);
+            return;
+        }
+        const paragraphs = this.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 /**
@@ -14859,6 +15327,9 @@ class VirtualRenderer {
     set layerConfig(val) {
         this.renderer.layerConfig = val;
     }
+    get ParagraphsAppeared$() {
+        return this.renderer.ParagraphsAppeared.asObservable();
+    }
     constructor(parentContainer, mainSession, scrollBar) {
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
@@ -14869,6 +15340,7 @@ class VirtualRenderer {
             scrollerWidth: 0,
             dirty: true
         };
+        this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
         this.renderer = new Renderer(parentContainer, mainSession);
@@ -14876,6 +15348,9 @@ class VirtualRenderer {
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(() => this.loop.schedule({ scroll: true }));
         this.createRenderLoop();
+        this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
+            .pipe(debounceTime(3000))
+            .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -14911,6 +15386,7 @@ class VirtualRenderer {
         // scrolling
         if (changes.scroll) {
             this.renderScroll(changes);
+            this.paragraphsScrolledIntoViewSubject.next();
         }
         if (changes.text) {
             this.renderText();
@@ -15093,6 +15569,7 @@ class VirtualRenderer {
         this.pagesLayer.destroy();
         this.renderer.destroy();
         this.scrollSubscription?.unsubscribe();
+        this.paragraphsScrolledIntoViewSubscription?.unsubscribe();
     }
     computeLayerConfig() {
         const displayData = this.renderer.session.displayData;
@@ -15109,7 +15586,7 @@ class VirtualRenderer {
         }
         const changes = scrollChanged
             ? this.updateCachedSize(true, this.size.width, this.size.height)
-            : new RenderChangesModel({ scroll: true });
+            : new RenderChangesModel({ scroll: true }); // TODO: stop triggering scroll for no reason
         const visibleRange = displayData.getVisibleRange(this.scrollBar.scrollTop, this.size.scrollerHeight);
         this.layerConfig = {
             width: this.renderer.textLayer.element.clientWidth,
@@ -15155,6 +15632,7 @@ class VirtualRenderer {
     renderFull() {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.update(this.layerConfig);
+        this.paragraphsScrolledIntoViewSubject.next();
         this.renderer.renderFull();
     }
     renderText() {
@@ -15176,6 +15654,10 @@ class VirtualRenderer {
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
+    paragraphsScrolledIntoView() {
+        const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
+        this.renderer.ParagraphsAppeared.next(paragraphs);
+    }
 }
 
 class CustomContentService {
@@ -15267,6 +15749,8 @@ class CustomContentService {
             indentRight: lineInfo.indent.right,
             indentBefore: lineInfo.offsetBefore,
             indentAfter: lineInfo.offsetAfter,
+            markerWidth: lineInfo.markerWidth,
+            isNumbering: lineInfo.isNumbering,
             isPageBreak: false,
             isLineBreak: false,
             displayValue,
@@ -15335,7 +15819,6 @@ class RegulatorService {
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         this.grammarChecker.registerSession(this.mainSession);
-        displayData.emitAllParagraphs();
     }
     addCellSession(table, margins, component, properties) {
         const sessionId = ++this.sessionIdIncrement;
@@ -15352,7 +15835,6 @@ class RegulatorService {
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         this.grammarChecker.registerSession(newSession);
-        displayData.emitAllParagraphs();
         return newSession;
     }
     addEdgeSession(component) {
@@ -15367,7 +15849,6 @@ class RegulatorService {
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         this.grammarChecker.registerSession(newSession);
-        displayData.emitAllParagraphs();
         return newSession;
     }
     removeSession(sessionId) {
@@ -15428,6 +15909,7 @@ class RegulatorService {
             this.currentSession.renderer.showCursor();
             this.arrangeEdgesForSessionChange(previous.session, session.session);
         }
+        this.editorService.setIsTableSelected(session.session.isCell());
     }
     updateCursorPosition() {
         if (!this.currentSession.session.isEdge()) {
@@ -15653,6 +16135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class EditorRulerComponent {
     constructor() {
         this.unit = input.required();
+        this.disabled = input(false);
         this.editorService = inject(EditorService);
         this.dialog = inject(MatDialog);
         this.defaultPaddingCm = 2.5;
@@ -15745,12 +16228,16 @@ class EditorRulerComponent {
             window.removeEventListener('touchend', this.onUp);
         };
         this.editorService.paragraphStyle$
-            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.tabSettings), map(x => x.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
+            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.paragraphStyle.tabSettings), map(x => x.paragraphStyle.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
             .subscribe(x => this.tabSettings.set(x));
-        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
-            this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
-            this.leftIndent.set(x.indentLeft);
-            this.rightIndent.set(x.indentRight);
+        this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(({ paragraphStyle, numberingModel }) => {
+            const numberingIndentLeft = numberingModel?.levels[paragraphStyle.numberingLevel].indentLeft ?? 0;
+            const numberingIndentHanging = numberingModel?.levels[paragraphStyle.numberingLevel].indentHanging ?? 0;
+            const indentLeft = paragraphStyle.indentLeft === 0 ? numberingIndentLeft : paragraphStyle.indentLeft;
+            const firstLine = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+            this.firstLine.set(firstLine === 0 ? -numberingIndentHanging : firstLine);
+            this.leftIndent.set(indentLeft);
+            this.rightIndent.set(paragraphStyle.indentRight);
         });
         effect(() => (this.unit() === 'inch' ? this.buildTicksInch() : this.buildTicksCm()));
     }
@@ -15939,11 +16426,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -16041,11 +16528,11 @@ class EditorComponent {
         this.sidenavComponentRef = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatDrawerContent, selector: "mat-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i9.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <app-nod-editor-ruler [unit]=\"rulerUnit()\" />\n        @if (showSearchBar) {\n            <app-nod-editor-search-bar />\n        }\n        <div class=\"container\">\n            <div\n                #container\n                class=\"edit-container\"></div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:hidden}.container{height:100%;display:flex;justify-content:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
@@ -16607,6 +17094,9 @@ class BaseToolbarComponent extends DestroyComponent {
         this.insertImage = new EventEmitter();
         this.insertLink = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
         this.historyInfoSubscription();
@@ -16666,7 +17156,7 @@ class BaseToolbarComponent extends DestroyComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseToolbarComponent, isStandalone: true, outputs: { print: "print", redo: "redo", undo: "undo", createElement: "createElement", changeTextStyle: "changeTextStyle", changeParagraphStyle: "changeParagraphStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertImage: "insertImage", insertLink: "insertLink", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseToolbarComponent, decorators: [{
             type: Directive
@@ -16692,6 +17182,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class InsertTableComponent {
@@ -16963,6 +17459,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['auto']
             }] } });
 
+class TableBordersComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.borders = Borders;
+        this.updateTableBorders = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBordersComponent, isStandalone: true, selector: "app-nod-table-borders", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBordersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-borders', imports: [MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.LABEL.BORDERS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-bottom\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Bottom)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-bottom\" />\n        <div class=\"label\">{{ 'NODER.LABEL.BOTTOM_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Top)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-top\" />\n        <div class=\"label\">{{ 'NODER.LABEL.TOP_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Left)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-left\" />\n        <div class=\"label\">{{ 'NODER.LABEL.LEFT_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Right)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-right\" />\n        <div class=\"label\">{{ 'NODER.LABEL.RIGHT_BORDER' | translate }}</div>\n    </div>\n    <mat-divider />\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Empty)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-none\" />\n        <div class=\"label\">{{ 'NODER.LABEL.NO_BORDER' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.All)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-all\" />\n        <div class=\"label\">{{ 'NODER.LABEL.ALL_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Outside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-outside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.OUTSIDE_BORDERS' | translate }}</div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorders.emit(borders.Inside)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-border-inside\" />\n        <div class=\"label\">{{ 'NODER.LABEL.INSIDE_BORDERS' | translate }}</div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.mat-divider{margin:0 8px}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorders: [{
+                type: Output
+            }] } });
+
+class TableBorderStyleComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.lineStyles = LineStyles;
+        this.updateTableBorderStyle = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TableBorderStyleComponent, isStandalone: true, selector: "app-nod-table-border-style", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderStyle: "updateTableBorderStyle" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-style', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_STYLE' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-dash\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Single)\">\n        <div class=\"solid-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dashed)\">\n        <div class=\"dashed-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Dotted)\">\n        <div class=\"dotted-border\"></div>\n    </div>\n    <div\n        mat-menu-item\n        class=\"border\"\n        (click)=\"updateTableBorderStyle.emit(lineStyles.Double)\">\n        <div class=\"double-border\"></div>\n    </div>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.solid-border{border-bottom:1px solid}.dashed-border{border-bottom:1px dashed}.dotted-border{border-bottom:1px dotted}.double-border{border-bottom:4px double}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderStyle: [{
+                type: Output
+            }] } });
+
+class TableBorderWidthComponent {
+    constructor() {
+        this.isDisabled = false;
+        this.active = false;
+        this.widths = [0.5, 1, 1.5, 2, 3];
+        this.updateTableBorderWidth = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TableBorderWidthComponent, isStandalone: true, selector: "app-nod-table-border-width", inputs: { isDisabled: "isDisabled" }, outputs: { updateTableBorderWidth: "updateTableBorderWidth" }, ngImport: i0, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TableBorderWidthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-table-border-width', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [disabled]=\"isDisabled\"\n    [class.active-button]=\"active\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matMenuTriggerFor]=\"menu\"\n    (menuOpened)=\"active = true\"\n    (menuClosed)=\"active = false\"\n    [matTooltip]=\"'NODER.TOOLTIP.BORDER_WIDTH' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-border-width\" />\n</button>\n<mat-menu\n    #menu=\"matMenu\"\n    yPosition=\"below\">\n    @for (width of widths; track $index) {\n        <div\n            mat-menu-item\n            class=\"border-width\"\n            (click)=\"updateTableBorderWidth.emit(width)\">\n            {{ width }} pt\n        </div>\n    }\n</mat-menu>\n", styles: [":host{display:flex;align-items:center}.mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.border-width{font-size:14px;font-style:normal;font-weight:400;line-height:normal}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], updateTableBorderWidth: [{
+                type: Output
+            }] } });
+
 class ColorPickerComponent {
     constructor() {
         this.colorChange = new EventEmitter();
@@ -17203,11 +17756,11 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, 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\n        class=\"hidden\"\n        (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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\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;display:flex;align-items:center;justify-content:center;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:2px solid;height:24px;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}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"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]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"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]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\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]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\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]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\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]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\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;display:flex;align-items:center;justify-content:center;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:2px solid;height:24px;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}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableBordersComponent, selector: "app-nod-table-borders", inputs: ["isDisabled"], outputs: ["updateTableBorders"] }, { kind: "component", type: TableBorderStyleComponent, selector: "app-nod-table-border-style", inputs: ["isDisabled"], outputs: ["updateTableBorderStyle"] }, { kind: "component", type: TableBorderWidthComponent, selector: "app-nod-table-border-width", inputs: ["isDisabled"], outputs: ["updateTableBorderWidth"] }, { 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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, 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\n        class=\"hidden\"\n        (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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n            matTooltipPosition=\"below\">\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            [matTooltip]=\"element.tooltip | translate\"\n            matTooltipPosition=\"below\">\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;display:flex;align-items:center;justify-content:center;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:2px solid;height:24px;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}.hidden{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"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]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"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]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\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]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\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]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\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]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\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;display:flex;align-items:center;justify-content:center;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:2px solid;height:24px;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}.hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']
@@ -17322,13 +17875,16 @@ class EditorToolbarComponent {
         this.setNumberingTemplateType = new EventEmitter();
         this.removeNumberings = new EventEmitter();
         this.insertTable = new EventEmitter();
+        this.updateTableBorderStyle = new EventEmitter();
+        this.updateTableBorderWidth = new EventEmitter();
+        this.updateTableBorders = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: EditorToolbarComponent, isStandalone: false, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", downloadPdf: "downloadPdf", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable", updateTableBorderStyle: "updateTableBorderStyle", updateTableBorderWidth: "updateTableBorderWidth", updateTableBorders: "updateTableBorders" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "downloadPdf", "insertPageBreak", "createDocument", "pageSetup", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', standalone: false, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (downloadPdf)=\"downloadPdf.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (pageSetup)=\"pageSetup.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\"\n    (updateTableBorders)=\"updateTableBorders.emit($event)\"\n    (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\"\n    (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
@@ -17381,6 +17937,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Output
             }], insertTable: [{
                 type: Output
+            }], updateTableBorderStyle: [{
+                type: Output
+            }], updateTableBorderWidth: [{
+                type: Output
+            }], updateTableBorders: [{
+                type: Output
             }] } });
 
 class EditorToolbarService {
@@ -17672,6 +18234,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule], exports: [EditorMobileToolbarComponent,
             EditorToolbarComponent,
@@ -17692,6 +18257,9 @@ class EditorToolbarModule {
             MatMenuModule,
             MatTooltipModule,
             ReactiveFormsModule,
+            TableBordersComponent,
+            TableBorderStyleComponent,
+            TableBorderWidthComponent,
             TextFormatMobileComponent,
             TranslateModule] }); }
 }
@@ -17726,6 +18294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatMenuModule,
                         MatTooltipModule,
                         ReactiveFormsModule,
+                        TableBordersComponent,
+                        TableBorderStyleComponent,
+                        TableBorderWidthComponent,
                         TextFormatMobileComponent,
                         TranslateModule
                     ],
@@ -18180,10 +18751,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class RevisionHelper {
-    static applyOperationsToRevision(revision, operations) {
+    static applyOperationsToRevision(content, operations) {
         operations.sort((a, b) => a.createTime - b.createTime);
         const actions = operations.map(x => x.command);
-        OperationsHelper.applyOperations(revision.content, actions);
+        OperationsHelper.applyOperations(content, actions);
     }
     static fillTablesDefaultStyles(tables) {
         for (const table of tables) {