devexpress-richedit 26.1.2-beta → 26.1.3

package/lib/common/canvas/renderes/common/document-renderer.js

@@ -1,9 +1,13 @@
 import { MapCreator } from '../../../utils/map-creator';
 import { RendererClassNames } from '../../renderer-class-names';
 import { zIndexCssClassType, ZIndexHelper } from '../z-index-helper';
-import { LayoutChangeType } from '../../../layout-formatter/changes/changes/layout-change-base';
+import { ColumnChange } from '../../../layout-formatter/changes/changes/column-change';
+import { LayoutChangeType, RowChange } from '../../../layout-formatter/changes/changes/layout-change-base';
+import { PageAreaChange } from '../../../layout-formatter/changes/changes/page-area-change';
+import { PageChange } from '../../../layout-formatter/changes/changes/page-change';
 import { LayoutBookmarkBoxType } from '../../../layout/main-structures/layout-boxes/bookmark-box';
 import { LayoutBoxType } from '../../../layout/main-structures/layout-boxes/layout-box';
+import { LayoutTextBox } from '../../../layout/main-structures/layout-boxes/layout-text-box';
 import { LayoutPageFlags } from '../../../layout/main-structures/layout-page';
 import { BorderLineStyle } from '../../../model/borders/enums';
 import { CharacterFormattingScript, StrikeoutType, UnderlineType } from '../../../model/character/enums';
@@ -18,6 +22,7 @@ import { Errors } from '@devexpress/utils/lib/errors';
 import { Point } from '@devexpress/utils/lib/geometry/point';
 import { Rectangle } from '@devexpress/utils/lib/geometry/rectangle';
 import { Size } from '@devexpress/utils/lib/geometry/size';
+import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { ColorUtils } from '@devexpress/utils/lib/utils/color';
 import { DomUtils } from '@devexpress/utils/lib/utils/dom';
 import { ListUtils } from '@devexpress/utils/lib/utils/list';
