roosterjs 9.2.0 → 9.3.0

package/dist/rooster.js

@@ -2095,7 +2095,7 @@ exports["default"] = getDarkColor;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.formatTextSegmentBeforeSelectionMarker = exports.formatSegmentWithContentModel = exports.formatParagraphWithContentModel = exports.formatImageWithContentModel = exports.formatTableWithContentModel = exports.clearSelectedCells = exports.insertTableColumn = exports.insertTableRow = exports.insertEntity = exports.toggleCode = exports.setParagraphMargin = exports.adjustImageSelection = exports.setImageAltText = exports.adjustLinkSelection = exports.removeLink = exports.insertLink = exports.clearFormat = exports.getFormatState = exports.changeImage = exports.setImageBoxShadow = exports.setImageBorder = exports.setSpacing = exports.toggleBlockQuote = exports.setHeadingLevel = exports.setDirection = exports.setAlignment = exports.setIndentation = exports.setListStartNumber = exports.setListStyle = exports.insertImage = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
-exports.getListAnnounceData = exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = void 0;
+exports.getListAnnounceData = exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = exports.formatInsertPointWithContentModel = void 0;
 var insertTable_1 = __webpack_require__(/*! ./publicApi/table/insertTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/insertTable.ts");
 Object.defineProperty(exports, "insertTable", ({ enumerable: true, get: function () { return insertTable_1.insertTable; } }));
 var formatTable_1 = __webpack_require__(/*! ./publicApi/table/formatTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/formatTable.ts");
@@ -2196,6 +2196,8 @@ var formatSegmentWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/
 Object.defineProperty(exports, "formatSegmentWithContentModel", ({ enumerable: true, get: function () { return formatSegmentWithContentModel_1.formatSegmentWithContentModel; } }));
 var formatTextSegmentBeforeSelectionMarker_1 = __webpack_require__(/*! ./publicApi/utils/formatTextSegmentBeforeSelectionMarker */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts");
 Object.defineProperty(exports, "formatTextSegmentBeforeSelectionMarker", ({ enumerable: true, get: function () { return formatTextSegmentBeforeSelectionMarker_1.formatTextSegmentBeforeSelectionMarker; } }));
+var formatInsertPointWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatInsertPointWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts");
+Object.defineProperty(exports, "formatInsertPointWithContentModel", ({ enumerable: true, get: function () { return formatInsertPointWithContentModel_1.formatInsertPointWithContentModel; } }));
 var setListType_1 = __webpack_require__(/*! ./modelApi/list/setListType */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setListType.ts");
 Object.defineProperty(exports, "setListType", ({ enumerable: true, get: function () { return setListType_1.setListType; } }));
 var setModelListStyle_1 = __webpack_require__(/*! ./modelApi/list/setModelListStyle */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setModelListStyle.ts");
@@ -6664,7 +6666,11 @@ exports.formatInsertPointWithContentModel = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
- * @internal
+ * Format content model at a given insert point with a callback function
+ * @param editor The editor object
+ * @param insertPoint The insert point to format
+ * @param callback The callback function to format the content model
+ * @param options Options to control the behavior of the formatting
  */
 function formatInsertPointWithContentModel(editor, insertPoint, callback, options) {
     var bundle = {
@@ -7531,16 +7537,7 @@ function isCssVariable(value) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.exportContent = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-/**
- * Export string content of editor
- * @param editor The editor to get content from
- * @param mode Mode of content to export. It supports:
- * - HTML: Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity
- * - PlainText: Export plain text content
- * - PlainTextFast: Export plain text using editor's textContent property directly
- * @param options @optional Options for Model to DOM conversion
- */
-function exportContent(editor, mode, options) {
+function exportContent(editor, mode, optionsOrCallbacks) {
     if (mode === void 0) { mode = 'HTML'; }
     if (mode == 'PlainTextFast') {
         return editor.getDOMHelper().getTextContent();
@@ -7548,12 +7545,12 @@ function exportContent(editor, mode, options) {
     else {
         var model = editor.getContentModelCopy('clean');
         if (mode == 'PlainText') {
-            return (0, roosterjs_content_model_dom_1.contentModelToText)(model);
+            return (0, roosterjs_content_model_dom_1.contentModelToText)(model, undefined /*separator*/, optionsOrCallbacks);
         }
         else {
             var doc = editor.getDocument();
             var div = doc.createElement('div');
-            (0, roosterjs_content_model_dom_1.contentModelToDom)(doc, div, model, (0, roosterjs_content_model_dom_1.createModelToDomContext)(undefined /*editorContext*/, options));
+            (0, roosterjs_content_model_dom_1.contentModelToDom)(doc, div, model, (0, roosterjs_content_model_dom_1.createModelToDomContext)(undefined /*editorContext*/, optionsOrCallbacks));
             editor.triggerEvent('extractContentWithDom', { clonedRoot: div }, true /*broadcast*/);
             return div.innerHTML;
         }
@@ -7759,6 +7756,7 @@ function mergePasteContent(editor, eventResult, clipboardData) {
     }, {
         changeSource: roosterjs_content_model_dom_1.ChangeSource.Paste,
         getChangeData: function () { return clipboardData; },
+        scrollCaretIntoView: true,
         apiName: 'paste',
     });
 }
@@ -7806,7 +7804,10 @@ function paste(editor, clipboardData, pasteType) {
     editor.focus();
     var trustedHTMLHandler = editor.getTrustedHTMLHandler();
     if (!clipboardData.modelBeforePaste) {
-        clipboardData.modelBeforePaste = (0, mergePasteContent_1.cloneModelForPaste)(editor.getContentModelCopy('connected'));
+        editor.formatContentModel(function (model) {
+            clipboardData.modelBeforePaste = (0, mergePasteContent_1.cloneModelForPaste)(model);
+            return false;
+        });
     }
     // 1. Prepare variables
     var doc = createDOMFromHtml(clipboardData.rawHtml, trustedHTMLHandler);
@@ -8427,34 +8428,33 @@ var createContentModel = function (core, option, selectionOverride) {
     var _a;
     // Flush all mutations if any, so that we can get an up-to-date Content Model
     (_a = core.cache.textMutationObserver) === null || _a === void 0 ? void 0 : _a.flushMutations();
-    var cachedModel = selectionOverride || (option && !option.tryGetFromCache) ? null : core.cache.cachedModel;
-    if (cachedModel && core.lifecycle.shadowEditFragment) {
-        // When in shadow edit, use a cloned model so we won't pollute the cached one
-        cachedModel = (0, roosterjs_content_model_dom_1.cloneModel)(cachedModel, { includeCachedElement: true });
+    if (!selectionOverride && (!option || option.tryGetFromCache)) {
+        var cachedModel = core.cache.cachedModel;
+        if (cachedModel) {
+            // When in shadow edit, use a cloned model so we won't pollute the cached one
+            return core.lifecycle.shadowEditFragment
+                ? (0, roosterjs_content_model_dom_1.cloneModel)(cachedModel, { includeCachedElement: true })
+                : cachedModel;
+        }
     }
-    if (cachedModel) {
-        return cachedModel;
+    var selection = selectionOverride == 'none'
+        ? undefined
+        : selectionOverride || core.api.getDOMSelection(core) || undefined;
+    var saveIndex = !option && !selectionOverride;
+    var editorContext = core.api.createEditorContext(core, saveIndex);
+    var settings = core.environment.domToModelSettings;
+    var domToModelContext = option
+        ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, settings.builtIn, settings.customized, option)
+        : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(settings.calculated, editorContext);
+    if (selection) {
+        domToModelContext.selection = selection;
     }
-    else {
-        var selection = selectionOverride == 'none'
-            ? undefined
-            : selectionOverride || core.api.getDOMSelection(core) || undefined;
-        var saveIndex = !option && !selectionOverride;
-        var editorContext = core.api.createEditorContext(core, saveIndex);
-        var settings = core.environment.domToModelSettings;
-        var domToModelContext = option
-            ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, settings.builtIn, settings.customized, option)
-            : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(settings.calculated, editorContext);
-        if (selection) {
-            domToModelContext.selection = selection;
-        }
-        var model = (0, roosterjs_content_model_dom_1.domToContentModel)(core.logicalRoot, domToModelContext);
-        if (saveIndex) {
-            core.cache.cachedModel = model;
-            (0, updateCachedSelection_1.updateCachedSelection)(core.cache, selection);
-        }
-        return model;
+    var model = (0, roosterjs_content_model_dom_1.domToContentModel)(core.logicalRoot, domToModelContext);
+    if (saveIndex) {
+        core.cache.cachedModel = model;
+        (0, updateCachedSelection_1.updateCachedSelection)(core.cache, selection);
     }
+    return model;
 };
 exports.createContentModel = createContentModel;
 
@@ -8574,7 +8574,7 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  */
 var formatContentModel = function (core, formatter, options, domToModelOptions) {
     var _a;
-    var _b = options || {}, apiName = _b.apiName, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, changeSource = _b.changeSource, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride;
+    var _b = options || {}, apiName = _b.apiName, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, changeSource = _b.changeSource, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride, scrollCaretIntoView = _b.scrollCaretIntoView;
     var model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     var context = {
         newEntities: [],
@@ -8599,6 +8599,11 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
                 (_a = core.api.setContentModel(core, model, hasFocus ? undefined : { ignoreSelection: true }, // If editor did not have focus before format, do not set focus after format
                 onNodeCreated)) !== null && _a !== void 0 ? _a : undefined;
             handlePendingFormat(core, context, selection);
+            if (selection && scrollCaretIntoView) {
+                var selectionRoot = (0, roosterjs_content_model_dom_1.getSelectionRootNode)(selection);
+                var rootElement = selectionRoot && core.domHelper.findClosestElementAncestor(selectionRoot);
+                rootElement === null || rootElement === void 0 ? void 0 : rootElement.scrollIntoView();
+            }
             var eventData = {
                 eventType: 'contentChanged',
                 contentModel: clearModelCache ? undefined : model,
@@ -9291,7 +9296,7 @@ var TABLE_ID = 'table';
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 var TABLE_CSS_RULE = 'background-color:#C6C6C6!important;';
 var CARET_CSS_RULE = 'caret-color: transparent';
-var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important';
+var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;';
 var SELECTION_SELECTOR = '*::selection';
 /**
  * @internal
@@ -9309,9 +9314,12 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     try {
         switch (selection === null || selection === void 0 ? void 0 : selection.type) {
             case 'image':
-                var image = selection.image;
-                core.selection.selection = selection;
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID)]);
+                var image = ensureImageHasSpanParent(selection.image);
+                core.selection.selection = {
+                    type: 'image',
+                    image: image,
+                };
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["span:has(>img#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID) + ")"]);
                 core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
                 setRangeSelection(doc, image, false /* collapse */);
                 break;
@@ -9442,6 +9450,18 @@ function setRangeSelection(doc, element, collapse) {
         (0, addRangeToSelection_1.addRangeToSelection)(doc, range, isReverted);
     }
 }
+function ensureImageHasSpanParent(image) {
+    var parent = image.parentElement;
+    if (parent &&
+        (0, roosterjs_content_model_dom_1.isNodeOfType)(parent, 'ELEMENT_NODE') &&
+        (0, roosterjs_content_model_dom_1.isElementOfType)(parent, 'span') &&
+        parent.firstChild == image &&
+        parent.lastChild == image) {
+        return image;
+    }
+    (0, roosterjs_content_model_dom_1.wrap)(image.ownerDocument, image, 'span');
+    return image;
+}
 
 
 /***/ }),
@@ -12992,6 +13012,11 @@ var UndoPlugin = /** @class */ (function () {
             case 'beforeKeyboardEditing':
                 this.onBeforeKeyboardEditing(event.rawEvent);
                 break;
+            case 'mouseDown':
+                if (this.state.snapshotsManager.hasNewContent) {
+                    this.addUndoSnapshot();
+                }
+                break;
         }
     };
     UndoPlugin.prototype.onKeyDown = function (editor, evt) {
@@ -13189,9 +13214,6 @@ var Editor = /** @class */ (function () {
     /**
      * Create Content Model from DOM tree in this editor
      * @param mode What kind of Content Model we want. Currently we support the following values:
-     * - connected: Returns a connect Content Model object. "Connected" means if there is any entity inside editor, the returned Content Model will
-     * contain the same wrapper element for entity. This option should only be used in some special cases. In most cases we should use "disconnected"
-     * to get a fully disconnected Content Model so that any change to the model will not impact editor content.
      * - disconnected: Returns a disconnected clone of Content Model from editor which you can do any change on it and it won't impact the editor content.
      * If there is any entity in editor, the returned object will contain cloned copy of entity wrapper element.
      * If editor is in dark mode, the cloned entity will be converted back to light mode.
@@ -13201,10 +13223,7 @@ var Editor = /** @class */ (function () {
     Editor.prototype.getContentModelCopy = function (mode) {
         var core = this.getCore();
         switch (mode) {
-            case 'connected':
-                return core.api.createContentModel(core, {
-                    tryGetFromCache: true, // Pass an option here to force disable save index
-                });
+            case 'connected': // Get a connected model is deprecated. Now we will always return disconnected model
             case 'disconnected':
                 return (0, roosterjs_content_model_dom_1.cloneModel)(core.api.createContentModel(core, {
                     processorOverride: {
@@ -25135,7 +25154,8 @@ function removeUnnecessarySpan(root) {
     for (var child = root.firstChild; child;) {
         if ((0, isNodeOfType_1.isNodeOfType)(child, 'ELEMENT_NODE') &&
             child.tagName == 'SPAN' &&
-            child.attributes.length == 0) {
+            child.attributes.length == 0 &&
+            !isImageSpan(child)) {
             var node = child;
             var refNode = child.nextSibling;
             child = child.nextSibling;
@@ -25152,6 +25172,11 @@ function removeUnnecessarySpan(root) {
     }
 }
 exports.removeUnnecessarySpan = removeUnnecessarySpan;
+var isImageSpan = function (child) {
+    return ((0, isNodeOfType_1.isNodeOfType)(child.firstChild, 'ELEMENT_NODE') &&
+        child.firstChild.tagName == 'IMG' &&
+        child.firstChild == child.lastChild);
+};
 
 
 /***/ }),
@@ -25290,65 +25315,84 @@ exports.stackFormat = stackFormat;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.contentModelToText = void 0;
 var TextForHR = '________________________________________';
+var defaultCallbacks = {
+    onDivider: function (divider) { return (divider.tagName == 'hr' ? TextForHR : ''); },
+    onEntityBlock: function () { return ''; },
+    onEntitySegment: function (entity) { var _a; return (_a = entity.wrapper.textContent) !== null && _a !== void 0 ? _a : ''; },
+    onGeneralSegment: function (segment) { var _a; return (_a = segment.element.textContent) !== null && _a !== void 0 ? _a : ''; },
+    onImage: function () { return ' '; },
+    onText: function (text) { return text.text; },
+    onParagraph: function () { return true; },
+    onTable: function () { return true; },
+    onBlockGroup: function () { return true; },
+};
 /**
  * Convert Content Model to plain text
  * @param model The source Content Model
  * @param [separator='\r\n'] The separator string used for connect lines
+ * @param callbacks  Callbacks to customize the behavior of contentModelToText function
  */
-function contentModelToText(model, separator) {
+function contentModelToText(model, separator, callbacks) {
     if (separator === void 0) { separator = '\r\n'; }
     var textArray = [];
-    contentModelToTextArray(model, textArray);
+    var fullCallbacks = Object.assign({}, defaultCallbacks, callbacks);
+    contentModelToTextArray(model, textArray, fullCallbacks);
     return textArray.join(separator);
 }
 exports.contentModelToText = contentModelToText;
-function contentModelToTextArray(group, textArray) {
-    group.blocks.forEach(function (block) {
-        switch (block.blockType) {
-            case 'Paragraph':
-                var text_1 = '';
-                block.segments.forEach(function (segment) {
-                    switch (segment.segmentType) {
-                        case 'Br':
+function contentModelToTextArray(group, textArray, callbacks) {
+    if (callbacks.onBlockGroup(group)) {
+        group.blocks.forEach(function (block) {
+            switch (block.blockType) {
+                case 'Paragraph':
+                    if (callbacks.onParagraph(block)) {
+                        var text_1 = '';
+                        block.segments.forEach(function (segment) {
+                            switch (segment.segmentType) {
+                                case 'Br':
+                                    textArray.push(text_1);
+                                    text_1 = '';
+                                    break;
+                                case 'Entity':
+                                    text_1 += callbacks.onEntitySegment(segment);
+                                    break;
+                                case 'General':
+                                    text_1 += callbacks.onGeneralSegment(segment);
+                                    break;
+                                case 'Text':
+                                    text_1 += callbacks.onText(segment);
+                                    break;
+                                case 'Image':
+                                    text_1 += callbacks.onImage(segment);
+                                    break;
+                            }
+                        });
+                        if (text_1) {
                             textArray.push(text_1);
-                            text_1 = '';
-                            break;
-                        case 'Entity':
-                            text_1 += segment.wrapper.textContent || '';
-                            break;
-                        case 'General':
-                            text_1 += segment.element.textContent || '';
-                            break;
-                        case 'Text':
-                            text_1 += segment.text;
-                            break;
-                        case 'Image':
-                            text_1 += ' ';
-                            break;
+                        }
                     }
-                });
-                if (text_1) {
-                    textArray.push(text_1);
-                }
-                break;
-            case 'Divider':
-                textArray.push(block.tagName == 'hr' ? TextForHR : '');
-                break;
-            case 'Entity':
-                textArray.push('');
-                break;
-            case 'Table':
-                block.rows.forEach(function (row) {
-                    return row.cells.forEach(function (cell) {
-                        contentModelToTextArray(cell, textArray);
-                    });
-                });
-                break;
-            case 'BlockGroup':
-                contentModelToTextArray(block, textArray);
-                break;
-        }
-    });
+                    break;
+                case 'Divider':
+                    textArray.push(callbacks.onDivider(block));
+                    break;
+                case 'Entity':
+                    textArray.push(callbacks.onEntityBlock(block));
+                    break;
+                case 'Table':
+                    if (callbacks.onTable(block)) {
+                        block.rows.forEach(function (row) {
+                            return row.cells.forEach(function (cell) {
+                                contentModelToTextArray(cell, textArray, callbacks);
+                            });
+                        });
+                    }
+                    break;
+                case 'BlockGroup':
+                    contentModelToTextArray(block, textArray, callbacks);
+                    break;
+            }
+        });
+    }
 }
 
 
@@ -27139,6 +27183,7 @@ function keyboardDelete(editor, rawEvent) {
             rawEvent: rawEvent,
             changeSource: roosterjs_content_model_dom_1.ChangeSource.Keyboard,
             getChangeData: function () { return rawEvent.which; },
+            scrollCaretIntoView: true,
             apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',
         });
     }
@@ -27231,6 +27276,7 @@ function keyboardInput(editor, rawEvent) {
                 return false;
             }
         }, {
+            scrollCaretIntoView: true,
             rawEvent: rawEvent,
         });
         return true;
@@ -27730,7 +27776,7 @@ var HyperlinkPlugin = /** @class */ (function () {
      */
     HyperlinkPlugin.prototype.onPluginEvent = function (event) {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c;
         var matchedLink;
         if (event.eventType == 'keyDown') {
             var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
@@ -27775,6 +27821,9 @@ var HyperlinkPlugin = /** @class */ (function () {
                 }
             });
         }
+        else if (event.eventType == 'contentChanged') {
+            (_c = this.domHelper) === null || _c === void 0 ? void 0 : _c.setDomAttribute('title', null /*value*/);
+        }
     };
     HyperlinkPlugin.prototype.runWithHyperlink = function (node, callback) {
         var _a;
@@ -30583,11 +30632,13 @@ var TableEditPlugin = /** @class */ (function () {
      * The container must not be affected by transform: scale(), otherwise the position calculation will be wrong.
      * If not specified, the plugin will be inserted in document.body
      * @param onTableEditorCreated An optional callback to customize the Table Editors elements when created.
+     * @param disableFeatures An optional array of TableEditFeatures to disable
      */
-    function TableEditPlugin(anchorContainerSelector, onTableEditorCreated) {
+    function TableEditPlugin(anchorContainerSelector, onTableEditorCreated, disableFeatures) {
         var _this = this;
         this.anchorContainerSelector = anchorContainerSelector;
         this.onTableEditorCreated = onTableEditorCreated;
+        this.disableFeatures = disableFeatures;
         this.editor = null;
         this.onMouseMoveDisposer = null;
         this.tableRectMap = null;
@@ -30696,7 +30747,7 @@ var TableEditPlugin = /** @class */ (function () {
             var container = this.anchorContainerSelector
                 ? this.editor.getDocument().querySelector(this.anchorContainerSelector)
                 : undefined;
-            this.tableEditor = new TableEditor_1.TableEditor(this.editor, table, this.invalidateTableRects, (0, roosterjs_content_model_dom_1.isNodeOfType)(container, 'ELEMENT_NODE') ? container : undefined, event === null || event === void 0 ? void 0 : event.currentTarget, this.onTableEditorCreated);
+            this.tableEditor = new TableEditor_1.TableEditor(this.editor, table, this.invalidateTableRects, (0, roosterjs_content_model_dom_1.isNodeOfType)(container, 'ELEMENT_NODE') ? container : undefined, event === null || event === void 0 ? void 0 : event.currentTarget, this.onTableEditorCreated, this.disableFeatures);
         }
     };
     TableEditPlugin.prototype.disposeTableEditor = function () {
@@ -30781,7 +30832,7 @@ var TOP_OR_SIDE;
  * When set a different current table or change current TD, we need to update these areas
  */
 var TableEditor = /** @class */ (function () {
-    function TableEditor(editor, table, onChanged, anchorContainer, contentDiv, onTableEditorCreated) {
+    function TableEditor(editor, table, onChanged, anchorContainer, contentDiv, onTableEditorCreated, disableFeatures) {
         var _this = this;
         var _a;
         this.editor = editor;
@@ -30790,6 +30841,7 @@ var TableEditor = /** @class */ (function () {
         this.anchorContainer = anchorContainer;
         this.contentDiv = contentDiv;
         this.onTableEditorCreated = onTableEditorCreated;
+        this.disableFeatures = disableFeatures;
         // 1, 2 - Insert a column or a row
         this.horizontalInserter = null;
         this.verticalInserter = null;
@@ -30801,9 +30853,9 @@ var TableEditor = /** @class */ (function () {
         // 6 - Move as well as select whole table
         this.tableMover = null;
         this.range = null;
-        this.onEditorCreated = function (editorType, element) {
+        this.onEditorCreated = function (featureType, element) {
             var _a;
-            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, editorType, element);
+            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, featureType, element);
             var onMouseOut = element && _this.getOnMouseOut(element);
             if (onMouseOut) {
                 element.addEventListener('mouseout', onMouseOut);
@@ -30834,6 +30886,16 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.onStartResize();
         };
+        this.onStartTableMove = function () {
+            _this.isCurrentlyEditing = true;
+            _this.disposeTableResizer();
+            _this.disposeTableInserter();
+            _this.disposeCellResizers();
+        };
+        this.onEndTableMove = function () {
+            _this.disposeTableMover();
+            return _this.onFinishEditing();
+        };
         this.onInserted = function () {
             _this.disposeTableResizer();
             _this.onFinishEditing();
@@ -30864,7 +30926,8 @@ var TableEditor = /** @class */ (function () {
                     ev.relatedTarget != feature &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(_this.contentDiv, 'ELEMENT_NODE') &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(ev.relatedTarget, 'ELEMENT_NODE') &&
-                    !(_this.contentDiv == ev.relatedTarget)) {
+                    !(_this.contentDiv == ev.relatedTarget) &&
+                    !_this.isEditing()) {
                     _this.dispose();
                 }
             };
@@ -30935,7 +30998,8 @@ var TableEditor = /** @class */ (function () {
                     if (i === 0 && topOrSide == 0 /* top */) {
                         var center = (tdRect.left + tdRect.right) / 2;
                         var isOnRightHalf = this.isRTL ? x < center : x > center;
-                        this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
+                        !this.isFeatureDisabled('VerticalTableInserter') &&
+                            this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
                     }
                     else if (j === 0 && topOrSide == 1 /* side */) {
                         var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
@@ -30947,14 +31011,15 @@ var TableEditor = /** @class */ (function () {
                             : this.isRTL
                                 ? tdAboveRect.right === tdRect.right
                                 : tdAboveRect.left === tdRect.left;
-                        this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
-                            ? tdAbove
-                            : td, true /*isHorizontal*/);
+                        !this.isFeatureDisabled('HorizontalTableInserter') &&
+                            this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
+                                ? tdAbove
+                                : td, true /*isHorizontal*/);
                     }
                     else {
                         this.setInserterTd(null);
                     }
-                    this.setResizingTd(td);
+                    !this.isFeatureDisabled('CellResizer') && this.setResizingTd(td);
                     //Cell found
                     break;
                 }
@@ -30967,10 +31032,12 @@ var TableEditor = /** @class */ (function () {
         this.setEditorFeatures();
     };
     TableEditor.prototype.setEditorFeatures = function () {
-        if (!this.tableMover) {
-            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, this.onSelect, this.contentDiv, this.anchorContainer, this.onEditorCreated);
+        var disableSelector = this.isFeatureDisabled('TableSelector');
+        var disableMovement = this.isFeatureDisabled('TableMover');
+        if (!this.tableMover && !(disableSelector && disableMovement)) {
+            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, disableSelector ? function () { } : this.onSelect, this.onStartTableMove, this.onEndTableMove, this.contentDiv, this.anchorContainer, this.onEditorCreated, disableMovement);
         }
-        if (!this.tableResizer) {
+        if (!this.tableResizer && !this.isFeatureDisabled('TableResizer')) {
             this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer, this.onTableEditorCreated);
         }
     };
@@ -31042,6 +31109,10 @@ var TableEditor = /** @class */ (function () {
         }
         this.editor.takeSnapshot();
     };
+    TableEditor.prototype.isFeatureDisabled = function (feature) {
+        var _a;
+        return (_a = this.disableFeatures) === null || _a === void 0 ? void 0 : _a.includes(feature);
+    };
     return TableEditor;
 }());
 exports.TableEditor = TableEditor;
@@ -31058,12 +31129,20 @@ exports.TableEditor = TableEditor;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createCellResizer = void 0;
+exports.createCellResizer = exports.VERTICAL_RESIZER_ID = exports.HORIZONTAL_RESIZER_ID = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var CELL_RESIZER_WIDTH = 4;
+/**
+ * @internal
+ */
+exports.HORIZONTAL_RESIZER_ID = 'horizontalResizer';
+/**
+ * @internal
+ */
+exports.VERTICAL_RESIZER_ID = 'verticalResizer';
 /**
  * @internal
  */
@@ -31205,7 +31284,7 @@ function setHorizontalPosition(context, trigger) {
     var td = context.td;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'horizontalResizer';
+        trigger.id = exports.HORIZONTAL_RESIZER_ID;
         trigger.style.top = rect.bottom - CELL_RESIZER_WIDTH + 'px';
         trigger.style.left = rect.left + 'px';
         trigger.style.width = rect.right - rect.left + 'px';
@@ -31216,7 +31295,7 @@ function setVerticalPosition(context, trigger) {
     var td = context.td, isRTL = context.isRTL;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'verticalResizer';
+        trigger.id = exports.VERTICAL_RESIZER_ID;
         trigger.style.top = rect.top + 'px';
         trigger.style.left = (isRTL ? rect.left : rect.right) - CELL_RESIZER_WIDTH + 1 + 'px';
         trigger.style.width = CELL_RESIZER_WIDTH + 'px';
@@ -31240,13 +31319,13 @@ exports.disposeTableEditFeature = void 0;
 /**
  * @internal
  */
-function disposeTableEditFeature(resizer) {
+function disposeTableEditFeature(feature) {
     var _a, _b, _c;
-    if (resizer) {
-        (_a = resizer.featureHandler) === null || _a === void 0 ? void 0 : _a.dispose();
-        resizer.featureHandler = null;
-        (_c = (_b = resizer.div) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(resizer.div);
-        resizer.div = null;
+    if (feature) {
+        (_a = feature.featureHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+        feature.featureHandler = null;
+        (_c = (_b = feature.div) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(feature.div);
+        feature.div = null;
     }
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;
@@ -31263,7 +31342,7 @@ exports.disposeTableEditFeature = disposeTableEditFeature;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableInserter = void 0;
+exports.createTableInserter = exports.VERTICAL_INSERTER_ID = exports.HORIZONTAL_INSERTER_ID = void 0;
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var getIntersectedRect_1 = __webpack_require__(/*! ../../../pluginUtils/Rect/getIntersectedRect */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getIntersectedRect.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -31272,6 +31351,14 @@ var INSERTER_COLOR = '#4A4A4A';
 var INSERTER_COLOR_DARK_MODE = 'white';
 var INSERTER_SIDE_LENGTH = 12;
 var INSERTER_BORDER_SIZE = 1;
+/**
+ * @internal
+ */
+exports.HORIZONTAL_INSERTER_ID = 'horizontalInserter';
+/**
+ * @internal
+ */
+exports.VERTICAL_INSERTER_ID = 'verticalInserter';
 /**
  * @internal
  */
@@ -31286,7 +31373,7 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, a
         var div = (0, createElement_1.createElement)(createElementData, document_1);
         if (isHorizontal) {
             // tableRect.left/right is used because the Inserter is always intended to be on the side
-            div.id = 'horizontalInserter';
+            div.id = exports.HORIZONTAL_INSERTER_ID;
             div.style.left = (isRTL
                 ? tableRect.right
                 : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
@@ -31294,7 +31381,7 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, a
             div.firstChild.style.width = tableRect.right - tableRect.left + "px";
         }
         else {
-            div.id = 'verticalInserter';
+            div.id = exports.VERTICAL_INSERTER_ID;
             div.style.left = (isRTL ? tdRect.left - 8 : tdRect.right - 8) + "px";
             // tableRect.top is used because the Inserter is always intended to be on top
             div.style.top = tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
@@ -31384,19 +31471,24 @@ function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableMover = void 0;
+exports.onDragEnd = exports.onDragging = exports.onDragStart = exports.createTableMover = exports.TABLE_MOVER_ID = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TABLE_MOVER_LENGTH = 12;
-var TABLE_MOVER_ID = '_Table_Mover';
 /**
  * @internal
+ */
+exports.TABLE_MOVER_ID = '_Table_Mover';
+var TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';
+/**
+ * @internal
+ * Allows user to move table to another position
  * Contains the function to select whole table
- * Moving behavior not implemented yet
  */
-function createTableMover(table, editor, isRTL, onFinishDragging, contentDiv, anchorContainer, onTableEditorCreated) {
+function createTableMover(table, editor, isRTL, onFinishDragging, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated, disableMovement) {
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (!isTableTopVisible(editor, rect, contentDiv)) {
         return null;
@@ -31405,10 +31497,10 @@ function createTableMover(table, editor, isRTL, onFinishDragging, contentDiv, an
     var document = table.ownerDocument;
     var createElementData = {
         tag: 'div',
-        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',
+        style: 'position: fixed; cursor: move; user-select: none; border: 1px solid #808080',
     };
     var div = (0, createElement_1.createElement)(createElementData, document);
-    div.id = TABLE_MOVER_ID;
+    div.id = exports.TABLE_MOVER_ID;
     div.style.width = TABLE_MOVER_LENGTH + "px";
     div.style.height = TABLE_MOVER_LENGTH + "px";
     (anchorContainer || document.body).appendChild(div);
@@ -31417,24 +31509,28 @@ function createTableMover(table, editor, isRTL, onFinishDragging, contentDiv, an
         zoomScale: zoomScale,
         rect: rect,
         isRTL: isRTL,
+        editor: editor,
+        div: div,
+        onFinishDragging: onFinishDragging,
+        onStart: onStart,
+        onEnd: onEnd,
+        disableMovement: disableMovement,
     };
     setDivPosition(context, div);
-    var onDragEnd = function (context, event) {
-        if (event.target == div) {
-            onFinishDragging(context.table);
-        }
-        return false;
-    };
-    var featureHandler = new TableMoverFeature(div, context, setDivPosition, {
-        onDragEnd: onDragEnd,
-    }, context.zoomScale, onTableEditorCreated);
-    return { div: div, featureHandler: featureHandler, node: table };
+    var featureHandler = new TableMoverFeature(div, context, function () { }, disableMovement
+        ? { onDragEnd: onDragEnd }
+        : {
+            onDragStart: onDragStart,
+            onDragging: onDragging,
+            onDragEnd: onDragEnd,
+        }, context.zoomScale, onTableEditorCreated, editor.getEnvironment().isMobileOrTablet);
+    return { node: table, div: div, featureHandler: featureHandler };
 }
 exports.createTableMover = createTableMover;
 var TableMoverFeature = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(TableMoverFeature, _super);
-    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, onTableEditorCreated) {
-        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale) || this;
+    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, onTableEditorCreated, forceMobile) {
+        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
         _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated('TableMover', div);
         return _this;
     }
@@ -31461,6 +31557,188 @@ function isTableTopVisible(editor, rect, contentDiv) {
     }
     return true;
 }
+function setTableMoverCursor(editor, state, type) {
+    var _a;
+    editor === null || editor === void 0 ? void 0 : editor.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? (_a = 'cursor: ' + type) !== null && _a !== void 0 ? _a : 'move' : null);
+}
+// Get insertion point from coordinate.
+function getNodePositionFromEvent(editor, x, y) {
+    var doc = editor.getDocument();
+    var domHelper = editor.getDOMHelper();
+    if (doc.caretRangeFromPoint) {
+        // Chrome, Edge, Safari, Opera
+        var range = doc.caretRangeFromPoint(x, y);
+        if (range && domHelper.isNodeInEditor(range.startContainer)) {
+            return { node: range.startContainer, offset: range.startOffset };
+        }
+    }
+    if ('caretPositionFromPoint' in doc) {
+        // Firefox
+        var pos = doc.caretPositionFromPoint(x, y);
+        if (pos && domHelper.isNodeInEditor(pos.offsetNode)) {
+            return { node: pos.offsetNode, offset: pos.offset };
+        }
+    }
+    if (doc.elementFromPoint) {
+        // Fallback
+        var element = doc.elementFromPoint(x, y);
+        if (element && domHelper.isNodeInEditor(element)) {
+            return { node: element, offset: 0 };
+        }
+    }
+    return null;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragStart(context) {
+    var _a;
+    context.onStart();
+    var editor = context.editor, table = context.table, div = context.div;
+    setTableMoverCursor(editor, true, 'move');
+    // Create table outline rectangle
+    var trect = table.getBoundingClientRect();
+    var createElementData = {
+        tag: 'div',
+        style: 'position: fixed; user-select: none; border: 1px solid #808080',
+    };
+    var tableRect = (0, createElement_1.createElement)(createElementData, document);
+    tableRect.style.width = trect.width + "px";
+    tableRect.style.height = trect.height + "px";
+    tableRect.style.top = trect.top + "px";
+    tableRect.style.left = trect.left + "px";
+    (_a = div.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(tableRect);
+    // Get current selection
+    var initialSelection = editor.getDOMSelection();
+    // Select first cell of the table
+    editor.setDOMSelection({
+        type: 'table',
+        firstColumn: 0,
+        firstRow: 0,
+        lastColumn: 0,
+        lastRow: 0,
+        table: table,
+    });
+    // Get the table content model
+    var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected')), 1), cmTable = _b[0];
+    // Restore selection
+    editor.setDOMSelection(initialSelection);
+    return {
+        cmTable: cmTable,
+        initialSelection: initialSelection,
+        tableRect: tableRect,
+    };
+}
+exports.onDragStart = onDragStart;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragging(context, event, initValue) {
+    var tableRect = initValue.tableRect;
+    var editor = context.editor;
+    // Move table outline rectangle
+    tableRect.style.top = event.clientY + TABLE_MOVER_LENGTH + "px";
+    tableRect.style.left = event.clientX + TABLE_MOVER_LENGTH + "px";
+    var pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+    if (pos) {
+        var range = editor.getDocument().createRange();
+        range.setStart(pos.node, pos.offset);
+        range.collapse(true);
+        editor.setDOMSelection({ type: 'range', range: range, isReverted: false });
+        return true;
+    }
+    return false;
+}
+exports.onDragging = onDragging;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragEnd(context, event, initValue) {
+    var _a, _b;
+    var editor = context.editor, table = context.table, selectWholeTable = context.onFinishDragging, disableMovement = context.disableMovement;
+    var element = event.target;
+    // Remove table outline rectangle
+    initValue === null || initValue === void 0 ? void 0 : initValue.tableRect.remove();
+    // Reset cursor
+    setTableMoverCursor(editor, false);
+    if (element == context.div) {
+        // Table mover was only clicked, select whole table
+        selectWholeTable(table);
+        context.onEnd();
+        return true;
+    }
+    else {
+        // Check if table was dragged on itself, element is not in editor, or movement is disabled
+        if (table.contains(element) ||
+            !editor.getDOMHelper().isNodeInEditor(element) ||
+            disableMovement) {
+            editor.setDOMSelection((_a = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _a !== void 0 ? _a : null);
+            context.onEnd();
+            return false;
+        }
+        var insertionSuccess_1 = false;
+        // Get position to insert table
+        var insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+        if (insertPosition) {
+            // Move table to new position
+            (0, roosterjs_content_model_api_1.formatInsertPointWithContentModel)(editor, insertPosition, function (model, context, ip) {
+                var _a;
+                // Remove old table
+                var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 2), oldTable = _b[0], path = _b[1];
+                if (oldTable) {
+                    var index = path[0].blocks.indexOf(oldTable);
+                    path[0].blocks.splice(index, 1);
+                }
+                if (ip && (initValue === null || initValue === void 0 ? void 0 : initValue.cmTable)) {
+                    // Insert new table
+                    var doc = (0, roosterjs_content_model_dom_1.createContentModelDocument)();
+                    doc.blocks.push(initValue.cmTable);
+                    insertionSuccess_1 = !!(0, roosterjs_content_model_dom_1.mergeModel)(model, doc, context, {
+                        mergeFormat: 'none',
+                        insertPosition: ip,
+                    });
+                    if (insertionSuccess_1) {
+                        // After mergeModel, the new table should be selected
+                        var finalTable = (_a = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0]) !== null && _a !== void 0 ? _a : initValue.cmTable;
+                        if (finalTable) {
+                            // Add selection marker to the first cell of the table
+                            var FirstCell = finalTable.rows[0].cells[0];
+                            var markerParagraph = FirstCell === null || FirstCell === void 0 ? void 0 : FirstCell.blocks[0];
+                            if ((markerParagraph === null || markerParagraph === void 0 ? void 0 : markerParagraph.blockType) == 'Paragraph') {
+                                var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
+                                markerParagraph.segments.unshift(marker);
+                                (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
+                                (0, roosterjs_content_model_dom_1.setSelection)(FirstCell, marker);
+                            }
+                        }
+                    }
+                    return insertionSuccess_1;
+                }
+            }, {
+                // Select first cell of the old table
+                selectionOverride: {
+                    type: 'table',
+                    firstColumn: 0,
+                    firstRow: 0,
+                    lastColumn: 0,
+                    lastRow: 0,
+                    table: table,
+                },
+                apiName: 'TableMover',
+            });
+        }
+        else {
+            // No movement, restore initial selection
+            editor.setDOMSelection((_b = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _b !== void 0 ? _b : null);
+        }
+        context.onEnd();
+        return insertionSuccess_1;
+    }
+}
+exports.onDragEnd = onDragEnd;
 
 
 /***/ }),
@@ -31474,13 +31752,16 @@ function isTableTopVisible(editor, rect, contentDiv) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableResizer = void 0;
+exports.createTableResizer = exports.TABLE_RESIZER_ID = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TABLE_RESIZER_LENGTH = 12;
-var TABLE_RESIZER_ID = '_Table_Resizer';
+/**
+ * @internal
+ */
+exports.TABLE_RESIZER_ID = '_Table_Resizer';
 /**
  * @internal
  */
@@ -31496,7 +31777,7 @@ function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, an
         style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
     };
     var div = (0, createElement_1.createElement)(createElementData, document);
-    div.id = TABLE_RESIZER_ID;
+    div.id = exports.TABLE_RESIZER_ID;
     div.style.width = TABLE_RESIZER_LENGTH + "px";
     div.style.height = TABLE_RESIZER_LENGTH + "px";
     (anchorContainer || document.body).appendChild(div);
@@ -31720,7 +32001,8 @@ var WatermarkPlugin = /** @class */ (function () {
         if (!editor) {
             return;
         }
-        if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
+        if ((event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||
+            event.eventType == 'compositionEnd') {
             // When input text, editor must not be empty, so we can do hide watermark now without checking content model
             this.showHide(editor, false /*isEmpty*/);
         }
@@ -31801,6 +32083,10 @@ function isModelEmptyFast(model) {
     })) {
         return false; // Has meaningful segments, it is not empty
     }
+    else if ((firstBlock.format.marginRight && parseFloat(firstBlock.format.marginRight) > 0) ||
+        (firstBlock.format.marginLeft && parseFloat(firstBlock.format.marginLeft) > 0)) {
+        return false; // Has margin (indentation is changed), it is not empty
+    }
     else {
         return firstBlock.segments.filter(function (x) { return x.segmentType == 'Br'; }).length <= 1; // If there are more than one BR, it is not empty, otherwise it is empty
     }