@talrace/ngx-noder 19.0.41 → 19.0.43

package/fesm2022/talrace-ngx-noder.mjs

@@ -1378,7 +1378,7 @@ class ExternalComponent extends BaseNoderComponent {
     constructor() {
         super(...arguments);
         this.focusSidenav = true;
-        this.isText = false;
+        this.isText = false; // this will substitute component block by in editor text (getText() will be used as a value)
     }
     getText() {
         return '';
@@ -1772,13 +1772,6 @@ class BreakHelper {
         }
         return breaks.find(x => x.insertIndex === insertIndex)?.breakType ?? null;
     }
-    static removeBreakMarker(breaks, text, fragmentStartIndex) {
-        const index = text.at(-1) === NEW_LINE_MARKUP ? -2 : -1;
-        if (text.at(index) === CUSTOM_ELEMENT_MARKER && breaks.some(x => x.insertIndex === fragmentStartIndex + text.length + index)) {
-            return index === -1 ? text.substring(0, text.length + index) : text.substring(0, text.length + index).concat(text.at(-1));
-        }
-        return text;
-    }
 }
 
 const COMMENT_TYPES = new InjectionToken('COMMENT_TYPES');
@@ -1922,6 +1915,12 @@ class CreateEdgesModel {
     }
 }
 
