@talrace/ngx-noder 0.0.28 → 0.0.30

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, NgModule, Inject } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, filter, take, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
@@ -960,6 +960,7 @@ var CommandType;
     CommandType[CommandType["RemoveEdges"] = 28] = "RemoveEdges";
     CommandType[CommandType["RemoveParagraphAndAddNumbering"] = 29] = "RemoveParagraphAndAddNumbering";
     CommandType[CommandType["RestoreParagraphAndAddNumbering"] = 30] = "RestoreParagraphAndAddNumbering";
+    CommandType[CommandType["MoveRange"] = 31] = "MoveRange";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1038,14 +1039,6 @@ class BreakHelper {
     }
 }
 
-class BreakModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class CursorParagraph {
     constructor(row, column) {
         this.row = row;
@@ -1163,6 +1156,46 @@ class DocumentHandler extends BaseHandler {
     }
 }
 
+class DragAndDrop {
+    constructor(editorContainer) {
+        this.editorContainer = editorContainer;
+        this.onMove$ = new Subject();
+        this.onDrop$ = new Subject();
+    }
+    onStart(session, range) {
+        if (this.isDragging) {
+            return;
+        }
+        this.isDragging = true;
+        this.editorContainer.classList.add('drag-and-drop-progress');
+        this.sourceSession = session;
+        this.sourceRange = range;
+        this.initListeners();
+    }
+    destroyListeners() {
+        this.mouseMove$?.unsubscribe();
+        this.mouseUp$?.unsubscribe();
+    }
+    onEnd() {
+        this.destroyListeners();
+        if (!this.isDragging) {
+            return;
+        }
+        this.isDragging = false;
+        this.editorContainer.classList.remove('drag-and-drop-progress');
+        this.onDrop$.next({ sourceSession: this.sourceSession, sourceRange: this.sourceRange });
+    }
+    initListeners() {
+        this.destroyListeners();
+        this.mouseMove$ = fromEvent(document, 'mousemove')
+            .pipe(throttleTime(20))
+            .subscribe(event => this.onMove$.next(event));
+        this.mouseUp$ = fromEvent(document, 'mouseup')
+            .pipe(take(1))
+            .subscribe(() => this.onEnd());
+    }
+}
+
 var EdgeType;
 (function (EdgeType) {
     EdgeType[EdgeType["Header"] = 0] = "Header";
@@ -1196,6 +1229,12 @@ class FormatHelper {
         }
         return result;
     }
+    static shiftIndexes(formats, offset) {
+        for (const format of formats) {
+            format.startIndex += offset;
+            format.endIndex += offset;
+        }
+    }
 }
 
 class ImageDataModel {
@@ -1217,29 +1256,15 @@ class ImageHelper {
     }
 }
 
-class BordersStyleModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ImageModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.border) {
-                fields.border = new BordersStyleModel(fields.border);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class IndexedElementHelper {
     static sliceSection(elements, startIndex, endIndex) {
         return elements.filter(x => x.insertIndex >= startIndex && x.insertIndex <= endIndex);
     }
+    static shiftIndexes(elements, offset) {
+        for (const element of elements) {
+            element.insertIndex += offset;
+        }
+    }
 }
 
 class InputHandler extends BaseHandler {
@@ -1518,6 +1543,12 @@ class LinkHelper {
     static sliceSection(links, start, end) {
         return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter((link) => link !== null);
     }
+    static shiftIndexes(links, offset) {
+        for (const link of links) {
+            link.startIndex += offset;
+            link.endIndex += offset;
+        }
+    }
     static sliceFormats(links, startIndex, endIndex) {
         const result = [];
         for (const link of links) {
@@ -1608,6 +1639,14 @@ class MouseHandler {
     }
 }
 
+class MoveRangeModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 var Alignment;
 (function (Alignment) {
     Alignment[Alignment["Left"] = 0] = "Left";
@@ -3011,6 +3050,9 @@ class OperationHistory {
         const undoStep = new RestoreNumberingsModel({ numberings, paragraphs });
         this.addToHistory(undoStep, redoStep);
     }
+    pushMoveRange(restore, replace, selection) {
+        this.addToHistory(restore, replace, selection, []);
+    }
     pushReplace(restore, replace) {
         this.addToHistory(restore, replace);
     }
@@ -3046,10 +3088,10 @@ class OperationHistory {
         this.editorService.historyInfo = new OperationsHistoryInfoModel(this.step, this.storage.length - 1);
         return { operation, targets, cursor, anchor };
     }
-    addToHistory(undoStep, redoStep) {
-        const targets = this.regulatorService.getCurrentSessionTargets();
-        const cursor = this.regulatorService.selection.cursor;
-        const anchor = this.regulatorService.selection.anchor;
+    addToHistory(undoStep, redoStep, selection = null, targets = null) {
+        targets ??= this.regulatorService.getCurrentSessionTargets();
+        const cursor = selection?.start ?? this.regulatorService.selection.cursor;
+        const anchor = selection?.end ?? this.regulatorService.selection.anchor;
         this.step++;
         this.storage.splice(this.step, this.storage.length);
         this.storage.push({ undo: undoStep, redo: redoStep, targets, cursor, anchor });
@@ -4567,6 +4609,9 @@ class CommandModel {
             if (fields.insertText) {
                 fields.insertText = new InsertTextModel(fields.insertText);
             }
+            if (fields.moveRange) {
+                fields.moveRange = new MoveRangeModel(fields.moveRange);
+            }
             if (fields.removeEdges) {
                 fields.removeEdges = new RemoveEdgesModel(fields.removeEdges);
             }
@@ -4714,6 +4759,9 @@ class SaveCommandsHelper {
     static getRestoreTableCommand(restoreTable, targets) {
         return new CommandModel({ commandType: CommandType.RestoreTable, restoreTable, targets });
     }
+    static getMoveRangeCommand(model, targets) {
+        return new CommandModel({ commandType: CommandType.MoveRange, moveRange: model, targets });
+    }
     static getReplaceCommand(model, targets) {
         return new CommandModel({ commandType: CommandType.Replace, replace: model, targets });
     }
@@ -5318,14 +5366,6 @@ class Selection {
     }
 }
 
-class TabModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class TextInput {
     constructor(parentElement) {
         this.lastValue = '';
@@ -5433,12 +5473,13 @@ class Editor {
         this.mouseHandler = new MouseHandler(this.mainRenderer.container, this);
         this.inputHandler = new InputHandler(this.textInput.input, this);
         this.documentHandler = new DocumentHandler(this);
+        this.dragAndDrop = new DragAndDrop(this.container.nativeElement);
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -5446,6 +5487,7 @@ class Editor {
         this.mouseHandler.destroy();
         this.inputHandler.destroy();
         this.documentHandler.destroy();
+        this.dragAndDrop.destroyListeners();
         this.selection.blur();
     }
     selectPageDown() {
@@ -5965,6 +6007,10 @@ class Editor {
             this.session.restoreParagraphAndAddNumbering(operation);
             command = SaveCommandsHelper.getRestoreParagraphAndAddNumberingCommand(operation, this.targets);
         }
+        else if (operation instanceof MoveRangeModel) {
+            this.moveRange(operation);
+            command = SaveCommandsHelper.getMoveRangeCommand(operation, []);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -5972,8 +6018,8 @@ class Editor {
         this.renderer.updateCursor();
     }
     saveRemoveToHistory(range) {
-        const restoreModel = this.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
-        const count = restoreModel.endIndex - restoreModel.startIndex + 1;
+        const restoreModel = this.session.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
+        const count = restoreModel.endIndex - restoreModel.startIndex;
         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));
@@ -6073,8 +6119,24 @@ class Editor {
         this.history.pushApplyImageStyle(previous, image);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyImageStyleCommand(image.height, image.width, image.insertIndex, this.targets));
     }
+    saveMoveRangeToHistory(redoModel, sourceSession, sourceRange) {
+        const { sourceStartIndex, sourceCount, targetIndex } = redoModel;
+        const isSameSession = sourceSession.session.sessionId === this.session.sessionId;
+        const isMovingForward = targetIndex > sourceStartIndex;
+        const undoSourceIndex = isSameSession && isMovingForward ? targetIndex - sourceCount : targetIndex;
+        const undoTargetIndex = (isSameSession && isMovingForward) || !isSameSession ? sourceStartIndex : sourceStartIndex + sourceCount;
+        const undoModel = new MoveRangeModel({
+            sourceTargets: this.regulatorService.getCurrentSessionTargets(),
+            targetTargets: this.regulatorService.getTargets(sourceSession),
+            sourceStartIndex: undoSourceIndex,
+            sourceCount,
+            targetIndex: undoTargetIndex
+        });
+        this.history.pushMoveRange(undoModel, redoModel, sourceRange);
+        this.commandsService.createCommand(SaveCommandsHelper.getMoveRangeCommand(redoModel, []));
+    }
     saveReplaceToHistory(range, model) {
-        const restoreModel = this.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
+        const restoreModel = this.session.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
         if (model.insertParagraph) {
             const { startIndex, count } = this.history.getDeleteDataForInsertParagraphs(ContentHelper.getContentFromInsertParagraph(model.insertParagraph), model.insertParagraph, this.session.model.paragraphs);
             restoreModel.startIndex = startIndex;
@@ -6086,20 +6148,6 @@ class Editor {
         this.history.pushReplace(restoreModel, model);
         this.commandsService.createCommand(SaveCommandsHelper.getReplaceCommand(model, this.targets));
     }
-    createRestoreFromSlice(paragraphStart, indexInStart, paragraphEnd, indexInEnd) {
-        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, paragraphStart, indexInStart);
-        const endIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, paragraphEnd, indexInEnd) - 1;
-        const text = this.session.model.content.slice(startIndex, endIndex + 1);
-        const formats = FormatHelper.sliceSection(this.session.model.formats, startIndex, endIndex);
-        const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
-        const images = IndexedElementHelper.sliceSection(this.session.model.images, startIndex, endIndex).map(x => new ImageModel(x));
-        const tables = IndexedElementHelper.sliceSection(this.session.model.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
-        const breaks = IndexedElementHelper.sliceSection(this.session.model.breaks, startIndex, endIndex).map(x => new BreakModel(x));
-        const tabs = IndexedElementHelper.sliceSection(this.session.model.tabs, startIndex, endIndex).map(x => new TabModel(x));
-        const links = LinkHelper.sliceSection(this.session.model.links, startIndex, endIndex).map(x => new LinkModel(x));
-        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links });
-    }
     createCustomElement(data) {
         const insertIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start.row, this.selection.range.start.column);
         const insertElement = new InsertElementModel({ element: new ElementModel({ ...data, insertIndex }) });
@@ -6138,7 +6186,7 @@ class Editor {
     }
     removeParagraphAndSetParagraphToNumbering() {
         const numberingId = this.session.displayData.paragraphs[this.selection.range.start.row].paragraphSettings.numberingData.numberingId;
-        const restoreModel = this.createRestoreFromSlice(this.selection.range.start.row, this.selection.range.start.column, this.selection.range.end.row, this.selection.range.end.column);
+        const restoreModel = this.session.createRestoreFromSlice(this.selection.range.start.row, this.selection.range.start.column, this.selection.range.end.row, this.selection.range.end.column);
         restoreModel.endIndex = restoreModel.startIndex;
         this.removeCustomElementsData();
         this.session.remove(this.selection.range);
@@ -6230,6 +6278,28 @@ class Editor {
         }
     }
     onLeftClick(event) {
+        const position = this.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+        if (!this.selection.isEmpty && this.session.isPositionInRange(position, this.selection.selectedRange)) {
+            this.onSelectionLeftClick(event);
+        }
+        else {
+            this.onShortLeftClick(event);
+        }
+    }
+    onSelectionLeftClick(event) {
+        const timer = setTimeout(() => {
+            mouseUpSubscription.unsubscribe();
+            this.dragAndDrop.onStart(this.regulatorService.currentSession, this.selection.selectedRange);
+            this.onDragStart();
+        }, 200);
+        const mouseUpSubscription = fromEvent(document, 'mouseup')
+            .pipe(take(1))
+            .subscribe(() => {
+            clearTimeout(timer);
+            this.onShortLeftClick(event, true);
+        });
+    }
+    onShortLeftClick(event, isSelectionClick = false) {
         const customElement = this.setCurrentSession(event.target);
         if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
             this.focusCustomComponent(customElement);
@@ -6253,7 +6323,9 @@ class Editor {
                 return;
             }
         }
-        this.mouseHandler.startMousePress(this);
+        if (!isSelectionClick) {
+            this.mouseHandler.startMousePress(this);
+        }
     }
     onDoubleClick(event) {
         const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
@@ -6320,6 +6392,52 @@ class Editor {
         event.stopPropagation();
         event.preventDefault();
     }
+    onDragStart() {
+        this.renderer.updateDragAndDropSelection(this.selection.selectedRange);
+        this.selection.clearSelection();
+        this.onSelectionChange();
+    }
+    onDragMove(event) {
+        this.setCurrentSession(event.target);
+        const cursorPosition = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        if (cursorPosition.row === this.selection.cursor.row && cursorPosition.column === this.selection.cursor.column) {
+            return;
+        }
+        this.selection.placeCursor(cursorPosition);
+        this.renderer.showStaticCursor();
+        this.renderer.updateCursor();
+    }
+    onDragDrop(sourceSession, sourceRange) {
+        sourceSession.renderer.clearDragAndDropSelection();
+        const sourceStartIndex = sourceSession.session.displayData.positionToIndex(sourceRange.start);
+        const sourceEndIndex = sourceSession.session.displayData.positionToIndex(sourceRange.end);
+        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);
+            this.onSelectionChange();
+            return;
+        }
+        const model = new MoveRangeModel({
+            sourceStartIndex,
+            sourceCount: sourceEndIndex - sourceStartIndex,
+            targetIndex,
+            sourceTargets: this.regulatorService.getTargets(sourceSession),
+            targetTargets: this.regulatorService.getCurrentSessionTargets()
+        });
+        this.moveRange(model);
+        this.saveMoveRangeToHistory(model, sourceSession, sourceRange);
+        this.onSelectionChange();
+    }
+    moveRange(model) {
+        this.regulatorService.setTargetedSessionAsCurrent(model.targetTargets);
+        const sourceSession = this.regulatorService.getTargetedSession(model.sourceTargets);
+        const restoreModel = sourceSession.removeMoveRange(model);
+        const movedRange = this.session.restoreMoveRange(restoreModel, model, sourceSession.sessionId);
+        if (sourceSession.sessionId !== this.session.sessionId) {
+            sourceSession.selection.clearSelection();
+        }
+        this.session.selection.placeSelection(movedRange.start, movedRange.end);
+    }
     getLinkModel(event) {
         const isInsideEdge = this.isInsideEdge(event.target);
         const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
@@ -6371,7 +6489,7 @@ class Editor {
         }
     }
     /**
-     * Returns the string of text currently highlighted.
+     * Returns the string of text range.
      */
     getSelectedText() {
         const selectionRange = this.selection.selectedRange;
@@ -6693,6 +6811,12 @@ class Editor {
     removeLeftSubscription() {
         return this.editorService.removeLeft$.subscribe(() => this.removeLeft());
     }
+    dragMoveSubscription() {
+        return this.dragAndDrop.onMove$.subscribe(x => this.onDragMove(x));
+    }
+    dragDropSubscription() {
+        return this.dragAndDrop.onDrop$.subscribe(x => this.onDragDrop(x.sourceSession, x.sourceRange));
+    }
     printSubscription() {
         return this.editorService.print$.subscribe(() => this.onPrint());
     }
@@ -7530,6 +7654,10 @@ class TableSelection {
                 !this.canStartSelection(event.target)) {
                 return;
             }
+            const position = this.regulatorService.currentSession.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+            if (!this.session.selection.isEmpty && this.session.isPositionInRange(position, this.session.selection.selectedRange)) {
+                return;
+            }
             this.overlayService.close();
             this.removeMouseSubscriptions();
             this.clearSelectionInAllCells();
@@ -7988,7 +8116,7 @@ class NoderTableComponent extends BaseNoderComponent {
         let currentTargetIndex = targetIndex;
         while (i < cellsCount) {
             const modelCellIndex = modelTargetIndex + i;
-            if (this.table.rows[rowIndex].cells[modelCellIndex].verticalMerge === VerticalMerge.Merge) {
+            if (rowIndex > 0 && this.table.rows[rowIndex].cells[modelCellIndex].verticalMerge === VerticalMerge.Merge) {
                 const inheritCellData = this.rowMatrix[rowIndex - 1].cells[currentTargetIndex];
                 const count = this.table.rows[rowIndex].cells[modelCellIndex].horizontalMerge ?? 1;
                 this.addAdditionalCells(rowIndex, currentTargetIndex, count, inheritCellData);
@@ -9679,6 +9807,57 @@ class EdgeSessionSourceModel {
     }
 }
 
+class BreakModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class BordersStyleModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ImageModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.border) {
+                fields.border = new BordersStyleModel(fields.border);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TabModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ContentsOperationsHelper {
+    static GetRestoreFromSlice(contents, startIndex, count) {
+        const endIndex = startIndex + count;
+        const text = contents.content.slice(startIndex, endIndex);
+        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));
+        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
+        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
+        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
+        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
+        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
+        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links });
+    }
+}
+
 class CustomComponentHelper {
     static applyRemovingComponents(components, startIndex, endIndex) {
         let firstRemovingIndex = null;
@@ -10962,7 +11141,32 @@ class TabOperationsHelper {
 }
 
 class TargetOperationsHelper {
-    static getContents(contents, target, document) {
+    static getContents(document, targets) {
+        let result = document;
+        for (const target of targets) {
+            result = this.getTargetContents(result, target, document);
+        }
+        return result;
+    }
+    static isSame(first, second) {
+        if (first.length !== second.length) {
+            return false;
+        }
+        for (let i = 0; i < first.length; i++) {
+            const firstElement = first[i];
+            const secondElement = second[i];
+            const areEdgeSame = firstElement.edgeData?.type === secondElement.edgeData?.type &&
+                firstElement.edgeData?.pageType === secondElement.edgeData?.pageType;
+            const areTableCellSame = firstElement.tableCell?.row === secondElement.tableCell?.row &&
+                firstElement.tableCell?.column === secondElement.tableCell?.column &&
+                firstElement.tableCell?.insertIndex === secondElement.tableCell?.insertIndex;
+            if (firstElement.type !== secondElement.type || !areEdgeSame || !areTableCellSame) {
+                return false;
+            }
+        }
+        return true;
+    }
+    static getTargetContents(contents, target, document) {
         switch (target.type) {
             case TargetType.Document:
                 return contents;
@@ -10985,7 +11189,7 @@ class TargetOperationsHelper {
 class OperationsHelper {
     static applyOperations(document, commands) {
         commands.forEach(command => {
-            const contents = this.getTargetContents(document, command);
+            const contents = TargetOperationsHelper.getContents(document, command.targets);
             switch (command.commandType) {
                 case CommandType.InsertText:
                     this.insertText(contents, command.insertText.text, command.insertText.insertIndex);
@@ -11141,15 +11345,42 @@ class OperationsHelper {
                     this.deleteRestore(contents, model.restore);
                     break;
                 }
+                case CommandType.MoveRange: {
+                    const model = command.moveRange;
+                    this.moveRange(document, model);
+                    break;
+                }
             }
         });
     }
-    static getTargetContents(document, command) {
-        let result = document;
-        for (const target of command.targets) {
-            result = TargetOperationsHelper.getContents(result, target, document);
-        }
-        return result;
+    static moveRange(document, model) {
+        const sourceContents = TargetOperationsHelper.getContents(document, model.sourceTargets);
+        const targetContents = TargetOperationsHelper.getContents(document, model.targetTargets);
+        const restore = this.removeMoveRange(sourceContents, model);
+        this.restoreMoveRange(targetContents, model, restore);
+    }
+    static removeMoveRange(sourceContents, model) {
+        const restore = ContentsOperationsHelper.GetRestoreFromSlice(sourceContents, model.sourceStartIndex, model.sourceCount);
+        this.delete(sourceContents, model.sourceStartIndex, model.sourceCount);
+        return restore;
+    }
+    static restoreMoveRange(targetContents, model, restoreContents) {
+        const moveIndex = TargetOperationsHelper.isSame(model.sourceTargets, model.targetTargets) && model.targetIndex > model.sourceStartIndex
+            ? model.targetIndex - model.sourceCount
+            : model.targetIndex;
+        const offset = moveIndex - restoreContents.startIndex;
+        FormatHelper.shiftIndexes(restoreContents.formats, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.paragraphs, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.images, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.tables, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.elements, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.breaks, offset);
+        IndexedElementHelper.shiftIndexes(restoreContents.tabs, offset);
+        LinkHelper.shiftIndexes(restoreContents.links, offset);
+        restoreContents.startIndex = moveIndex;
+        restoreContents.endIndex = moveIndex;
+        this.restore(targetContents, restoreContents);
+        return moveIndex;
     }
     static getContentWidth(document, contents) {
         let contentWidth = 0;
@@ -11907,6 +12138,57 @@ 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 sourceRange = new Range(startPosition, endPosition);
+        this.displayData.removeRange(sourceRange);
+        CustomComponentHelper.applyRemovingComponents(this.customComponents.tables, moveModel.sourceStartIndex, endIndex);
+        CustomComponentHelper.applyRemovingComponents(this.customComponents.images, moveModel.sourceStartIndex, endIndex);
+        CustomComponentHelper.applyRemovingComponents(this.customComponents.customElements, moveModel.sourceStartIndex, endIndex);
+        CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, moveModel.sourceStartIndex, endIndex);
+        const restoreModel = OperationsHelper.removeMoveRange(this.model, moveModel);
+        this.selection.placeCursor(startPosition);
+        this.displayData.resetAllNumberingInfo(startPosition.row);
+        this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
+        if (endPosition.row - startPosition.row && this.type !== 'cell') {
+            this.displayData.updateNumberingsDataOnChange(startPosition.row + 1);
+        }
+        this.applyToolbarStyles();
+        return restoreModel;
+    }
+    restoreMoveRange(restoreModel, moveModel, _sourceSessionId) {
+        const moveIndex = OperationsHelper.restoreMoveRange(this.model, moveModel, restoreModel);
+        const endIndex = moveIndex + moveModel.sourceCount;
+        this.restoreComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, moveIndex, endIndex);
+        this.restoreComponents(this.model.images, this.customComponents.images, NoderImageComponent, moveIndex, endIndex);
+        this.restoreComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, moveIndex, endIndex);
+        this.restoreElementComponents(this.model.elements, moveIndex, endIndex);
+        const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, moveIndex);
+        const endPosition = this.displayData.insertText(startPosition, restoreModel.text);
+        this.displayData.resetAllNumberingInfo(startPosition.row);
+        this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
+        if (endPosition.row - startPosition.row && this.type !== 'cell') {
+            this.displayData.updateNumberingsDataOnChange(endPosition.row);
+        }
+        this.selection.placeCursor(endPosition);
+        this.applyToolbarStyles();
+        const newStartPosition = this.displayData.indexToPosition(moveIndex, 0);
+        const newEndPosition = this.displayData.indexToPosition(moveIndex + moveModel.sourceCount, 0);
+        return new Range(newStartPosition, newEndPosition);
+    }
+    isPositionInRange(position, range) {
+        const positionIndex = this.displayData.positionToIndex(position);
+        const startIndex = this.displayData.positionToIndex(range.start);
+        const endIndex = this.displayData.positionToIndex(range.end);
+        return positionIndex >= startIndex && positionIndex < endIndex;
+    }
+    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);
+    }
     addComponent(customElements, model, componentType) {
         const customElement = this.customContentService.componentService.createComponent(componentType, {
             content: model,
@@ -12103,6 +12385,11 @@ class CursorLayer {
         DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
         this.addAnimationClass();
     }
+    showStaticCursor() {
+        this.isVisible = true;
+        DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
+        this.removeAnimationClass();
+    }
     detectVisibility() {
         const selectionRange = this.session.selection.selectedRange;
         if (selectionRange.isEmpty) {
@@ -12180,7 +12467,15 @@ class CursorLayer {
 
 class RenderChangesModel {
     get any() {
-        return this.cursor || this.full || this.lines || this.marker || this.selection || this.scroll || this.size || this.text;
+        return (this.cursor ||
+            this.full ||
+            this.lines ||
+            this.marker ||
+            this.selection ||
+            this.scroll ||
+            this.size ||
+            this.text ||
+            this.dragAndDrop);
     }
     constructor(fields) {
         this.cursor = false;
@@ -12191,6 +12486,7 @@ class RenderChangesModel {
         this.scroll = false;
         this.size = false;
         this.text = false;
+        this.dragAndDrop = false;
         if (!fields) {
             return;
         }
@@ -12399,6 +12695,7 @@ class Renderer extends EventEmitting {
         this.textLayer = new TextLayer(this.content, this.session);
         this.selectionLayer = new SelectionLayer(this.content, 'text-selection', this.session);
         this.cursorLayer = new CursorLayer(this.content, this.session);
+        this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
@@ -12430,6 +12727,9 @@ class Renderer extends EventEmitting {
         if (changes.marker || changes.selection) {
             this.renderSelection();
         }
+        if (changes.dragAndDrop) {
+            this.renderDragAndDropSelection();
+        }
         this.session.onRendered();
     }
     /**
@@ -12471,6 +12771,23 @@ class Renderer extends EventEmitting {
             this.loop.schedule({ selection: true });
         }
     }
+    updateDragAndDropSelection(range) {
+        if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
+            this.dragAndDropSelectionLayer.marker = null;
+            this.loop.schedule({ dragAndDrop: true });
+        }
+        else if (!range.isEmpty && !this.dragAndDropSelectionLayer.marker?.isEqual(range)) {
+            this.dragAndDropSelectionLayer.marker = range;
+            this.loop.schedule({ dragAndDrop: true });
+        }
+    }
+    clearDragAndDropSelection() {
+        if (!this.dragAndDropSelectionLayer.marker) {
+            return;
+        }
+        this.dragAndDropSelectionLayer.marker = null;
+        this.loop.schedule({ dragAndDrop: true });
+    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
@@ -12501,6 +12818,9 @@ class Renderer extends EventEmitting {
     showCursor() {
         this.cursorLayer.showCursor();
     }
+    showStaticCursor() {
+        this.cursorLayer.showStaticCursor();
+    }
     hideCursor() {
         this.cursorLayer.hideCursor();
     }
@@ -12528,6 +12848,9 @@ class Renderer extends EventEmitting {
         this.selectionLayer.update(this.layerConfig);
         this.cursorLayer.detectVisibility();
     }
+    renderDragAndDropSelection() {
+        this.dragAndDropSelectionLayer.update(this.layerConfig);
+    }
     computeLayerConfig() {
         const displayData = this.session.displayData;
         const maxHeight = displayData.allPagesHeight;
@@ -12728,6 +13051,9 @@ class VirtualRenderer {
         if (changes.marker || changes.selection) {
             this.renderSelection();
         }
+        if (changes.dragAndDrop) {
+            this.renderDragAndDropSelection();
+        }
     }
     /**
      * Triggers a resize of the editor
@@ -12791,6 +13117,12 @@ class VirtualRenderer {
     updateSelection(range) {
         this.renderer.updateSelection(range);
     }
+    updateDragAndDropSelection(range) {
+        this.renderer.updateDragAndDropSelection(range);
+    }
+    clearDragAndDropSelection() {
+        this.renderer.clearDragAndDropSelection();
+    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
@@ -12850,6 +13182,9 @@ class VirtualRenderer {
     hideCursor() {
         this.renderer.hideCursor();
     }
+    showStaticCursor() {
+        this.renderer.showStaticCursor();
+    }
     destroy() {
         DomHelper.removeElement(this.scrollBar.element);
         this.pagesLayer.destroy();
@@ -12928,6 +13263,9 @@ class VirtualRenderer {
     renderSelection() {
         this.renderer.renderSelection();
     }
+    renderDragAndDropSelection() {
+        this.renderer.renderDragAndDropSelection();
+    }
 }
 
 class CustomContentService {