@@ -96,6 +101,9 @@ export class SimpleViewCanvasSizeManager {
 export class DocumentRenderer {
     get cache() { return this.viewManager.cache; }
     constructor(viewManager) {
+        this.isForcedColorsModeActive = false;
+        this.selectionSegmentBoxesCache = new SelectionSegmentBoxesCache();
+        this.isSelectionChangeCacheEnabled = false;
         this.viewManager = viewManager;
         if (this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
             DomUtils.addClassName(this.viewManager.canvas, RendererClassNames.SIMPLE_VIEW);
@@ -111,6 +119,8 @@ export class DocumentRenderer {
         }
     }
     applyPageChange(layoutPage, pageChange) {
+        if (this.isForcedColorsModeActive && !this.isSelectionChangeCacheEnabled)
+            this.selectionSegmentBoxesCache.clear();
         Log.print(LogSource.DocumentRenderer, "applyPageChanges", `pageIndex ${pageChange.index}`);
         const pageFromCache = this.cache[pageChange.index];
         for (let pageAreaChange of pageChange.mainPageAreaChanges)
@@ -120,6 +130,76 @@ export class DocumentRenderer {
         for (let anchoredPictureChange of pageChange.anchoredPictureChanges)
             this.applyAnchorPictureChange(pageFromCache, layoutPage, anchoredPictureChange);
     }
+    updateSelectedIntervalsPageChanges(layoutPage, pageIndex, intervals = [], isMain = true) {
+        if (!intervals.length)
+            return;
+        const mainPageAreaChanges = [];
+        const otherPageAreaChanges = [];
+        if (isMain) {
+            layoutPage.mainSubDocumentPageAreas.forEach((pageArea, areaIndex) => {
+                const pageAreaModelOffset = layoutPage.getPosition() + pageArea.pageOffset;
+                this.addSelectedPageAreaChange(mainPageAreaChanges, pageArea, areaIndex, pageAreaModelOffset, intervals);
+            });
+        }
+        else {
+            NumberMapUtils.forEach(layoutPage.otherPageAreas, (pageArea, subDocId) => {
+                this.addSelectedPageAreaChange(otherPageAreaChanges, pageArea, subDocId, pageArea.pageOffset, intervals);
+            });
+        }
+        if (!mainPageAreaChanges.length && !otherPageAreaChanges.length)
+            return;
+        this.isSelectionChangeCacheEnabled = true;
+        this.applyPageChange(layoutPage, new PageChange(pageIndex, LayoutChangeType.Updated, mainPageAreaChanges, otherPageAreaChanges));
+        this.isSelectionChangeCacheEnabled = false;
+    }
+    addSelectedPageAreaChange(pageAreaChanges, pageArea, pageAreaIndex, pageAreaModelOffset, intervals) {
+        const columnChanges = [];
+        for (let interval of intervals) {
+            const firstColumnIndex = this.findIntersectingLayoutElement(pageArea.columns, pageAreaModelOffset, interval.start, true);
+            if (firstColumnIndex < 0)
+                continue;
+            const lastColumnIndex = this.findIntersectingLayoutElement(pageArea.columns, pageAreaModelOffset, interval.end, false);
+            for (let columnIndex = firstColumnIndex; columnIndex <= lastColumnIndex; columnIndex++) {
+                const column = pageArea.columns[columnIndex];
+                const columnModelOffset = pageAreaModelOffset + column.pageAreaOffset;
+                const firstRowIndex = this.findIntersectingLayoutElement(column.rows, columnModelOffset, interval.start, true);
+                if (firstRowIndex < 0)
+                    continue;
+                const lastRowIndex = this.findIntersectingLayoutElement(column.rows, columnModelOffset, interval.end, false);
+                const rowChanges = [];
+                for (let rowIndex = firstRowIndex; rowIndex <= lastRowIndex; rowIndex++)
+                    rowChanges.push(new RowChange(rowIndex, LayoutChangeType.Replaced));
+                columnChanges.push(new ColumnChange(columnIndex, LayoutChangeType.Updated, rowChanges));
+            }
+        }
+        if (columnChanges.length)
+            pageAreaChanges.push(new PageAreaChange(pageAreaIndex, LayoutChangeType.Updated, columnChanges));
+    }
+    findIntersectingLayoutElement(layoutElements, modelOffset, intervalBoundary, findFirst) {
+        let low = 0;
+        let high = layoutElements.length - 1;
+        let result = -1;
+        while (low <= high) {
+            const mid = (low + high) >> 1;
+            const elementPosition = findFirst ? layoutElements[mid].getEndPosition() : layoutElements[mid].getStartPosition();
+            const elementModelPosition = modelOffset + elementPosition;
+            const isIntersecting = findFirst ? elementModelPosition > intervalBoundary : elementModelPosition < intervalBoundary;
+            if (isIntersecting) {
+                result = mid;
+                if (findFirst)
+                    high = mid - 1;
+                else
+                    low = mid + 1;
+            }
+            else {
+                if (findFirst)
+                    low = mid + 1;
+                else
+                    high = mid - 1;
+            }
+        }
+        return result;
+    }
     applyAnchorPictureChange(cache, layoutPage, ancPicChange) {
         const objId = ancPicChange.index;
         switch (ancPicChange.changeType) {
@@ -149,13 +229,14 @@ export class DocumentRenderer {
                 DocumentRenderer.removeFromContainerByIndex(pageCache.page, pageAreaChange.canvasIndex, DocumentRenderer.getMainPageAreaContainerCore);
                 break;
             case LayoutChangeType.Replaced:
-                DocumentRenderer.replaceInContainer(pageCache.page, pageAreaChange.canvasIndex, this.renderPageArea(layoutPage.renderLevelCalculator, pageCache, layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex], null), DocumentRenderer.getMainPageAreaContainerCore);
+                DocumentRenderer.replaceInContainer(pageCache.page, pageAreaChange.canvasIndex, this.renderPageArea(layoutPage.renderLevelCalculator, pageCache, layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex], null, layoutPage.getPosition()), DocumentRenderer.getMainPageAreaContainerCore);
                 break;
             case LayoutChangeType.Updated: {
                 const layoutPageArea = layoutPage.mainSubDocumentPageAreas[pageAreaChange.layoutIndex];
+                const pageAreaModelOffset = (layoutPageArea.subDocument.isMain() ? layoutPage.getPosition() : 0) + layoutPageArea.pageOffset;
                 const pageAreaElement = DocumentRenderer.getMainPageAreaContainerCore(pageCache.page).childNodes[pageAreaChange.canvasIndex];
                 for (let columnChange of pageAreaChange.columnChanges)
-                    this.applyColumnChange(pageAreaElement, layoutPageArea, columnChange, layoutPage.renderLevelCalculator.renderMainPageAreaLevel);
+                    this.applyColumnChange(pageAreaElement, layoutPageArea, columnChange, layoutPage.renderLevelCalculator.renderMainPageAreaLevel, pageAreaModelOffset);
                 break;
             }
             default: throw new Error(Errors.InternalException);
@@ -171,7 +252,9 @@ export class DocumentRenderer {
                 break;
             }
             case LayoutChangeType.Replaced: {
-                DocumentRenderer.replaceFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
+                const textBox = pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null;
+                const pageAreaElement = this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, textBox, layoutPage.getPosition());
+                DocumentRenderer.replaceFromContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, pageAreaElement);
                 break;
             }
             case LayoutChangeType.Updated: {
@@ -179,32 +262,36 @@ export class DocumentRenderer {
                 const level = pageArea.subDocument.isTextBox() ?
                     layoutPage.renderLevelCalculator.getRenderLevel(layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId).rendererLevel) :
                     layoutPage.renderLevelCalculator.renderHeaderFooterPageAreasLevel;
+                const pageAreaModelOffset = (pageArea.subDocument.isMain() ? layoutPage.getPosition() : 0) + pageArea.pageOffset;
                 for (let columnChange of pageAreaChange.columnChanges)
-                    this.applyColumnChange(pageAreaElement, pageArea, columnChange, level);
+                    this.applyColumnChange(pageAreaElement, pageArea, columnChange, level, pageAreaModelOffset);
                 break;
             }
             case LayoutChangeType.Inserted: {
-                DocumentRenderer.insertToContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null));
+                const textBox = pageArea.subDocument.isTextBox() ? layoutPage.anchoredObjectHolder.getTextBoxByInternalSubDocId(subDocId) : null;
+                const pageAreaElement = this.renderPageArea(layoutPage.renderLevelCalculator, cache, pageArea, textBox, layoutPage.getPosition());
+                DocumentRenderer.insertToContainerByObject(subDocId, DocumentRenderer.getOtherPageAreaContainerCore(cache.page), cache.otherAreas, pageAreaElement);
                 break;
             }
             default: throw new Error(Errors.InternalException);
         }
     }