+const PARENT_TAG = 'APP-NOD-EDITOR';
+const TABLE_CELL_TAG = 'APP-NOD-TABLE-CELL';
+const EDGE_TAG = 'APP-NOD-EDGE';
+const IMAGE_TAG = 'APP-NOD-IMAGE';
+const CUSTOM_TAG = 'APP-NOD-CUSTOM-ELEMENT';
+
 class CustomElementSearchResult {
     constructor(init) {
         Object.assign(this, init);
@@ -6308,36 +6307,26 @@ class PositionHelper {
         const paragraphLine = documentLine - index;
         return { paragraph, paragraphLine };
     }
-    static paragraphToParagraphLine(nextLineIndexes, indexInParagraph) {
-        if (!nextLineIndexes.length || nextLineIndexes[0] > indexInParagraph) {
-            return { paragraphLine: 0, indexInLine: indexInParagraph };
-        }
-        let index = nextLineIndexes.findLastIndex(x => x <= indexInParagraph);
-        const indexInLine = indexInParagraph - nextLineIndexes[index];
-        return { paragraphLine: index + 1, indexInLine };
+    static paragraphToParagraphLine(paragraph, indexInParagraph) {
+        const lines = paragraph.paragraphSettings.textLinesInfo;
+        const paragraphLine = lines.findIndex(x => x.endIndex >= indexInParagraph);
+        const indexInLine = indexInParagraph - lines[paragraphLine].startIndex;
+        return { paragraphLine, indexInLine };
     }
-    static paragraphToDocumentLine(session, paragraph, indexInParagraph) {
-        const paragraphLine = session.displayData.paragraphs[paragraph].lineNumber;
-        const nextLineIndexes = session.displayData.paragraphs[paragraph].nextLineIndexes;
-        if (!nextLineIndexes.length || nextLineIndexes[0] > indexInParagraph) {
-            return new CursorParagraph(paragraphLine, indexInParagraph);
-        }
-        let line = 0;
-        while (nextLineIndexes[line] <= indexInParagraph && line < nextLineIndexes.length) {
-            line++;
-        }
-        return new CursorParagraph(paragraphLine + line, indexInParagraph - nextLineIndexes[line - 1]);
+    static paragraphToDocumentLine(paragraph, indexInParagraph) {
+        const { paragraphLine, indexInLine } = this.paragraphToParagraphLine(paragraph, indexInParagraph);
+        return new CursorParagraph(paragraph.lineNumber + paragraphLine, indexInLine);
     }
     static documentLineToParagraph(session, documentLine, indexInLine) {
-        let paragraphIndex = session.displayData.paragraphs.findIndex(x => x.lineNumber > documentLine);
-        paragraphIndex = paragraphIndex === -1 ? session.displayData.paragraphs.length - 1 : paragraphIndex - 1;
+        const paragraphIndex = session.displayData.paragraphs.findLastIndex(x => x.lineNumber <= documentLine);
         const paragraph = session.displayData.paragraphs[paragraphIndex];
-        let paragraphLine = documentLine - paragraph.lineNumber;
-        const indexInParagraph = paragraphLine === 0 ? indexInLine : indexInLine + paragraph.nextLineIndexes[paragraphLine - 1];
+        const paragraphLine = documentLine - paragraph.lineNumber;
+        const lines = paragraph.paragraphSettings.textLinesInfo;
+        const indexInParagraph = lines[paragraphLine].startIndex + indexInLine;
         return new CursorParagraph(paragraphIndex, indexInParagraph);
     }
     static paragraphToPixel(session, paragraph, indexInParagraph) {
-        const line = this.paragraphToParagraphLine(session.displayData.paragraphs[paragraph].nextLineIndexes, indexInParagraph);
+        const line = this.paragraphToParagraphLine(session.displayData.paragraphs[paragraph], indexInParagraph);
         return this.paragraphLineToPixel(session, paragraph, line.paragraphLine, line.indexInLine);
     }
     static documentLineToPixel(session, documentLine, indexInLine) {
@@ -6348,26 +6337,17 @@ class PositionHelper {
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const paragraphs = session.displayData.paragraphs;
         const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
-        let tokenIndex = indexInLine > 0 ? indexInLine - 1 : indexInLine;
-        let sizeMax = { ...tokens[tokenIndex] };
-        let lineWidthToPosition = marginLeft;
-        for (let i = 0; i < tokens.length; i++) {
-            const currentToken = tokens[i];
-            if (i < indexInLine) {
-                lineWidthToPosition += currentToken.width;
-            }
-            if (sizeMax.ascent < currentToken.ascent) {
-                sizeMax = currentToken;
-            }
+        let width = marginLeft;
+        for (let i = 0; i < tokens.length && !tokens[i].isParagraph && tokens[i].index - tokens[0].index < indexInLine; i++) {
+            width += tokens[i].width;
         }
         const lineTopOffset = this.getLineTopOffset(paragraphs[paragraph].paragraphSettings.textLinesInfo, paragraphLine);
         const paragraphTop = paragraphs[paragraph].paragraphSettings.distanceFromTop || 0;
         const info = paragraphs[paragraph].paragraphSettings.textLinesInfo[paragraphLine];
         const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphs[paragraph].paragraphSettings.numberingData, info);
         return {
-            pageX: lineWidthToPosition + info.paddingLeft + info.offsetMargin + markerOffset,
+            pageX: width + info.paddingLeft + info.offsetMargin + markerOffset,
             pageY: paragraphTop + lineTopOffset - session.scrollTop,
-            width: tokens[tokenIndex].width,
             height: info.height,
             ascent: info.ascent
         };
@@ -6394,37 +6374,42 @@ class PositionHelper {
         }
         return { paragraph, paragraphLine };
     }
-    static pixelToParagraph(session, pageX, pageY, tokenDivider) {
+    static pixelToIndexInParagraph(session, pageX, paragraph, paragraphLine, tokenDivider) {
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const paragraphs = session.displayData.paragraphs;
-        const { paragraph, paragraphLine } = this.pixelToParagraphLine(paragraphs, pageY);
-        const settings = paragraphs[paragraph].paragraphSettings;
         const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
-        const lineInfo = settings.textLinesInfo[paragraphLine];
-        const indexInLine = this.getIndexInLine(tokens, lineInfo, settings.numberingData, marginLeft, pageX, tokenDivider);
-        const indexInParagraph = paragraphLine === 0 ? indexInLine : indexInLine + paragraphs[paragraph].nextLineIndexes[paragraphLine - 1];
-        return { paragraph, indexInParagraph };
-    }
-    static pixelToIndexInLine(session, documentLine, pageX, tokenDivider) {
-        const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const { paragraph, paragraphLine } = this.documentLineToParagraphLine(session.displayData.paragraphs, documentLine);
-        const settings = session.displayData.paragraphs[paragraph].paragraphSettings;
-        const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
-        const lineInfo = settings.textLinesInfo[paragraphLine];
-        return this.getIndexInLine(tokens, lineInfo, settings.numberingData, marginLeft, pageX, tokenDivider);
+        const lines = paragraphs[paragraph].paragraphSettings.textLinesInfo;
+        const numberingData = paragraphs[paragraph].paragraphSettings.numberingData;
+        const indexInLine = this.getIndexInLine(tokens, lines[paragraphLine], numberingData, marginLeft, pageX, tokenDivider);
+        return lines[paragraphLine].startIndex + indexInLine;
     }
     static getIndexInLine(tokens, lineInfo, numberingData, marginLeft, pageX, tokenDivider) {
-        if (tokens[0].isParagraph) {
-            return 0;
-        }
-        let indexInLine = 0;
+        let index = 0;
         const markerOffset = NumberingHelper.getOffsetCausedByMarker(numberingData, lineInfo);
         let width = pageX - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
-        while (indexInLine < tokens.length && width >= tokens[indexInLine].width / tokenDivider) {
-            width -= tokens[indexInLine].width;
-            indexInLine++;
+        while (index < tokens.length && !tokens[index].isParagraph) {
+            const merged = this.mergeCustomTokens(tokens, index);
+            if (width >= merged.width / tokenDivider) {
+                width -= merged.width;
+                index += merged.count;
+            }
+            else {
+                break;
+            }
         }
-        return indexInLine;
+        return index === 0 ? 0 : tokens[index - 1].index - tokens[0].index + 1;
+    }
+    static mergeCustomTokens(tokens, index) {
+        let count = 1;
+        let width = tokens[index].width;
+        if (!(tokens[index].customIndex >= 0)) {
+            return { width, count };
+        }
+        while (index + count < tokens.length && tokens[index].index === tokens[index + count].index) {
+            width += tokens[index + count].width;
+            count++;
+        }
+        return { width, count };
     }
 }
 
@@ -6498,45 +6483,44 @@ class RenderingHelper {
     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 lastLine = paragraph.paragraphSettings.textLinesInfo.length - 1;
         const fragment = DomHelper.createFragment(domContent.currentElement);
         let lineIndex = 0;
-        let renderedCount = 0;
+        let renderedIndexes = 0;
+        let renderedTokensInLine = 0;
+        let lineEndIndex = lineInfos[0].endIndex + paragraph.startIndex;
         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 fragmentEndIndex = format.endIndex < lineEndIndex ? format.endIndex : lineEndIndex;
                 let wordSpacing = lineInfos[lineIndex].wordSpacing;
                 if (wordSpacing) {
-                    const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
-                    const lineStartIndex = start + lineStart;
-                    const renderedInLine = renderedCount - lineStart;
-                    const wordSpacingStart = lineInfos[lineIndex].wordSpacingStart;
-                    const wordSpacingEnd = lineInfos[lineIndex].wordSpacingEnd;
-                    if (renderedInLine < wordSpacingStart && lineStartIndex + wordSpacingStart < fragmentEnd) {
-                        fragmentEnd = lineStartIndex + wordSpacingStart;
+                    const wordSpacingStartToken = lineInfos[lineIndex].wordSpacingStartToken;
+                    const wordSpacingEndToken = lineInfos[lineIndex].wordSpacingEndToken;
+                    const wordSpacingStartIndex = lineInfos[lineIndex].wordSpacingStartIndex + paragraph.startIndex;
+                    const wordSpacingEndIndex = lineInfos[lineIndex].wordSpacingEndIndex + paragraph.startIndex;
+                    if (renderedTokensInLine < wordSpacingStartToken && wordSpacingStartIndex < fragmentEndIndex) {
+                        fragmentEndIndex = wordSpacingStartIndex;
                     }
-                    else if (renderedInLine < wordSpacingEnd && lineStartIndex + wordSpacingEnd < fragmentEnd) {
-                        fragmentEnd = lineStartIndex + wordSpacingEnd;
+                    else if (renderedTokensInLine < wordSpacingEndToken && wordSpacingEndIndex < fragmentEndIndex) {
+                        fragmentEndIndex = wordSpacingEndIndex;
                     }
-                    if (renderedInLine < wordSpacingStart || renderedInLine > wordSpacingEnd) {
+                    if (renderedTokensInLine < wordSpacingStartToken || renderedTokensInLine > wordSpacingEndToken) {
                         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);
+                const rendered = this.renderFormatContent(fragment, paragraph.content.substring(renderedIndexes, fragmentEndIndex - paragraph.startIndex + 1), paragraph.startIndex + renderedIndexes, fragmentEndIndex, renderedTokensInLine, format.textStyle, lineInfos[lineIndex], customContentService, customComponents, breaks, wordSpacing, paragraph.startIndex);
                 lineEl.appendChild(fragment);
-                renderedCount += fragmentLength;
-                if (paragraph.nextLineIndexes.length > lineIndex && start + renderedCount > lineEnd) {
+                renderedIndexes += rendered.renderedIndexes;
+                renderedTokensInLine += rendered.renderedTokens;
+                if (lineIndex < lastLine && fragmentEndIndex === lineEndIndex) {
                     lineIndex++;
+                    lineEndIndex = lineInfos[lineIndex].endIndex + paragraph.startIndex;
                     domContent.parentNode.appendChild(lineEl);
                     lineEl = RenderingHelper.createLineElement(lineInfos[lineIndex], offset, scalingRatio);
+                    renderedTokensInLine = 0;
                 }
-            } while (renderedCount < paragraph.content.length && format.endIndex > start + renderedCount);
+            } while (renderedIndexes < paragraph.content.length && format.endIndex >= paragraph.startIndex + renderedIndexes);
             domContent.parentNode.appendChild(lineEl);
         }
     }
@@ -6563,36 +6547,88 @@ class RenderingHelper {
         containerElement.className = className;
         return containerElement;
     }
-    static renderFormatContent(fragment, textStyle, start, end, textFragment, customContentService, customComponents, breaks, wordSpacing) {
-        if (!textFragment) {
-            return;
-        }
-        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);
+    static renderFormatContent(fragment, fragmentText, fragmentStartIndex, // model content index
+    fragmentEndIndex, // model content index
+    renderedTokensInLine, textStyle, line, customContentService, customComponents, breaks, wordSpacing, paragraphStartIndex) {
+        let renderedIndexes = 0;
+        if (!fragmentText) {
+            return { renderedIndexes, renderedTokens: 0 };
+        }
+        let additionalTokens = 0;
+        if (fragmentText.at(-1) === CUSTOM_ELEMENT_MARKER &&
+            breaks.some(x => x.insertIndex === fragmentStartIndex + fragmentText.length - 1)) {
+            fragmentText = fragmentText.substring(0, fragmentText.length - 1);
+            renderedIndexes = 1;
+        }
+        const components = customContentService.getComponents(customComponents, fragmentStartIndex, fragmentEndIndex);
+        for (const component of components) {
+            const textBeforeElement = fragmentText.substring(0, component.instance.insertIndex - fragmentStartIndex);
+            fragmentText = fragmentText.substring(textBeforeElement.length + 1, fragmentText.length);
+            this.renderText(fragment, textStyle, textBeforeElement, wordSpacing);
+            renderedIndexes += textBeforeElement.length;
+            if (component.instance instanceof ExternalComponent && component.instance.isText) {
+                const rendered = this.renderExternalText(fragment, textStyle, wordSpacing, component.instance, line, renderedTokensInLine, paragraphStartIndex);
+                renderedIndexes += rendered.renderedIndexes;
+                additionalTokens += rendered.additionalTokens;
             }
-            if (nextTextFragment.length) {
-                this.renderText(fragment, textStyle, nextTextFragment, wordSpacing);
+            else {
+                customContentService.componentService.attachComponent(fragment, component);
+                renderedIndexes++;
             }
+            fragmentStartIndex = fragmentStartIndex + textBeforeElement.length + 1;
+        }
+        this.renderText(fragment, textStyle, fragmentText, wordSpacing);
+        renderedIndexes += fragmentText.length;
+        return { renderedIndexes, renderedTokens: renderedIndexes + additionalTokens };
+    }
+    static renderExternalText(fragment, textStyle, wordSpacing, instance, line, renderedTokensInLine, paragraphStartIndex) {
+        let additionalTokens = 0;
+        let renderedIndexes = 0;
+        const attributes = [
+            { name: 'data-session-id', value: `${instance.sessionId}` },
+            { name: 'data-insert-index', value: `${instance.insertIndex}` }
+        ];
+        let text = instance.getText();
+        text = !text.length ? ' ' : text;
+        const customText = line.customTexts.find(x => x.index === instance.insertIndex - paragraphStartIndex);
+        const customTextFragment = text.substring(customText.start, customText.end);
+        if (!line.wordSpacing) {
+            this.renderText(fragment, textStyle, customTextFragment, wordSpacing, [CUSTOM_TAG, 'noder-pointing'], attributes);
+            additionalTokens += customTextFragment.length;
         }
         else {
-            this.renderText(fragment, textStyle, textFragmentWithoutBreaks, wordSpacing);
+            const wordSpacingStart = line.wordSpacingStartToken - renderedTokensInLine - renderedIndexes - additionalTokens;
+            const wordSpacingEnd = line.wordSpacingEndToken - renderedTokensInLine - renderedIndexes - additionalTokens;
+            if (wordSpacingStart > 0) {
+                const leftText = customTextFragment.substring(0, wordSpacingStart);
+                this.renderText(fragment, textStyle, leftText, null, [CUSTOM_TAG, 'noder-pointing'], attributes);
+                additionalTokens += leftText.length;
+            }
+            const middleText = customTextFragment.substring(wordSpacingStart, wordSpacingEnd + 1);
+            this.renderText(fragment, textStyle, middleText, line.wordSpacing, [CUSTOM_TAG, 'noder-pointing'], attributes);
+            additionalTokens += middleText.length;
+            if (wordSpacingEnd >= 0) {
+                const rightText = customTextFragment.substring(wordSpacingEnd + 1);
+                this.renderText(fragment, textStyle, rightText, null, [CUSTOM_TAG, 'noder-pointing'], attributes);
+                additionalTokens += rightText.length;
+            }
+        }
+        if (text.length === customText.end) {
+            renderedIndexes++;
+            additionalTokens--;
+        }
+        return { renderedIndexes, additionalTokens };
+    }
+    static renderText(fragment, textStyle, content, wordSpacing, additionalClasses = [], additionalAttributes = []) {
+        if (!content.length) {
+            return;
         }
-    }
-    static renderText(fragment, textStyle, content, wordSpacing) {
         const span = document.createElement('span');
-        if (content === NEW_LINE_MARKUP) {
-            span.className = 'paragraph-symbol';
+        for (const additionalClass of additionalClasses) {
+            span.classList.add(additionalClass);
+        }
+        for (const attribute of additionalAttributes) {
+            span.setAttribute(attribute.name, attribute.value);
         }
         if (textStyle.headingStyleId === HYPERLINK_HEADING_STYLE_ID) {
             span.classList.add('hyperlink');
@@ -7057,6 +7093,7 @@ class ParagraphHelper {
                 const { splitsCount, leftHeight, tableHeight, tableInsertIndex } = ParagraphHelper.processTableSplit(tables, startInsertIndex, leftSpaceOnPage, spaceBetweenPagesContent, currentPageVerticalData.contentHeight);
                 previousTableInsertIndex = tableInsertIndex;
                 textLineInfo.height = tableHeight;
+                textLineInfo.ascent = tableHeight;
                 textLineInfo.page = currentPage;
                 currentPage += splitsCount;
                 if (splitsCount) {
@@ -7125,13 +7162,11 @@ class ParagraphHelper {
             visibleScreenIndex: offsetTop > 0 ? screenIndex + direction : screenIndex
         };
     }
-    static getParagraphPages(paragraphTextLinesInfo) {
+    static getParagraphPages(lines) {
         const resultPages = [];
-        paragraphTextLinesInfo.forEach(x => {
-            if (!resultPages.includes(x.page)) {
-                resultPages.push(x.page);
-            }
-        });
+        for (let i = lines[0].page; i <= lines[lines.length - 1].page; i++) {
+            resultPages.push(i);
+        }
         return resultPages;
     }
     static getParagraphHeight(paragraphTextLinesInfo) {
@@ -7435,9 +7470,9 @@ class Range {
         const compare = this.compareSingleLine(position);
         return compare ?? this.compareMultiLine(position);
     }
-    paragraphToDocumentLine(session) {
-        const screenPosStart = PositionHelper.paragraphToDocumentLine(session, this.start.row, this.start.column);
-        const screenPosEnd = PositionHelper.paragraphToDocumentLine(session, this.end.row, this.end.column);
+    paragraphToDocumentLine(paragraphs) {
+        const screenPosStart = PositionHelper.paragraphToDocumentLine(paragraphs[this.start.row], this.start.column);
+        const screenPosEnd = PositionHelper.paragraphToDocumentLine(paragraphs[this.end.row], this.end.column);
         return new Range(screenPosStart, screenPosEnd);
     }
     /**
@@ -8302,12 +8337,12 @@ class Selection {
         this.anchor = null;
     }
     selectRight(session) {
-        const position = this.getCursorRight(session);
+        const position = this.getRight(session.displayData.paragraphs, this.cursor.row, this.cursor.column);
         this.moveSelection(position);
     }
     navigateRight(session) {
         if (this.isEmpty) {
-            const position = this.getCursorRight(session);
+            const position = this.getRight(session.displayData.paragraphs, this.cursor.row, this.cursor.column);
             this.placeCursor(position);
         }
         else {
@@ -8316,12 +8351,12 @@ class Selection {
         }
     }
     selectLeft(session) {
-        const position = this.getCursorLeft(session);
+        const position = this.getLeft(session.displayData.paragraphs, this.cursor.row, this.cursor.column);
         this.moveSelection(position);
     }
     navigateLeft(session) {
         if (this.isEmpty) {
-            const position = this.getCursorLeft(session);
+            const position = this.getLeft(session.displayData.paragraphs, this.cursor.row, this.cursor.column);
             this.placeCursor(position);
         }
         else {
@@ -8347,12 +8382,12 @@ class Selection {
     }
     selectFileEnd(session) {
         const paragraph = session.displayData.paragraphs.length - 1;
-        const paragraphIndex = session.displayData.getParagraphContent(paragraph).length;
+        const paragraphIndex = session.displayData.paragraphs[paragraph].content.length;
         this.moveSelection(new CursorParagraph(paragraph, paragraphIndex));
     }
     navigateFileEnd(session) {
         const paragraph = session.displayData.paragraphs.length - 1;
-        const paragraphIndex = session.displayData.getParagraphContent(paragraph).length;
+        const paragraphIndex = session.displayData.paragraphs[paragraph].content.length;
         this.placeCursor(new CursorParagraph(paragraph, paragraphIndex));
     }
     selectFileStart() {
@@ -8378,73 +8413,80 @@ class Selection {
         this.placeCursor(position);
     }
     moveCursorUp(session, position) {
-        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
+        const paragraphs = session.displayData.paragraphs;
+        const line = PositionHelper.paragraphToDocumentLine(paragraphs[position.row], position.column);
         if (line.row === 0) {
             this.selectLineStart(session);
+            return;
+        }
+        const moved = this.moveToLine(session, line.row - 1, line);
+        if (moved.paragraph !== position.row || moved.indexInParagraph !== position.column) {
+            this.cursor = new CursorParagraph(moved.paragraph, moved.indexInParagraph);
         }
         else {
-            this.moveToLine(session, line.row - 1, line);
+            this.cursor = this.getLeft(paragraphs, moved.paragraph, moved.indexInParagraph);
         }
     }
     moveCursorDown(session, position) {
-        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
-        const lastParagraphsIndex = session.displayData.paragraphs.length - 1;
-        const lastParagraph = session.displayData.getParagraphSettings(lastParagraphsIndex);
-        const lastParagraphLine = lastParagraph.textLinesInfo[lastParagraph.textLinesInfo.length - 1].screenLine;
-        if (line.row === lastParagraphLine) {
+        const paragraphs = session.displayData.paragraphs;
+        const line = PositionHelper.paragraphToDocumentLine(paragraphs[position.row], position.column);
+        const lastParagraphLines = paragraphs[paragraphs.length - 1].paragraphSettings.textLinesInfo;
+        const lastDocumentLine = lastParagraphLines[lastParagraphLines.length - 1].screenLine;
+        if (line.row === lastDocumentLine) {
             this.selectLineEnd(session);
+            return;
+        }
+        const moved = this.moveToLine(session, line.row + 1, line);
+        if (moved.paragraph !== position.row || moved.indexInParagraph !== position.column) {
+            this.cursor = new CursorParagraph(moved.paragraph, moved.indexInParagraph);
         }
         else {
-            this.moveToLine(session, line.row + 1, line);
+            this.cursor = this.getRight(paragraphs, moved.paragraph, moved.indexInParagraph);
         }
     }
     moveToLine(session, line, fromLine) {
         if (!this.keepLinePositionX) {
             this.keepLinePositionX = PositionHelper.documentLineToPixel(session, fromLine.row, fromLine.column).pageX;
         }
-        const indexInLine = PositionHelper.pixelToIndexInLine(session, line, this.keepLinePositionX, 2);
-        this.cursor = PositionHelper.documentLineToParagraph(session, line, indexInLine);
-        this.overlayService.close();
+        const { paragraph, paragraphLine } = PositionHelper.documentLineToParagraphLine(session.displayData.paragraphs, line);
+        const indexInParagraph = PositionHelper.pixelToIndexInParagraph(session, this.keepLinePositionX, paragraph, paragraphLine, 2);
+        return { paragraph, indexInParagraph };
     }
-    getCursorLeft(session) {
-        if (this.cursor.row === 0 && this.cursor.column === 0) {
-            return this.cursor;
+    getLeft(paragraphs, paragraph, indexInParagraph) {
+        if (paragraph === 0) {
+            indexInParagraph -= indexInParagraph > 0 ? 1 : 0;
+            return new CursorParagraph(paragraph, indexInParagraph);
         }
-        const index = ContentHelper.paragraphPositionToDocumentIndex(session.displayData.paragraphs, this.cursor);
-        return ContentHelper.documentIndexToParagraphIndex(session.displayData.paragraphs, index - 1);
+        indexInParagraph--;
+        if (indexInParagraph >= 0) {
+            return new CursorParagraph(paragraph, indexInParagraph);
+        }
+        return new CursorParagraph(paragraph - 1, paragraphs[paragraph].startIndex - paragraphs[paragraph - 1].startIndex - 1);
     }
-    getCursorRight(session) {
-        const last = session.displayData.paragraphs.length - 1;
-        if (this.cursor.row === last && this.cursor.column === session.displayData.getParagraphContent(last).length) {
-            return this.cursor;
+    getRight(paragraphs, paragraph, indexInParagraph) {
+        if (paragraph === paragraphs.length - 1) {
+            indexInParagraph += indexInParagraph < paragraphs[paragraphs.length - 1].content.length ? 1 : 0;
+            return new CursorParagraph(paragraph, indexInParagraph);
+        }
+        indexInParagraph++;
+        if (paragraphs[paragraph + 1].startIndex === paragraphs[paragraph].startIndex + indexInParagraph) {
+            return new CursorParagraph(paragraph + 1, 0);
         }
-        const index = ContentHelper.paragraphPositionToDocumentIndex(session.displayData.paragraphs, this.cursor);
-        return ContentHelper.documentIndexToParagraphIndex(session.displayData.paragraphs, index + 1);
+        return new CursorParagraph(paragraph, indexInParagraph);
     }
     getLineStart(session, position) {
-        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
+        const line = PositionHelper.paragraphToDocumentLine(session.displayData.paragraphs[position.row], position.column);
         return PositionHelper.documentLineToParagraph(session, line.row, 0);
     }
     getLineEnd(session, position) {
-        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
-        const paragraphLength = session.displayData.getParagraphContent(position.row).length;
-        const linesCount = session.displayData.getParagraphSettings(position.row).textLinesInfo.length;
-        if (linesCount === 1) {
-            return PositionHelper.documentLineToParagraph(session, line.row, paragraphLength);
-        }
-        const paragraphLine = line.row - session.displayData.paragraphs[position.row].lineNumber;
-        const nextLineIndexes = session.displayData.paragraphs[position.row].nextLineIndexes;
-        let index;
-        if (paragraphLine === 0) {
-            index = nextLineIndexes[0];
+        const paragraph = session.displayData.paragraphs[position.row];
+        const documentLine = PositionHelper.paragraphToDocumentLine(paragraph, position.column);
+        if (documentLine.row - paragraph.lineNumber === paragraph.paragraphSettings.textLinesInfo.length - 1) {
+            return new CursorParagraph(position.row, paragraph.content.length);
         }
-        else if (paragraphLine === linesCount - 1) {
-            index = paragraphLength - nextLineIndexes[paragraphLine - 1];
-        }
-        else {
-            index = nextLineIndexes[paragraphLine] - nextLineIndexes[paragraphLine - 1];
-        }
-        return PositionHelper.documentLineToParagraph(session, line.row, index);
+        const paragraphLine = paragraph.paragraphSettings.textLinesInfo[documentLine.row - paragraph.lineNumber];
+        const endOfLineIndex = paragraphLine.endIndex - paragraphLine.startIndex + 1;
+        return PositionHelper.documentLineToParagraph(session, documentLine.row, endOfLineIndex);
     }
     getWordRight(session, position) {
         let row = position.row;
@@ -8640,7 +8682,7 @@ class Editor {
     get grammarChecker() {
         return this.regulatorService.grammarChecker;
     }
-    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTagNames, insertOverlays, customPageWidth) {
+    constructor(model, container, editorService, overlayService, regulatorService, commandsService, clipboard, externalElementTags, insertOverlays, customPageWidth) {
         this.model = model;
         this.container = container;
         this.editorService = editorService;
@@ -8648,14 +8690,9 @@ class Editor {
         this.regulatorService = regulatorService;
         this.commandsService = commandsService;
         this.clipboard = clipboard;
-        this.externalElementTagNames = externalElementTagNames;
+        this.externalElementTags = externalElementTags;
         this.insertOverlays = insertOverlays;
         this.customPageWidth = customPageWidth;
-        this.MAX_COUNT = 999;
-        this.parentTagName = 'APP-NOD-EDITOR';
-        this.tableCellTagName = 'APP-NOD-TABLE-CELL';
-        this.edgeElementTagName = 'APP-NOD-EDGE';
-        this.imageTagName = 'APP-NOD-IMAGE';
         this.subscriptions = [];
         this.commentCreateRequests = [];
         this.emojiRegex = /\p{Extended_Pictographic}(?:\p{Emoji_Modifier}|\u{200D}\p{Extended_Pictographic})*/gu;
@@ -8670,7 +8707,7 @@ class Editor {
             this.renderer.updateCursor();
         };
         this.subscriptions.push(this.receiveTextStyleSubscription());
-        this.customElementTagNames = [...this.externalElementTagNames, this.imageTagName, this.tableCellTagName, this.edgeElementTagName];
+        this.customElementTags = [...this.externalElementTags, IMAGE_TAG, TABLE_CELL_TAG, EDGE_TAG, CUSTOM_TAG];
         this.history = new OperationHistory(editorService, regulatorService);
         this.selection = new Selection(this.overlayService);
         this.regulatorService.setSelection(this.selection);
@@ -9758,7 +9795,7 @@ class Editor {
     }
     onMouseClick(event) {
         const customElement = this.setCurrentSession(event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
+        if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
         }
         else {
@@ -9789,7 +9826,7 @@ class Editor {
     }
     onShortLeftClick(event, isSelectionClick = false) {
         const customElement = this.setCurrentSession(event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
+        if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -9842,7 +9879,7 @@ class Editor {
                 this.regulatorService.setMainSessionAsCurrent();
             }
         }
-        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
+        if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -9860,7 +9897,7 @@ class Editor {
     }
     onTripleClick(event) {
         const customElement = this.setCurrentSession(event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
+        if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -9874,7 +9911,7 @@ class Editor {
     }
     onQuadClick(event) {
         const customElement = this.setCurrentSession(event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
+        if (customElement && customElement.tagName !== TABLE_CELL_TAG && customElement.tagName !== EDGE_TAG) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -9984,17 +10021,17 @@ class Editor {
         const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
         if (!customElement || (!isEdgeEdit && isInsideEdge)) {
             this.regulatorService.setMainSessionAsCurrent();
-            return this.customElementTagNames.includes(customElement?.tagName) ? customElement : null;
+            return this.customElementTags.includes(customElement?.tagName) ? customElement : null;
         }
         const elementSessionId = +customElement.attributes.getNamedItem('data-session-id').value;
         this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
-        return customElement.tagName !== this.edgeElementTagName ? customElement : null;
+        return customElement.tagName !== EDGE_TAG ? customElement : null;
     }
     getCustomElement(element) {
-        if (!element || element.tagName === this.parentTagName) {
+        if (!element || element.tagName === PARENT_TAG) {
             return null;
         }
-        else if (this.customElementTagNames.includes(element.tagName)) {
+        else if (this.customElementTags.includes(element.tagName) || element.classList.contains(CUSTOM_TAG)) {
             return element;
         }
         else {
@@ -10005,10 +10042,10 @@ class Editor {
         return !!this.getParentEdge(element);
     }
     getParentEdge(element) {
-        if (!element || element.tagName === this.parentTagName) {
+        if (!element || element.tagName === PARENT_TAG) {
             return null;
         }
-        else if (element.tagName === this.edgeElementTagName) {
+        else if (element.tagName === EDGE_TAG) {
             return element;
         }
         else {
@@ -10084,7 +10121,7 @@ class Editor {
             return;
         }
         const customElement = this.container.nativeElement.querySelector(`[data-session-id="${this.session.sessionId}"]`);
-        if (customElement.tagName === this.tableCellTagName) {
+        if (customElement.tagName === TABLE_CELL_TAG) {
             const tableSession = this.regulatorService.getSession(this.regulatorService.currentSession.parentSessionId);
             const table = tableSession.customComponents.tables.find(x => x.instance.sessionId === this.regulatorService.currentSession.parentSessionId);
             table.instance.tableSelection.clearSelection();
@@ -10900,7 +10937,7 @@ class DisplayToken {
     get isWhiteSpace() {
         return this.isSpace || this.isParagraph;
     }
-    get breaksLine() {
+    get isBreak() {
         return this.isPageBreak || this.isLineBreak;
     }
     get breakable() {
@@ -12173,13 +12210,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
 class DisplayTokenHelper {
-    static getDisplayValue(charCode, breakType) {
+    static getParagraphToken(paragraphSymbolStyle, index) {
+        const size = FontMetrics.measureCharSize('0', ContentStyleHelper.getFontStylesString(paragraphSymbolStyle));
+        return new DisplayToken({ ...size, displayValue: DisplayValue.paragraph, index });
+    }
+    static getBreakToken(symbol, fontString, breakType, index) {
+        return new DisplayToken({
+            ...FontMetrics.measureCharSize(symbol, fontString),
+            displayValue: this.getBreakDisplayValue(breakType),
+            index
+        });
+    }
+    static getSymbolToken(symbol, fontString, index) {
+        const result = new DisplayToken({
+            ...FontMetrics.measureCharSize(symbol, fontString),
+            displayValue: this.getSymbolDisplayValue(symbol),
+            index
+        });
+        if (result.isSpace) {
+            result.ascent = 0;
+            result.descent = 0;
+            result.height = 0;
+        }
+        return result;
+    }
+    static getComponentTokens(component, fontString, index) {
+        if (component.instance instanceof ExternalComponent && component.instance.isText) {
+            const result = [];
+            let text = component.instance.getText();
+            text = !text.length ? ' ' : text;
+            for (let i = 0; i < text.length; i++) {
+                result.push(this.getSymbolToken(text[i], fontString, index));
+                result[i].customIndex = i;
+            }
+            return result.length ? result : [this.getSymbolToken(' ', fontString, index)];
+        }
+        const ascent = component.instance.ascent() ?? 0;
+        const descent = component.instance.descent() ?? 0;
+        return [
+            new DisplayToken({
+                width: component.instance.width(),
+                height: ascent + descent,
+                font: FontMetrics.measureCharSize('0', fontString).font,
+                ascent,
+                descent,
+                displayValue: this.getComponentDisplayValue(component.instance),
+                index
+            })
+        ];
+    }
+    static getBreakDisplayValue(breakType) {
         if (breakType === BreakTypes.Page) {
             return DisplayValue.pageBreak;
         }
         if (breakType === BreakTypes.TextWrapping) {
             return DisplayValue.lineBreak;
         }
+        return DisplayValue.char;
+    }
+    static getSymbolDisplayValue(symbol) {
+        const charCode = symbol.charCodeAt(0);
         if (charCode === 32) {
             return DisplayValue.space;
         }
@@ -12191,32 +12281,14 @@ class DisplayTokenHelper {
         }
         return DisplayValue.char;
     }
-    static getParagraphToken(paragraphSymbolStyle) {
-        const size = FontMetrics.measureCharSize('0', ContentStyleHelper.getFontStylesString(paragraphSymbolStyle));
-        return new DisplayToken({ ...size, displayValue: DisplayValue.paragraph });
-    }
-    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;
+    static getComponentDisplayValue(instance) {
+        if (instance instanceof NoderTabComponent) {
+            return DisplayValue.tab;
         }
-        return result;
-    }
-    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
-        });
+        if (instance instanceof NoderTableComponent) {
+            return DisplayValue.table;
+        }
+        return DisplayValue.customContent;
     }
 }
 
@@ -12240,72 +12312,26 @@ class LineInfoModel {
 }
 
 class LineInfoHelper {
-    static get(tokens, isAfterPageBreak, isLastLine, style, indent, isNumbering, width, defaultHeight, defaultAscent) {
+    static get(tokens, style, indent, width, paragraphStartIndex, position) {
         const result = new LineInfoModel({
-            isAfterPageBreak,
-            isEndedByPageBreak: tokens[tokens.length - 1].isPageBreak,
+            isAfterPageBreak: position.isAfterPageBreak,
+            isEndedByPageBreak: tokens[tokens.length - 1].isPageBreak || (tokens.length > 1 && tokens[tokens.length - 2].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,
+            startIndex: tokens[0].index - paragraphStartIndex,
+            endIndex: tokens[tokens.length - 1].index - paragraphStartIndex,
+            isNumbering: position.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++;
-                }
-            }
-            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;
-                    }
-                }
-            }
+        this.applySizeToLine(result, tokens);
+        if (style.alignment === Alignment$1.justify && !position.isLastLine) {
+            this.applyWordSpacingToLine(result, tokens, indent, width, paragraphStartIndex);
         }
+        this.applyCustomTextsToLine(result, tokens, paragraphStartIndex);
         return result;
     }
     static getFirstLineIndent(model, paragraphIndex, generalProperties) {
@@ -12323,6 +12349,86 @@ class LineInfoHelper {
             ? paragraph.paragraphStyle.indentLeft
             : levelsModel[paragraphStyle.numberingLevel].indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight, markerWidth + markerWidth / marker.length);
     }
+    static applySizeToLine(line, tokens) {
+        const lastToken = tokens[tokens.length - 1];
+        let maxAscent = 0;
+        let maxDescent = 0;
+        let i = 0;
+        const length = lastToken.isParagraph && tokens.length > 1 ? tokens.length - 1 : tokens.length;
+        do {
+            if (maxAscent < tokens[i].ascent) {
+                maxAscent = tokens[i].ascent;
+            }
+            if (maxDescent < tokens[i].descent) {
+                maxDescent = tokens[i].descent;
+            }
+            line.width += tokens[i].width;
+            i++;
+        } while (i < length);
+        line.height = maxAscent + maxDescent;
+        line.ascent = maxAscent;
+        if (line.height === 0) {
+            line.height = lastToken.ascent + lastToken.descent;
+            line.ascent = lastToken.ascent;
+        }
+        line.offsetAfter = line.height * (line.lineSpacing - 1);
+    }
+    static applyWordSpacingToLine(line, tokens, indent, width, paragraphStartIndex) {
+        const lastToken = tokens[tokens.length - 1].isParagraph ? tokens.length - 2 : tokens.length - 1;
+        let right = lastToken;
+        let adjustableWidth = line.width;
+        while (right > 0 && tokens[right].isSpace) {
+            adjustableWidth -= tokens[right].width;
+            right--;
+        }
+        let left = 0;
+        while (left < lastToken && 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++;
+            }
+        }
+        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) {
+            line.wordSpacing = whitespaceDeficit / spaces;
+            line.width = availableWidth;
+            line.wordSpacingStartToken = left;
+            line.wordSpacingEndToken = right;
+            line.wordSpacingStartIndex = tokens[left].index - paragraphStartIndex;
+            line.wordSpacingEndIndex = tokens[right].index - paragraphStartIndex;
+            for (let i = right; i > left; i--) {
+                if (tokens[i].isSpace) {
+                    tokens[i].width += line.wordSpacing;
+                }
+            }
+        }
+    }
+    static applyCustomTextsToLine(line, tokens, paragraphStartIndex) {
+        for (const token of tokens) {
+            if (token.customIndex >= 0) {
+                const indexInParagraph = token.index - paragraphStartIndex;
+                if (line.customTexts && line.customTexts[line.customTexts.length - 1].index === indexInParagraph) {
+                    line.customTexts[line.customTexts.length - 1].end++;
+                }
+                else {
+                    line.customTexts ??= [];
+                    line.customTexts.push({
+                        index: indexInParagraph,
+                        start: token.customIndex,
+                        end: token.customIndex + 1
+                    });
+                }
+            }
+        }
+    }
 }
 
 class PageVerticalDataModel {
@@ -12809,13 +12915,13 @@ class DisplayData extends EventEmitting {
         this.removeAllListeners('pagesCountChanged');
     }
     updateParagraphLineNumber(first) {
-        const count = this.paragraphs.length;
         if (first === 0) {
             this.paragraphs[first].lineNumber = 0;
             first++;
         }
-        for (let i = first; i < count; i++) {
-            this.paragraphs[i].lineNumber = this.paragraphs[i - 1].lineNumber + this.paragraphs[i - 1].nextLineIndexes.length + 1;
+        for (let i = first; i < this.paragraphs.length; i++) {
+            this.paragraphs[i].lineNumber =
+                this.paragraphs[i - 1].lineNumber + this.paragraphs[i - 1].paragraphSettings.textLinesInfo.length;
         }
     }
     updateParagraphStartIndex(first) {
@@ -12863,8 +12969,7 @@ class DisplayData extends EventEmitting {
                 NumberingHelper.setNumberingNeedToRecalculate(this.generalProperties.numberingInfo, numberingId);
             }
             const numberingData = NumberingHelper.createDataModel(this.generalProperties.numberings, this.model.paragraphs, i, this.generalProperties.numberingInfo);
-            const { splits, rowInfos } = this.splitParagraphByLines(i);
-            this.paragraphs[i].nextLineIndexes = splits;
+            const rowInfos = this.splitParagraphByLines(i);
             if (indexOfParagraphAfterPageBreak === i) {
                 rowInfos[0].isAfterPageBreak = true;
             }
@@ -12912,29 +13017,29 @@ class DisplayData extends EventEmitting {
     }
     splitParagraphByLines(paragraphIndex) {
         const paragraph = this.paragraphs[paragraphIndex];
-        const { paragraphTokens, paragraphToken } = this.getParagraphTokens(paragraph);
-        const splits = [];
+        const isLastParagraph = paragraphIndex === this.paragraphs.length - 1;
+        const paragraphSymbolIndex = paragraph.startIndex + paragraph.content.length;
+        const paragraphTokens = this.getTokens(paragraph.startIndex, paragraph.content, paragraphSymbolIndex);
         const rowInfos = [];
         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 ?? []);
+            const startWidth = indent.left + indent.firstLine - indent.hanging || 0;
+            const last = this.computeWrapToken(tokens, startWidth, maxWidth, style.tabSettings ?? [], isLastParagraph);
             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);
+            const isAfterPageBreak = !rowInfos.length ? false : rowInfos[rowInfos.length - 1].isEndedByPageBreak;
+            const isLastLine = index + last + 1 === paragraphTokens.length;
+            const position = { isLastLine, isNumbering, isAfterPageBreak };
+            const info = LineInfoHelper.get(tokens, style, indent, width, paragraph.startIndex, position);
             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);
+                    const tab = this.customComponents.tabs.find(x => x.instance.insertIndex === tokens[i].index);
                     tab.instance.applySize(tokens[i].width);
                 }
                 else if (tokens[i].isTable) {
@@ -12944,61 +13049,57 @@ class DisplayData extends EventEmitting {
             rowInfos.push(info);
             index += last + 1;
             if (index < paragraphTokens.length) {
-                splits.push(index);
                 indent = new IndentModel(null, null, indent.left, indent.right, 0);
             }
         } while (index < paragraphTokens.length);
         ParagraphHelper.applyParagraphIndentsToLines(rowInfos, paragraphIndex, this.model.paragraphs);
-        return { splits, rowInfos };
-    }
-    getParagraphTokens(paragraphInfo) {
-        const paragraphSymbolIndex = paragraphInfo.startIndex + paragraphInfo.content.length;
-        const { tokens, paragraphToken } = this.getTokens(paragraphInfo.startIndex, paragraphInfo.content, paragraphSymbolIndex);
-        return { paragraphTokens: tokens, paragraphToken };
+        return rowInfos;
     }
     getParagraphLineTokens(paragraphIndex, paragraphLine) {
         const paragraph = this.paragraphs[paragraphIndex];
-        const lineStart = paragraphLine > 0 ? paragraph.nextLineIndexes[paragraphLine - 1] : 0;
-        const lineEnd = paragraph.nextLineIndexes[paragraphLine] ? paragraph.nextLineIndexes[paragraphLine] : paragraph.content.length;
-        const lineContent = paragraph.content.substring(lineStart, lineEnd);
+        const isLastParagraph = paragraphIndex === this.paragraphs.length - 1;
+        const line = paragraph.paragraphSettings.textLinesInfo[paragraphLine];
+        const lineContent = paragraph.content.substring(line.startIndex, line.endIndex + 1);
         const paragraphSymbolIndex = paragraph.paragraphSettings.startInsertIndex + paragraph.content.length;
-        const { tokens } = this.getTokens(lineStart + paragraph.startIndex, lineContent, paragraphSymbolIndex);
+        const tokens = this.getTokens(line.startIndex + paragraph.startIndex, lineContent, paragraphSymbolIndex);
+        if (line.customTexts && line.customTexts[0].index === line.startIndex) {
+            tokens.splice(0, line.customTexts[0].start); // cut additional tokens in case when line starts from the middle of the textual custom component
+        }
         const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
         const paragraphStyle = this.model.paragraphs[paragraphIndex].paragraphStyle;
-        const lineInfo = paragraph.paragraphSettings.textLinesInfo[paragraphLine];
-        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 = paragraphLine === 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
+        const maxWidth = pageFormat.contentWidth - line.indent.right - line.indent.markerWidth;
+        const startWidth = line.indentLeft + line.indentFirstLine - line.indent.hanging || 0;
+        const last = this.computeWrapToken(tokens, startWidth, maxWidth, paragraphStyle.tabSettings ?? [], isLastParagraph); // tab width correction for tokens according to the tabs complex positioning
+        tokens.splice(last + 1); // cut additional tokens in case when line ends in the middle of the textual custom component
+        const isLastLine = paragraphLine === paragraph.paragraphSettings.textLinesInfo.length - 1;
+        const position = { isLastLine, isNumbering: line.isNumbering, isAfterPageBreak: false };
+        LineInfoHelper.get(tokens, paragraphStyle, line.indent, pageFormat.contentWidth, 0, position); // space width correction for tokens according to the wordSpacing in case of justify alignment
         return tokens;
     }
     getTokens(contentIndex, content, paragraphSymbolIndex) {
         const 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);
+            const customComponent = breakType === null ? this.getOrGenerateComponent(contentIndex, content[i]) : null;
+            let newTokens = breakType !== null ? [DisplayTokenHelper.getBreakToken(content[i], fontString, breakType, contentIndex)] : null;
+            newTokens ??= customComponent
+                ? DisplayTokenHelper.getComponentTokens(customComponent, fontString, contentIndex)
+                : [DisplayTokenHelper.getSymbolToken(content[i], fontString, contentIndex)];
             contentIndex++;
             if (contentIndex > format.endIndex) {
                 format = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
                 fontString = ContentStyleHelper.getFontStylesString(format.textStyle);
             }
-            tokens.push(token);
+            tokens.push(...newTokens);
         }
-        const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, paragraphSymbolIndex);
-        const paragraphToken = DisplayTokenHelper.getParagraphToken(paragraphFormat.textStyle);
-        return tokens.length ? { tokens, paragraphToken } : { tokens: [paragraphToken], paragraphToken };
+        if (contentIndex === paragraphSymbolIndex) {
+            const paragraphFormat = FormatStyleHelper.getFormatAtIndex(this.model.formats, contentIndex);
+            const paragraphToken = DisplayTokenHelper.getParagraphToken(paragraphFormat.textStyle, contentIndex);
+            tokens.push(paragraphToken);
+        }
+        return tokens;
     }
     getOrGenerateComponent(charIndex, char) {
         if (!this.customContentService.isSpecialMarker(char)) {
@@ -13006,9 +13107,6 @@ class DisplayData extends EventEmitting {
         }
         const existingComponent = this.customContentService.getComponent(this.customComponents, char, charIndex);
         if (existingComponent) {
-            if (existingComponent.instance instanceof NoderTableComponent) {
-                existingComponent.instance.updateCells();
-            }
             return existingComponent;
         }
         const pageFormat = this.getPageFormatAtPosition(charIndex);
@@ -13044,16 +13142,19 @@ class DisplayData extends EventEmitting {
         }
         return -1;
     }
-    // The index of a token which should be the last on the line
-    computeWrapIndex(displayTokens, startWidth, maxWidth, tabSettings) {
+    // Compute token which should be the last on the line
+    computeWrapToken(displayTokens, startWidth, maxWidth, tabSettings, isLastParagraph) {
         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) {
+            if (token.isParagraph) {
                 return i;
             }
+            if (token.isBreak) {
+                return i + 1 < displayTokens.length && displayTokens[i + 1].isParagraph && !isLastParagraph ? i + 1 : i;
+            }
             if (token.isTable) {
                 return i > 0 ? i - 1 : 0;
             }
@@ -13202,7 +13303,7 @@ class DisplayData extends EventEmitting {
         const right = this.paragraphs[position.row].content.slice(position.column);
         const originalParagraphId = this.paragraphs[position.row].id;
         const insertParagraphs = this.splitByParagraphs(`${left}${text}${right}`).map((x, i) => {
-            const newParagraph = new ParagraphInfoModel({ content: x, nextLineIndexes: [] });
+            const newParagraph = new ParagraphInfoModel({ content: x });
             if (i === 0) {
                 newParagraph.id = originalParagraphId;
             }
@@ -14826,9 +14927,9 @@ class HighlightLayer {
     }
     drawCustomElementHighlight(elementInfo, cssClass, screenParentRange) {
         const paragraphPos = elementInfo.parentRange.start;
-        const documentLine = PositionHelper.paragraphToDocumentLine(this.session, paragraphPos.row, paragraphPos.column);
         const paragraph = this.session.displayData.paragraphs[paragraphPos.row];
-        const lineInfo = paragraph.paragraphSettings.textLinesInfo.find(x => x.screenLine === documentLine.column);
+        const documentLine = PositionHelper.paragraphToDocumentLine(paragraph, paragraphPos.column);
+        const lineInfo = paragraph.paragraphSettings.textLinesInfo.find(x => x.screenLine === documentLine.row);
         const elementIndex = paragraph.startIndex + paragraphPos.column;
         const element = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === elementIndex);
         if (!element) {
@@ -14876,7 +14977,7 @@ class CommentHighlightLayer extends HighlightLayer {
             const startPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.startIndex);
             const endPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.endIndex + 1);
             const range = new Range(startPosition, endPosition);
-            const screenRange = range.paragraphToDocumentLine(this.session);
+            const screenRange = range.paragraphToDocumentLine(this.session.displayData.paragraphs);
             if (config.visibleRange &&
                 (screenRange.end.row < config.visibleRange.startScreenLine || screenRange.start.row > config.visibleRange.endScreenLine)) {
                 this.commentService.removeCommentFromRender(this.session.sessionId, comment.commentId);
@@ -14988,14 +15089,14 @@ class CursorLayer {
         this.addAnimationClass();
     }
     drawCursor(maxLayerHeight) {
-        const isCursorInView = this.cursorPosition.pageY >= 0 && this.cursorPosition.pageY < maxLayerHeight;
+        // check does not make much sense, as right condition is true all the time (maybe it should be height instead of maxHeight), also it ignores scroll in virtual renderer case
+        const isCursorInView = this.cursorPosition.pageY + this.cursorPosition.height >= 0 && this.cursorPosition.pageY < maxLayerHeight;
         if (!isCursorInView) {
             DomHelper.setStyle(this.cursor.style, 'display', 'none');
             return;
         }
         DomHelper.setStyle(this.cursor.style, 'display', 'block');
         DomHelper.setStyle(this.cursor.style, 'left', `${this.cursorPosition.pageX}px`);
-        DomHelper.setStyle(this.cursor.style, 'width', `${this.cursorPosition.width}px`);
         this.addTextStylesToCursor();
     }
     removeAnimationClass() {
@@ -15026,7 +15127,7 @@ class GrammarHighlightLayer extends HighlightLayer {
                 continue;
             }
             for (const error of grammarErrors) {
-                const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).paragraphToDocumentLine(this.session);
+                const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).paragraphToDocumentLine(this.session.displayData.paragraphs);
                 if (config.visibleRange &&
                     (range.end.row < config.visibleRange.startScreenLine || range.start.row > config.visibleRange.endScreenLine)) {
                     continue;
@@ -15156,7 +15257,7 @@ class SearchHighlightLayer extends HighlightLayer {
         this.getVisibleCustomElementResults(config);
         if (this.active) {
             if (this.active instanceof Range) {
-                const screenRange = this.active.paragraphToDocumentLine(this.session);
+                const screenRange = this.active.paragraphToDocumentLine(this.session.displayData.paragraphs);
                 if (!screenRange.isEmpty &&
                     (!config.visibleRange ||
                         (screenRange.start.row >= config.visibleRange.startScreenLine &&
@@ -15171,13 +15272,13 @@ class SearchHighlightLayer extends HighlightLayer {
             }
             else {
                 this.updateActiveResult();
-                const screenParentRange = this.active.parentRange.paragraphToDocumentLine(this.session);
+                const screenParentRange = this.active.parentRange.paragraphToDocumentLine(this.session.displayData.paragraphs);
                 this.drawCustomElementHighlight(this.active, this.selectedClassName, screenParentRange);
             }
         }
         if (this.markers?.length) {
             const ranges = this.markers
-                .map(x => x.paragraphToDocumentLine(this.session))
+                .map(x => x.paragraphToDocumentLine(this.session.displayData.paragraphs))
                 .filter(x => !x.isEmpty &&
                 (!config.visibleRange ||
                     (x.start.row >= config.visibleRange.startScreenLine && x.end.row <= config.visibleRange.endScreenLine)) &&
@@ -15202,7 +15303,7 @@ class SearchHighlightLayer extends HighlightLayer {
                         this.active.location.isEqual(element.location))) {
                     continue;
                 }
-                const screenParentRange = element.parentRange.paragraphToDocumentLine(this.session);
+                const screenParentRange = element.parentRange.paragraphToDocumentLine(this.session.displayData.paragraphs);
                 if (!config.visibleRange ||
                     (screenParentRange.start.row >= config.visibleRange.startScreenLine &&
                         screenParentRange.end.row <= config.visibleRange.endScreenLine)) {
@@ -15240,7 +15341,7 @@ class SearchHighlightLayer extends HighlightLayer {
             return;
         }
         for (const group of groupedByParentRange) {
-            const screenParentRange = group.range.paragraphToDocumentLine(this.session);
+            const screenParentRange = group.range.paragraphToDocumentLine(this.session.displayData.paragraphs);
             if (config.visibleRange &&
                 (screenParentRange.start.row < config.visibleRange.startScreenLine ||
                     screenParentRange.end.row > config.visibleRange.endScreenLine)) {
@@ -15284,7 +15385,7 @@ class SelectionLayer extends HighlightLayer {
         if (this.marker) {
             let range = this.marker.clipRows(config.contentRange.start, config.contentRange.end);
             if (!range.isEmpty) {
-                range = range.paragraphToDocumentLine(this.session);
+                range = range.paragraphToDocumentLine(this.session.displayData.paragraphs);
                 if (range.isSingleLine) {
                     this.drawSingleLineMarker(range, this.className);
                 }
@@ -15515,7 +15616,8 @@ class Renderer extends EventEmitting {
         const { left, top } = rect ?? this.container.getBoundingClientRect();
         const pageX = x - left;
         const pageY = y + this.session.scrollTop - top;
-        const { paragraph, indexInParagraph } = PositionHelper.pixelToParagraph(this.session, pageX, pageY, tokenDivider);
+        const { paragraph, paragraphLine } = PositionHelper.pixelToParagraphLine(this.session.displayData.paragraphs, pageY);
+        const indexInParagraph = PositionHelper.pixelToIndexInParagraph(this.session, pageX, paragraph, paragraphLine, tokenDivider);
         return new CursorParagraph(paragraph, indexInParagraph);
     }
     showCursor() {