@talrace/ngx-noder 19.0.35 → 19.0.37

package/fesm2022/talrace-ngx-noder.mjs

@@ -81,6 +81,25 @@ class ParagraphStyleModel {
     }
 }
 
+class MarginsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TableStyleModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.margins) {
+                fields.margins = new MarginsModel(fields.margins);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class TextStyleModel {
     constructor(fields) {
         if (fields) {
@@ -95,6 +114,9 @@ class HeadingModel {
             if (fields.paragraphStyle) {
                 fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
             }
+            if (fields.tableStyle) {
+                fields.tableStyle = new TableStyleModel(fields.tableStyle);
+            }
             if (fields.textStyle) {
                 fields.textStyle = new TextStyleModel(fields.textStyle);
             }
@@ -103,6 +125,21 @@ class HeadingModel {
     }
 }
 
+class MarginModel {
+    constructor(fields) {
+        this.left = DocumentInfo.paddingLeft;
+        this.right = DocumentInfo.paddingRight;
+        this.top = DocumentInfo.paddingTop;
+        this.bottom = DocumentInfo.paddingBottom;
+        this.header = DocumentInfo.paddingHeader;
+        this.footer = DocumentInfo.paddingFooter;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
+
 var VerticalAlignment;
 (function (VerticalAlignment) {
     VerticalAlignment[VerticalAlignment["None"] = 0] = "None";
@@ -125,7 +162,7 @@ const DEFAULT_TOOLBAR_STYLES = () => ({
 const DEFAULT_BACKGROUND_COLOR = 'transparent';
 const DEFAULT_FONT_FAMILY = 'Times New Roman';
 const DEFAULT_FONT_SIZE = 11;
-const DEFAULT_FONT_COLOR = '#000';
+const DEFAULT_FONT_COLOR = '#000000';
 const HYPERLINK_FONT_COLOR = '#0000EE';
 const DEFAULT_HEADING_STYLE_ID = 'Default';
 const HYPERLINK_HEADING_STYLE_ID = 'Hyperlink';
@@ -180,6 +217,12 @@ const NEW_LINE_MARKUP = '\n';
 const DEFAULT_TAB_WIDTH = 48;
 const DEFAULT_OFFSET_AFTER_NUMBERING_MARKER = 20;
 const DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER = 0.4;
+const DEFAULT_TABLE_MARGINS = new MarginModel({
+    top: 0,
+    left: 7,
+    right: 7,
+    bottom: 0
+});
 
 var PageType;
 (function (PageType) {
@@ -487,11 +530,7 @@ class FontMetrics {
         return {
             width: textMetrics.width,
             height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
-            baseline: fontBaseLine.baseline,
-            content: fontBaseLine.content,
             font: fontBaseLine.font,
-            line: fontBaseLine.line,
-            multiplier: fontBaseLine.multiplier,
             ascent: textMetrics.fontBoundingBoxAscent,
             descent: textMetrics.fontBoundingBoxDescent
         };
@@ -1304,6 +1343,10 @@ class ExternalComponent extends BaseNoderComponent {
     constructor() {
         super(...arguments);
         this.focusSidenav = true;
+        this.isText = false;
+    }
+    getText() {
+        return '';
     }
     skipSidenav() {
         return this.editorService.isViewOnly;
@@ -1660,11 +1703,11 @@ const CUSTOM_ELEMENT_MARKER = '*';
 const TABLE_MARKER = '#';
 
 class BreakHelper {
-    static getBreakType(model, char, insertIndex) {
+    static getBreakType(breaks, char, insertIndex) {
         if (char !== CUSTOM_ELEMENT_MARKER) {
             return null;
         }
-        return model.breaks.find(x => x.insertIndex === insertIndex)?.breakType ?? null;
+        return breaks.find(x => x.insertIndex === insertIndex)?.breakType ?? null;
     }
     static removeBreakMarker(breaks, text, fragmentStartIndex) {
         const index = text.at(-1) === NEW_LINE_MARKUP ? -2 : -1;
@@ -2773,14 +2816,6 @@ class BreakOperationsHelper {
     }
 }
 
-class MarginsModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class CellModel {
     constructor(fields) {
         if (fields) {
@@ -2892,7 +2927,7 @@ class RangeElementHelper {
                 element.startIndex += length;
                 element.endIndex += length;
             }
-            else if (element.endIndex >= index) {
+            else if (element.endIndex > index) {
                 element.endIndex += length;
             }
         }
@@ -4749,7 +4784,7 @@ class TableOperationsHelper {
             });
             columns.push(column);
         }
-        const table = new TableModel({ insertIndex: insertIndex, alignment: 0, rows, columns });
+        const table = new TableModel({ insertIndex: insertIndex, alignment: 0, rows, columns, margins: DEFAULT_TABLE_MARGINS });
         IndexedElementOperationsHelper.insertContent(tables, insertIndex, 1);
         const index = tables.findIndex(x => x.insertIndex > table.insertIndex);
         if (index < 0) {
@@ -5915,24 +5950,191 @@ class PageHelper {
     }
 }
 
-const DisplayValue = {
-    char: 1,
-    customContent: 3,
-    punctuation: 9,
-    space: 10,
-    trailingSpace: 11,
-    emptyLine: 13
-};
+class NumberingDataModel {
+    constructor(fields) {
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
+
+class NumberingParagraphStyleModel extends ParagraphStyleModel {
+    constructor(fields) {
+        super();
+        this.numberingType = null;
+        this.numberingLevelsStyles = null;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+}
 
-class LineWidthHelper {
-    static getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex) {
-        const docPos = session.displayData.positionToIndex(new CursorParagraph(paragraphIndex, 0), 0);
-        const rowWrap = session.displayData.paragraphs[paragraphIndex]?.nextLineIndexes || [];
-        const startWrapIndex = lineIndex > 0 ? rowWrap[lineIndex - 1] : 0;
-        const endIndex = rowWrap[lineIndex];
-        const docLine = session.displayData.getParagraphContent(paragraphIndex);
-        const offset = startWrapIndex ? docPos + startWrapIndex : docPos;
-        return session.displayData.getLineTokens(session.model, docLine.substring(startWrapIndex, endIndex || undefined), offset);
+class NumberingHelper {
+    static addValueToNumberingInfo(numberingId, numberingInfo, numberingLevels) {
+        if (numberingInfo[numberingId]) {
+            return;
+        }
+        numberingInfo[numberingId] = [];
+        for (let numberingLevel of numberingLevels) {
+            numberingInfo[numberingId][numberingLevel.level] = {
+                markerIndex: numberingLevel.startValue,
+                start: numberingLevel.startValue,
+                needToRecalculate: true,
+                needToCalculateFirstMarker: false
+            };
+        }
+    }
+    static setNumberingNeedToRecalculate(numberingInfo, numberingId) {
+        numberingInfo[numberingId].forEach(x => {
+            x.needToRecalculate = true;
+            x.markerIndex = x.start;
+            x.needToCalculateFirstMarker = false;
+        });
+    }
+    static setAllNumberingIsCalculated(numberingInfo) {
+        for (let numberingId in numberingInfo) {
+            numberingInfo[numberingId].forEach(x => {
+                x.needToRecalculate = false;
+                x.needToCalculateFirstMarker = false;
+            });
+        }
+    }
+    static getStyles(paragraphStyle, numberings) {
+        const numberingLevels = numberings.find(x => x.numberingId === paragraphStyle.numberingId).levels;
+        const numberingLevelsStyles = numberingLevels.reduce((prev, next) => `${prev}${next.marker}${next.markerType}`, '');
+        const level = numberingLevels.find(x => x.level === paragraphStyle.numberingLevel);
+        return new NumberingParagraphStyleModel({ ...paragraphStyle, numberingType: level.markerType, numberingLevelsStyles });
+    }
+    static findNumberingLevel(numberings, id, level) {
+        const numbering = numberings.find(x => x.numberingId === id);
+        return numbering?.levels.find(x => x.level === level);
+    }
+    static findNumberingLevels(numberings, id) {
+        const numbering = numberings.find(x => x.numberingId === id);
+        return numbering?.levels;
+    }
+    static calculateNumberingInfo(numberingId, level, numberingInfo, numberings) {
+        const numberingModel = this.findNumberingLevel(numberings, numberingId, level);
+        if (numberingModel?.markerType === NumberingMarkerType.Bullet) {
+            return;
+        }
+        this.calculateMarkerIndexes(numberingId, level, numberingInfo);
+    }
+    static calculateMarkerIndexes(numberingId, level, numberingInfo) {
+        if (numberingInfo[numberingId][level].needToRecalculate) {
+            if (numberingInfo[numberingId][level].needToCalculateFirstMarker) {
+                numberingInfo[numberingId][level].markerIndex++;
+            }
+            else {
+                numberingInfo[numberingId][level].needToCalculateFirstMarker = true;
+            }
+            for (let i = level + 1; i < numberingInfo[numberingId].length; i++) {
+                numberingInfo[numberingId][i].markerIndex = numberingInfo[numberingId][i].start;
+                numberingInfo[numberingId][i].needToCalculateFirstMarker = false;
+            }
+            for (let i = 0; i < level; i++) {
+                if (numberingInfo[numberingId][i].markerIndex === numberingInfo[numberingId][i].start) {
+                    numberingInfo[numberingId][i].needToCalculateFirstMarker = true;
+                }
+            }
+        }
+    }
+    static getMarker(levelModels, level, numberingId, numberingInfo) {
+        let levelMarker = levelModels[level].marker;
+        let index = levelMarker.indexOf('%');
+        if (index === -1) {
+            return levelMarker;
+        }
+        const splittedMarker = levelMarker.split('.');
+        return this.createMarkerString(numberingInfo, numberingId, splittedMarker);
+    }
+    static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
+        const paragraph = paragraphs[paragraphIndex];
+        const numberingId = paragraph?.paragraphStyle.numberingId;
+        if (!numberingId) {
+            return new NumberingDataModel({ numberingId: null });
+        }
+        const level = paragraph.paragraphStyle.numberingLevel;
+        const numberingLevelModel = this.findNumberingLevels(numberings, numberingId);
+        const marker = this.getMarker(numberingLevelModel, level, numberingId, numberingInfo);
+        return new NumberingDataModel({ numberingId, level, marker });
+    }
+    static updateMarkerData(numberings, paragraph, paragraphTextStyle, paragraphStyle) {
+        const numberingLevel = NumberingHelper.findNumberingLevel(numberings, paragraph.numberingData.numberingId, paragraph.numberingData.level);
+        const markerTextStyle = ContentStyleHelper.combineTextStyles(numberingLevel.markerStyle, paragraphTextStyle);
+        const markerSizes = NumberingHelper.getMarkerSizes(paragraph.numberingData.marker, markerTextStyle);
+        paragraph.numberingData.markerTextStyle = markerTextStyle;
+        paragraph.numberingData.width = markerSizes.width;
+        paragraph.numberingData.height = markerSizes.height;
+        const indentLeft = paragraphStyle.indentLeft !== null ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        let indent = 0;
+        if (paragraphStyle.indentHanging === null && paragraphStyle.indentFirstLine === null) {
+            indent = -numberingLevel.indentHanging;
+        }
+        else {
+            indent = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+        }
+        paragraph.numberingData.paddingLeft = indentLeft + indent;
+    }
+    static getMarkerSizes(marker, markerStyle) {
+        let width = 0;
+        let height = 0;
+        const markerStylesString = ContentStyleHelper.getFontStylesString(markerStyle);
+        for (let char of marker) {
+            const markerCharSizes = FontMetrics.measureCharSize(char, markerStylesString);
+            width += markerCharSizes.width;
+            if (height < markerCharSizes.height) {
+                height = markerCharSizes.height;
+            }
+        }
+        return { height, width };
+    }
+    static updateNumberingInfo(numberingInfo, marker, numberingId, level) {
+        const markerLevels = this.getLevelInfo(marker);
+        const lastMarkerLevel = markerLevels.length - 1;
+        numberingInfo[numberingId][level].markerIndex = markerLevels[lastMarkerLevel];
+        numberingInfo[numberingId][level].needToRecalculate = true;
+    }
+    static getLevelInfo(input) {
+        return input
+            .split('.')
+            .filter(x => !!x)
+            .map(x => parseInt(x));
+    }
+    static createMarkerString(numberingInfo, numberingId, splittedMarker) {
+        const markers = splittedMarker.map(x => {
+            if (x === '') {
+                return '';
+            }
+            if (x.indexOf('%') === -1) {
+                return x;
+            }
+            const markerLevel = parseInt(x.slice(1));
+            const markerIndex = numberingInfo[numberingId][markerLevel - 1]?.markerIndex;
+            return `${markerIndex}`;
+        });
+        return markers.join('.');
+    }
+    static getMarkerOffset(paragraphSettings) {
+        const numberingData = paragraphSettings.numberingData;
+        const info = paragraphSettings.textLinesInfo[0];
+        if (numberingData.numberingId === null) {
+            return { offset: 0, markerWidth: 0 };
+        }
+        const offset = numberingData.width + numberingData.paddingLeft;
+        let markerWidth = info.indentFirstLine !== null || (offset - info.indentLeft > 0 && offset - info.indentLeft < info.indent.markerWidth)
+            ? info.indent.markerWidth
+            : 0;
+        return { offset, markerWidth };
+    }
+    static getOffsetCausedByMarker(numberingData, info) {
+        if (!info.isNumbering) {
+            return 0;
+        }
+        const offset = numberingData.width + numberingData.paddingLeft - info.indentLeft;
+        return info.indentFirstLine !== null || (offset > 0 && offset <= info.indent.markerWidth) ? info.indent.markerWidth : 0;
     }
 }
 
@@ -5960,8 +6162,8 @@ class PositionHelper {
             paragraphIndex,
             lineIndex,
             lineTopOffset,
-            indentBefore: paragraphLineInfo.offsetBefore,
-            lineHeight: paragraphLineInfo.height
+            lineHeight: paragraphLineInfo.height,
+            lineAscent: paragraphLineInfo.ascent
         };
     }
     static documentToScreen(session, paragraph, indexInParagraph) {
@@ -5999,34 +6201,14 @@ class PositionHelper {
     static screenToPixel(session, row, column) {
         const paragraphs = session.displayData.paragraphs;
         const paragraphInfo = this.getParagraphInfoByRow(paragraphs, row);
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphInfo.paragraphIndex, paragraphInfo.lineIndex);
-        let size = {
-            width: 8,
-            height: paragraphInfo.lineHeight,
-            baseline: paragraphInfo.lineHeight,
-            content: paragraphInfo.lineHeight,
-            font: paragraphInfo.lineHeight,
-            line: paragraphInfo.lineHeight,
-            multiplier: paragraphInfo.lineHeight,
-            ascent: 0,
-            descent: 0
-        };
+        const tokens = session.displayData.getParagraphLineTokens(paragraphInfo.paragraphIndex, paragraphInfo.lineIndex);
         let tokenIndex = column > 0 ? column - 1 : column;
-        if (tokens.length > 0) {
-            size = tokens[tokenIndex];
-        }
-        const sizeNext = tokens[tokenIndex + 1];
-        let sizeMax = { ...size };
+        let sizeMax = { ...tokens[tokenIndex] };
         let lineWidthToPosition = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const { paragraphIndex, lineIndex } = this.findLineInParagraphs(paragraphs, row);
-        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         for (let currentColumn = 0; currentColumn < tokens.length; currentColumn++) {
             const currentToken = tokens[currentColumn];
             if (currentColumn < column) {
                 lineWidthToPosition += currentToken.width;
-                if (currentToken.displayValue === DisplayValue.space && lineInfo.wordSpacing) {
-                    lineWidthToPosition += lineInfo.wordSpacing;
-                }
             }
             if (sizeMax.ascent < currentToken.ascent) {
                 sizeMax = currentToken;
@@ -6037,18 +6219,14 @@ class PositionHelper {
         }
         const paragraph = paragraphs[paragraphInfo.paragraphIndex];
         const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
-        const linePaddingLeft = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].paddingLeft;
-        const offsetMargin = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex].offsetMargin;
-        const markerWidth = this.getMarkerWidth(paragraph.paragraphSettings, paragraph.paragraphSettings.textLinesInfo[0], paragraphInfo.lineIndex);
+        const info = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex];
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraph.paragraphSettings.numberingData, info); // todo: verify (case - 1) numbering paragraph with multi-lines; 2) marker is moved far left so it not affect line offset)
         return {
-            pageX: lineWidthToPosition + linePaddingLeft + offsetMargin + markerWidth,
+            pageX: lineWidthToPosition + info.paddingLeft + info.offsetMargin + markerOffset,
             pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
-            lineHeight: paragraphInfo.lineHeight,
-            sizeCurrent: size,
-            sizeMax,
-            sizeNext,
-            firstChar: column === 0,
-            lastChar: column === tokens.length - 1
+            width: tokens[tokenIndex].width,
+            height: paragraphInfo.lineHeight,
+            ascent: paragraphInfo.lineAscent
         };
     }
     /**
@@ -6084,24 +6262,17 @@ class PositionHelper {
     static mapPixelToClosestTokenMidpoint(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
         const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
         const line = lineInfo.screenLine;
-        if (tokens[0].displayValue === DisplayValue.emptyLine) {
+        if (tokens[0].isParagraph) {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
-        const wordSpacing = lineInfo.wordSpacing ?? 0;
-        while (indexInLine < tokens.length) {
-            const token = tokens[indexInLine];
-            const isSpace = token.displayValue === DisplayValue.space;
-            const width = token.width + (isSpace ? wordSpacing : 0);
-            if (relativeX < width / 2) {
-                break;
-            }
-            relativeX -= width;
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width / 2) {
+            relativeX -= tokens[indexInLine].width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -6112,24 +6283,17 @@ class PositionHelper {
     static mapPixelToNextTokenBoundary(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
         const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
         const line = lineInfo.screenLine;
-        if (tokens[0].displayValue === DisplayValue.emptyLine) {
+        if (tokens[0].isParagraph) {
             return { line, indexInLine: 0 };
         }
         let indexInLine = 0;
-        const markerWidth = this.getMarkerWidth(paragraphSettings, lineInfo, lineIndex);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerWidth;
-        const wordSpacing = lineInfo.wordSpacing ?? 0;
-        while (indexInLine < tokens.length) {
-            const token = tokens[indexInLine];
-            const isSpace = token.displayValue === DisplayValue.space;
-            const width = token.width + (isSpace ? wordSpacing : 0);
-            if (relativeX < width) {
-                break;
-            }
-            relativeX -= width;
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
+        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width) {
+            relativeX -= tokens[indexInLine].width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -6151,38 +6315,19 @@ class PositionHelper {
         const paragraphs = session.displayData.paragraphs;
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const { paragraphIndex, lineIndex } = PositionHelper.findLineInParagraphs(paragraphs, documentLine);
-        let column = 0;
-        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
-        if (tokens.length === 1 && tokens[0].displayValue === DisplayValue.emptyLine) {
-            return column;
-        }
-        const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
-        const wordSpacing = textLineInfo.wordSpacing ?? 0;
-        const markerWidth = this.getMarkerWidth(paragraphs[paragraphIndex].paragraphSettings, textLineInfo, lineIndex);
-        let width = positionWidth - textLineInfo.paddingLeft - marginLeft - textLineInfo.offsetMargin - markerWidth;
-        while (column < tokens.length) {
-            const token = tokens[column];
-            if (width < token.width) {
-                break;
-            }
-            const isSpace = token.displayValue === DisplayValue.space;
-            width -= token.width + (isSpace ? wordSpacing : 0);
-            column++;
+        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
+        if (tokens[0].isParagraph) {
+            return 0;
         }
-        return column;
-    }
-    static getMarkerWidth(paragraphSettings, textLineInfo, lineIndex) {
-        const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
-            ? 0
-            : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
-        if (textLineInfo.isNumbering &&
-            lineIndex === 0 &&
-            (textLineInfo.indentFirstLine !== null ||
-                (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
-                    numberingOffsetLeft - textLineInfo.indentLeft <= textLineInfo.markerWidth))) {
-            return textLineInfo.markerWidth;
+        let index = 0;
+        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphs[paragraphIndex].paragraphSettings.numberingData, lineInfo);
+        let width = positionWidth - lineInfo.paddingLeft - marginLeft - lineInfo.offsetMargin - markerOffset;
+        while (index < tokens.length && width >= tokens[index].width) {
+            width -= tokens[index].width;
+            index++;
         }
-        return 0;
+        return index;
     }
 }
 
@@ -6233,15 +6378,6 @@ class EdgeElementModel {
     }
 }
 
-class FormatExtModel extends FormatModel {
-    constructor(fields) {
-        super(fields);
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ScalingHelper {
     static getRatio(current, original) {
         return parseFloat((current / original).toFixed(1));
@@ -6255,100 +6391,55 @@ class RenderingHelper {
     static createLineElement(lineInfo, numberingOffsetLeft, scalingRatio) {
         let lineEl = document.createElement('div');
         lineEl.className = 'noder-line';
-        if (lineInfo) {
-            const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
-            const marginLeft = numberingOffsetLeft !== null ? -numberingOffsetLeft : 0;
-            // eslint-disable-next-line prettier/prettier
-            let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
-            if (lineInfo.wordSpacing) {
-                styleString += `word-spacing:${lineInfo.wordSpacing}px;`;
-            }
-            lineEl.setAttribute('style', styleString);
-            lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
-        }
+        const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
+        const marginLeft = numberingOffsetLeft !== null ? -numberingOffsetLeft : 0;
+        let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
+        lineEl.setAttribute('style', styleString);
+        lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
         return lineEl;
     }
-    static renderContentSimpleLine(domContent, formatsExt, rowDistance, customContentService, customComponents, lineInfo, breaks = []) {
-        const valueFragment = DomHelper.createFragment(domContent.currentElement);
-        for (const formatExt of formatsExt) {
-            const fragmentDocumentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start : formatExt.startIndex;
-            const fragmentDocumentEndIndex = formatExt.endIndex > rowDistance.end ? rowDistance.end : formatExt.endIndex;
-            const fragmentDocumentDistance = new DistanceModel({ start: fragmentDocumentStartIndex, end: fragmentDocumentEndIndex });
-            const fragmentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start - formatExt.startIndex : 0;
-            const fragmentEndIndex = formatExt.endIndex > rowDistance.end ? rowDistance.end - formatExt.startIndex : formatExt.endIndex - formatExt.startIndex;
-            const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, true);
-        }
-        domContent.parentNode.appendChild(valueFragment);
-    }
-    static renderContentWrappedLine(domContent, splits, currentParagraph, formatsExt, distance, customContentService, customComponents, scalingRatio, breaks = []) {
-        let splitIndex = 0;
-        const numberingOffsetLeft = currentParagraph.numberingData.numberingId === null
-            ? 0
-            : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
-        let markerWidth = 0;
-        if (currentParagraph.textLinesInfo[0].isNumbering &&
-            (currentParagraph.textLinesInfo[0].indentFirstLine !== null ||
-                (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
-                    numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth))) {
-            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
-        }
-        let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
-        domContent.parentNode.appendChild(lineEl);
-        const valueFragment = DomHelper.createFragment(domContent.currentElement);
-        let isLastLineFragment = false;
-        let paragraphChars = 0;
-        let split = splits[splitIndex];
-        let lineInfo = currentParagraph.textLinesInfo[splitIndex];
-        for (const formatExt of formatsExt) {
-            const beforeSplitIndex = split ? split - 1 : distance.end - distance.start;
-            const beforeSplitDocumentIndex = distance.start + beforeSplitIndex;
-            const fragmentDocumentStartIndex = distance.start + paragraphChars;
-            const fragmentDocumentEndIndex = formatExt.endIndex < beforeSplitDocumentIndex ? formatExt.endIndex : beforeSplitDocumentIndex;
-            const fragmentDocumentDistance = new DistanceModel({ start: fragmentDocumentStartIndex, end: fragmentDocumentEndIndex });
-            const fragmentStartIndex = distance.start > formatExt.startIndex ? distance.start - formatExt.startIndex : 0;
-            const fragmentEndIndex = formatExt.endIndex < beforeSplitDocumentIndex
-                ? fragmentStartIndex + formatExt.endIndex - formatExt.startIndex
-                : distance.start + beforeSplitIndex - formatExt.startIndex;
-            const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            isLastLineFragment = split === fragmentDocumentDistance.end + 1;
-            paragraphChars += this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-            lineEl.appendChild(valueFragment);
-            let nextFragmentStartIndex = fragmentEndIndex + 1;
-            while (paragraphChars === split && nextFragmentStartIndex !== distance.end) {
-                split = splits[++splitIndex];
-                lineInfo = currentParagraph.textLinesInfo[splitIndex];
-                const nextFragmentDocumentStartIndex = fragmentDocumentStartIndex + nextFragmentStartIndex - fragmentStartIndex;
-                lineEl = RenderingHelper.createLineElement(lineInfo, numberingOffsetLeft, scalingRatio);
-                if (split > formatExt.endIndex) {
-                    const nextFragmentEndIndex = formatExt.content.length - 1;
-                    const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
-                    const nextFragmentDocumentEndIndex = nextFragmentDocumentStartIndex + nextFragmentEndIndex - nextFragmentStartIndex;
-                    const nextFragmentDocumentDistance = new DistanceModel({
-                        start: nextFragmentDocumentStartIndex,
-                        end: nextFragmentDocumentEndIndex
-                    });
-                    isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
-                    paragraphChars += this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-                    lineEl.appendChild(valueFragment);
+    static renderParagraph(domContent, paragraph, formats, customContentService, customComponents, scalingRatio, breaks = []) {
+        const { offset, markerWidth } = NumberingHelper.getMarkerOffset(paragraph.paragraphSettings);
+        const lineInfos = paragraph.paragraphSettings.textLinesInfo;
+        const start = paragraph.startIndex;
+        const end = paragraph.startIndex + paragraph.content.length;
+        const fragment = DomHelper.createFragment(domContent.currentElement);
+        let lineIndex = 0;
+        let renderedCount = 0;
+        let lineEl = RenderingHelper.createLineElement(paragraph.paragraphSettings.textLinesInfo[0], offset - markerWidth, scalingRatio);
+        for (const format of formats) {
+            do {
+                const lineEnd = paragraph.nextLineIndexes[lineIndex]
+                    ? paragraph.startIndex + paragraph.nextLineIndexes[lineIndex] - 1
+                    : end;
+                let fragmentEnd = format.endIndex < lineEnd ? format.endIndex : lineEnd;
+                let wordSpacing = lineInfos[lineIndex].wordSpacing;
+                if (wordSpacing) {
+                    const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
+                    const lineStartIndex = start + lineStart;
+                    const wordSpacingStart = lineInfos[lineIndex].wordSpacingStart;
+                    const wordSpacingEnd = lineInfos[lineIndex].wordSpacingEnd;
+                    if (renderedCount - lineStart < wordSpacingStart && lineStartIndex + wordSpacingStart < fragmentEnd) {
+                        fragmentEnd = lineStartIndex + wordSpacingStart;
+                    }
+                    else if (renderedCount - lineStart < wordSpacingEnd && lineStartIndex + wordSpacingEnd < fragmentEnd) {
+                        fragmentEnd = lineStartIndex + wordSpacingEnd;
+                    }
+                    if (renderedCount - lineStart < wordSpacingStart || renderedCount - lineStart > wordSpacingEnd) {
+                        wordSpacing = null;
+                    }
+                }
+                const fragmentLength = fragmentEnd - start - renderedCount + 1;
+                this.renderFormatContent(fragment, format.textStyle, start + renderedCount, fragmentEnd, paragraph.content.substring(renderedCount, renderedCount + fragmentLength), customContentService, customComponents, breaks, wordSpacing);
+                lineEl.appendChild(fragment);
+                renderedCount += fragmentLength;
+                if (paragraph.nextLineIndexes.length > lineIndex && start + renderedCount > lineEnd) {
+                    lineIndex++;
                     domContent.parentNode.appendChild(lineEl);
-                    break;
+                    lineEl = RenderingHelper.createLineElement(lineInfos[lineIndex], offset, scalingRatio);
                 }
-                const textIndexLength = RenderingHelper.getTextIndexLengthForInsert(formatExt, nextFragmentDocumentStartIndex, distance, split, paragraphChars);
-                const nextFragmentDocumentEndIndex = nextFragmentDocumentStartIndex + textIndexLength;
-                const nextFragmentEndIndex = nextFragmentStartIndex + textIndexLength;
-                const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
-                const nextFragmentDocumentDistance = new DistanceModel({
-                    start: nextFragmentDocumentStartIndex,
-                    end: nextFragmentDocumentEndIndex
-                });
-                isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
-                const renderedChars = this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
-                lineEl.appendChild(valueFragment);
-                domContent.parentNode.appendChild(lineEl);
-                nextFragmentStartIndex += renderedChars;
-                paragraphChars += renderedChars;
-            }
+            } while (renderedCount < paragraph.content.length && format.endIndex > start + renderedCount);
+            domContent.parentNode.appendChild(lineEl);
         }
     }
     static renderNumberingMarker(paragraph, layerElement, scalingRatio) {
@@ -6365,11 +6456,7 @@ class RenderingHelper {
         const numberingLineEl = this.createLineElement(markerLineInfo, 0, scalingRatio);
         const markerFragment = DomHelper.createFragment(layerElement);
         const marker = paragraph.numberingData.marker;
-        const markerExtModel = new FormatExtModel({
-            textStyle: paragraph.numberingData.markerTextStyle,
-            content: marker
-        });
-        this.renderText(markerFragment, markerExtModel, marker);
+        this.renderText(markerFragment, paragraph.numberingData.markerTextStyle, marker, null);
         numberingLineEl.appendChild(markerFragment);
         return numberingLineEl;
     }
@@ -6378,60 +6465,35 @@ class RenderingHelper {
         containerElement.className = className;
         return containerElement;
     }
-    static renderFormatContent(fragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment) {
-        let textFragment = formatExt.content.substring(fragmentDistance.start, fragmentDistance.end + 1);
+    static renderFormatContent(fragment, textStyle, start, end, textFragment, customContentService, customComponents, breaks, wordSpacing) {
         if (!textFragment) {
-            return 0;
-        }
-        const textFragmentWithoutBreaks = BreakHelper.removeBreakMarker(breaks, textFragment, fragmentDocumentDistance.start);
-        if (customContentService.isFragmentContainComponent(customComponents, textFragment, fragmentDocumentDistance)) {
-            this.renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragmentWithoutBreaks, customContentService, customComponents, lineInfo);
-        }
-        else if (isLastLineFragment) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, textFragmentWithoutBreaks, lineInfo);
-        }
-        else {
-            const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-            this.renderText(fragment, formatExt, textFragmentWithoutBreaks, paddingLeft);
-        }
-        return textFragment.length;
-    }
-    static renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragment, customContentService, customComponents, lineInfo) {
-        const components = customContentService.getComponents(customComponents, fragmentDocumentDistance);
-        if (!components.length) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo);
             return;
         }
-        let newTextFragmentStartIndex = fragmentDocumentDistance.start;
-        let nextTextFragment = textFragment;
-        for (const component of components) {
-            const textBeforeElement = nextTextFragment.substring(0, component.instance.insertIndex - newTextFragmentStartIndex);
-            nextTextFragment = nextTextFragment.substring(textBeforeElement.length + 1, nextTextFragment.length);
-            newTextFragmentStartIndex = newTextFragmentStartIndex + (textBeforeElement.length ? textBeforeElement.length + 1 : 1);
-            if (textBeforeElement.length) {
-                const paddingLeft = textBeforeElement.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-                this.renderText(fragment, formatExt, textBeforeElement, paddingLeft);
+        const textFragmentWithoutBreaks = BreakHelper.removeBreakMarker(breaks, textFragment, start);
+        const components = customContentService.getComponents(customComponents, start, end);
+        if (components.length) {
+            let newTextFragmentStartIndex = start;
+            let nextTextFragment = textFragmentWithoutBreaks;
+            for (const component of components) {
+                const textBeforeElement = nextTextFragment.substring(0, component.instance.insertIndex - newTextFragmentStartIndex);
+                nextTextFragment = nextTextFragment.substring(textBeforeElement.length + 1, nextTextFragment.length);
+                newTextFragmentStartIndex = newTextFragmentStartIndex + (textBeforeElement.length ? textBeforeElement.length + 1 : 1);
+                if (textBeforeElement.length) {
+                    this.renderText(fragment, textStyle, textBeforeElement, wordSpacing);
+                }
+                customContentService.componentService.attachComponent(fragment, component);
+            }
+            if (nextTextFragment.length) {
+                this.renderText(fragment, textStyle, nextTextFragment, wordSpacing);
             }
-            this.attachComponent(fragment, component, customContentService);
-        }
-        if (nextTextFragment.length) {
-            this.renderTextWithSpacingHandling(fragment, formatExt, nextTextFragment, lineInfo);
-        }
-    }
-    static renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo) {
-        const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
-        if (lineInfo.wordSpacing && textFragment.endsWith(' ')) {
-            this.renderText(fragment, formatExt, textFragment.slice(0, -1), paddingLeft);
-            this.renderText(fragment, formatExt, ' ');
         }
         else {
-            this.renderText(fragment, formatExt, textFragment, paddingLeft);
+            this.renderText(fragment, textStyle, textFragmentWithoutBreaks, wordSpacing);
         }
     }
-    static renderText(fragment, formatExt, textFragment, paddingLeft = null) {
+    static renderText(fragment, textStyle, content, wordSpacing) {
         const span = document.createElement('span');
-        const textStyle = new TextStyleModel({ ...formatExt.textStyle });
-        if (textFragment === NEW_LINE_MARKUP) {
+        if (content === NEW_LINE_MARKUP) {
             span.className = 'paragraph-symbol';
         }
         if (textStyle.headingStyleId === HYPERLINK_HEADING_STYLE_ID) {
@@ -6446,21 +6508,14 @@ class RenderingHelper {
             };
             span.onmouseleave = () => span.classList.remove('hyperlink-hover');
         }
-        span.textContent = textFragment;
+        span.textContent = content;
         let styleString = ContentStyleHelper.getTextStylesString(textStyle);
-        if (paddingLeft) {
-            styleString += `padding-left:${paddingLeft}px;`;
+        if (wordSpacing) {
+            styleString += `word-spacing:${wordSpacing}px;`;
         }
         span.setAttribute('style', styleString);
         fragment.appendChild(span);
     }
-    static getTextIndexLengthForInsert(formatExt, fragmentDocumentStartIndex, paragraphDistance, split, paragraphChars) {
-        const maxLength = Math.max(paragraphDistance.end - paragraphChars - paragraphDistance.start, 0);
-        return (Math.min(split - paragraphChars || Number.MAX_VALUE, maxLength, formatExt.endIndex - fragmentDocumentStartIndex + 1, formatExt.content.length) - 1);
-    }
-    static attachComponent(fragment, component, customContentService) {
-        customContentService.componentService.attachComponent(fragment, component);
-    }
 }
 
 class EdgesLayer {
@@ -6775,12 +6830,6 @@ class PrintPagesLayer extends PagesLayer {
     }
 }
 
-class PrintRenderingHelper extends RenderingHelper {
-    static attachComponent(fragment, component, customContentService) {
-        customContentService.componentService.cloneAndAttachComponent(fragment, component);
-    }
-}
-
 class Lines {
     get length() {
         return this.cells.length;
@@ -7056,10 +7105,9 @@ class ParagraphHelper {
 }
 
 class TextLayer {
-    constructor(parentElement, session, renderingHelper = RenderingHelper) {
+    constructor(parentElement, session) {
         this.parentElement = parentElement;
         this.session = session;
-        this.renderingHelper = renderingHelper;
         this.pagesCountChangedHandler = (event) => {
             this.lines.setSizes(event.pagesCount, event.pageHeight);
         };
@@ -7134,46 +7182,22 @@ class TextLayer {
             DomHelper.setStyle(paragraphCell.element.style, 'margin-right', `${offsetForLittlePages}px`);
             const paragraphSettings = this.session.displayData.getParagraphSettings(row);
             if (paragraphSettings.numberingData.numberingId !== null) {
-                const numberingElement = this.renderingHelper.renderNumberingMarker(paragraphSettings, this.element, this.session.generalProperties.scalingRatio);
+                const numberingElement = RenderingHelper.renderNumberingMarker(paragraphSettings, this.element, this.session.generalProperties.scalingRatio);
                 numberingElement.className = 'numberingMarker';
                 paragraphCell.element.appendChild(numberingElement);
             }
-            this.renderTextLines(paragraphCell.element, row);
+            this.renderParagraph(paragraphCell.element, this.session.displayData.paragraphs[row]);
             fragment.push(paragraphCell);
         }
         return fragment;
     }
-    renderTextLines(parent, row) {
-        const linesContainerElement = this.renderingHelper.createDivContainer('lines-container');
-        const paragraphSettings = this.session.displayData.getParagraphSettings(row);
-        const paragraphHeight = ParagraphHelper.getParagraphHeight(paragraphSettings.textLinesInfo);
+    renderParagraph(parent, paragraph) {
+        const linesContainerElement = RenderingHelper.createDivContainer('lines-container');
+        const paragraphHeight = ParagraphHelper.getParagraphHeight(paragraph.paragraphSettings.textLinesInfo);
         DomHelper.setStyle(linesContainerElement.style, 'height', `${paragraphHeight}px`);
         parent.appendChild(linesContainerElement);
-        const startIndex = this.session.displayData.positionToIndex({ row, column: 0 });
-        const endIndex = this.session.displayData.positionToIndex({ row: row + 1, column: 0 }) - 1;
-        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, startIndex, endIndex).map(x => new FormatExtModel({ ...x, content: this.session.model.content.substring(x.startIndex, x.endIndex + 1) }));
-        const splits = this.session.displayData.paragraphs[row].nextLineIndexes;
-        if (splits?.length) {
-            const distance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentWrappedLine({ currentElement: this.element, parentNode: linesContainerElement }, splits, paragraphSettings, combinedFormats, distance, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
-        }
-        else {
-            const markerWidth = paragraphSettings.textLinesInfo[0].indentFirstLine ? paragraphSettings.textLinesInfo[0].markerWidth : 0;
-            const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
-                ? 0
-                : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft - markerWidth;
-            let offset = 0;
-            if (paragraphSettings.textLinesInfo[0].isNumbering &&
-                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
-                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
-                offset = paragraphSettings.textLinesInfo[0].markerWidth;
-            }
-            const lineInfo = paragraphSettings.textLinesInfo[0];
-            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
-            linesContainerElement.appendChild(lastLineEl);
-            const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, lineInfo, this.session.model.breaks);
-        }
+        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, paragraph.startIndex, paragraph.startIndex + paragraph.content.length);
+        RenderingHelper.renderParagraph({ currentElement: this.element, parentNode: linesContainerElement }, paragraph, combinedFormats, this.session.customContentService, this.session.customComponents, this.session.generalProperties.scalingRatio, this.session.model.breaks);
     }
 }
 
@@ -7219,7 +7243,7 @@ class PrintRenderer {
         this.content.className = 'noder-content print';
     }
     createLayers() {
-        this.textLayer = new PrintTextLayer(this.content, this.mainSession, PrintRenderingHelper);
+        this.textLayer = new PrintTextLayer(this.content, this.mainSession);
         this.pagesLayer = new PrintPagesLayer(this.content, this.mainSession);
         this.edgesLayer = new EdgesLayer(this.content, this.mainSession);
     }
@@ -8621,7 +8645,7 @@ class Editor {
         const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
         const rect = this.renderer.container.getBoundingClientRect();
         const x = rect.left + cursor.pageX;
-        const y = rect.top + cursor.pageY + cursor.lineHeight;
+        const y = rect.top + cursor.pageY + cursor.height;
         this.overlayService.open(component, { textKey }, x, y);
     }
     cut() {
@@ -9271,7 +9295,7 @@ class Editor {
     saveInsertBreakToHistory(model) {
         model.isOnNewParagraph =
             model.breakType === BreakTypes.Page &&
-                BreakHelper.getBreakType(this.session.model, CUSTOM_ELEMENT_MARKER, model.insertIndex - 1) !== BreakTypes.Page;
+                BreakHelper.getBreakType(this.session.model.breaks, CUSTOM_ELEMENT_MARKER, model.insertIndex - 1) !== BreakTypes.Page;
         const count = model.isOnNewParagraph ? NEW_LINE_MARKUP.length + 1 : 1;
         this.history.pushInsertBreak(model, count);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertBreakCommand(model, this.targets));
@@ -9865,7 +9889,7 @@ class Editor {
             const mainRect = this.mainRenderer.container.getBoundingClientRect();
             const rect = this.renderer.container.getBoundingClientRect();
             const hintX = mainRect.right - 20;
-            const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+            const hintY = rect.top + cursor.pageY + cursor.height / 2 - 20;
             this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
         }
     }
@@ -9915,9 +9939,7 @@ class Editor {
     changedTableSize(insertIndex, sessionId) {
         const session = this.regulatorService.getSession(sessionId);
         const paragraph = ContentHelper.documentIndexToParagraphIndex(session.displayData.paragraphs, insertIndex).row;
-        session.displayData.resetAllNumberingInfo(paragraph);
         session.displayData.updateNextLineIndexes(paragraph, paragraph);
-        session.displayData.updateNumberingsDataOnChange(paragraph + 1);
         this.focus();
         this.onContentChange();
     }
@@ -10377,18 +10399,12 @@ class Editor {
             let existed = this.mainSession.customComponents.edges.headersComponents.findIndex(x => x.instance.sessionId === sessionId);
             if (existed !== -1) {
                 const headers = this.mainSession.customComponents.edges.headersComponents.slice(existed + 1);
-                headers.forEach(x => {
-                    x.instance.session.displayData.resetAllNumberingInfo(0);
-                    x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1);
-                });
+                headers.forEach(x => x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1));
             }
             else {
                 existed = this.mainSession.customComponents.edges.footersComponents.findIndex(x => x.instance.sessionId === sessionId);
                 const footers = this.mainSession.customComponents.edges.footersComponents.slice(existed + 1);
-                footers.forEach(x => {
-                    x.instance.session.displayData.resetAllNumberingInfo(0);
-                    x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1);
-                });
+                footers.forEach(x => x.instance.session.displayData.updateNextLineIndexes(0, x.instance.session.displayData.paragraphs.length - 1));
             }
         });
     }
@@ -10467,7 +10483,7 @@ class Editor {
         const mainRect = this.mainRenderer.container.getBoundingClientRect();
         const rect = this.renderer.container.getBoundingClientRect();
         const hintX = mainRect.right - 20;
-        const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+        const hintY = rect.top + cursor.pageY + cursor.height / 2 - 20;
         this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
         event?.stopPropagation();
     }
@@ -10652,10 +10668,47 @@ class CellSessionSourceModel {
     }
 }
 
+const DisplayValue = {
+    char: 1,
+    customContent: 3,
+    table: 4,
+    pageBreak: 5,
+    lineBreak: 6,
+    punctuation: 9,
+    space: 10,
+    tab: 11,
+    paragraph: 13,
+    hyphen: 14
+};
+
 class DisplayToken {
+    get isSpace() {
+        return this.displayValue === DisplayValue.space;
+    }
+    get isParagraph() {
+        return this.displayValue === DisplayValue.paragraph;
+    }
+    get isPageBreak() {
+        return this.displayValue === DisplayValue.pageBreak;
+    }
+    get isLineBreak() {
+        return this.displayValue === DisplayValue.lineBreak;
+    }
+    get isTab() {
+        return this.displayValue === DisplayValue.tab;
+    }
+    get isTable() {
+        return this.displayValue === DisplayValue.table;
+    }
+    get isWhiteSpace() {
+        return this.isSpace || this.isParagraph;
+    }
     get breaksLine() {
         return this.isPageBreak || this.isLineBreak;
     }
+    get breakable() {
+        return this.displayValue !== DisplayValue.char && this.displayValue !== DisplayValue.punctuation;
+    }
     constructor(fields) {
         if (!fields) {
             return;
@@ -10664,79 +10717,28 @@ class DisplayToken {
     }
 }
 
-class IndentModel {
-    constructor(firstLine, hanging, left, right) {
-        this.firstLine = firstLine;
-        this.hanging = hanging;
-        this.left = left;
-        this.right = right;
+class NoderTabComponent extends BaseNoderComponent {
+    get tab() {
+        return this.content;
     }
-}
-
-class LineInfoModel {
-    constructor(fields) {
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
+    set tab(val) {
+        this.content = val;
     }
-}
-
-class DisplayTokenHelper {
-    static getDisplayValue(charCode) {
-        if (charCode === 32) {
-            return DisplayValue.space;
-        }
-        if ((charCode > 39 && charCode < 48) || (charCode > 57 && charCode < 64)) {
-            return DisplayValue.punctuation;
-        }
-        return DisplayValue.char;
+    initialize() {
+        this.applySize(this.tab.width);
     }
-    static getLineInfoFromToken(prevToken, firstWrapToken, wrapTokens, isAfterPageBreak) {
-        const info = new LineInfoModel({
-            width: 0,
-            height: 0,
-            align: prevToken.align,
-            indent: new IndentModel(prevToken.indentFirstLine, prevToken.indentHanging, prevToken.indentLeft, prevToken.indentRight),
-            offsetBefore: prevToken.indentBefore,
-            offsetAfter: prevToken.indentAfter,
-            lineSpacing: prevToken.lineSpacing,
-            markerWidth: prevToken.markerWidth,
-            isAfterPageBreak,
-            isEndedByPageBreak: prevToken.isPageBreak,
-            isNumbering: prevToken.isNumbering
-        });
-        if (firstWrapToken) {
-            info.align = firstWrapToken.align;
-            info.indent.firstLine = firstWrapToken.indentFirstLine;
-            info.indent.hanging = firstWrapToken.indentHanging;
-            info.indent.left = firstWrapToken.indentLeft;
-            info.indent.right = firstWrapToken.indentRight;
-            info.offsetBefore = firstWrapToken.indentBefore;
-            info.offsetAfter = firstWrapToken.indentAfter;
-            info.lineSpacing = firstWrapToken.lineSpacing;
-            info.hasTable = firstWrapToken.isTable;
-            info.isNumbering = firstWrapToken.isNumbering;
-            info.markerWidth = firstWrapToken.markerWidth;
-        }
-        let maxAscent = 0;
-        let maxDescent = 0;
-        const tokens = isAfterPageBreak && !wrapTokens.length ? [prevToken] : wrapTokens;
-        for (const wrapToken of tokens) {
-            if (maxAscent < wrapToken.ascent) {
-                maxAscent = wrapToken.ascent;
-            }
-            if (maxDescent < wrapToken.descent) {
-                maxDescent = wrapToken.descent;
-            }
-            info.width += wrapToken.width;
-        }
-        info.maxAscent = maxAscent;
-        info.height = maxAscent + maxDescent;
-        info.offsetAfter = info.height * (info.lineSpacing - 1);
-        return info;
+    applySize(width) {
+        this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.min-width.px": "width()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[style.min-width.px]': 'width()'
+                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
+        }] });
 
 class CellDataModel {
     constructor(cell, cellContentHeight, componentRef) {
@@ -10888,21 +10890,6 @@ class CellResizerParametersModel {
     }
 }
 
-class MarginModel {
-    constructor(fields) {
-        this.left = DocumentInfo.paddingLeft;
-        this.right = DocumentInfo.paddingRight;
-        this.top = DocumentInfo.paddingTop;
-        this.bottom = DocumentInfo.paddingBottom;
-        this.header = DocumentInfo.paddingHeader;
-        this.footer = DocumentInfo.paddingFooter;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
 class NoderTableCellComponent {
     get session() {
         return this.cellSession.session;
@@ -10935,10 +10922,10 @@ class NoderTableCellComponent {
     }
     initialize() {
         const marginModel = new MarginModel({
-            left: 7,
-            right: 7,
-            top: 0,
-            bottom: 0,
+            left: this.cell.margins?.left ?? this.table.margins?.left ?? 0,
+            right: this.cell.margins?.right ?? this.table.margins?.right ?? 0,
+            top: this.cell.margins?.top ?? this.table.margins?.top ?? 0,
+            bottom: this.cell.margins?.bottom ?? this.table.margins?.bottom ?? 0,
             header: 0,
             footer: 0
         });
@@ -11988,195 +11975,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
-class NumberingDataModel {
-    constructor(fields) {
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
-class NumberingParagraphStyleModel extends ParagraphStyleModel {
-    constructor(fields) {
-        super();
-        this.numberingType = null;
-        this.numberingLevelsStyles = null;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-}
-
-class NumberingHelper {
-    static getStyles(paragraphStyle, numberings) {
-        const numberingLevels = numberings.find(x => x.numberingId === paragraphStyle.numberingId).levels;
-        const numberingLevelsStyles = numberingLevels.reduce((prev, next) => `${prev}${next.marker}${next.markerType}`, '');
-        const level = numberingLevels.find(x => x.level === paragraphStyle.numberingLevel);
-        return new NumberingParagraphStyleModel({ ...paragraphStyle, numberingType: level.markerType, numberingLevelsStyles });
-    }
-    static find(numberings, id, level) {
-        const numbering = numberings.find(x => x.numberingId === id);
-        return numbering?.levels.find(x => x.level === level);
-    }
-    static calculateNumberingInfo(numberingId, level, marker, numberingInfo, numberings) {
-        const numberingModel = this.find(numberings, numberingId, level);
-        if (numberingModel?.markerType === NumberingMarkerType.Bullet) {
-            return;
+class DisplayTokenHelper {
+    static getDisplayValue(charCode, breakType) {
+        if (breakType === BreakTypes.Page) {
+            return DisplayValue.pageBreak;
         }
-        this.calculateMarkerIndexes(numberingId, level, marker, numberingInfo);
-    }
-    static calculateMarkerIndexes(numberingId, level, marker, numberingInfo) {
-        if (!numberingId) {
-            return;
+        if (breakType === BreakTypes.TextWrapping) {
+            return DisplayValue.lineBreak;
         }
-        if (!numberingInfo[numberingId]?.length || !numberingInfo[numberingId][level]) {
-            numberingInfo[numberingId] ??= [];
-            return;
+        if (charCode === 32) {
+            return DisplayValue.space;
         }
-        if (!numberingInfo[numberingId][level]?.visited) {
-            if (!marker) {
-                numberingInfo[numberingId][level].markerIndex++;
-                return;
-            }
-            this.updateNumberingInfo(numberingInfo, marker, numberingId, level);
+        if (charCode === 45) {
+            return DisplayValue.hyphen;
         }
-        else {
-            numberingInfo[numberingId][level].markerIndex++;
-            for (let i = 0; i < numberingInfo[numberingId].length; i++) {
-                if (i >= level + 1) {
-                    numberingInfo[numberingId][i].markerIndex = 0;
-                }
-                else {
-                    if (numberingInfo[numberingId][i].markerIndex === 0) {
-                        numberingInfo[numberingId][i].markerIndex++;
-                    }
-                }
-            }
+        if ((charCode > 39 && charCode < 48) || (charCode > 57 && charCode < 64)) {
+            return DisplayValue.punctuation;
         }
+        return DisplayValue.char;
     }
-    static getMarker(levelModel, numberingId, paragraphs, paragraphIndex, numberingInfo) {
-        let resultMarker = levelModel.marker;
-        let index = resultMarker.indexOf('%');
-        if (index === -1) {
-            return resultMarker;
-        }
-        if (numberingInfo[numberingId]?.length && numberingInfo[numberingId][levelModel.level]) {
-            return this.createMarkerString(numberingInfo, numberingId, levelModel.level);
-        }
-        while (index !== -1) {
-            const symbolLevelNumber = Number(resultMarker[index + 1]) - 1;
-            const levelIndex = this.getLevelIndex(paragraphs, paragraphIndex, numberingId, symbolLevelNumber);
-            const count = levelModel.startValue + levelIndex;
-            resultMarker = resultMarker.slice(0, index) + count.toString() + resultMarker.slice(index + 2);
-            index = resultMarker.indexOf('%');
-        }
-        numberingInfo[numberingId] ??= [];
-        this.updateNumberingInfo(numberingInfo, resultMarker, numberingId, levelModel.level);
-        const markerLevels = resultMarker.split('.');
-        if (levelModel.level !== 0 && markerLevels[markerLevels.length - 1] === '') {
-            return resultMarker.slice(0, -1);
-        }
-        return resultMarker;
+    static getParagraphToken(paragraphSymbolStyle) {
+        const size = FontMetrics.measureCharSize('0', ContentStyleHelper.getFontStylesString(paragraphSymbolStyle));
+        return new DisplayToken({ ...size, displayValue: DisplayValue.paragraph });
     }
-    static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
-        const paragraph = paragraphs[paragraphIndex];
-        const numberingId = paragraph?.paragraphStyle.numberingId;
-        if (!numberingId) {
-            return new NumberingDataModel({ numberingId: null });
+    static getSymbolToken(code, size, breakType) {
+        const result = new DisplayToken({ ...size, displayValue: DisplayTokenHelper.getDisplayValue(code, breakType) });
+        if (result.isSpace) {
+            result.ascent = 0;
+            result.descent = 0;
+            result.height = 0;
         }
-        const level = paragraph.paragraphStyle.numberingLevel;
-        const numberingLevelModel = this.find(numberings, numberingId, level);
-        for (let i = 0; i < level; i++) {
-            if (!numberingInfo[numberingId] || !numberingInfo[numberingId][i]) {
-                const numberingLevel = this.find(numberings, numberingId, i);
-                this.getMarker(numberingLevel, numberingId, paragraphs, paragraphIndex, numberingInfo);
-            }
-        }
-        const marker = this.getMarker(numberingLevelModel, numberingId, paragraphs, paragraphIndex, numberingInfo);
-        return new NumberingDataModel({ numberingId, level, marker });
+        return result;
     }
-    static updateMarkerData(properties, paragraph, paragraphTextStyle, paragraphStyle) {
-        const numberingLevel = NumberingHelper.find(properties.numberings, paragraph.numberingData.numberingId, paragraph.numberingData.level);
-        const markerTextStyle = ContentStyleHelper.combineTextStyles(numberingLevel.markerStyle, paragraphTextStyle);
-        const markerSizes = NumberingHelper.getMarkerSizes(paragraph.numberingData.marker, markerTextStyle);
-        paragraph.numberingData.markerTextStyle = markerTextStyle;
-        paragraph.numberingData.width = markerSizes.width;
-        paragraph.numberingData.height = markerSizes.height;
-        const indentLeft = paragraphStyle.indentLeft !== null ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
-        let indent = 0;
-        if (paragraphStyle.indentHanging === null && paragraphStyle.indentFirstLine === null) {
-            indent = -numberingLevel.indentHanging;
-        }
-        else {
-            indent = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
-        }
-        paragraph.numberingData.paddingLeft = indentLeft + indent;
+    static getComponentToken(component, size) {
+        const ascent = component.instance.ascent() ?? 0;
+        const descent = component.instance.descent() ?? 0;
+        let displayValue = component.instance instanceof NoderTabComponent ? DisplayValue.tab : DisplayValue.customContent;
+        displayValue = component.instance instanceof NoderTableComponent ? DisplayValue.table : displayValue;
+        return new DisplayToken({
+            width: component.instance.width(),
+            height: ascent + descent,
+            font: size.font,
+            ascent,
+            descent,
+            displayValue
+        });
     }
-    static getMarkerSizes(marker, markerStyle) {
-        let width = 0;
-        let height = 0;
-        const markerStylesString = ContentStyleHelper.getFontStylesString(markerStyle);
-        for (let char of marker) {
-            const markerCharSizes = FontMetrics.measureCharSize(char, markerStylesString);
-            width += markerCharSizes.width;
-            if (height < markerCharSizes.height) {
-                height = markerCharSizes.height;
-            }
-        }
-        return { height, width };
+}
+
+class IndentModel {
+    constructor(firstLine, hanging, left, right, markerWidth) {
+        this.firstLine = firstLine;
+        this.hanging = hanging;
+        this.left = left;
+        this.right = right;
+        this.markerWidth = markerWidth;
     }
-    static updateNumberingInfo(numberingInfo, marker, numberingId, level) {
-        if (!numberingInfo[numberingId]) {
+}
+
+class LineInfoModel {
+    constructor(fields) {
+        if (!fields) {
             return;
         }
-        const markerLevels = this.getLevelInfo(marker);
-        const lastMarkerLevel = markerLevels.length - 1;
-        numberingInfo[numberingId][level] = {
-            markerIndex: markerLevels[lastMarkerLevel],
-            markerLevel: Math.min(lastMarkerLevel, level),
-            visited: true
-        };
+        Object.assign(this, fields);
     }
-    static getLevelIndex(paragraphs, paragraphIndex, numberingId, numberingLevel) {
-        let index = 0;
-        let isOnlySubLevelsBefore = false;
-        for (let i = paragraphIndex; i >= 0; i--) {
-            if (paragraphs[i].paragraphStyle.numberingId !== numberingId) {
-                continue;
-            }
-            if (paragraphs[i].paragraphStyle.numberingLevel < numberingLevel) {
-                break;
-            }
-            if (paragraphs[i].paragraphStyle.numberingLevel > numberingLevel) {
-                isOnlySubLevelsBefore = true;
+}
+
+class LineInfoHelper {
+    static get(tokens, isAfterPageBreak, isLastLine, style, indent, isNumbering, width, defaultHeight, defaultAscent) {
+        const result = new LineInfoModel({
+            isAfterPageBreak,
+            isEndedByPageBreak: tokens[tokens.length - 1].isPageBreak,
+            backgroundColor: style.backgroundColor,
+            align: style.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
+            indent,
+            offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
+            lineSpacing: style.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
+            isNumbering,
+            hasTable: false,
+            width: 0
+        });
+        let maxAscent = 0;
+        let maxDescent = 0;
+        for (const token of tokens) {
+            if (maxAscent < token.ascent) {
+                maxAscent = token.ascent;
+            }
+            if (maxDescent < token.descent) {
+                maxDescent = token.descent;
+            }
+            result.width += token.width;
+        }
+        result.height = maxAscent + maxDescent;
+        result.ascent = maxAscent;
+        if (result.height === 0) {
+            result.height = defaultHeight;
+            result.ascent = defaultAscent;
+        }
+        result.offsetAfter = result.height * (result.lineSpacing - 1);
+        if (style.alignment === Alignment$1.justify && !isLastLine) {
+            let right = tokens.length - 1;
+            let adjustableWidth = result.width;
+            while (right > 0 && tokens[right].isSpace) {
+                adjustableWidth -= tokens[right].width;
+                right--;
+            }
+            let left = 0;
+            while (left < tokens.length - 1 && tokens[left].isSpace) {
+                left++;
+            }
+            let spaces = 0;
+            for (let i = right; i > left; i--) {
+                if (tokens[i].isTab) {
+                    left = i;
+                }
+                if (tokens[i].isSpace) {
+                    spaces++;
+                }
             }
-            else {
-                index++;
-                isOnlySubLevelsBefore = false;
+            const indentWidth = (indent.left ?? 0) + (indent.right ?? 0) + (indent.firstLine ?? 0) - (indent.hanging ?? 0);
+            const availableWidth = width - indentWidth - indent.markerWidth; // todo: use NumberingHelper.getOffsetCausedByMarker
+            const whitespaceDeficit = availableWidth - adjustableWidth;
+            if (spaces > 0 && whitespaceDeficit > 0) {
+                result.wordSpacing = whitespaceDeficit / spaces;
+                result.width = availableWidth;
+                result.wordSpacingStart = left;
+                result.wordSpacingEnd = right;
+                for (let i = right; i > left; i--) {
+                    if (tokens[i].isSpace) {
+                        tokens[i].width += result.wordSpacing;
+                    }
+                }
             }
         }
-        index = isOnlySubLevelsBefore ? index + 1 : index;
-        return index <= 0 ? 0 : index - 1;
-    }
-    static getLevelInfo(input) {
-        return input
-            .split('.')
-            .filter(x => !!x)
-            .map(x => parseInt(x));
+        return result;
     }
-    static createMarkerString(numberingInfo, numberingId, level) {
-        if (level === 0) {
-            return numberingInfo[numberingId][level].markerIndex + '.';
-        }
-        let marker = [];
-        let { markerLevel, markerIndex } = numberingInfo[numberingId][level];
-        for (let i = 0; i < markerLevel; i++) {
-            marker.push(numberingInfo[numberingId][i].markerIndex);
+    static getFirstLineIndent(model, paragraphIndex, generalProperties) {
+        const paragraph = model.paragraphs[paragraphIndex];
+        const paragraphStyle = paragraph.paragraphStyle;
+        if (paragraphStyle.numberingId === null) {
+            return 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, 0);
         }
-        marker.push(markerIndex);
-        return marker.join('.');
+        const levelsModel = NumberingHelper.findNumberingLevels(generalProperties.numberings, paragraphStyle.numberingId);
+        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(model.formats, paragraph.insertIndex);
+        const markerTextStyle = ContentStyleHelper.combineTextStyles(levelsModel[paragraphStyle.numberingLevel].markerStyle, paragraphFormat.textStyle);
+        const marker = NumberingHelper.getMarker(levelsModel, paragraphStyle.numberingLevel, paragraphStyle.numberingId, generalProperties.numberingInfo);
+        const markerWidth = NumberingHelper.getMarkerSizes(marker, markerTextStyle).width;
+        return new IndentModel(paragraph.paragraphStyle.indentFirstLine ?? DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, paragraph.paragraphStyle.indentLeft !== null
+            ? paragraph.paragraphStyle.indentLeft
+            : levelsModel[paragraphStyle.numberingLevel].indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight, markerWidth + markerWidth / marker.length);
     }
 }
 
@@ -12259,20 +12207,14 @@ class PageFormat {
     }
 }
 
-class TextLineInfo {
+class TextLineInfo extends LineInfoModel {
     constructor(offsetMargin, contentWidth, align, indent, fields) {
+        super(fields);
         this.paddingLeft = 0;
         this.offsetMargin = 0;
-        this.offsetBefore = 0;
-        this.offsetAfter = 0;
         this.firstLinePageOffset = 0; // for selection
         this.endPageOffset = 0; // for selection
         this.screenLine = 0;
-        this.isAfterPageBreak = false;
-        this.isEndedByPageBreak = false;
-        if (fields) {
-            Object.assign(this, fields);
-        }
         this.indentFirstLine = indent.firstLine;
         this.offsetMargin = offsetMargin;
         this.indentLeft = indent.left;
@@ -12394,47 +12336,6 @@ class ParagraphInfosRemoved {
     }
 }
 
-class ParagraphStyleHelper {
-    static getParagraphsAtRange(paragraphs, startIndex, endIndex) {
-        if (!paragraphs?.length) {
-            return [];
-        }
-        let firstModifierIndexInRange = paragraphs.findIndex(paragraph => paragraph.insertIndex >= startIndex);
-        firstModifierIndexInRange = firstModifierIndexInRange === -1 ? paragraphs.length : firstModifierIndexInRange;
-        let lastModifierIndexInRange = paragraphs.findIndex(x => x.insertIndex >= endIndex);
-        lastModifierIndexInRange =
-            startIndex === endIndex || lastModifierIndexInRange === -1 ? firstModifierIndexInRange : lastModifierIndexInRange;
-        return paragraphs.slice(firstModifierIndexInRange, lastModifierIndexInRange + 1);
-    }
-    static getParagraphAtIndex(paragraphs, insertIndex) {
-        if (!paragraphs?.length) {
-            return null;
-        }
-        let startIndex = 0;
-        let endIndex = paragraphs.length - 1;
-        while (startIndex <= endIndex) {
-            const middleIndex = Math.round((startIndex + endIndex) / 2);
-            const paragraph = paragraphs[middleIndex];
-            if (paragraph.insertIndex < insertIndex) {
-                startIndex = middleIndex + 1;
-            }
-            else {
-                endIndex = middleIndex - 1;
-            }
-        }
-        return paragraphs[startIndex];
-    }
-    static isEndOfParagraph(paragraphs, endIndex) {
-        const paragraph = this.getParagraphAtIndex(paragraphs, endIndex);
-        let paragraphIndex = paragraphs.findIndex(x => x === paragraph);
-        const endOfParagraphIsParagraph = paragraph && endIndex === paragraph.insertIndex && paragraphs.length - 1 > paragraphIndex;
-        if (endOfParagraphIsParagraph) {
-            paragraphIndex += 1;
-        }
-        return paragraphs[paragraphIndex].insertIndex === endIndex + 1;
-    }
-}
-
 var TabAlignment;
 (function (TabAlignment) {
     TabAlignment[TabAlignment["Left"] = 0] = "Left";
@@ -12444,14 +12345,6 @@ var TabAlignment;
     TabAlignment[TabAlignment["Bar"] = 4] = "Bar";
 })(TabAlignment || (TabAlignment = {}));
 
-class TabHelper {
-    static calculateTabWidth(rowWidth, defaultTabWidth, tabSettings) {
-        const tabs = tabSettings ?? [];
-        const nextSetting = tabs.find(x => x.position > rowWidth);
-        return nextSetting ? nextSetting.position - rowWidth : defaultTabWidth - (rowWidth % defaultTabWidth);
-    }
-}
-
 class DisplayData extends EventEmitting {
     get maxPageWidth() {
         let max = 0;
@@ -12478,7 +12371,6 @@ class DisplayData extends EventEmitting {
         this.paragraphs = [];
         this.pagesFormat = [];
         this.allPagesHeight = 0;
-        this.tabTokens = [];
         this.ParagraphInfoChanges = new Subject();
         this.lastParagraphId = 0;
         this.updateDataForModel();
@@ -12745,26 +12637,36 @@ class DisplayData extends EventEmitting {
         }
         if (paragraphSettings.numberingData.numberingId !== null) {
             const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[index].insertIndex);
-            NumberingHelper.updateMarkerData(this.generalProperties, paragraphSettings, paragraphFormat.textStyle, this.model.paragraphs[index].paragraphStyle);
+            NumberingHelper.updateMarkerData(this.generalProperties.numberings, paragraphSettings, paragraphFormat.textStyle, this.model.paragraphs[index].paragraphStyle);
         }
     }
     updateNextLineIndexes(firstParagraph, lastParagraph) {
         this.updateParagraphStartIndex(firstParagraph);
         let indexOfParagraphAfterPageBreak = this.getParagraphSettings(firstParagraph - 1)?.isEndedByPageBreak ? firstParagraph : -1;
-        let firstUsedTabIndex = this.model.tabs.findIndex(x => x.insertIndex >= this.paragraphs[firstParagraph].startIndex);
+        let updateNumberingFromIndex = null;
         for (let i = firstParagraph; i <= lastParagraph; i++) {
             if (!this.paragraphs[i]) {
                 continue;
             }
-            this.tabTokens = [];
-            const sameNumberingIndex = this.findSameNumberingIndex(i);
-            let marker = this.getParagraphSettings(sameNumberingIndex)?.numberingData.marker;
-            if (sameNumberingIndex < 0 && this.getParagraphSettings(i)?.numberingData.numberingId) {
-                marker = '0.';
+            const numberingId = this.model.paragraphs[i].paragraphStyle.numberingId ?? this.getParagraphSettings(i)?.numberingData.numberingId;
+            if (numberingId) {
+                const numberingsLevels = NumberingHelper.findNumberingLevels(this.generalProperties.numberings, numberingId);
+                NumberingHelper.addValueToNumberingInfo(numberingId, this.generalProperties.numberingInfo, numberingsLevels);
+                let startNumberingParagraphIndex = i;
+                while (this.isSameNumberingId(startNumberingParagraphIndex, numberingId)) {
+                    startNumberingParagraphIndex -= 1;
+                }
+                if (updateNumberingFromIndex === null || updateNumberingFromIndex > startNumberingParagraphIndex) {
+                    updateNumberingFromIndex = startNumberingParagraphIndex;
+                }
+                if (this.model.paragraphs[i].paragraphStyle.numberingId !== this.getParagraphSettings(i)?.numberingData.numberingId) {
+                    const updatedNumberingId = this.getParagraphSettings(i)?.numberingData.numberingId ?? this.model.paragraphs[i].paragraphStyle.numberingId;
+                    NumberingHelper.setNumberingNeedToRecalculate(this.generalProperties.numberingInfo, updatedNumberingId);
+                }
+                NumberingHelper.setNumberingNeedToRecalculate(this.generalProperties.numberingInfo, numberingId);
             }
-            NumberingHelper.calculateNumberingInfo(this.model.paragraphs[i].paragraphStyle.numberingId ?? this.getParagraphSettings(i)?.numberingData.numberingId ?? null, this.model.paragraphs[i].paragraphStyle.numberingLevel ?? this.getParagraphSettings(i)?.numberingData.level ?? null, marker, this.generalProperties.numberingInfo, this.generalProperties.numberings);
             const numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
-            const { splits, rowInfos } = this.getSplits(this.model, i);
+            const { splits, rowInfos } = this.splitParagraphByLines(i);
             this.paragraphs[i].nextLineIndexes = splits;
             if (indexOfParagraphAfterPageBreak === i) {
                 rowInfos[0].isAfterPageBreak = true;
@@ -12772,235 +12674,134 @@ class DisplayData extends EventEmitting {
             indexOfParagraphAfterPageBreak = rowInfos[rowInfos.length - 1].isEndedByPageBreak ? i + 1 : -1;
             this.setParagraphSettings(i, rowInfos, numberingData);
             this.updateParagraphSettingsNumberingData(i);
-            firstUsedTabIndex = this.updateParagraphTabs(firstUsedTabIndex, i);
         }
+        this.updateNumberingsDataOnChange(updateNumberingFromIndex);
         this.getParagraphSettings(lastParagraph + 1)?.setIsAfterPageBreak(indexOfParagraphAfterPageBreak > -1);
         this.updateParagraphLineNumber(firstParagraph);
         this.processParagraphsProperties(firstParagraph);
     }
+    isSameNumberingId(paragraphIndex, numberingId) {
+        if (paragraphIndex === 0) {
+            return false;
+        }
+        const startNumberingId = this.model.paragraphs[paragraphIndex].paragraphStyle.numberingId ??
+            this.getParagraphSettings(paragraphIndex)?.numberingData.numberingId;
+        return numberingId === startNumberingId;
+    }
     updateNumberingsDataOnChange(index) {
+        if (index === null) {
+            return;
+        }
         for (let i = index; i < this.paragraphs.length; i++) {
             const paragraphStyle = this.model.paragraphs[i].paragraphStyle;
             const paragraphSettings = this.getParagraphSettings(i);
             if (this.model.paragraphs[i].paragraphStyle.numberingId !== null) {
-                NumberingHelper.calculateNumberingInfo(paragraphStyle.numberingId, paragraphStyle.numberingLevel, paragraphSettings.numberingData.marker, this.generalProperties.numberingInfo, this.generalProperties.numberings);
-                paragraphSettings.numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
-                const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[i].insertIndex);
-                NumberingHelper.updateMarkerData(this.generalProperties, paragraphSettings, paragraphFormat.textStyle, paragraphStyle);
+                if (this.generalProperties.numberingInfo[paragraphStyle.numberingId][paragraphStyle.numberingLevel].needToRecalculate) {
+                    NumberingHelper.calculateNumberingInfo(paragraphStyle.numberingId, paragraphStyle.numberingLevel, this.generalProperties.numberingInfo, this.generalProperties.numberings);
+                    paragraphSettings.numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
+                    const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, this.model.paragraphs[i].insertIndex);
+                    NumberingHelper.updateMarkerData(this.generalProperties.numberings, paragraphSettings, paragraphFormat.textStyle, paragraphStyle);
+                }
             }
             const table = this.customContentService.findComponent(this.customComponents.tables, paragraphSettings.startInsertIndex);
             if (table) {
                 table.instance.updateCells();
             }
         }
+        NumberingHelper.setAllNumberingIsCalculated(this.generalProperties.numberingInfo);
         if ('pageType' in this.model) {
             this.editorService.updateEdges(this.sessionId);
         }
     }
-    resetAllNumberingInfo(paragraphIndex) {
-        for (let i = paragraphIndex; i < this.model.paragraphs.length; i++) {
-            const { numberingId } = this.model.paragraphs[i].paragraphStyle;
-            if (numberingId !== null && this.generalProperties.numberingInfo[numberingId]) {
-                this.generalProperties.numberingInfo[numberingId] = [];
-            }
-        }
-    }
-    resetNumberingInfoByTableCell(table) {
-        for (const element of table.instance.rowMatrix) {
-            for (let cell of element.cells) {
-                const { marker, numberingId, level } = cell.componentRef.instance.session.displayData.paragraphs[0].paragraphSettings.numberingData;
-                if (marker && numberingId) {
-                    NumberingHelper.updateNumberingInfo(this.generalProperties.numberingInfo, marker, numberingId, level);
-                    this.resetAllNumberingInfo(0);
-                    return;
-                }
-            }
-        }
-    }
-    updateParagraphTabs(tabIndex, paragraphIndex) {
-        const paragraphContentLength = this.getParagraphContent(paragraphIndex).length;
-        const paragraphLastIndex = this.paragraphs[paragraphIndex].startIndex + paragraphContentLength;
-        if (tabIndex === -1 ||
-            tabIndex >= this.customComponents.tabs.length ||
-            this.customComponents.tabs[tabIndex].instance.insertIndex > paragraphLastIndex) {
-            return tabIndex;
-        }
-        const startIndex = tabIndex;
-        while (this.customComponents.tabs[tabIndex] && this.customComponents.tabs[tabIndex].instance.insertIndex <= paragraphLastIndex) {
-            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width);
-            tabIndex++;
-        }
-        return tabIndex;
-    }
-    getSplits(model, paragraphIndex) {
-        const paragraphContent = this.getParagraphContent(paragraphIndex);
-        const strTokens = this.getDisplayTokens(model, paragraphContent, this.paragraphs[paragraphIndex].startIndex);
-        if (!strTokens.length) {
-            const defaultRowInfo = new LineInfoModel({
-                height: (DEFAULT_FONT_SIZE * 4) / 3,
-                width: 0,
-                align: DEFAULT_PARAGRAPH_STYLE.alignment,
-                indent: new IndentModel(DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, DEFAULT_PARAGRAPH_STYLE.indentLeft, DEFAULT_PARAGRAPH_STYLE.indentRight),
-                offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-                offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-                lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing,
-                isAfterPageBreak: false,
-                isEndedByPageBreak: false,
-                markerWidth: 0,
-                isNumbering: false,
-                backgroundColor: DEFAULT_PARAGRAPH_STYLE.backgroundColor
-            });
-            return { splits: [], rowInfos: [defaultRowInfo] };
-        }
+    splitParagraphByLines(paragraphIndex) {
+        const paragraph = this.paragraphs[paragraphIndex];
+        const { paragraphTokens, paragraphToken } = this.getParagraphTokens(paragraph);
         const splits = [];
         const rowInfos = [];
-        let prevToken;
-        let index = -1;
-        let initial = paragraphContent;
-        const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
-        while (index) {
-            initial = initial.slice(index > 0 ? index : 0);
-            const tokens = strTokens.slice(paragraphContent.length - initial.length);
-            if (!tokens.length) {
-                tokens.push(...this.getEmptyDisplayTokens(model, this.paragraphs[paragraphIndex].startIndex + index));
-            }
-            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth, model.paragraphs[paragraphIndex].paragraphStyle.tabSettings);
-            if (tokens[tokens.length - 1].isPageBreak && wrapLimit === tokens.length && this.paragraphs.length > paragraphIndex + 1) {
-                wrapLimit = 0;
-            }
-            const wrapSplit = tokens[wrapLimit - 1]?.breaksLine || tokens[wrapLimit - 1]?.isTable ? wrapLimit : this.computeWrapSplit(tokens, wrapLimit);
-            const wrapTokens = tokens.slice(0, wrapSplit || undefined);
-            if (wrapTokens.length) {
-                prevToken = wrapTokens[wrapTokens.length - 1];
-            }
-            const isAfterPageBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
-            const lineInfo = DisplayTokenHelper.getLineInfoFromToken(prevToken, wrapTokens[0], wrapTokens, isAfterPageBreak);
-            const paragraphStyle = model.paragraphs[paragraphIndex].paragraphStyle;
-            lineInfo.backgroundColor = paragraphStyle.backgroundColor;
-            const isLastLineOfParagraph = !wrapLimit || prevToken.isLineBreak;
-            if (paragraphStyle.alignment === Alignment$1.justify && !isLastLineOfParagraph && wrapTokens.length > 1) {
-                let currentLineWidth = 0;
-                let spaceCount = wrapTokens[0].markerWidth ? 1 : 0;
-                for (let i = 0; i < wrapTokens.length; i++) {
-                    const token = wrapTokens[i];
-                    currentLineWidth += token.width;
-                    if (token.displayValue === DisplayValue.space) {
-                        if (i === wrapTokens.length - 1) {
-                            token.displayValue = DisplayValue.trailingSpace;
-                        }
-                        else {
-                            spaceCount++;
-                        }
-                    }
+        const style = this.model.paragraphs[paragraphIndex].paragraphStyle;
+        const pageFormat = this.getPageFormatAtPosition(paragraph.startIndex);
+        const defaultHeight = paragraphToken.height;
+        const defaultAscent = paragraphToken.ascent;
+        let index = 0;
+        let indent = LineInfoHelper.getFirstLineIndent(this.model, paragraphIndex, this.generalProperties);
+        do {
+            let tokens = paragraphTokens.slice(index);
+            const maxWidth = pageFormat.contentWidth - indent.right - indent.markerWidth;
+            let startWidth = indent.left + indent.firstLine - indent.hanging || 0;
+            let last = this.computeWrapIndex(tokens, startWidth, maxWidth, style.tabSettings ?? []);
+            tokens = tokens.slice(0, last + 1);
+            const width = pageFormat.contentWidth;
+            const isNumbering = index === 0 && !!indent.markerWidth;
+            const isBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
+            const isLast = index + last + 1 === paragraphTokens.length;
+            const info = LineInfoHelper.get(tokens, isBreak, isLast, style, indent, isNumbering, width, defaultHeight, defaultAscent);
+            for (let i = 0; i < tokens.length; i++) {
+                if (tokens[i].isTab) {
+                    const tab = this.customComponents.tabs.find(x => x.instance.insertIndex === paragraph.startIndex + index + i);
+                    tab.instance.applySize(tokens[i].width);
                 }
-                const { left, right, firstLine, hanging } = lineInfo.indent;
-                const indent = left + right + firstLine - hanging || 0;
-                const availableWidth = pageFormat.contentWidth - indent - wrapTokens[0].markerWidth;
-                const whitespaceDeficit = availableWidth - currentLineWidth;
-                if (spaceCount > 0 && whitespaceDeficit > 0) {
-                    lineInfo.wordSpacing = whitespaceDeficit / spaceCount;
-                    lineInfo.wordSpacingWidth = whitespaceDeficit;
+                else if (tokens[i].isTable) {
+                    info.hasTable = true;
                 }
             }
-            rowInfos.push(lineInfo);
-            if (!wrapLimit) {
-                break;
+            rowInfos.push(info);
+            index += last + 1;
+            if (index < paragraphTokens.length) {
+                splits.push(index);
+                indent = new IndentModel(null, null, indent.left, indent.right, 0);
             }
-            index = wrapSplit;
-            const splitsLength = splits.length;
-            const splitIndex = splitsLength ? index + splits[splitsLength - 1] : index;
-            splits.push(splitIndex);
-        }
-        this.tabTokens.push(...strTokens.filter(x => x.isTab));
-        ParagraphHelper.applyParagraphIndentsToLines(rowInfos, paragraphIndex, model.paragraphs);
+        } while (index < paragraphTokens.length);
+        ParagraphHelper.applyParagraphIndentsToLines(rowInfos, paragraphIndex, this.model.paragraphs);
         return { splits, rowInfos };
     }
-    /**
-     * Given a string, returns an array of the display characters, including tabs and spaces and custom components.
-     */
-    getDisplayTokens(model, str, startIndex) {
-        if (!str.length) {
-            return this.getEmptyDisplayTokens(model, startIndex);
-        }
-        return this.fillLineTokens(startIndex, str, model);
+    getParagraphTokens(paragraphInfo) {
+        const paragraphSymbolIndex = paragraphInfo.startIndex + paragraphInfo.content.length;
+        const { tokens, paragraphToken } = this.getTokens(paragraphInfo.startIndex, paragraphInfo.content, paragraphSymbolIndex);
+        return { paragraphTokens: tokens, paragraphToken };
+    }
+    getParagraphLineTokens(paragraphIndex, lineIndex) {
+        const paragraph = this.paragraphs[paragraphIndex];
+        const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
+        const lineEnd = paragraph.nextLineIndexes[lineIndex] ? paragraph.nextLineIndexes[lineIndex] : paragraph.content.length;
+        const lineContent = paragraph.content.substring(lineStart, lineEnd);
+        const paragraphSymbolIndex = paragraph.paragraphSettings.startInsertIndex + paragraph.content.length;
+        const { tokens } = this.getTokens(lineStart + paragraph.startIndex, lineContent, paragraphSymbolIndex);
+        const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
+        const paragraphStyle = this.model.paragraphs[paragraphIndex].paragraphStyle;
+        const lineInfo = paragraph.paragraphSettings.textLinesInfo[lineIndex];
+        const maxWidth = pageFormat.contentWidth - lineInfo.indent.right - lineInfo.indent.markerWidth;
+        const startWidth = lineInfo.indentLeft + lineInfo.indentFirstLine - lineInfo.indent.hanging || 0;
+        this.computeWrapIndex(tokens, startWidth, maxWidth, paragraphStyle.tabSettings ?? []); // needed to proceed a tab width correction according to the tabs complex positioning
+        const isLast = lineIndex === paragraph.nextLineIndexes.length;
+        LineInfoHelper.get(tokens, false, isLast, paragraphStyle, lineInfo.indent, lineInfo.isNumbering, pageFormat.contentWidth, 0, 0); // needed to proceed a space width correction according to the wordSpacing in case of justify alignment
+        return tokens;
     }
-    fillLineTokens(startIndex, line, model) {
-        const lineInfo = this.getLineInfoByBreakModifier(model, startIndex + line.length);
+    getTokens(contentIndex, content, paragraphSymbolIndex) {
         const tokens = [];
-        let characters = [];
-        let format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        let prevFormat = null;
-        let prevCharCode = null;
-        let prevFontString = null;
-        let prevChar = null;
-        let fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-        let symbolChange = false;
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            const size = FontMetrics.measureCharSize(char, fontString);
-            const customComponent = this.getOrGenerateComponent(startIndex, char);
-            const breakType = BreakHelper.getBreakType(model, char, startIndex);
-            if (customComponent && !breakType) {
-                const token = this.customContentService.getTokenFromComponent(customComponent, lineInfo, DisplayValue.customContent, i === 0, size);
-                tokens.push(token);
-                prevCharCode = -1;
-                prevChar = '';
-                characters = [];
-            }
-            else {
-                const charCode = char.charCodeAt(0);
-                const displayValue = DisplayTokenHelper.getDisplayValue(charCode);
-                const isFirstCharacter = i === 0;
-                const token = new DisplayToken({
-                    ...size,
-                    displayValue,
-                    align: lineInfo.align,
-                    indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-                    indentLeft: lineInfo.indent.left,
-                    indentRight: lineInfo.indent.right,
-                    indentBefore: lineInfo.offsetBefore,
-                    indentAfter: lineInfo.offsetAfter,
-                    lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-                    isNumbering: lineInfo.isNumbering,
-                    isPageBreak: breakType === BreakTypes.Page,
-                    isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false
-                });
-                tokens.push(token);
-                if (charCode !== prevCharCode ||
-                    !prevFormat ||
-                    !ContentStyleHelper.areSameTextStyles(format?.textStyle, prevFormat?.textStyle)) {
-                    symbolChange = true;
-                }
-                else if (i === line.length - 1) {
-                    characters.push(token);
-                    symbolChange = true;
-                }
-                else {
-                    characters.push(token);
-                }
-                if (characters.length > 1 && symbolChange) {
-                    this.processCharSizes(prevChar, prevFontString, characters);
-                    characters = [token];
-                    symbolChange = false;
-                }
-                else if (symbolChange) {
-                    characters = [token];
-                }
-                prevCharCode = charCode;
-                prevChar = char;
-            }
-            prevFormat = format;
-            prevFontString = fontString;
-            startIndex++;
-            if (startIndex > format?.endIndex) {
-                format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-                fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-            }
-        }
-        return tokens;
+        const prev = { char: '', style: null, size: null };
+        let format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
+        let fontString = ContentStyleHelper.getFontStylesString(format.textStyle);
+        for (let i = 0; i < content.length; i++) {
+            if (content[i] !== prev.char || !prev.style || !ContentStyleHelper.areSameTextStyles(format.textStyle, prev.style)) {
+                prev.size = FontMetrics.measureCharSize(content[i], fontString);
+                prev.char = content[i];
+                prev.style = format.textStyle;
+            }
+            const customComponent = this.getOrGenerateComponent(contentIndex, content[i]);
+            const breakType = BreakHelper.getBreakType(this.model.breaks, content[i], contentIndex);
+            const token = customComponent && !breakType
+                ? DisplayTokenHelper.getComponentToken(customComponent, prev.size)
+                : DisplayTokenHelper.getSymbolToken(content.charCodeAt(i), prev.size, breakType);
+            contentIndex++;
+            if (contentIndex > format.endIndex) {
+                format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
+                fontString = ContentStyleHelper.getFontStylesString(format.textStyle);
+            }
+            tokens.push(token);
+        }
+        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, paragraphSymbolIndex);
+        const paragraphToken = DisplayTokenHelper.getParagraphToken(paragraphFormat.textStyle);
+        return tokens.length ? { tokens, paragraphToken } : { tokens: [paragraphToken], paragraphToken };
     }
     getOrGenerateComponent(charIndex, char) {
         if (!this.customContentService.isSpecialMarker(char)) {
@@ -13016,12 +12817,6 @@ class DisplayData extends EventEmitting {
         const pageFormat = this.getPageFormatAtPosition(charIndex);
         return this.customContentService.generateComponent(this.model, this.customComponents, this.sessionId, this.generalProperties, pageFormat.contentWidth, charIndex);
     }
-    processCharSizes(prevChar, prevFontString, characters) {
-        const newSize = FontMetrics.measureCharSize(prevChar, prevFontString);
-        for (let item of characters) {
-            Object.assign(item, newSize);
-        }
-    }
     getPageFormatParagraphs(pageFormatIndex) {
         if (pageFormatIndex === this.pagesFormat.length - 1) {
             return this.paragraphs.filter(x => x.startIndex >= this.pagesFormat[pageFormatIndex].pageFormatModel.insertIndex);
@@ -13052,303 +12847,65 @@ class DisplayData extends EventEmitting {
         }
         return -1;
     }
-    getLineTokens(model, line, startIndex) {
-        const lineInfo = this.getLineInfoFromTextLine(startIndex + line.length);
-        if (!line.length) {
-            return this.getEmptyLineTokens(model, startIndex, lineInfo);
-        }
-        const tokens = [];
-        let characters = [];
-        let format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        let prevFormat = null;
-        let prevCharCode = null;
-        let prevFontString = null;
-        let prevChar = null;
-        let fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
-        let symbolChange = false;
-        for (let i = 0; i < line.length; i++) {
-            const char = line[i];
-            const size = FontMetrics.measureCharSize(char, fontString);
-            const customComponent = this.customContentService.getComponent(this.customComponents, char, startIndex);
-            const breakType = BreakHelper.getBreakType(model, char, startIndex);
-            if (customComponent && !breakType) {
-                const token = this.customContentService.getTokenFromComponent(customComponent, lineInfo, DisplayValue.customContent, i === 0, size);
-                tokens.push(token);
-                prevCharCode = -1;
-                prevChar = '';
-                characters = [];
+    // The index of a token which should be the last on the line
+    computeWrapIndex(displayTokens, startWidth, maxWidth, tabSettings) {
+        let width = startWidth;
+        let lastBreakable = -1;
+        const lastTab = { token: null, alignment: TabAlignment.Left, usedWidth: 0, tokenWidth: 0 };
+        for (let i = 0; i < displayTokens.length; i++) {
+            const token = displayTokens[i];
+            if (token.breaksLine) {
+                return i;
             }
-            else {
-                const charCode = char.charCodeAt(0);
-                const displayValue = DisplayTokenHelper.getDisplayValue(charCode);
-                const isFirstCharacter = i === 0;
-                const token = new DisplayToken({
-                    ...size,
-                    displayValue,
-                    align: lineInfo.align,
-                    indentFirstLine: isFirstCharacter ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-                    indentHanging: isFirstCharacter && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-                    indentLeft: lineInfo.indent.left,
-                    indentRight: lineInfo.indent.right,
-                    indentBefore: lineInfo.offsetBefore,
-                    indentAfter: lineInfo.offsetAfter,
-                    lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-                    isPageBreak: breakType === BreakTypes.Page,
-                    isLineBreak: breakType === BreakTypes.TextWrapping,
-                    isTab: false,
-                    isNumbering: lineInfo.isNumbering
-                });
-                tokens.push(token);
-                if (charCode !== prevCharCode ||
-                    !prevFormat ||
-                    !ContentStyleHelper.areSameTextStyles(format?.textStyle, prevFormat?.textStyle)) {
-                    symbolChange = true;
+            if (token.isTable) {
+                return i > 0 ? i - 1 : 0;
+            }
+            width += this.adjustLastTab(token, width, lastTab, tabSettings);
+            if (width > maxWidth && !token.isParagraph) {
+                if (i > 0) {
+                    i--;
                 }
-                else if (i === line.length - 1) {
-                    characters.push(token);
-                    symbolChange = true;
+                while (i + 1 < displayTokens.length && displayTokens[i + 1].isWhiteSpace) {
+                    i++;
                 }
-                else {
-                    characters.push(token);
+                if (displayTokens[i].isTab) {
+                    return i > 0 ? i - 1 : 0;
                 }
-                if (characters.length > 1 && symbolChange) {
-                    this.processCharSizes(prevChar, prevFontString, characters);
-                    characters = [token];
-                    symbolChange = false;
+                const breakable = displayTokens[i].breakable && !displayTokens[i].isTab;
+                if (i + 1 === displayTokens.length || breakable || displayTokens[i + 1].breakable || lastBreakable === -1) {
+                    return i;
                 }
-                else if (symbolChange) {
-                    characters = [token];
+                if (displayTokens[lastBreakable].isTab) {
+                    return lastBreakable > 0 ? lastBreakable - 1 : i;
                 }
-                prevCharCode = charCode;
-                prevChar = char;
+                return lastBreakable;
             }
-            prevFormat = format;
-            prevFontString = fontString;
-            startIndex++;
-            if (startIndex > format?.endIndex) {
-                format = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-                fontString = ContentStyleHelper.getFontStylesString(format?.textStyle);
+            if (token.breakable) {
+                lastBreakable = i;
             }
         }
-        return tokens;
+        return displayTokens.length - 1;
     }
-    findSameNumberingIndex(index) {
-        let sameNumberingIndex = index;
-        if (this.getParagraphSettings(index)?.numberingData.numberingId) {
-            while (sameNumberingIndex >= 0 &&
-                this.model.paragraphs[sameNumberingIndex].paragraphStyle.numberingId !==
-                    this.getParagraphSettings(index)?.numberingData.numberingId) {
-                sameNumberingIndex--;
-            }
+    adjustLastTab(token, position, tab, tabSettings) {
+        if (token.isTab) {
+            tab.token = token;
+            const setting = tabSettings.find(x => x.position > position);
+            const defaultTabWidth = this.generalProperties.defaultTabWidth;
+            tab.token.width = setting ? setting.position - position : defaultTabWidth - (position % defaultTabWidth);
+            tab.alignment = setting?.alignment ?? TabAlignment.Left;
+            return token.width;
         }
-        else if (this.model.paragraphs[index].paragraphStyle.numberingId) {
-            while (sameNumberingIndex < this.paragraphs.length &&
-                this.model.paragraphs[index].paragraphStyle.numberingId !==
-                    this.getParagraphSettings(sameNumberingIndex)?.numberingData.numberingId) {
-                sameNumberingIndex++;
-            }
+        else if (tab.alignment === TabAlignment.Center && tab.token.width > 0) {
+            const width = tab.token.width > token.width / 2 ? token.width / 2 : token.width - tab.token.width;
+            tab.token.width -= tab.token.width > width ? width : tab.token.width;
+            return width;
         }
-        return sameNumberingIndex;
-    }
-    getEmptyDisplayTokens(model, startIndex) {
-        const lineInfo = this.getLineInfoByBreakModifier(model, startIndex);
-        return this.getEmptyLineTokens(model, startIndex, lineInfo);
-    }
-    getEmptyLineTokens(model, startIndex, lineInfo) {
-        const storedFormat = FormatStyleHelper.getFormatAtIndex(model.formats, startIndex);
-        if (!storedFormat) {
-            return [];
-        }
-        const size = FontMetrics.measureCharSize('EMPTY_LINE', ContentStyleHelper.getFontStylesString(storedFormat.textStyle));
-        size.width = 3;
-        return [
-            new DisplayToken({
-                ...size,
-                displayValue: DisplayValue.emptyLine,
-                align: lineInfo.align,
-                indentFirstLine: lineInfo.indent.firstLine,
-                indentHanging: lineInfo.isNumbering ? 0 : lineInfo.indent.hanging,
-                indentLeft: lineInfo.indent.left,
-                indentRight: lineInfo.indent.right,
-                indentBefore: lineInfo.offsetBefore,
-                indentAfter: lineInfo.offsetAfter,
-                markerWidth: lineInfo.markerWidth,
-                isNumbering: lineInfo.isNumbering,
-                isPageBreak: false,
-                isLineBreak: false,
-                isTab: false,
-                lineSpacing: lineInfo.lineSpacing
-            })
-        ];
-    }
-    getLineInfoByBreakModifier(model, index) {
-        const paragraph = ParagraphStyleHelper.getParagraphAtIndex(model.paragraphs, index);
-        if (!paragraph) {
-            return new LineInfoModel({
-                align: DEFAULT_PARAGRAPH_STYLE.alignment,
-                indent: new IndentModel(DEFAULT_PARAGRAPH_STYLE.indentFirstLine, DEFAULT_PARAGRAPH_STYLE.indentHanging, DEFAULT_PARAGRAPH_STYLE.indentLeft, DEFAULT_PARAGRAPH_STYLE.indentRight),
-                offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-                offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-                lineSpacing: DEFAULT_PARAGRAPH_STYLE.lineSpacing
-            });
-        }
-        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 {
-                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);
-        const levelModel = NumberingHelper.find(this.generalProperties.numberings, numberingId, level);
-        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(model.formats, paragraph.insertIndex);
-        const markerTextStyle = ContentStyleHelper.combineTextStyles(levelModel.markerStyle, paragraphFormat.textStyle);
-        const paragraphSettings = this.getParagraphSettings(paragraphIndex);
-        let markerWidth = paragraphSettings?.numberingData?.width;
-        const marker = NumberingHelper.getMarker(levelModel, numberingId, model.paragraphs, paragraphIndex, this.generalProperties.numberingInfo);
-        const markerSizes = NumberingHelper.getMarkerSizes(marker, markerTextStyle);
-        markerWidth = markerSizes.width;
-        let indentHanging = levelModel.indentHanging;
-        let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
-        if (paragraph.paragraphStyle.indentFirstLine !== null || paragraph.paragraphStyle.indentHanging !== null) {
-            if (paragraph.paragraphStyle.indentFirstLine !== null) {
-                indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
-                indentHanging = null;
-            }
-            else {
-                indentHanging =
-                    paragraph.paragraphStyle.indentHanging !== null ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
-            }
+        else if (tab.alignment === TabAlignment.Right && tab.token.width > 0) {
+            const width = tab.token.width > token.width ? token.width : tab.token.width;
+            tab.token.width -= tab.token.width > width ? width : tab.token.width;
+            return token.width - width;
         }
-        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft !== null ? 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);
-        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, indent, markerWidth) {
-        return new LineInfoModel({
-            align: paragraph.paragraphStyle.alignment ?? DEFAULT_PARAGRAPH_STYLE.alignment,
-            indent,
-            offsetBefore: DEFAULT_PARAGRAPH_STYLE.spaceBefore,
-            offsetAfter: DEFAULT_PARAGRAPH_STYLE.spaceAfter,
-            lineSpacing: paragraph.paragraphStyle.lineSpacing ?? DEFAULT_PARAGRAPH_STYLE.lineSpacing,
-            isNumbering: !!markerWidth,
-            markerWidth
-        });
-    }
-    getIndentLeftFromTextLine(insertIndex) {
-        let startIndex = 0;
-        let endIndex = this.paragraphs.length - 1;
-        while (startIndex <= endIndex) {
-            const middleIndex = Math.round((startIndex + endIndex) / 2);
-            const paragraphInfo = this.paragraphs[middleIndex];
-            if (paragraphInfo.startIndex > insertIndex) {
-                startIndex = middleIndex + 1;
-            }
-            else {
-                endIndex = middleIndex - 1;
-            }
-        }
-        const textLinesInfo = this.paragraphs[startIndex]?.paragraphSettings.textLinesInfo;
-        return textLinesInfo ? Math.max(...textLinesInfo.map(x => x.indentLeft)) : null;
-    }
-    computeWrapSplit(tokens, wrapLimit) {
-        if (!tokens.length || tokens.length <= wrapLimit) {
-            return null;
-        }
-        // If there is a space or tab at this split position, then making
-        // a split is simple.
-        if (wrapLimit === 0 ||
-            tokens[wrapLimit].displayValue === DisplayValue.customContent ||
-            (this.isWhiteSpace(tokens[wrapLimit - 1]) && this.isWhiteSpace(tokens[wrapLimit]))) {
-            return wrapLimit;
-        }
-        return this.calculateSplit(wrapLimit, tokens);
-    }
-    calculateSplit(index, tokens) {
-        for (let i = index; i >= 0; i--) {
-            if (this.isWhiteSpace(tokens[i]) || tokens[i].displayValue === DisplayValue.customContent) {
-                return i + 1;
-            }
-        }
-        return index;
-    }
-    isWhiteSpace(token) {
-        return [DisplayValue.space, DisplayValue.emptyLine].includes(token.displayValue);
-    }
-    /**
-     * Computes wrap index based on max row width
-     */
-    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth, tabSettings) {
-        if (!displayTokens[0]) {
-            return 0;
-        }
-        if (displayTokens[0].isTable || (displayTokens[0].breaksLine && displayTokens.length === 1)) {
-            return 1;
-        }
-        const maxRowWidth = contentWidth - displayTokens[0].indentRight - displayTokens[0].markerWidth;
-        let sum = displayTokens[0].indentLeft + displayTokens[0].indentFirstLine - displayTokens[0].indentHanging || 0;
-        let prevTabIndex = null;
-        let tabCenter = null;
-        let prevTabAlignment = TabAlignment.Left;
-        for (let i = 0; i < displayTokens.length; i++) {
-            const token = displayTokens[i];
-            const prevToken = i > 0 ? displayTokens[i - 1] : null;
-            if (token.isTab) {
-                const tabs = tabSettings ?? [];
-                const nextSettingIndex = tabs.findIndex(x => x.position > sum);
-                const tokenWidth = TabHelper.calculateTabWidth(sum, defaultTabWidth, tabSettings);
-                if (nextSettingIndex >= 0 && tabs[nextSettingIndex].alignment === TabAlignment.Center) {
-                    prevTabAlignment = TabAlignment.Center;
-                    tabCenter = { stringWidth: 0, tokenWidth };
-                    token.width = tokenWidth;
-                }
-                else {
-                    prevTabAlignment = nextSettingIndex >= 0 ? tabs[nextSettingIndex].alignment : TabAlignment.Left;
-                    token.width = tokenWidth;
-                    tabCenter = null;
-                }
-                prevTabIndex = i;
-            }
-            if (prevTabAlignment === TabAlignment.Center && !token.isTab && tabCenter.stringWidth < tabCenter.tokenWidth) {
-                const tokenWidth = token.width / 2;
-                displayTokens[prevTabIndex].width -= tokenWidth;
-                tabCenter.stringWidth += tokenWidth;
-                sum += tokenWidth;
-            }
-            else if (prevTabAlignment === TabAlignment.Right && !token.isTab && displayTokens[prevTabIndex].width !== 0) {
-                if (displayTokens[prevTabIndex].width - token.width < 0) {
-                    sum += token.width - displayTokens[prevTabIndex].width;
-                    displayTokens[prevTabIndex].width = 0;
-                }
-                else {
-                    displayTokens[prevTabIndex].width -= token.width;
-                }
-            }
-            else {
-                sum += token.width;
-            }
-            if (sum >= maxRowWidth) {
-                return i > 0 ? i - 1 : 0;
-            }
-            if (prevToken?.breaksLine || token.isTable) {
-                return i;
-            }
-            if (token.isLineBreak || (i === displayTokens.length - 1 && token.isPageBreak)) {
-                return i + 1;
-            }
-        }
-        return 0;
+        return token.width;
     }
     getPreviousParagraphInfo(row) {
         if (!row || !this.paragraphs.length) {
@@ -14131,28 +13688,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{ selector: 'app-nod-image', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<app-nod-resizer\n    *ngIf=\"isFocused\"\n    class=\"resizer\"\n    [isDisabled]=\"isViewOnly$ | async\"\n    [size]=\"size\"\n    (resizeEnd)=\"onResizeEnd($event)\" />\n", styles: [":host{position:relative;outline:none}.resizer{position:absolute;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ImageApiService }] });
 
-class NoderTabComponent extends BaseNoderComponent {
-    get tab() {
-        return this.content;
-    }
-    set tab(val) {
-        this.content = val;
+class ParagraphStyleHelper {
+    static getParagraphsAtRange(paragraphs, startIndex, endIndex) {
+        let firstModifierIndexInRange = paragraphs.findIndex(paragraph => paragraph.insertIndex >= startIndex);
+        firstModifierIndexInRange = firstModifierIndexInRange === -1 ? paragraphs.length : firstModifierIndexInRange;
+        let lastModifierIndexInRange = paragraphs.findIndex(x => x.insertIndex >= endIndex);
+        lastModifierIndexInRange =
+            startIndex === endIndex || lastModifierIndexInRange === -1 ? firstModifierIndexInRange : lastModifierIndexInRange;
+        return paragraphs.slice(firstModifierIndexInRange, lastModifierIndexInRange + 1);
     }
-    initialize() {
-        this.applySize(this.tab.width);
+    static getParagraphAtIndex(paragraphs, insertIndex) {
+        let startIndex = 0;
+        let endIndex = paragraphs.length - 1;
+        while (startIndex <= endIndex) {
+            const middleIndex = Math.round((startIndex + endIndex) / 2);
+            const paragraph = paragraphs[middleIndex];
+            if (paragraph.insertIndex < insertIndex) {
+                startIndex = middleIndex + 1;
+            }
+            else {
+                endIndex = middleIndex - 1;
+            }
+        }
+        return paragraphs[startIndex];
     }
-    applySize(width) {
-        this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
+    static isEndOfParagraph(paragraphs, endIndex) {
+        const paragraph = this.getParagraphAtIndex(paragraphs, endIndex);
+        let paragraphIndex = paragraphs.findIndex(x => x === paragraph);
+        const endOfParagraphIsParagraph = paragraph && endIndex === paragraph.insertIndex && paragraphs.length - 1 > paragraphIndex;
+        if (endOfParagraphIsParagraph) {
+            paragraphIndex += 1;
+        }
+        return paragraphs[paragraphIndex].insertIndex === endIndex + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "width()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
-                        '[style.width.px]': 'width()'
-                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
-        }] });
 
 const CHARS = [
     // eslint-disable-next-line prettier/prettier
@@ -14357,7 +13926,6 @@ class EditSession {
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyTextStyle(this.model, startIndex, endIndex, textStyle);
         this.provideTextStyle(startIndex, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.setTextStyle(textStyle);
     }
@@ -14370,36 +13938,25 @@ class EditSession {
             startParagraph = this.displayData.paragraphs.findIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
             endParagraph = this.displayData.paragraphs.findLastIndex(x => x.paragraphSettings.numberingData.numberingId === numberingId);
         }
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
     rerender(insertIndex) {
         const paragraphIndex = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
-        this.displayData.resetAllNumberingInfo(paragraphIndex);
         this.displayData.updateNextLineIndexes(paragraphIndex, paragraphIndex);
     }
     addNumbering(levels, startIndex, endIndex, numberingId) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.addNumbering(this.model, this.generalProperties.numberings, startIndex, endIndex, levels, numberingId);
-        this.generalProperties.numberingInfo = {};
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
-        for (let i = startParagraph; i <= endParagraph; i++) {
-            if (this.displayData.getParagraphSettings(i).numberingData.numberingId !== null) {
-                this.displayData.updateNumberingsDataOnChange(endParagraph + 1);
-                break;
-            }
-        }
         this.applyToolbarStyles();
     }
     removeNumberings(startIndex, endIndex) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
-        this.displayData.resetAllNumberingInfo(startParagraph);
         OperationsHelper.removeNumberings(this.model, this.generalProperties.numberings, startIndex, endIndex);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
-        this.displayData.updateNumberingsDataOnChange(endParagraph);
         this.applyToolbarStyles();
     }
     restoreNumberings(paragraphs, numberings) {
@@ -14407,15 +13964,8 @@ class EditSession {
         const endIndex = paragraphs[paragraphs.length - 1].insertIndex;
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         OperationsHelper.restoreNumberings(this.model, this.generalProperties.numberings, paragraphs, numberings);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
-        for (const paragraph of paragraphs) {
-            if (paragraph.paragraphStyle.numberingId !== null) {
-                this.displayData.updateNumberingsDataOnChange(endPosition.row + 1);
-                break;
-            }
-        }
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
     }
@@ -14424,7 +13974,6 @@ class EditSession {
         imageComponentRef.instance.resize({ width: applyImage.width, height: applyImage.height });
         OperationsHelper.applyImageStyle(this.model, applyImage);
         const start = this.displayData.indexToPosition(applyImage.insertIndex, 0);
-        this.displayData.resetAllNumberingInfo(start.row);
         this.displayData.updateNextLineIndexes(start.row, this.displayData.paragraphs.length - 1);
     }
     restoreTextStyles(formats, linkFormats) {
@@ -14434,7 +13983,6 @@ class EditSession {
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreTextStyles(this.model, formats, linkFormats);
         this.provideTextStyle(startIndex, endIndex);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -14445,7 +13993,6 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreParagraphStyles(this.model, paragraphs);
-        this.displayData.resetAllNumberingInfo(0);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -14456,7 +14003,6 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyParagraphs(this.model, paragraphs);
-        this.displayData.resetAllNumberingInfo(startParagraph);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
@@ -14476,11 +14022,7 @@ class EditSession {
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, partIndexes.startIndex, partIndexes.endIndex);
         OperationsHelper.delete(this.model, partIndexes.startIndex, partIndexes.endIndex - partIndexes.startIndex + 1);
         this.selection.placeCursor(range.start);
-        this.displayData.resetAllNumberingInfo(range.start.row);
         this.displayData.updateNextLineIndexes(range.start.row, range.start.row);
-        if (range.end.row - range.start.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(range.start.row + 1);
-        }
         this.applyToolbarStyles();
     }
     replace(model) {
@@ -14542,11 +14084,7 @@ class EditSession {
             OperationsHelper.insertText(this.model, text, insertIndex);
         }
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (endPosition.row - position.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row + 1);
-        }
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
@@ -14569,7 +14107,6 @@ class EditSession {
         const model = this.model.elements.find(x => x.insertIndex === insertIndex);
         const type = this.customContentService.findComponentType(model.type);
         this.addComponent(this.customComponents.customElements, model, type);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14577,15 +14114,11 @@ class EditSession {
     insertBreak(position, breakType) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
         const isOnNewParagraph = breakType === BreakTypes.Page &&
-            BreakHelper.getBreakType(this.model, CUSTOM_ELEMENT_MARKER, insertIndex - 1) !== BreakTypes.Page;
+            BreakHelper.getBreakType(this.model.breaks, CUSTOM_ELEMENT_MARKER, insertIndex - 1) !== BreakTypes.Page;
         const text = isOnNewParagraph ? `${NEW_LINE_MARKUP}${CUSTOM_ELEMENT_MARKER}` : CUSTOM_ELEMENT_MARKER;
         OperationsHelper.insertBreak(this.model, text, insertIndex, breakType);
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (isOnNewParagraph && endPosition.row - position.row) {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         const cursorPosition = this.displayData.getPositionAfterBreak(endPosition, breakType);
         this.selection.placeCursor(cursorPosition);
         return endPosition;
@@ -14596,7 +14129,6 @@ class EditSession {
         const model = this.model.tabs.find(x => x.insertIndex === insertIndex);
         this.addComponent(this.customComponents.tabs, model, NoderTabComponent);
         const endPosition = this.displayData.insertText(position, CUSTOM_ELEMENT_MARKER);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14607,7 +14139,6 @@ class EditSession {
         const model = this.model.images.find(x => x.insertIndex === insertIndex);
         this.addComponent(this.customComponents.images, model, NoderImageComponent);
         const endPosition = this.displayData.insertText(position, CUSTOM_ELEMENT_MARKER);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14616,7 +14147,6 @@ class EditSession {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
         OperationsHelper.insertLink(this.model, linkData.text, linkData.link, insertIndex);
         const endPosition = this.displayData.insertText(position, linkData.text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
         return endPosition;
@@ -14627,11 +14157,7 @@ class EditSession {
         const model = this.model.tables.find(x => x.insertIndex >= tableModel.insertIndex);
         this.addComponent(this.customComponents.tables, model, NoderTableComponent);
         const endPosition = this.displayData.insertText(position, text);
-        this.displayData.resetAllNumberingInfo(position.row);
         this.displayData.updateNextLineIndexes(position.row, endPosition.row);
-        if (endPosition.row - position.row) {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
@@ -14652,11 +14178,7 @@ class EditSession {
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, moveModel.sourceStartIndex, endIndex);
         const restoreModel = OperationsHelper.removeMoveRange(this.model, moveModel);
         this.selection.placeCursor(startPosition);
-        this.displayData.resetAllNumberingInfo(startPosition.row);
         this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
-        if (endPosition.row - startPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(startPosition.row + 1);
-        }
         this.applyToolbarStyles();
         return restoreModel;
     }
@@ -14669,11 +14191,7 @@ class EditSession {
         this.restoreElementComponents(this.model.elements, moveIndex, endIndex);
         const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, moveIndex);
         const endPosition = this.displayData.insertText(startPosition, restoreModel.text);
-        this.displayData.resetAllNumberingInfo(startPosition.row);
         this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
-        if (endPosition.row - startPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPosition.row);
-        }
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
         const newStartPosition = this.displayData.indexToPosition(moveIndex, 0);
@@ -14764,11 +14282,7 @@ class EditSession {
         this.restoreComponents(this.model.images, this.customComponents.images, NoderImageComponent, model.insertIndex, restoreEndIndex);
         this.restoreComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, model.insertIndex, restoreEndIndex);
         this.restoreElementComponents(this.model.elements, model.insertIndex, restoreEndIndex);
-        this.displayData.resetAllNumberingInfo(paragraphPosition.row);
         this.displayData.updateNextLineIndexes(paragraphPosition.row, endPoint.row);
-        if (endPoint.row - paragraphPosition.row && this.type !== 'cell') {
-            this.displayData.updateNumberingsDataOnChange(endPoint.row + 1);
-        }
         this.selection.placeCursor(endPoint);
         this.applyToolbarStyles();
     }
@@ -14801,33 +14315,28 @@ class EditSession {
     }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.insertTableRows(this.model, insertIndex, rowsCount, targetIndex, inheritIndex);
         table.instance.updateTable();
     }
     insertTableColumns(insertIndex, columnsCount, targetIndex, inheritIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
         const pageFormat = this.displayData.getPageFormatAtPosition(insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.insertTableColumns(this.model, insertIndex, columnsCount, targetIndex, inheritIndex, pageFormat.contentWidth);
         table.instance.updateTable();
     }
     removeTableRows(insertIndex, startIndex, endIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.removeTableRows(this.model, insertIndex, startIndex, endIndex);
         table.instance.updateTable();
     }
     removeTableColumns(insertIndex, startIndex, endIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         const pageFormat = this.displayData.getPageFormatAtPosition(insertIndex);
         OperationsHelper.removeTableColumns(this.model, insertIndex, startIndex, endIndex, pageFormat.contentWidth);
         table.instance.updateTable();
     }
     resizeTableColumns(resizeTableColumns) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === resizeTableColumns.insertIndex);
-        this.displayData.resetNumberingInfoByTableCell(table);
         OperationsHelper.resizeTableColumns(this.model, resizeTableColumns);
         table.instance.updateTable();
     }
@@ -15079,26 +14588,16 @@ class HighlightLayer {
         const results = [];
         for (let i = 0; i < textLinesInfo.length; i++) {
             const lineInfo = textLinesInfo[i].textLinesInfo;
-            const paragraphLineIndex = textLinesInfo[i].paragraphSettings.textLinesInfo.findIndex(x => x === textLinesInfo[i].textLinesInfo);
             if (i !== 0) {
                 top += lineInfo.firstLinePageOffset;
                 top += lineInfo.offsetBefore;
             }
-            let markerWidth = 0;
-            const numberingOffsetLeft = textLinesInfo[i].paragraphSettings.numberingData.numberingId === null
-                ? 0
-                : textLinesInfo[i].paragraphSettings.numberingData.width + textLinesInfo[i].paragraphSettings.numberingData.paddingLeft;
-            if (paragraphLineIndex === 0 &&
-                lineInfo.isNumbering &&
-                (lineInfo.indentFirstLine ||
-                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft <= lineInfo.markerWidth))) {
-                markerWidth = lineInfo.markerWidth;
-            }
-            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerWidth;
+            const markerOffset = NumberingHelper.getOffsetCausedByMarker(textLinesInfo[i].paragraphSettings.numberingData, lineInfo);
+            const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerOffset;
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
-                const width = lineInfo.width - rangeInfo.leftPos + left + (lineInfo.wordSpacingWidth ?? 0);
+                const width = lineInfo.width - rangeInfo.leftPos + left;
                 style = this.getMarkerStyle(lineInfo.height, width, top, rangeInfo.leftPos);
             }
             else if (i === textLinesInfo.length - 1) {
@@ -15107,7 +14606,7 @@ class HighlightLayer {
                 style = this.getMarkerStyle(lineInfo.height, rangeInfo.screenWidth, top, left);
             }
             else {
-                let width = lineInfo.width + (lineInfo.wordSpacingWidth ?? 0);
+                let width = lineInfo.width;
                 style = this.getMarkerStyle(lineInfo.height, width, top, left);
             }
             const result = this.renderHighlight(style, cssClass);
@@ -15137,7 +14636,7 @@ class HighlightLayer {
         }
         const top = this.getTop(screenParentRange.start.row);
         const info = this.getRangeInfo(this.session, screenParentRange);
-        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.maxAscent - elementInfo.location.height + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
+        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.ascent - elementInfo.location.height + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
     }
     getRangeInfo(session, range) {
         const start = range.start;
@@ -15277,16 +14776,9 @@ class CursorLayer {
             fontSize: textStyle.fontSize,
             fontFamily: textStyle.fontFamily
         })));
-        const fontMetricHeight = metricSize.ascent + metricSize.descent;
-        const maxHeight = this.cursorPosition.sizeMax.ascent + this.cursorPosition.sizeMax.descent;
-        const fontShoulders = fontMetricHeight - metricSize.font;
-        const offset = metricSize.descent - fontShoulders;
-        let top = this.cursorPosition.pageY + this.cursorPosition.sizeMax.ascent - metricSize.font + offset;
-        if (fontMetricHeight !== maxHeight && maxHeight >= this.cursorPosition.lineHeight) {
-            top -= maxHeight - this.cursorPosition.lineHeight;
-        }
-        DomHelper.setStyle(this.cursor.style, 'top', `${top < 0 ? 0 : top}px`);
-        DomHelper.setStyle(this.cursor.style, 'height', `${fontMetricHeight}px`);
+        const top = this.cursorPosition.pageY + this.cursorPosition.ascent - metricSize.ascent;
+        DomHelper.setStyle(this.cursor.style, 'top', `${top}px`);
+        DomHelper.setStyle(this.cursor.style, 'height', `${metricSize.height}px`);
     }
     restartAnimation() {
         this.removeAnimationClass();
@@ -15302,9 +14794,8 @@ class CursorLayer {
             return;
         }
         DomHelper.setStyle(this.cursor.style, 'display', 'block');
-        const currentSize = this.cursorPosition.sizeCurrent;
         DomHelper.setStyle(this.cursor.style, 'left', `${this.cursorPosition.pageX}px`);
-        DomHelper.setStyle(this.cursor.style, 'width', `${currentSize.width}px`);
+        DomHelper.setStyle(this.cursor.style, 'width', `${this.cursorPosition.width}px`);
         this.addTextStylesToCursor();
     }
     removeAnimationClass() {
@@ -15619,7 +15110,7 @@ class Renderer extends EventEmitting {
         this.session = session;
         this.layerConfig = {
             width: 1,
-            contentRange: new DistanceModel({ start: 0, end: 0 }),
+            contentRange: new DistanceModel({ start: 0, end: 0 }), // paragraphs
             maxHeight: 1,
             offset: 0,
             height: 1,
@@ -16376,11 +15867,11 @@ class VirtualRenderer {
             this.scrollBar.setScrollTop(top);
             this.loop.schedule({ scroll: true });
         }
-        else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.lineHeight) {
+        else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.height) {
             if (offset) {
                 top += offset * this.container.scrollHeight;
             }
-            top += position.lineHeight - this.container.scrollHeight;
+            top += position.height - this.container.scrollHeight;
             this.scrollBar.setScrollTop(top);
             this.loop.schedule({ scroll: true });
         }
@@ -16549,22 +16040,11 @@ class CustomContentService {
         }
         return null;
     }
-    isFragmentContainComponent(components, textFragment, fragmentDistance) {
-        if (textFragment.includes(CUSTOM_ELEMENT_MARKER)) {
-            return (this.isFragmentContainComponents(components.images, fragmentDistance) ||
-                this.isFragmentContainComponents(components.tabs, fragmentDistance) ||
-                this.isFragmentContainComponents(components.customElements, fragmentDistance));
-        }
-        if (textFragment.includes(TABLE_MARKER)) {
-            return this.isFragmentContainComponents(components.tables, fragmentDistance);
-        }
-        return false;
-    }
-    getComponents(components, distance) {
-        const images = components.images.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const tables = components.tables.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const tabs = components.tabs.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-        const custom = components.customElements.filter(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
+    getComponents(components, start, end) {
+        const images = components.images.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const tables = components.tables.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const tabs = components.tabs.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
+        const custom = components.customElements.filter(x => x.instance.insertIndex >= start && x.instance.insertIndex <= end);
         return [...images, ...tables, ...tabs, ...custom].sort((a, b) => a.instance.insertIndex - b.instance.insertIndex);
     }
     getComponent(components, char, charIndex) {
@@ -16575,45 +16055,12 @@ class CustomContentService {
         }
         return this.findComponent(components.tables, charIndex);
     }
-    getTokenFromComponent(component, lineInfo, displayValue, isFirst, size) {
-        const ascent = component.instance.ascent() ?? 0;
-        const descent = component.instance.descent() ?? 0;
-        return new DisplayToken({
-            width: component.instance.width(),
-            height: ascent + descent,
-            baseline: 0,
-            content: 0,
-            font: size.font,
-            ascent,
-            descent,
-            line: 0,
-            lineSpacing: lineInfo.lineSpacing,
-            multiplier: 0,
-            align: lineInfo.align,
-            indentFirstLine: isFirst ? lineInfo.indent.firstLine : DEFAULT_PARAGRAPH_STYLE.indentFirstLine,
-            indentHanging: isFirst && !lineInfo.isNumbering ? lineInfo.indent.hanging : DEFAULT_PARAGRAPH_STYLE.indentHanging,
-            indentLeft: lineInfo.indent.left,
-            indentRight: lineInfo.indent.right,
-            indentBefore: lineInfo.offsetBefore,
-            indentAfter: lineInfo.offsetAfter,
-            markerWidth: isFirst && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
-            isNumbering: lineInfo.isNumbering,
-            isPageBreak: false,
-            isLineBreak: false,
-            displayValue,
-            isTab: component.instance instanceof NoderTabComponent,
-            isTable: component.instance instanceof NoderTableComponent
-        });
-    }
     findComponentType(type) {
         return this.elements.find(x => x.type === type).componentType;
     }
     findComponent(components, insertIndex) {
         return components.find((x) => x.instance.insertIndex === insertIndex);
     }
-    isFragmentContainComponents(components, distance) {
-        return components.some(x => x.instance.insertIndex >= distance.start && x.instance.insertIndex <= distance.end);
-    }
     isSpecialMarker(char) {
         return char === CUSTOM_ELEMENT_MARKER || char === TABLE_MARKER;
     }
@@ -17375,11 +16822,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 }, 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:3;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 }); }
+    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.position) {\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:3;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    [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:3;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"] }]
+            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.position) {\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:3;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 }]
@@ -18253,11 +17700,11 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\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</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\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: 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: "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: "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: MenuDropdownsComponent, isStandalone: false, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", saveAsTemplate: "saveAsTemplate", downloadPdf: "downloadPdf", insertPageBreak: "insertPageBreak", createDocument: "createDocument", pageSetup: "pageSetup", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\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</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}button.mat-mdc-button{letter-spacing:0}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\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: 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: "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: "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: MenuDropdownsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', standalone: false, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\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</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-menu-dropdowns', standalone: false, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FILE' | translate }}\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.NEW' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"!data.isViewOnly\"\n            id=\"menu-dropdowns-menu-page-setup\"\n            mat-menu-item\n            (click)=\"pageSetup.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-system-file\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.OPEN_FROM' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS' | translate }}</span>\n            </div>\n        </button>\n        @if (saveAsTemplate.observed) {\n            <button\n                id=\"menu-dropdowns-menu-item-save-as-template\"\n                mat-menu-item\n                (click)=\"saveAsTemplate.emit()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-save\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.SAVE_AS_TEMPLATE' | translate }}</span>\n                </div>\n            </button>\n        }\n        <button\n            *ngIf=\"downloadPdf.observed\"\n            id=\"menu-dropdowns-menu-item-download-pdf\"\n            mat-menu-item\n            (click)=\"downloadPdf.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DOWNLOAD_PDF' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.RENAME' | translate }}</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PRINT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        {{ 'NODER.LABEL.EDIT' | translate }}\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.REDO' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.CUT' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.COPY' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PASTE' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.SELECT_ALL' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.DELETE' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.INSERT' | translate }}\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.IMAGE' | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            {{ 'NODER.LABEL.TABLE' | translate }}\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.LINK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.nameId }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.nameTranslate | translate }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADER' | translate }}</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.FOOTER' | translate }}</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.LAYOUT' | translate }}\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.PAGE_BREAK' | translate }}</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        {{ 'NODER.LABEL.FORMAT' | translate }}\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.ALIGN' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.LEFT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.CENTER' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.RIGHT' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLETS_AND_NUMBERING' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BULLET_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.NUMBERED_LIST_MENU' | translate }}</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.TEXT' | translate }}</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.BOLD' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.ITALIC' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">{{ 'NODER.LABEL.UNDERLINED' | translate }}</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">{{ 'NODER.LABEL.HEADERS_AND_FOOTERS' | translate }}</span>\n            </div>\n        </button>\n    </mat-menu>\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</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}button.mat-mdc-button{letter-spacing:0}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"] }]
         }], ctorParameters: () => [{ type: CustomIconService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: EditorService }], propDecorators: { showFile: [{
                 type: Input
             }], showEdit: [{
@@ -18328,11 +17775,11 @@ class FontComponent {
         this.selectFont.emit(font);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FontComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontComponent, isStandalone: true, selector: "app-nod-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{height:28px;margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FontComponent, isStandalone: true, selector: "app-nod-font", inputs: { isDisabled: "isDisabled", styles: "styles" }, outputs: { selectFont: "selectFont" }, ngImport: i0, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{margin:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: FontComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], selector: 'app-nod-font', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{height:28px;margin:0 4px}\n"] }]
+            args: [{ imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, TranslateModule], selector: 'app-nod-font', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    mat-button\n    [matMenuTriggerFor]=\"fontMenu\"\n    [matMenuTriggerRestoreFocus]=\"false\"\n    [matTooltip]=\"'NODER.TOOLTIP.FONT' | translate\"\n    matTooltipPosition=\"below\">\n    <div class=\"font-menu\">\n        <span>{{ font }}</span>\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </div>\n</button>\n<mat-menu\n    #fontMenu=\"matMenu\"\n    class=\"noder-modal\">\n    <ng-container *ngFor=\"let font of fonts\">\n        <button\n            mat-menu-item\n            [disabled]=\"isDisabled\"\n            (click)=\"onSelectFont(font)\">\n            {{ font }}\n        </button>\n    </ng-container>\n</mat-menu>\n", styles: [".font-menu{display:flex;justify-content:space-between;align-items:center;width:130px}span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}button{margin:0 4px}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], styles: [{
@@ -19953,5 +19400,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TABLE_MARGINS, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map