-    applyColumnChange(pageAreaElement, layoutPageArea, columnChange, level) {
+    applyColumnChange(pageAreaElement, layoutPageArea, columnChange, level, pageAreaModelOffset) {
         switch (columnChange.changeType) {
             case LayoutChangeType.Deleted:
                 DocumentRenderer.removeFromContainerByIndex(pageAreaElement, columnChange.canvasIndex, DocumentRenderer.getColumnsContainerCore);
                 break;
             case LayoutChangeType.Replaced: {
-                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
+                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, pageAreaModelOffset, layoutPageArea.subDocument.isMain());
                 DocumentRenderer.replaceInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
                 break;
             }
             case LayoutChangeType.Updated: {
                 const layoutColumn = layoutPageArea.columns[columnChange.layoutIndex];
+                const columnModelOffset = pageAreaModelOffset + layoutColumn.pageAreaOffset;
                 const columnElement = DocumentRenderer.getColumnsContainerCore(pageAreaElement).childNodes[columnChange.canvasIndex];
                 for (var rowChange of columnChange.rowChanges)
-                    DocumentRenderer.applyChange(columnElement, rowChange, DocumentRenderer.getRowsContainerCore, () => this.renderRow(layoutColumn.rows[rowChange.layoutIndex], level));
+                    DocumentRenderer.applyChange(columnElement, rowChange, DocumentRenderer.getRowsContainerCore, () => this.renderRow(layoutColumn.rows[rowChange.layoutIndex], level, columnModelOffset));
                 for (var tableChange of columnChange.tableChanges)
                     DocumentRenderer.applyChange(columnElement, tableChange, DocumentRenderer.getTablesContainerCore, () => DocumentRenderer.renderTable(layoutColumn.tablesInfo[tableChange.layoutIndex], level, this.viewManager.innerClientProperties.showTableGridLines));
                 for (var paragraphFrameChange of columnChange.paragraphFrameChanges)
@@ -212,7 +299,7 @@ export class DocumentRenderer {
                 break;
             }
             case LayoutChangeType.Inserted: {
-                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, layoutPageArea.subDocument.isMain());
+                const renderedColumn = this.renderColumn(layoutPageArea.columns[columnChange.layoutIndex], level, pageAreaModelOffset, layoutPageArea.subDocument.isMain());
                 DocumentRenderer.insertInContainer(pageAreaElement, columnChange.canvasIndex, renderedColumn, DocumentRenderer.getColumnsContainerCore);
                 break;
             }
@@ -310,17 +397,18 @@ export class DocumentRenderer {
     renderPageContent(page, pageIndex) {
         const pageCache = this.cache[pageIndex];
         const [mainPageAreasContainer, otherPageAreasContainer, floatingObjectsContainer] = this.renderPageContainers(pageCache);
-        ListUtils.forEach(page.mainSubDocumentPageAreas, (area) => mainPageAreasContainer.appendChild(this.renderPageArea(page.renderLevelCalculator, pageCache, area, null)));
+        ListUtils.forEach(page.mainSubDocumentPageAreas, (area) => mainPageAreasContainer.appendChild(this.renderPageArea(page.renderLevelCalculator, pageCache, area, null, page.getPosition())));
         if (!this.viewManager.innerClientProperties.viewsSettings.isSimpleView)
             NumberMapUtils.forEach(page.otherPageAreas, (pageArea, subDocId) => {
                 if (!pageArea.subDocument.isTextBox())
-                    DocumentRenderer.insertToContainerByObject(subDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, pageArea, null));
+                    DocumentRenderer.insertToContainerByObject(subDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, pageArea, null, page.getPosition()));
             });
         for (let ancObjProps of this.renderPageContentGetFloatingObjects(page)) {
             switch (ancObjProps.getType()) {
                 case LayoutBoxType.AnchorTextBox:
                     const internalSubDocId = ancObjProps.internalSubDocId;
-                    DocumentRenderer.insertToContainerByObject(internalSubDocId, otherPageAreasContainer, pageCache.otherAreas, this.renderPageArea(page.renderLevelCalculator, pageCache, page.otherPageAreas[internalSubDocId], ancObjProps));
+                    const pageAreaElement = this.renderPageArea(page.renderLevelCalculator, pageCache, page.otherPageAreas[internalSubDocId], ancObjProps, page.getPosition());
+                    DocumentRenderer.insertToContainerByObject(internalSubDocId, otherPageAreasContainer, pageCache.otherAreas, pageAreaElement);
                     break;
                 case LayoutBoxType.AnchorPicture:
                     DocumentRenderer.insertToContainerByObject(ancObjProps.objectId, floatingObjectsContainer, pageCache.anchoredPicture, this.renderFloatingPicture(ancObjProps, page.renderLevelCalculator));
@@ -344,7 +432,7 @@ export class DocumentRenderer {
         }
         throw new Error(Errors.InternalException);
     }
-    renderPageArea(renderLevelCalculator, pageCache, area, textBox, renderContent = true) {
+    renderPageArea(renderLevelCalculator, pageCache, area, textBox, pageStartPosition = 0) {
         const element = DocumentRenderer.renderContainer(DocumentRenderer.getPageAreaClassname(area));
         if (area.subDocument.isTextBox())
             element.style.overflow = "hidden";
@@ -383,42 +471,39 @@ export class DocumentRenderer {
                 ColorUtils.LIGHT_COLOR : this.viewManager.layout.pageColor;
             DocumentRenderer.updatePageColor(element, color);
         }
-        if (renderContent)
-            for (let column of area.columns)
-                element.appendChild(this.renderColumn(column, level, area.subDocument.isMain()));
+        const isMainPageArea = area.subDocument.isMain();
+        const pageAreaModelOffset = (area.subDocument.isMain() ? pageStartPosition : 0) + area.pageOffset;
+        for (let column of area.columns)
+            element.appendChild(this.renderColumn(column, level, pageAreaModelOffset, isMainPageArea));
         return element;
     }
-    renderColumn(column, level, _isMainPageArea) {
+    renderColumn(column, level, pageAreaModelOffset, _isMainPageArea) {
         const columnElement = DocumentRenderer.renderContainer(RendererClassNames.COLUMN);
         DomUtils.setStyleSizeAndPosition(columnElement.style, column);
+        const columnModelOffset = pageAreaModelOffset + column.pageAreaOffset;
         const rowsContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.ROWS_CONTAINER));
         const paragraphFramesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPHFRAMES_CONTAINER));
         const tablesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLES_CONTAINER));
         for (let row of column.rows)
