@talrace/ngx-noder 0.0.33 → 0.0.35

package/fesm2022/talrace-ngx-noder.mjs

@@ -1112,6 +1112,24 @@ class BreakModel {
     }
 }
 
+class ContentOperationsHelper {
+    static removeContent(content, startIndex, count) {
+        return `${content.slice(0, startIndex)}${content.slice(startIndex + count, content.length)}`;
+    }
+    static sliceContent(content, startIndex, count) {
+        return content.slice(startIndex, startIndex + count);
+    }
+    static insertContent(content, text, index) {
+        const before = content.slice(0, index);
+        const after = content.slice(index, content.length);
+        return `${before}${text}${after}`;
+    }
+    static replaceContent(content, startIndex, endIndex, text) {
+        const reduced = this.removeContent(content, startIndex, endIndex - startIndex + 1);
+        return this.insertContent(reduced, text, startIndex);
+    }
+}
+
 class ElementModel {
     constructor(fields) {
         if (fields) {
@@ -1278,8 +1296,8 @@ class TabModel {
 
 class ContentsOperationsHelper {
     static GetRestoreFromSlice(contents, startIndex, count) {
+        const text = ContentOperationsHelper.sliceContent(contents.content, startIndex, count);
         const endIndex = startIndex + count - 1;
-        const text = contents.content.slice(startIndex, endIndex + 1);
         const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex);
         const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
         const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
@@ -3231,6 +3249,7 @@ const DisplayValue = {
     customContent: 3,
     punctuation: 9,
     space: 10,
+    trailingSpace: 11,
     emptyLine: 13
 };
 
@@ -3328,12 +3347,18 @@ class PositionHelper {
         const sizeNext = tokens[tokenIndex + 1];
         let sizeMax = { ...size };
         let lineWidthToPosition = session.displayData.pageMargin.left;
+        const { paragraphIndex, lineIndex } = this.findLineInParagraphs(paragraphs, row);
+        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
         for (let currentColumn = 0; currentColumn < tokens.length; currentColumn++) {
+            const currentToken = tokens[currentColumn];
             if (currentColumn < column) {
-                lineWidthToPosition += tokens[currentColumn].width;
+                lineWidthToPosition += currentToken.width;
+                if (currentToken.displayValue === DisplayValue.space && lineInfo.wordSpacing) {
+                    lineWidthToPosition += lineInfo.wordSpacing;
+                }
             }
-            if (sizeMax.ascent < tokens[currentColumn].ascent) {
-                sizeMax = tokens[currentColumn];
+            if (sizeMax.ascent < currentToken.ascent) {
+                sizeMax = currentToken;
             }
         }
         if (tokens[tokenIndex]?.isTable) {
@@ -3385,15 +3410,23 @@ class PositionHelper {
      */
     static mapPixelToClosestTokenMidpoint(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
-        const line = paragraphSettings.textLinesInfo[lineIndex].screenLine;
-        let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - paragraphSettings.textLinesInfo[lineIndex].paddingLeft;
         const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
+        const line = lineInfo.screenLine;
         if (tokens[0].displayValue === DisplayValue.emptyLine) {
-            return { line, indexInLine };
+            return { line, indexInLine: 0 };
         }
-        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width / 2) {
-            relativeX -= tokens[indexInLine].width;
+        let indexInLine = 0;
+        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - lineInfo.paddingLeft;
+        const wordSpacing = lineInfo.wordSpacing ?? 0;
+        while (indexInLine < tokens.length) {
+            const token = tokens[indexInLine];
+            const isSpace = token.displayValue === DisplayValue.space;
+            const width = token.width + (isSpace ? wordSpacing : 0);
+            if (relativeX < width / 2) {
+                break;
+            }
+            relativeX -= width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -3403,15 +3436,23 @@ class PositionHelper {
      */
     static mapPixelToNextTokenBoundary(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
         const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
-        const line = paragraphSettings.textLinesInfo[lineIndex].screenLine;
-        let indexInLine = 0;
-        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - paragraphSettings.textLinesInfo[lineIndex].paddingLeft;
         const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
+        const line = lineInfo.screenLine;
         if (tokens[0].displayValue === DisplayValue.emptyLine) {
-            return { line, indexInLine };
+            return { line, indexInLine: 0 };
         }
-        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width) {
-            relativeX -= tokens[indexInLine].width;
+        let indexInLine = 0;
+        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - lineInfo.paddingLeft;
+        const wordSpacing = lineInfo.wordSpacing ?? 0;
+        while (indexInLine < tokens.length) {
+            const token = tokens[indexInLine];
+            const isSpace = token.displayValue === DisplayValue.space;
+            const width = token.width + (isSpace ? wordSpacing : 0);
+            if (relativeX < width) {
+                break;
+            }
+            relativeX -= width;
             indexInLine++;
         }
         return { line, indexInLine };
@@ -3439,9 +3480,15 @@ class PositionHelper {
             return column;
         }
         const textLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
+        const wordSpacing = textLineInfo.wordSpacing ?? 0;
         let width = positionWidth - textLineInfo.paddingLeft - documentMargin.left;
-        while (column < tokens.length && width >= tokens[column].width) {
-            width -= tokens[column].width;
+        while (column < tokens.length) {
+            const token = tokens[column];
+            if (width < token.width) {
+                break;
+            }
+            const isSpace = token.displayValue === DisplayValue.space;
+            width -= token.width + (isSpace ? wordSpacing : 0);
             column++;
         }
         return column;
@@ -3520,17 +3567,17 @@ class RenderingHelper {
         if (lineInfo) {
             const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
             const marginLeft = numberingOffsetLeft > 0 ? -numberingOffsetLeft : 0;
-            lineEl.setAttribute('style', 
             // eslint-disable-next-line prettier/prettier
-            `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor}`);
-            lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
+            let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
             if (lineInfo.wordSpacing) {
-                lineEl.style.wordSpacing = `${lineInfo.wordSpacing}px`;
+                styleString += `word-spacing:${lineInfo.wordSpacing}px;`;
             }
+            lineEl.setAttribute('style', styleString);
+            lineEl.setAttribute('screen-index', `${lineInfo.screenLine}`);
         }
         return lineEl;
     }
-    static renderContentSimpleLine(domContent, formatsExt, rowDistance, customContentService, customComponents, breaks = []) {
+    static renderContentSimpleLine(domContent, formatsExt, rowDistance, customContentService, customComponents, lineInfo, breaks = []) {
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
         for (const formatExt of formatsExt) {
             const fragmentDocumentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start : formatExt.startIndex;
@@ -3539,7 +3586,7 @@ class RenderingHelper {
             const fragmentStartIndex = rowDistance.start > formatExt.startIndex ? rowDistance.start - formatExt.startIndex : 0;
             const fragmentEndIndex = formatExt.endIndex > rowDistance.end ? rowDistance.end - formatExt.startIndex : formatExt.endIndex - formatExt.startIndex;
             const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks);
+            this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, true);
         }
         domContent.parentNode.appendChild(valueFragment);
     }
@@ -3551,8 +3598,10 @@ class RenderingHelper {
         let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
         const valueFragment = DomHelper.createFragment(domContent.currentElement);
+        let isLastLineFragment = false;
         let paragraphChars = 0;
         let split = splits[splitIndex];
+        let lineInfo = currentParagraph.textLinesInfo[splitIndex];
         for (const formatExt of formatsExt) {
             const beforeSplitIndex = split ? split - 1 : distance.end - distance.start;
             const beforeSplitDocumentIndex = distance.start + beforeSplitIndex;
@@ -3564,13 +3613,15 @@ class RenderingHelper {
                 ? fragmentStartIndex + formatExt.endIndex - formatExt.startIndex
                 : distance.start + beforeSplitIndex - formatExt.startIndex;
             const fragmentDistance = new DistanceModel({ start: fragmentStartIndex, end: fragmentEndIndex });
-            paragraphChars += this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks);
+            isLastLineFragment = split === fragmentDocumentDistance.end + 1;
+            paragraphChars += this.renderFormatContent(valueFragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
             lineEl.appendChild(valueFragment);
             let nextFragmentStartIndex = fragmentEndIndex + 1;
             while (paragraphChars === split && nextFragmentStartIndex !== distance.end) {
                 split = splits[++splitIndex];
+                lineInfo = currentParagraph.textLinesInfo[splitIndex];
                 const nextFragmentDocumentStartIndex = fragmentDocumentStartIndex + nextFragmentStartIndex - fragmentStartIndex;
-                lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft, scalingRatio);
+                lineEl = RenderingHelper.createLineElement(lineInfo, numberingOffsetLeft, scalingRatio);
                 if (split > formatExt.endIndex) {
                     const nextFragmentEndIndex = formatExt.content.length - 1;
                     const nextFragmentDistance = new DistanceModel({ start: nextFragmentStartIndex, end: nextFragmentEndIndex });
@@ -3579,7 +3630,8 @@ class RenderingHelper {
                         start: nextFragmentDocumentStartIndex,
                         end: nextFragmentDocumentEndIndex
                     });
-                    paragraphChars += this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks);
+                    isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
+                    paragraphChars += this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
                     lineEl.appendChild(valueFragment);
                     domContent.parentNode.appendChild(lineEl);
                     break;
@@ -3592,7 +3644,8 @@ class RenderingHelper {
                     start: nextFragmentDocumentStartIndex,
                     end: nextFragmentDocumentEndIndex
                 });
-                const renderedChars = this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks);
+                isLastLineFragment = split === nextFragmentDocumentDistance.end + 1;
+                const renderedChars = this.renderFormatContent(valueFragment, formatExt, nextFragmentDocumentDistance, nextFragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment);
                 lineEl.appendChild(valueFragment);
                 domContent.parentNode.appendChild(lineEl);
                 nextFragmentStartIndex += renderedChars;
@@ -3627,24 +3680,28 @@ class RenderingHelper {
         containerElement.className = className;
         return containerElement;
     }
-    static renderFormatContent(fragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks) {
+    static renderFormatContent(fragment, formatExt, fragmentDocumentDistance, fragmentDistance, customContentService, customComponents, breaks, lineInfo, isLastLineFragment) {
         let textFragment = formatExt.content.substring(fragmentDistance.start, fragmentDistance.end + 1);
         if (!textFragment) {
             return 0;
         }
         const textFragmentWithoutBreaks = BreakHelper.removeBreakMarker(breaks, textFragment, fragmentDocumentDistance.start);
         if (customContentService.isFragmentContainComponent(customComponents, textFragment, fragmentDocumentDistance)) {
-            this.renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragmentWithoutBreaks, customContentService, customComponents);
+            this.renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragmentWithoutBreaks, customContentService, customComponents, lineInfo);
+        }
+        else if (isLastLineFragment) {
+            this.renderTextWithSpacingHandling(fragment, formatExt, textFragmentWithoutBreaks, lineInfo);
         }
         else {
-            RenderingHelper.renderText(fragment, formatExt, textFragmentWithoutBreaks);
+            const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
+            this.renderText(fragment, formatExt, textFragment, paddingLeft);
         }
         return textFragment.length;
     }
-    static renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragment, customContentService, customComponents) {
+    static renderTextWithCustomContent(fragment, formatExt, fragmentDocumentDistance, textFragment, customContentService, customComponents, lineInfo) {
         const components = customContentService.getComponents(customComponents, fragmentDocumentDistance);
         if (!components.length) {
-            RenderingHelper.renderText(fragment, formatExt, textFragment);
+            this.renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo);
             return;
         }
         let newTextFragmentStartIndex = fragmentDocumentDistance.start;
@@ -3654,15 +3711,26 @@ class RenderingHelper {
             nextTextFragment = nextTextFragment.substring(textBeforeElement.length + 1, nextTextFragment.length);
             newTextFragmentStartIndex = newTextFragmentStartIndex + (textBeforeElement.length ? textBeforeElement.length + 1 : 1);
             if (textBeforeElement.length) {
-                RenderingHelper.renderText(fragment, formatExt, textBeforeElement);
+                const paddingLeft = textBeforeElement.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
+                this.renderText(fragment, formatExt, textBeforeElement, paddingLeft);
             }
             this.attachComponent(fragment, component, customContentService);
         }
         if (nextTextFragment.length) {
-            RenderingHelper.renderText(fragment, formatExt, nextTextFragment);
+            this.renderTextWithSpacingHandling(fragment, formatExt, nextTextFragment, lineInfo);
+        }
+    }
+    static renderTextWithSpacingHandling(fragment, formatExt, textFragment, lineInfo) {
+        const paddingLeft = textFragment.startsWith(' ') && lineInfo.wordSpacing ? lineInfo.wordSpacing : null;
+        if (lineInfo.wordSpacing && textFragment.endsWith(' ')) {
+            this.renderText(fragment, formatExt, textFragment.slice(0, -1), paddingLeft);
+            this.renderText(fragment, formatExt, ' ');
+        }
+        else {
+            this.renderText(fragment, formatExt, textFragment, paddingLeft);
         }
     }
-    static renderText(fragment, formatExt, textFragment) {
+    static renderText(fragment, formatExt, textFragment, paddingLeft = null) {
         const span = document.createElement('span');
         const textStyle = new TextStyleModel({ ...formatExt.textStyle });
         if (textFragment === NEW_LINE_MARKUP) {
@@ -3681,7 +3749,11 @@ class RenderingHelper {
             span.onmouseleave = () => span.classList.remove('hyperlink-hover');
         }
         span.textContent = textFragment;
-        span.setAttribute('style', ContentStyleHelper.getTextStylesString(textStyle));
+        let styleString = ContentStyleHelper.getTextStylesString(textStyle);
+        if (paddingLeft) {
+            styleString += `padding-left:${paddingLeft}px;`;
+        }
+        span.setAttribute('style', styleString);
         fragment.appendChild(span);
     }
     static getTextIndexLengthForInsert(formatExt, fragmentDocumentStartIndex, paragraphDistance, split, paragraphChars) {
@@ -4356,10 +4428,11 @@ class TextLayer {
             const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
                 ? 0
                 : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
-            const lastLineEl = this.renderingHelper.createLineElement(paragraphSettings.textLinesInfo[0], numberingOffsetLeft, this.session.generalProperties.scalingRatio);
+            const lineInfo = paragraphSettings.textLinesInfo[0];
+            const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft, this.session.generalProperties.scalingRatio);
             linesContainerElement.appendChild(lastLineEl);
             const rowDistance = new DistanceModel({ start: startIndex, end: endIndex });
-            this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, this.session.model.breaks);
+            this.renderingHelper.renderContentSimpleLine({ currentElement: this.element, parentNode: lastLineEl }, combinedFormats, rowDistance, this.session.customContentService, this.session.customComponents, lineInfo, this.session.model.breaks);
         }
     }
 }
@@ -5500,6 +5573,36 @@ class TextInput {
     }
 }
 
+class TouchHandler {
+    constructor(container, editor) {
+        this.editor = editor;
+        this.touchStart$ = fromEvent(container, 'touchstart').subscribe((event) => this.onTouchStart(event));
+    }
+    destroy() {
+        this.touchStart$?.unsubscribe();
+        this.endTouch();
+    }
+    onTouchStart(startEvent) {
+        this.lastY = startEvent.touches[0].clientY;
+        this.touchMove$ = fromEvent(document, 'touchmove').subscribe((event) => this.onTouchMove(event));
+        this.touchEnd$ = fromEvent(document, 'touchend').subscribe(() => this.endTouch());
+    }
+    onTouchMove(event) {
+        if (this.lastY === null) {
+            return;
+        }
+        const currentY = event.touches[0].clientY;
+        const deltaY = this.lastY - currentY;
+        this.editor.onScroll(deltaY);
+        this.lastY = currentY;
+    }
+    endTouch() {
+        this.touchMove$?.unsubscribe();
+        this.touchEnd$?.unsubscribe();
+        this.lastY = null;
+    }
+}
+
 class Editor {
     get mainSession() {
         return this.regulatorService.mainSession.session;
@@ -5552,6 +5655,7 @@ class Editor {
         this.textInput = new TextInput(this.mainRenderer.container);
         this.mainRenderer.textarea = this.textInput.input;
         this.mouseHandler = new MouseHandler(this.mainRenderer.container, this);
+        this.touchHandler = new TouchHandler(this.mainRenderer.container, this);
         this.inputHandler = new InputHandler(this.textInput.input, this);
         this.documentHandler = new DocumentHandler(this);
         this.dragAndDrop = new DragAndDrop(this.container.nativeElement);
@@ -5566,6 +5670,7 @@ class Editor {
         this.subscriptions.forEach(s => s?.unsubscribe());
         this.destroyResizeListener();
         this.mouseHandler.destroy();
+        this.touchHandler.destroy();
         this.inputHandler.destroy();
         this.documentHandler.destroy();
         this.dragAndDrop.destroyListeners();
@@ -6103,7 +6208,7 @@ class Editor {
     }
     saveRemoveToHistory(range) {
         const restoreModel = this.session.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
-        const count = restoreModel.endIndex - restoreModel.startIndex;
+        const count = restoreModel.endIndex - restoreModel.startIndex + 1;
         restoreModel.endIndex = restoreModel.startIndex; // this is to restore in position without deleting/replacing anything in range
         this.history.pushDelete(restoreModel);
         this.commandsService.createCommand(SaveCommandsHelper.getDeleteCommand(restoreModel.startIndex, count, this.targets));
@@ -6478,10 +6583,13 @@ class Editor {
         const factor = 0.35;
         const scrollSpeed = 4;
         const deltaY = event.deltaY * factor * scrollSpeed;
-        this.mainRenderer.scrollBy(deltaY);
+        this.onScroll(deltaY);
         event.stopPropagation();
         event.preventDefault();
     }
+    onScroll(deltaY) {
+        this.mainRenderer.scrollBy(deltaY);
+    }
     onDragStart() {
         this.renderer.updateDragAndDropSelection(this.selection.selectedRange);
         this.selection.clearSelection();
@@ -6508,7 +6616,7 @@ class Editor {
     onDragDrop(sourceSession, sourceRange) {
         sourceSession.renderer.clearDragAndDropSelection();
         const sourceStartIndex = sourceSession.session.displayData.positionToIndex(sourceRange.start);
-        const sourceEndIndex = sourceSession.session.displayData.positionToIndex(sourceRange.end);
+        const sourceEndIndex = sourceSession.session.displayData.positionToIndex(sourceRange.end) - 1;
         const targetIndex = this.session.displayData.positionToIndex(this.selection.cursor);
         if (sourceSession.sessionId === this.session.sessionId && sourceStartIndex <= targetIndex && sourceEndIndex >= targetIndex) {
             this.selection.placeSelection(sourceRange.start, sourceRange.end);
@@ -6517,7 +6625,7 @@ class Editor {
         }
         const model = new MoveRangeModel({
             sourceStartIndex,
-            sourceCount: sourceEndIndex - sourceStartIndex,
+            sourceCount: sourceEndIndex - sourceStartIndex + 1,
             targetIndex,
             sourceTargets: this.regulatorService.getTargets(sourceSession),
             targetTargets: this.regulatorService.getCurrentSessionTargets()
@@ -9207,10 +9315,16 @@ class DisplayData extends EventEmitting {
             if (paragraphStyle.alignment === Alignment$1.justify && !isLastLineOfParagraph && wrapTokens.length > 1) {
                 let currentLineWidth = 0;
                 let spaceCount = 0;
-                for (const token of wrapTokens) {
+                for (let i = 0; i < wrapTokens.length; i++) {
+                    const token = wrapTokens[i];
                     currentLineWidth += token.width;
                     if (token.displayValue === DisplayValue.space) {
-                        spaceCount++;
+                        if (i === wrapTokens.length - 1) {
+                            token.displayValue = DisplayValue.trailingSpace;
+                        }
+                        else {
+                            spaceCount++;
+                        }
                     }
                 }
                 const { left, right, firstLine, hanging } = lineInfo.indent;
@@ -9219,6 +9333,7 @@ class DisplayData extends EventEmitting {
                 const whitespaceDeficit = availableWidth - currentLineWidth;
                 if (spaceCount > 0 && whitespaceDeficit > 0) {
                     lineInfo.wordSpacing = whitespaceDeficit / spaceCount;
+                    lineInfo.wordSpacingWidth = whitespaceDeficit;
                 }
             }
             rowInfos.push(lineInfo);
@@ -9569,14 +9684,19 @@ class DisplayData extends EventEmitting {
         const maxRowWidth = contentWidth - indent;
         let sum = 0;
         for (let i = 0; i < displayTokens.length; i++) {
-            if (displayTokens[i].isTab) {
-                displayTokens[i].width = TabHelper.calculateTabWidth(sum, defaultTabWidth);
+            const token = displayTokens[i];
+            const prevToken = i > 0 ? displayTokens[i - 1] : null;
+            if (token.isTab) {
+                token.width = TabHelper.calculateTabWidth(sum, defaultTabWidth);
+            }
+            sum += token.width;
+            if (sum >= maxRowWidth) {
+                return i > 0 ? i - 1 : 0;
             }
-            sum += displayTokens[i].width;
-            if ((i > 0 && (sum >= maxRowWidth || displayTokens[i - 1].breaksLine)) || displayTokens[i].isTable) {
+            if (prevToken?.breaksLine || token.isTable) {
                 return i;
             }
-            if (displayTokens[i].isLineBreak || (i === displayTokens.length - 1 && displayTokens[i].isPageBreak)) {
+            if (token.isLineBreak || (i === displayTokens.length - 1 && token.isPageBreak)) {
                 return i + 1;
             }
         }
@@ -10271,6 +10391,7 @@ class NoderImageComponent extends BaseNoderComponent {
         const imageEl = document.createElement('img');
         imageEl.width = this.width;
         imageEl.height = this.height;
+        imageEl.draggable = false;
         imageEl.src = fileSource;
         return imageEl;
     }
@@ -10381,21 +10502,6 @@ class CellModel {
     }
 }
 
-class ContentOperationsHelper {
-    static removeContent(content, startIndex, count) {
-        return `${content.slice(0, startIndex)}${content.slice(startIndex + count, content.length)}`;
-    }
-    static insertContent(content, text, index) {
-        const before = content.slice(0, index);
-        const after = content.slice(index, content.length);
-        return `${before}${text}${after}`;
-    }
-    static replaceContent(content, startIndex, endIndex, text) {
-        const reduced = this.removeContent(content, startIndex, endIndex - startIndex + 1);
-        return this.insertContent(reduced, text, startIndex);
-    }
-}
-
 class EdgeModel {
     constructor(fields) {
         if (fields) {
@@ -12234,9 +12340,9 @@ class EditSession {
         return endPoint;
     }
     removeMoveRange(moveModel) {
-        const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount;
-        const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, moveModel.sourceStartIndex);
-        const endPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex);
+        const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount - 1;
+        const startPosition = this.displayData.indexToPosition(moveModel.sourceStartIndex, 0);
+        const endPosition = this.displayData.indexToPosition(endIndex + 1, 0);
         const sourceRange = new Range(startPosition, endPosition);
         this.displayData.removeRange(sourceRange);
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tables, moveModel.sourceStartIndex, endIndex);
@@ -12281,8 +12387,9 @@ class EditSession {
     }
     createRestoreFromSlice(paragraphStart, indexInStart, paragraphEnd, indexInEnd) {
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, paragraphStart, indexInStart);
-        const endIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, paragraphEnd, indexInEnd);
-        return ContentsOperationsHelper.GetRestoreFromSlice(this.model, startIndex, endIndex - startIndex);
+        const endIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, paragraphEnd, indexInEnd) - 1;
+        const count = endIndex - startIndex + 1;
+        return ContentsOperationsHelper.GetRestoreFromSlice(this.model, startIndex, count);
     }
     addComponent(customElements, model, componentType) {
         const customElement = this.customContentService.componentService.createComponent(componentType, {
@@ -12726,7 +12833,8 @@ class SelectionLayer {
             let style;
             if (i === 0) {
                 const rangeInfo = this.getRangeInfo(this.session, range);
-                style = this.getMarkerStyle(lineInfo.height, lineInfo.width - rangeInfo.leftPos + lineInfo.paddingLeft + padding, top, rangeInfo.leftPos);
+                const width = lineInfo.width - rangeInfo.leftPos + lineInfo.paddingLeft + padding + (lineInfo.wordSpacingWidth ?? 0);
+                style = this.getMarkerStyle(lineInfo.height, width, top, rangeInfo.leftPos);
             }
             else if (i === textLinesInfo.length - 1) {
                 const lastRowRange = new Range(new CursorParagraph(range.end.row, 0), range.end);
@@ -12734,7 +12842,8 @@ class SelectionLayer {
                 style = this.getMarkerStyle(lineInfo.height, rangeInfo.screenWidth, top, padding + lineInfo.paddingLeft);
             }
             else {
-                style = this.getMarkerStyle(lineInfo.height, lineInfo.width, top, padding + lineInfo.paddingLeft);
+                let width = lineInfo.width + (lineInfo.wordSpacingWidth ?? 0);
+                style = this.getMarkerStyle(lineInfo.height, width, top, padding + lineInfo.paddingLeft);
             }
             this.renderSelection(style);
             top += lineInfo.height + lineInfo.offsetAfter + lineInfo.endPageOffset;