-            rowsContainer.appendChild(this.renderRow(row, level));
+            rowsContainer.appendChild(this.renderRow(row, level, columnModelOffset));
         for (let frame of column.paragraphFrames)
             paragraphFramesContainer.appendChild(DocumentRenderer.renderParagraphFrame(frame, level));
         for (let tableColumn of column.tablesInfo)
             tablesContainer.appendChild(DocumentRenderer.renderTable(tableColumn, level, this.viewManager.innerClientProperties.showTableGridLines));
         return columnElement;
     }
-    renderRow(row, level) {
+    renderRow(row, level, columnModelOffset = 0) {
         const lastBoxIndexWhatCanStrikeoutAndUnderline = row.getLastBoxIndexWhatCanStrikeoutAndUnderline();
+        const rowModelOffset = columnModelOffset + row.columnOffset;
         const rowElement = DocumentRenderer.renderContainer(RendererClassNames.ROW);
         rowElement.innerHTML = "";
         if (row.numberingListBox) {
             const skipUnderlineAndStrikeout = 0 > lastBoxIndexWhatCanStrikeoutAndUnderline;
-            let box = this.renderBox(row, row.numberingListBox.textBox, level, skipUnderlineAndStrikeout).html;
-            if (typeof box === 'string')
-                rowElement.innerHTML += box;
-            else
-                rowElement.appendChild(box);
+            let box = this.renderBox(row, row.numberingListBox.textBox, level, skipUnderlineAndStrikeout, rowModelOffset, true).html;
+            rowElement.appendChild(box);
             if (row.numberingListBox.separatorBox) {
-                let box = this.renderBox(row, row.numberingListBox.separatorBox, level, skipUnderlineAndStrikeout).html;
-                if (typeof box === 'string')
-                    rowElement.innerHTML += box;
-                else
-                    rowElement.appendChild(box);
+                let box = this.renderBox(row, row.numberingListBox.separatorBox, level, skipUnderlineAndStrikeout, rowModelOffset, true).html;
+                rowElement.appendChild(box);
             }
         }
         let increaseRowHeight = false;
@@ -431,12 +516,9 @@ export class DocumentRenderer {
                 nextBoxHasNormalScriptedUnderline = this.boxHasNormalScriptedUnderline(row.boxes[boxIndex + 1]);
             const skipUnderlineAndStrikeout = boxIndex > lastBoxIndexWhatCanStrikeoutAndUnderline;
             const skipUnderlineScript = prevBoxHasNormalScriptedUnderline || nextBoxHasNormalScriptedUnderline;
-            const boxRenderResult = this.renderBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript);
+            const boxRenderResult = this.renderBox(row, box, level, skipUnderlineAndStrikeout, rowModelOffset, skipUnderlineScript);
             const boxRenderResultHtml = boxRenderResult.html;
-            if (typeof boxRenderResultHtml === 'string')
-                rowElement.innerHTML += boxRenderResultHtml;
-            else
-                rowElement.appendChild(boxRenderResultHtml);
+            rowElement.appendChild(boxRenderResultHtml);
             increaseRowHeight = increaseRowHeight || boxRenderResult.increaseRowHeight;
             prevBoxHasNormalScriptedUnderline = this.boxHasNormalScriptedUnderline(box, skipUnderlineScript);
         }
@@ -450,7 +532,30 @@ export class DocumentRenderer {
             && box.characterProperties.fontUnderlineType != UnderlineType.None
             && (box.characterProperties.script === CharacterFormattingScript.Normal || forceNormalScript);
     }
-    renderBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript = true) {
+    renderBox(row, box, level, skipUnderlineAndStrikeout, rowModelOffset, skipUnderlineScript = true) {
+        if (!this.isForcedColorsModeActive)
+            return this.renderSingleBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript, false);
+        const selectedIntervals = this.getSelectedIntervalsForBox(rowModelOffset, box);
+        if (selectedIntervals.length == 0)
+            return this.renderSingleBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript, false);
+        if (box instanceof LayoutTextBox) {
+            const result = document.createDocumentFragment();
+            let increaseRowHeight = false;
+            for (const segment of this.getSelectionSegmentBoxes(box, selectedIntervals)) {
+                const segmentRenderResult = this.renderSingleBox(row, segment.box, level, skipUnderlineAndStrikeout, skipUnderlineScript, segment.isSelected);
+                increaseRowHeight = increaseRowHeight || segmentRenderResult.increaseRowHeight;
+                result.appendChild(segmentRenderResult.html);
+            }
+            return new BoxRenderResult(result, increaseRowHeight);
+        }
+        return this.renderSingleBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript, true);
+    }
+    updateForcedColorsModeState() {
+        this.isForcedColorsModeActive = typeof window !== 'undefined' && typeof window.matchMedia === 'function' &&
+            window.matchMedia('(forced-colors: active)').matches;
+        return this.isForcedColorsModeActive;
+    }
+    renderSingleBox(row, box, level, skipUnderlineAndStrikeout, skipUnderlineScript = true, isSelected = false) {
         let content = box.renderGetContent(this);
         let top = box.getTop(row);
         const left = box.x;
@@ -522,9 +627,11 @@ export class DocumentRenderer {
             default:
                 boxClass = RendererClassNames.BOX_SPACE + " " + ZIndexHelper.getClassName(level, zIndexCssClassType.BoxSpace);
         }
+        if (isSelected)
+            boxClass += " " + RendererClassNames.BOX_SELECTED;
         if (charProps.hidden && this.viewManager.innerClientProperties.showHiddenSymbols)
             boxClass += ' ' + RendererClassNames.HIDDEN_BOX;
-        const result = new DocumentFragment();
+        const result = document.createDocumentFragment();
         const contentSpan = document.createElement('span');
         contentSpan.style.cssText = boxStyles.join(";");
         contentSpan.setAttribute('class', boxClass);
@@ -573,6 +680,53 @@ export class DocumentRenderer {
         }
         return new BoxRenderResult(result, charProps.hidden);
     }
+    getSelectedIntervalsForBox(rowModelOffset, box) {
+        const selection = this.viewManager.control.selection;
+        if (!selection || selection.isCollapsed())
+            return [];
+        const boxStart = rowModelOffset + box.rowOffset;
+        const boxEnd = boxStart + box.getLength();
+        const intersections = [];
+        for (const selectionInterval of selection.intervals) {
+            const start = Math.max(boxStart, selectionInterval.start);
+            const end = Math.min(boxEnd, selectionInterval.end);
+            if (end > start)
+                intersections.push(new FixedInterval(start - boxStart, end - start));
+        }
+        return intersections;
+    }
+    getSelectionSegmentBoxes(box, selectedIntervals) {
+        this.selectionSegmentBoxesCache.clearIfIntervalsChanged(box, selectedIntervals);
+        if (!selectedIntervals.length)
+            return [{ box, isSelected: false }];
+        const segmentBoxes = [];
+        let textPosition = 0;
+        for (const interval of selectedIntervals) {
+            if (interval.start > textPosition)
+                segmentBoxes.push({ box: this.getOrCreateSelectionSegmentBox(box, textPosition, interval.start), isSelected: false });
+            segmentBoxes.push({ box: this.getOrCreateSelectionSegmentBox(box, interval.start, interval.end), isSelected: true });
+            textPosition = interval.end;
+        }
+        if (textPosition < box.text.length)
+            segmentBoxes.push({ box: this.getOrCreateSelectionSegmentBox(box, textPosition, box.text.length), isSelected: false });
+        return segmentBoxes;
+    }
+    getOrCreateSelectionSegmentBox(box, start, end) {
+        return this.selectionSegmentBoxesCache.get(box, start, end) ?? this.createSelectionSegmentBox(box, start, end);
+    }
+    createSelectionSegmentBox(box, start, end) {
+        const measurer = this.viewManager.control.measurer;
+        const left = box.getCharOffsetXInPixels(measurer, start);
+        const right = box.getCharOffsetXInPixels(measurer, end);
+        const segmentBox = box.clone();
+        segmentBox.text = box.text.substring(start, end);
+        segmentBox.x = box.x + left;
+        segmentBox.width = right - left;
+        segmentBox.rowOffset = box.rowOffset + start;
+        if (this.isSelectionChangeCacheEnabled)
+            this.selectionSegmentBoxesCache.set(box, start, end, segmentBox);
+        return segmentBox;
+    }
     renderVerticalAlignContainer(content, commonStyles, script) {
         const cssText = commonStyles.join(";") + ";vertical-align: " + (script === CharacterFormattingScript.Subscript ? "sub" : "super") + ";";
         return this.renderContainerWithCssText(content, cssText);
@@ -906,17 +1060,52 @@ export class BoxRenderResult {
         this.increaseRowHeight = increaseRowHeight;
     }
     toString() {
-        if (typeof this.html === 'string')
-            return this.html;
-        else {
-            const result = [];
-            if (this.html) {
-                const length = this.html.children.length;
-                for (let i = 0; i < length; i++) {
-                    result.push(this.html.children.item(i).outerHTML);
-                }
+        const result = [];
+        if (this.html) {
+            const length = this.html.children.length;
+            for (let i = 0; i < length; i++) {
+                result.push(this.html.children.item(i).outerHTML);
             }
-            return result.join('');
         }
+        return result.join('');
+    }
+}
+class SelectionSegmentBoxesCache {
+    constructor() {
+        this.cache = new WeakMap();
+        this.intervalsSignatureByBox = new WeakMap();
+    }
+    clear() {
+        this.cache = new WeakMap();
+        this.intervalsSignatureByBox = new WeakMap();
+    }
+    clearIfIntervalsChanged(box, intervals) {
+        const currentSignature = this.getIntervalsSignature(intervals);
+        const prevSignature = this.intervalsSignatureByBox.get(box);
+        if (prevSignature !== currentSignature)
+            this.cache.delete(box);
+        this.intervalsSignatureByBox.set(box, currentSignature);
+    }
+    get(box, start, end) {
+        const segmentsCache = this.cache.get(box);
+        if (!segmentsCache)
+            return null;
+        const cacheKey = this.getCacheKey(start, end);
+        return segmentsCache.get(cacheKey) || null;
+    }
+    set(box, start, end, segmentBox) {
+        let segmentsCache = this.cache.get(box);
+        if (!segmentsCache) {
+            segmentsCache = new Map();
+            this.cache.set(box, segmentsCache);
+        }
+        const cacheKey = this.getCacheKey(start, end);
+        segmentsCache.set(cacheKey, segmentBox);
+    }
+    getCacheKey(start, end) {
+        return `${start}_${end}`;
+    }
+    getIntervalsSignature(intervals) {
+        return intervals.map(interval => `${interval.start}_${interval.end}`).join('|');
     }
 }

package/lib/common/canvas/renderes/common/simple-view-renderer.d.ts

@@ -7,6 +7,7 @@ import { LayoutColumn } from '../../../layout/main-structures/layout-column';
 import { LayoutPage } from '../../../layout/main-structures/layout-page';
 import { BoundaryInterval } from '@devexpress/utils/lib/intervals/boundary';
 import { ConstInterval } from '@devexpress/utils/lib/intervals/const';
+import { FixedInterval } from '@devexpress/utils/lib/intervals/fixed';
 import { VisibleCanvasObjectsInfo } from '../canvas-listener/simple-view-canvas-listener';
 import { DocumentRenderer } from './document-renderer';
 export declare class SimpleViewRenderer extends DocumentRenderer {
@@ -15,6 +16,7 @@ export declare class SimpleViewRenderer extends DocumentRenderer {
     protected tableIndexInterval: BoundaryInterval;
     protected updateDataChunk: VisibleCanvasObjectsInfo;
     pageInserted(layoutPage: LayoutPage, updateDataChunk: VisibleCanvasObjectsInfo): void;
+    updateSelectedIntervalsPageChanges(layoutPage: LayoutPage, pageIndex?: number, intervals?: FixedInterval[], _isMain?: boolean): void;
     protected renderPageContentGetFloatingObjects(page: LayoutPage): LayoutAnchoredObjectBox[];
     collectScrollChanges<ResultChangesT extends LayoutChangeBase>(oldInterval: ConstInterval, newInterval: ConstInterval, isAddUpdateChange: boolean, getConstructor: new (layoutIndex: number, canvasIndex: number, changeType: LayoutChangeType) => ResultChangesT): ResultChangesT[];
     collectScrollChangesMap<ObjectT extends LayoutAnchoredPictureBox | LayoutAnchoredTextBox, ResultChangesT extends LayoutChangeBase>(oldObjects: Record<number, ObjectT>, newObjects: Record<number, ObjectT>, isAddUpdateChange: boolean, isTextBoxes: boolean, getConstructor: new (layoutIndex: number, changeType: LayoutChangeType) => ResultChangesT): ResultChangesT[];
@@ -24,6 +26,6 @@ export declare class SimpleViewRenderer extends DocumentRenderer {
     private applyFormatterChangesMap;
     private makePageChange;
     pageUpdated(pageChange: PageChange, newUpdateDataChunk: VisibleCanvasObjectsInfo): void;
-    protected renderColumn(column: LayoutColumn, level: number, isMainPageArea: boolean): HTMLElement;
+    protected renderColumn(column: LayoutColumn, level: number, pageAreaModelOffset: number, isMainPageArea: boolean): HTMLElement;
     protected updatePageSize(page: LayoutPage, pageElement: HTMLElement): void;
 }

package/lib/common/canvas/renderes/common/simple-view-renderer.js

@@ -29,6 +29,36 @@ export class SimpleViewRenderer extends DocumentRenderer {
         this.updateDataChunk = updateDataChunk;
         this.renderPage(layoutPage, 0, true);
     }
+    updateSelectedIntervalsPageChanges(layoutPage, pageIndex = 0, intervals = [], _isMain = true) {
+        if (!intervals.length)
+            return;
+        const pageArea = layoutPage.mainSubDocumentPageAreas[0];
+        const column = pageArea?.columns?.[0];
+        if (!column)
+            return;
+        const visibleRows = this.updateDataChunk.rows;
+        const visibleStart = Math.max(0, visibleRows.start);
+        const visibleEnd = Math.min(visibleRows.end, column.rows.length);
+        if (visibleStart >= visibleEnd)
+            return;
+        const pageModelOffset = layoutPage.getPosition() + pageArea.pageOffset + column.pageAreaOffset;
+        const rowChanges = [];
+        for (let rowLayoutIndex = visibleStart; rowLayoutIndex < visibleEnd; rowLayoutIndex++) {
+            const row = column.rows[rowLayoutIndex];
+            const rowStart = pageModelOffset + row.getStartPosition();
+            const rowEnd = pageModelOffset + row.getEndPosition();
+            if (rowEnd <= rowStart)
+                continue;
+            const hasIntersection = intervals.some((interval) => rowStart < interval.end && rowEnd > interval.start);
+            if (hasIntersection)
+                rowChanges.push(new RowChangeSV(rowLayoutIndex, rowLayoutIndex - visibleStart, LayoutChangeType.Replaced));
+        }
+        if (!rowChanges.length)
+            return;
+        const columnChange = new ColumnChange(0, LayoutChangeType.Updated, rowChanges);
+        const pageAreaChange = new PageAreaChange(0, LayoutChangeType.Updated, [columnChange]);
+        this.applyPageChange(layoutPage, new PageChange(pageIndex, LayoutChangeType.Updated, [pageAreaChange], []));
+    }
     renderPageContentGetFloatingObjects(page) {
         const foMap = NumberMapUtils.shallowCopy(this.updateDataChunk.ancPictureObjs);
         NumberMapUtils.forEach(this.updateDataChunk.ancTextBoxObjs, (tb, key) => foMap[key] = tb);
@@ -93,6 +123,8 @@ export class SimpleViewRenderer extends DocumentRenderer {
         if (!scrollChanges.length || !formatterChanges.length)
             return;
         const mm = ListUtils.minMaxExtended(scrollChanges, (v) => v.layoutIndex);
+        if (!mm)
+            return;
         const visibleObjectsInterval = new BoundaryInterval(mm.minValue, mm.maxValue + 1);
         const isObjectMustBeReplaced = ListUtils.accumulate(formatterChanges, {}, (acc, c) => {
             if (c.changeType == LayoutChangeType.Replaced && visibleObjectsInterval.contains(c.layoutIndex))
@@ -139,16 +171,17 @@ export class SimpleViewRenderer extends DocumentRenderer {
         this.applyPageChange(this.viewManager.layout.pages[0], pc);
         this.updateDataChunk = newUpdateDataChunk;
     }
-    renderColumn(column, level, isMainPageArea) {
+    renderColumn(column, level, pageAreaModelOffset, isMainPageArea) {
         const columnElement = DocumentRenderer.renderContainer(RendererClassNames.COLUMN);
         DomUtils.setStyleSizeAndPosition(columnElement.style, column);
+        const columnModelOffset = pageAreaModelOffset + column.pageAreaOffset;
         const rowsContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.ROWS_CONTAINER));
         const paragraphFramesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.PARAGRAPHFRAMES_CONTAINER));
         const tablesContainer = columnElement.appendChild(DocumentRenderer.renderContainer(RendererClassNames.TABLES_CONTAINER));
         const bounds = isMainPageArea ?
             this.updateDataChunk :
             new SimpleViewChangesDataBase(new BoundaryInterval(0, column.rows.length), new BoundaryInterval(0, column.tablesInfo.length), new BoundaryInterval(0, column.paragraphFrames.length));
-        ListUtils.forEach(column.rows, (row) => rowsContainer.appendChild(this.renderRow(row, level)), bounds.rows.start, bounds.rows.end);
+        ListUtils.forEach(column.rows, (row) => rowsContainer.appendChild(this.renderRow(row, level, columnModelOffset)), bounds.rows.start, bounds.rows.end);
         ListUtils.forEach(column.paragraphFrames, (pf) => paragraphFramesContainer.appendChild(DocumentRenderer.renderParagraphFrame(pf, level)), bounds.parFrames.start, bounds.parFrames.end);
         ListUtils.forEach(column.tablesInfo, (t) => tablesContainer.appendChild(DocumentRenderer.renderTable(t, level, this.viewManager.innerClientProperties.showTableGridLines)), bounds.tables.start, bounds.tables.end);
         return columnElement;

package/lib/common/canvas/renderes/view-manager.d.ts

@@ -31,6 +31,7 @@ export declare class ViewManager implements ILayoutChangesListener, IZoomLevelHo
     private renderers;
     get renderer(): DocumentRenderer;
     get printLayoutRenderer(): DocumentRenderer;
+    get isSimpleView(): boolean;
     lastUsedRendererType: ViewType;
     canvasListeners: Record<number, CanvasListener<DocumentRenderer>>;
     get canvasListener(): CanvasListener<DocumentRenderer>;
@@ -67,6 +68,8 @@ export declare class ViewManager implements ILayoutChangesListener, IZoomLevelHo
     NotifySearchSelectionLayoutChanged(): void;
     NotifyMisspelledSelectionLayoutChanged(): void;
     NotifyRangePermissionLayoutChanged(): void;
+    private updateSelectedContent;
+    private getSelectionIntervalsForPageChange;
     private addTopLevelContainers;
     setWorkSession(layout: DocumentLayout, layoutSelection: LayoutSelection, imageCache: ImageCache): void;
     closeDocument(): void;