roosterjs 8.52.0 → 8.53.0

package/dist/rooster-amd.js

@@ -7474,6 +7474,7 @@ var ImageSelection = /** @class */ (function () {
                 case 6 /* MouseUp */:
                     var target = event.rawEvent.target;
                     if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement') &&
+                        target.isContentEditable &&
                         event.rawEvent.button === mouseLeftButton) {
                         this.editor.select(target);
                     }
@@ -24055,6 +24056,7 @@ var getGeneratedImageSize_1 = __webpack_require__(/*! ./editInfoUtils/getGenerat
 var Cropper_1 = __webpack_require__(/*! ./imageEditors/Cropper */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Cropper.ts");
 var editInfo_1 = __webpack_require__(/*! ./editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 var Rotator_1 = __webpack_require__(/*! ./imageEditors/Rotator */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Rotator.ts");
+var constants_1 = __webpack_require__(/*! ./constants/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts");
 var tryToConvertGifToPng_1 = __webpack_require__(/*! ./editInfoUtils/tryToConvertGifToPng */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/tryToConvertGifToPng.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var Resizer_1 = __webpack_require__(/*! ./imageEditors/Resizer */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Resizer.ts");
@@ -24093,10 +24095,6 @@ var ImageEditHTMLMap = (_a = {},
  */
 var LIGHT_MODE_BGCOLOR = 'white';
 var DARK_MODE_BGCOLOR = '#333';
-/**
- * The biggest area of image with 4 handles
- */
-var MAX_SMALL_SIZE_IMAGE = 10000;
 /**
  * ImageEdit plugin provides the ability to edit an inline image in editor, including image resizing, rotation and cropping
  */
@@ -24221,9 +24219,11 @@ var ImageEdit = /** @class */ (function () {
                         _this.updateWrapper();
                     }
                     var viewport = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getVisibleViewport();
+                    var isSmall = isASmallImage(targetWidth, targetHeight);
                     if (rotateHandle && rotateCenter && viewport) {
-                        (0, Rotator_1.updateRotateHandlePosition)(viewport, rotateCenter, rotateHandle);
+                        (0, Rotator_1.updateRotateHandleState)(viewport, rotateCenter, rotateHandle, isSmall);
                     }
+                    updateSideHandlesVisibility(resizeHandles, isSmall);
                     updateHandleCursor(resizeHandles, angleRad);
                 }
             }
@@ -24452,7 +24452,7 @@ var ImageEdit = /** @class */ (function () {
                 rotateHandleBackColor: this.editor.isDarkMode()
                     ? DARK_MODE_BGCOLOR
                     : LIGHT_MODE_BGCOLOR,
-                isSmallImage: isASmallImage(this.editInfo),
+                isSmallImage: isASmallImage(this.editInfo.widthPx, this.editInfo.heightPx),
             };
             var htmlData_1 = [(0, Resizer_1.getResizeBordersHTML)(options_1)];
             (0, roosterjs_editor_dom_1.getObjectKeys)(ImageEditHTMLMap).forEach(function (thisOperation) {
@@ -24564,12 +24564,20 @@ function rotateHandles(angleRad, y, x) {
  * @param angleRad The angle that the image was rotated.
  */
 function updateHandleCursor(handles, angleRad) {
-    handles.map(function (handle) {
-        var y = handle.dataset.y;
-        var x = handle.dataset.x;
+    handles.forEach(function (handle) {
+        var _a = handle.dataset, y = _a.y, x = _a.x;
         handle.style.cursor = rotateHandles(angleRad, y, x) + "-resize";
     });
 }
+function updateSideHandlesVisibility(handles, isSmall) {
+    handles.forEach(function (handle) {
+        var _a = handle.dataset, y = _a.y, x = _a.x;
+        var coordinate = (y !== null && y !== void 0 ? y : '') + (x !== null && x !== void 0 ? x : '');
+        var directions = ['n', 's', 'e', 'w'];
+        var isSideHandle = directions.indexOf(coordinate) > -1;
+        handle.style.display = isSideHandle && isSmall ? 'none' : '';
+    });
+}
 /**
  * Check if the current image was resized by the user
  * @param image the current image
@@ -24593,9 +24601,10 @@ function isFixedNumberValue(value) {
     var numberValue = typeof value === 'string' ? parseInt(value) : value;
     return !isNaN(numberValue);
 }
-function isASmallImage(editInfo) {
-    var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx;
-    return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE ? true : false;
+function isASmallImage(widthPx, heightPx) {
+    return widthPx && heightPx && (widthPx < constants_1.MIN_HEIGHT_WIDTH || heightPx < constants_1.MIN_HEIGHT_WIDTH)
+        ? true
+        : false;
 }
 function getColorString(color, isDarkMode) {
     if (typeof color === 'string') {
@@ -24765,6 +24774,40 @@ function loadImage(img, src, callback) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.MIN_HEIGHT_WIDTH = exports.Ys = exports.Xs = exports.CROP_HANDLE_WIDTH = exports.CROP_HANDLE_SIZE = exports.ROTATE_HANDLE_TOP = exports.ROTATE_WIDTH = exports.ROTATION = exports.ROTATE_ICON_MARGIN = exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.DEG_PER_RAD = exports.ROTATE_GAP = exports.ROTATE_SIZE = exports.RESIZE_HANDLE_MARGIN = exports.RESIZE_HANDLE_SIZE = void 0;
+exports.RESIZE_HANDLE_SIZE = 10;
+exports.RESIZE_HANDLE_MARGIN = 6;
+exports.ROTATE_SIZE = 32;
+exports.ROTATE_GAP = 15;
+exports.DEG_PER_RAD = 180 / Math.PI;
+exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.ROTATE_SIZE / 2 + exports.ROTATE_GAP;
+exports.ROTATE_ICON_MARGIN = 8;
+exports.ROTATION = {
+    sw: 0,
+    nw: 90,
+    ne: 180,
+    se: 270,
+};
+exports.ROTATE_WIDTH = 1;
+exports.ROTATE_HANDLE_TOP = exports.ROTATE_GAP + exports.RESIZE_HANDLE_MARGIN;
+exports.CROP_HANDLE_SIZE = 22;
+exports.CROP_HANDLE_WIDTH = 7;
+exports.Xs = ['w', '', 'e'];
+exports.Ys = ['s', '', 'n'];
+exports.MIN_HEIGHT_WIDTH = 3 * exports.RESIZE_HANDLE_SIZE + 2 * exports.RESIZE_HANDLE_MARGIN;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/applyChange.ts":
@@ -25190,17 +25233,8 @@ exports.tryToConvertGifToPng = tryToConvertGifToPng;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getCropHTML = exports.Cropper = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts");
 var Resizer_1 = __webpack_require__(/*! ./Resizer */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Resizer.ts");
-var CROP_HANDLE_SIZE = 22;
-var CROP_HANDLE_WIDTH = 7;
-var Xs = ['w', 'e'];
-var Ys = ['s', 'n'];
-var ROTATION = {
-    sw: 0,
-    nw: 90,
-    ne: 180,
-    se: 270,
-};
 /**
  * @internal
  * Crop handle for DragAndDropHelper
@@ -25272,7 +25306,7 @@ function getCropHTML() {
         children: [],
     };
     if (containerHTML) {
-        Xs.forEach(function (x) { return Ys.forEach(function (y) { var _a; return (_a = containerHTML.children) === null || _a === void 0 ? void 0 : _a.push(getCropHTMLInternal(x, y)); }); });
+        constants_1.Xs.forEach(function (x) { return constants_1.Ys.forEach(function (y) { var _a; return (_a = containerHTML.children) === null || _a === void 0 ? void 0 : _a.push(getCropHTMLInternal(x, y)); }); });
     }
     return [containerHTML, overlayHTML, overlayHTML, overlayHTML, overlayHTML];
 }
@@ -25280,11 +25314,11 @@ exports.getCropHTML = getCropHTML;
 function getCropHTMLInternal(x, y) {
     var leftOrRight = x == 'w' ? 'left' : 'right';
     var topOrBottom = y == 'n' ? 'top' : 'bottom';
-    var rotation = ROTATION[y + x];
+    var rotation = constants_1.ROTATION[y + x];
     return {
         tag: 'div',
         className: "r_cropH" /* CropHandle */,
-        style: "position:absolute;pointer-events:auto;cursor:" + y + x + "-resize;" + leftOrRight + ":0;" + topOrBottom + ":0;width:" + CROP_HANDLE_SIZE + "px;height:" + CROP_HANDLE_SIZE + "px;transform:rotate(" + rotation + "deg)",
+        style: "position:absolute;pointer-events:auto;cursor:" + y + x + "-resize;" + leftOrRight + ":0;" + topOrBottom + ":0;width:" + constants_1.CROP_HANDLE_SIZE + "px;height:" + constants_1.CROP_HANDLE_SIZE + "px;transform:rotate(" + rotation + "deg)",
         dataset: { x: x, y: y },
         children: getCropHandleHTML(),
     };
@@ -25300,8 +25334,8 @@ function getCropHandleHTML() {
 }
 function getCropHandleHTMLInternal(layer, dir) {
     var position = dir == 0
-        ? "right:" + layer + "px;height:" + (CROP_HANDLE_WIDTH - layer * 2) + "px;"
-        : "top:" + layer + "px;width:" + (CROP_HANDLE_WIDTH - layer * 2) + "px;";
+        ? "right:" + layer + "px;height:" + (constants_1.CROP_HANDLE_WIDTH - layer * 2) + "px;"
+        : "top:" + layer + "px;width:" + (constants_1.CROP_HANDLE_WIDTH - layer * 2) + "px;";
     var bgColor = layer == 0 ? 'white' : 'black';
     return {
         tag: 'div',
@@ -25323,15 +25357,12 @@ function getCropHandleHTMLInternal(layer, dir) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getResizeBordersHTML = exports.getSideResizeHTML = exports.getCornerResizeHTML = exports.doubleCheckResize = exports.rotateCoordinate = exports.Resizer = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts");
 var HandleTypes;
 (function (HandleTypes) {
     HandleTypes[HandleTypes["SquareHandles"] = 0] = "SquareHandles";
     HandleTypes[HandleTypes["CircularHandlesCorner"] = 1] = "CircularHandlesCorner";
 })(HandleTypes || (HandleTypes = {}));
-var RESIZE_HANDLE_SIZE = 10;
-var RESIZE_HANDLE_MARGIN = 3;
-var Xs = ['w', '', 'e'];
-var Ys = ['s', '', 'n'];
 /**
  * @internal
  * The resize drag and drop handler
@@ -25435,8 +25466,8 @@ exports.doubleCheckResize = doubleCheckResize;
 function getCornerResizeHTML(_a, onShowResizeHandle) {
     var resizeBorderColor = _a.borderColor;
     var result = [];
-    Xs.forEach(function (x) {
-        return Ys.forEach(function (y) {
+    constants_1.Xs.forEach(function (x) {
+        return constants_1.Ys.forEach(function (y) {
             var elementData = (x == '') == (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
@@ -25456,13 +25487,10 @@ exports.getCornerResizeHTML = getCornerResizeHTML;
  * Get HTML for resize handles on the sides
  */
 function getSideResizeHTML(_a, onShowResizeHandle) {
-    var resizeBorderColor = _a.borderColor, isSmallImage = _a.isSmallImage;
-    if (isSmallImage) {
-        return null;
-    }
+    var resizeBorderColor = _a.borderColor;
     var result = [];
-    Xs.forEach(function (x) {
-        return Ys.forEach(function (y) {
+    constants_1.Xs.forEach(function (x) {
+        return constants_1.Ys.forEach(function (y) {
             var elementData = (x == '') != (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
@@ -25512,10 +25540,10 @@ function getResizeHandleHTML(x, y, borderColor, handleTypes) {
 }
 var setHandleStyle = {
     0: function (direction, leftOrRight, topOrBottom, borderColor) {
-        return "position:relative;width:" + RESIZE_HANDLE_SIZE + "px;height:" + RESIZE_HANDLE_SIZE + "px;background-color: " + borderColor + ";cursor:" + direction + "-resize;" + topOrBottom + ":-" + RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + RESIZE_HANDLE_MARGIN + "px;";
+        return "position:relative;width:" + constants_1.RESIZE_HANDLE_SIZE + "px;height:" + constants_1.RESIZE_HANDLE_SIZE + "px;background-color: " + borderColor + ";cursor:" + direction + "-resize;" + topOrBottom + ":-" + constants_1.RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + constants_1.RESIZE_HANDLE_MARGIN + "px;";
     },
     1: function (direction, leftOrRight, topOrBottom) {
-        return "position:relative;width:" + RESIZE_HANDLE_SIZE + "px;height:" + RESIZE_HANDLE_SIZE + "px;background-color: #FFFFFF;cursor:" + direction + "-resize;" + topOrBottom + ":-" + RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + RESIZE_HANDLE_MARGIN + "px;border-radius:100%;border: 2px solid #bfbfbf;box-shadow: 0px 0.36316px 1.36185px rgba(100, 100, 100, 0.25);";
+        return "position:relative;width:" + constants_1.RESIZE_HANDLE_SIZE + "px;height:" + constants_1.RESIZE_HANDLE_SIZE + "px;background-color: #FFFFFF;cursor:" + direction + "-resize;" + topOrBottom + ":-" + constants_1.RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + constants_1.RESIZE_HANDLE_MARGIN + "px;border-radius:100%;border: 2px solid #bfbfbf;box-shadow: 0px 0.36316px 1.36185px rgba(100, 100, 100, 0.25);";
     },
 };
 
@@ -25531,13 +25559,9 @@ var setHandleStyle = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getRotateHTML = exports.updateRotateHandlePosition = exports.Rotator = void 0;
+exports.getRotateHTML = exports.updateRotateHandleState = exports.Rotator = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var ROTATE_SIZE = 32;
-var ROTATE_GAP = 15;
-var DEG_PER_RAD = 180 / Math.PI;
-var DEFAULT_ROTATE_HANDLE_HEIGHT = ROTATE_SIZE / 2 + ROTATE_GAP;
-var ROTATE_ICON_MARGIN = 8;
+var constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts");
 /**
  * @internal
  * The rotate drag and drop handler
@@ -25549,14 +25573,14 @@ exports.Rotator = {
     },
     onDragging: function (_a, e, base, deltaX, deltaY) {
         var editInfo = _a.editInfo, options = _a.options;
-        var distance = editInfo.heightPx / 2 + DEFAULT_ROTATE_HANDLE_HEIGHT;
+        var distance = editInfo.heightPx / 2 + constants_1.DEFAULT_ROTATE_HANDLE_HEIGHT;
         var newX = distance * Math.sin(base.angleRad) + deltaX;
         var newY = distance * Math.cos(base.angleRad) - deltaY;
         var angleInRad = Math.atan2(newX, newY);
         if (!e.altKey && options && options.minRotateDeg !== undefined) {
-            var angleInDeg = angleInRad * DEG_PER_RAD;
+            var angleInDeg = angleInRad * constants_1.DEG_PER_RAD;
             var adjustedAngleInDeg = Math.round(angleInDeg / options.minRotateDeg) * options.minRotateDeg;
-            angleInRad = adjustedAngleInDeg / DEG_PER_RAD;
+            angleInRad = adjustedAngleInDeg / constants_1.DEG_PER_RAD;
         }
         if (editInfo.angleRad != angleInRad) {
             editInfo.angleRad = angleInRad;
@@ -25572,51 +25596,60 @@ exports.Rotator = {
  * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
  * Fix it by reduce the distance from image to rotate handle
  */
-function updateRotateHandlePosition(editorRect, rotateCenter, rotateHandle) {
-    var rotateHandleRect = rotateHandle.getBoundingClientRect();
-    if (rotateHandleRect) {
-        var top_1 = rotateHandleRect.top - editorRect.top;
-        var left = rotateHandleRect.left - editorRect.left;
-        var right = rotateHandleRect.right - editorRect.right;
-        var bottom = rotateHandleRect.bottom - editorRect.bottom;
-        var adjustedDistance = Number.MAX_SAFE_INTEGER;
-        if (top_1 <= 0) {
-            adjustedDistance = top_1;
-        }
-        else if (left <= 0) {
-            adjustedDistance = left;
-        }
-        else if (right >= 0) {
-            adjustedDistance = right;
-        }
-        else if (bottom >= 0) {
-            adjustedDistance = bottom;
+function updateRotateHandleState(editorRect, rotateCenter, rotateHandle, isSmallImage) {
+    if (isSmallImage) {
+        rotateCenter.style.display = 'none';
+        rotateHandle.style.display = 'none';
+        return;
+    }
+    else {
+        rotateCenter.style.display = '';
+        rotateHandle.style.display = '';
+        var rotateHandleRect = rotateHandle.getBoundingClientRect();
+        if (rotateHandleRect) {
+            var top_1 = rotateHandleRect.top - editorRect.top;
+            var left = rotateHandleRect.left - editorRect.left;
+            var right = rotateHandleRect.right - editorRect.right;
+            var bottom = rotateHandleRect.bottom - editorRect.bottom;
+            var adjustedDistance = Number.MAX_SAFE_INTEGER;
+            if (top_1 <= 0) {
+                adjustedDistance = top_1;
+            }
+            else if (left <= 0) {
+                adjustedDistance = left;
+            }
+            else if (right >= 0) {
+                adjustedDistance = right;
+            }
+            else if (bottom >= 0) {
+                adjustedDistance = bottom;
+            }
+            var rotateGap = Math.max(Math.min(constants_1.ROTATE_GAP, adjustedDistance), 0);
+            var rotateTop = Math.max(Math.min(constants_1.ROTATE_SIZE, adjustedDistance - rotateGap), 0);
+            rotateCenter.style.top = -rotateGap - constants_1.RESIZE_HANDLE_MARGIN + 'px';
+            rotateCenter.style.height = rotateGap + 'px';
+            rotateHandle.style.top = -rotateTop + 'px';
         }
-        var rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
-        var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
-        rotateCenter.style.top = -rotateGap + 'px';
-        rotateCenter.style.height = rotateGap + 'px';
-        rotateHandle.style.top = -rotateTop + 'px';
     }
 }
-exports.updateRotateHandlePosition = updateRotateHandlePosition;
+exports.updateRotateHandleState = updateRotateHandleState;
 /**
  * @internal
  * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
  */
 function getRotateHTML(_a) {
     var borderColor = _a.borderColor, rotateHandleBackColor = _a.rotateHandleBackColor;
-    var handleLeft = ROTATE_SIZE / 2;
+    var handleLeft = constants_1.ROTATE_SIZE / 2;
     return [
         {
             tag: 'div',
             className: "r_rotateC" /* RotateCenter */,
-            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + -ROTATE_GAP + "px;height:" + ROTATE_GAP + "px;",
+            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + -constants_1.ROTATE_HANDLE_TOP + "px;height:" + constants_1.ROTATE_GAP + "px;margin-left:" + -constants_1.ROTATE_WIDTH + "px;",
             children: [
                 {
                     tag: 'div',
                     className: "r_rotateH" /* RotateHandle */,
-                    style: "position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + ROTATE_SIZE + "px;height:" + ROTATE_SIZE + "px;left:-" + handleLeft + "px;cursor:move;top:" + -ROTATE_SIZE + "px;",
+                    style: "position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + constants_1.ROTATE_SIZE + "px;height:" + constants_1.ROTATE_SIZE + "px;left:-" + (handleLeft + constants_1.ROTATE_WIDTH) + "px;cursor:move;top:" + -constants_1.ROTATE_SIZE + "px;",
                     children: [getRotateIconHTML(borderColor)],
                 },
             ],
@@ -25629,7 +25662,7 @@ function getRotateIconHTML(borderColor) {
     return {
         tag: 'svg',
         namespace: 'http://www.w3.org/2000/svg',
-        style: "width:16px;height:16px;margin: " + ROTATE_ICON_MARGIN + "px " + ROTATE_ICON_MARGIN + "px",
+        style: "width:16px;height:16px;margin: " + constants_1.ROTATE_ICON_MARGIN + "px " + constants_1.ROTATE_ICON_MARGIN + "px",
         children: [
             {
                 tag: 'path',
@@ -28505,7 +28538,11 @@ var RIGHT_CLICK = 3;
  */
 function handleMouseDownEvent(event, state, editor) {
     var _a;
-    var _b = event.rawEvent, which = _b.which, shiftKey = _b.shiftKey;
+    var _b = event.rawEvent, which = _b.which, shiftKey = _b.shiftKey, target = _b.target;
+    var table = editor.getElementAtCursor('table', target, event);
+    if (table && !table.isContentEditable) {
+        return;
+    }
     var td = editor.getElementAtCursor(constants_1.TABLE_CELL_SELECTOR);
     if (which == RIGHT_CLICK && state.tableSelection && state.vTable && td) {
         //If the user is right clicking To open context menu
@@ -29151,10 +29188,14 @@ var TableResize = /** @class */ (function () {
      * @param onShowHelperElement An optional callback to allow customize helper element of table resizing.
      * To customize the helper element, add this callback and change the attributes of elementData then it
      * will be picked up by TableResize code
+     * @param anchorContainerSelector An optional selector string to specify the container to host the plugin.
+     * 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
      */
-    function TableResize(onShowHelperElement) {
+    function TableResize(onShowHelperElement, anchorContainerSelector) {
         var _this = this;
         this.onShowHelperElement = onShowHelperElement;
+        this.anchorContainerSelector = anchorContainerSelector;
         this.editor = null;
         this.onMouseMoveDisposer = null;
         this.tableRectMap = null;
@@ -29248,7 +29289,10 @@ var TableResize = /** @class */ (function () {
             this.disposeTableEditor();
         }
         if (!this.tableEditor && table && this.editor && table.rows.length > 0) {
-            this.tableEditor = new TableEditor_1.default(this.editor, table, this.invalidateTableRects, this.onShowHelperElement, e === null || e === void 0 ? void 0 : e.currentTarget);
+            var container = this.anchorContainerSelector
+                ? this.editor.getDocument().querySelector(this.anchorContainerSelector)
+                : undefined;
+            this.tableEditor = new TableEditor_1.default(this.editor, table, this.invalidateTableRects, this.onShowHelperElement, (0, roosterjs_editor_dom_1.safeInstanceOf)(container, 'HTMLElement') ? container : undefined, e === null || e === void 0 ? void 0 : e.currentTarget);
         }
     };
     TableResize.prototype.disposeTableEditor = function () {
@@ -29299,7 +29343,7 @@ var MIN_CELL_WIDTH = 30;
 /**
  * @internal
  */
-function createCellResizer(td, zoomScale, isRTL, isHorizontal, onStart, onEnd, onShowHelperElement) {
+function createCellResizer(td, zoomScale, isRTL, isHorizontal, onStart, onEnd, onShowHelperElement, anchorContainer) {
     var document = td.ownerDocument;
     var createElementData = {
         tag: 'div',
@@ -29307,7 +29351,7 @@ function createCellResizer(td, zoomScale, isRTL, isHorizontal, onStart, onEnd, o
     };
     onShowHelperElement === null || onShowHelperElement === void 0 ? void 0 : onShowHelperElement(createElementData, 'CellResizer');
     var div = (0, roosterjs_editor_dom_1.createElement)(createElementData, document);
-    document.body.appendChild(div);
+    (anchorContainer || document.body).appendChild(div);
     var context = { td: td, isRTL: isRTL, zoomScale: zoomScale, onStart: onStart };
     var setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
     setPosition(context, div);
@@ -29506,12 +29550,13 @@ 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, onShowHelperElement, contentDiv) {
+    function TableEditor(editor, table, onChanged, onShowHelperElement, anchorContainer, contentDiv) {
         var _this = this;
         this.editor = editor;
         this.table = table;
         this.onChanged = onChanged;
         this.onShowHelperElement = onShowHelperElement;
+        this.anchorContainer = anchorContainer;
         this.contentDiv = contentDiv;
         // 1, 2 - Insert a column or a row
         this.horizontalInserter = null;
@@ -29624,7 +29669,7 @@ var TableEditor = /** @class */ (function () {
         if (!firstCellRect) {
             return;
         }
-        //Determine if cursor is on top or side
+        // Determine if cursor is on top or side
         var topOrSide = y <= firstCellRect.top + INSERTER_HOVER_OFFSET
             ? 0 /* top */
             : this.isRTL
@@ -29634,25 +29679,28 @@ var TableEditor = /** @class */ (function () {
                 : x <= firstCellRect.left + INSERTER_HOVER_OFFSET
                     ? 1 /* side */
                     : undefined;
+        var topOrSideBinary = topOrSide ? 1 : 0;
+        // Get whole table rect
+        var tableRect = (0, roosterjs_editor_dom_1.normalizeRect)(this.table.getBoundingClientRect());
         // i is row index, j is column index
         for (var i = 0; i < this.table.rows.length; i++) {
             var tr = this.table.rows[i];
             var j = 0;
             for (; j < tr.cells.length; j++) {
                 var td = tr.cells[j];
-                var tableRect = (0, roosterjs_editor_dom_1.normalizeRect)(this.table.getBoundingClientRect());
                 var tdRect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
                 if (!tdRect || !tableRect) {
                     continue;
                 }
                 // Determine the cell the cursor is in range of
+                // Offset is only used for first row and column
                 var lessThanBottom = y <= tdRect.bottom;
                 var lessThanRight = this.isRTL
-                    ? x <= tdRect.right + INSERTER_HOVER_OFFSET
+                    ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary
                     : x <= tdRect.right;
                 var moreThanLeft = this.isRTL
                     ? x >= tdRect.left
-                    : x >= tdRect.left - INSERTER_HOVER_OFFSET;
+                    : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary;
                 if (lessThanBottom && lessThanRight && moreThanLeft) {
                     var isOnLeftOrRight = this.isRTL
                         ? tdRect.right <= tableRect.right && tdRect.right >= tableRect.right - 1
@@ -29680,6 +29728,7 @@ var TableEditor = /** @class */ (function () {
                         this.setInserterTd(null);
                     }
                     this.setResizingTd(td);
+                    //Cell found
                     break;
                 }
             }
@@ -29687,14 +29736,15 @@ var TableEditor = /** @class */ (function () {
                 break;
             }
         }
+        // Create Selector and Resizer
         this.setEditorFeatures();
     };
     TableEditor.prototype.setEditorFeatures = function () {
         if (!this.tableSelector) {
-            this.tableSelector = (0, TableSelector_1.default)(this.table, this.editor.getZoomScale(), this.editor, this.onSelect, this.getOnMouseOut, this.onShowHelperElement, this.contentDiv);
+            this.tableSelector = (0, TableSelector_1.default)(this.table, this.editor, this.onSelect, this.getOnMouseOut, this.onShowHelperElement, this.contentDiv, this.anchorContainer);
         }
         if (!this.tableResizer) {
-            this.tableResizer = (0, TableResizer_1.default)(this.table, this.editor.getZoomScale(), this.isRTL, this.onStartTableResize, this.onFinishEditing, this.onShowHelperElement);
+            this.tableResizer = (0, TableResizer_1.default)(this.table, this.editor, this.onStartTableResize, this.onFinishEditing, this.onShowHelperElement, this.contentDiv, this.anchorContainer);
         }
     };
     TableEditor.prototype.setResizingTd = function (td) {
@@ -29703,8 +29753,8 @@ var TableEditor = /** @class */ (function () {
         }
         if (!this.horizontalResizer && td) {
             var zoomScale = this.editor.getZoomScale();
-            this.horizontalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.onShowHelperElement);
-            this.verticalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.onShowHelperElement);
+            this.horizontalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.onShowHelperElement, this.anchorContainer);
+            this.verticalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.onShowHelperElement, this.anchorContainer);
         }
     };
     /**
@@ -29717,7 +29767,7 @@ var TableEditor = /** @class */ (function () {
             this.disposeTableInserter();
         }
         if (!this.horizontalInserter && !this.verticalInserter && td) {
-            var newInserter = (0, TableInserter_1.default)(this.editor, td, this.isRTL, !!isHorizontal, this.onInserted, this.getOnMouseOut, this.onShowHelperElement);
+            var newInserter = (0, TableInserter_1.default)(this.editor, td, this.isRTL, !!isHorizontal, this.onInserted, this.getOnMouseOut, this.onShowHelperElement, this.anchorContainer);
             if (isHorizontal) {
                 this.horizontalInserter = newInserter;
             }
@@ -29818,7 +29868,7 @@ var INSERTER_BORDER_SIZE = 1;
 /**
  * @internal
  */
-function createTableInserter(editor, td, isRTL, isHorizontal, onInsert, getOnMouseOut, onShowHelperElement) {
+function createTableInserter(editor, td, isRTL, isHorizontal, onInsert, getOnMouseOut, onShowHelperElement, anchorContainer) {
     var table = editor.getElementAtCursor('table', td);
     var tdRect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
     var viewPort = editor.getVisibleViewport();
@@ -29843,7 +29893,7 @@ function createTableInserter(editor, td, isRTL, isHorizontal, onInsert, getOnMou
             div.style.top = tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
             div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
         }
-        document_1.body.appendChild(div);
+        (anchorContainer || document_1.body).appendChild(div);
         var handler = new TableInsertHandler(div, td, isHorizontal, editor, onInsert, getOnMouseOut);
         return { div: div, featureHandler: handler, node: td };
     }
@@ -29922,8 +29972,14 @@ var MIN_CELL_HEIGHT = 20;
 /**
  * @internal
  */
-function createTableResizer(table, zoomScale, isRTL, onStart, onDragEnd, onShowHelperElement) {
+function createTableResizer(table, editor, onStart, onEnd, onShowHelperElement, contentDiv, anchorContainer) {
+    var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (!isTableBottomVisible(editor, rect, contentDiv)) {
+        return null;
+    }
     var document = table.ownerDocument;
+    var isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(table, 'direction') == 'rtl';
+    var zoomScale = editor.getZoomScale();
     var createElementData = {
         tag: 'div',
         style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
@@ -29932,15 +29988,20 @@ function createTableResizer(table, zoomScale, isRTL, onStart, onDragEnd, onShowH
     var div = (0, roosterjs_editor_dom_1.createElement)(createElementData, document);
     div.style.width = TABLE_RESIZER_LENGTH + "px";
     div.style.height = TABLE_RESIZER_LENGTH + "px";
-    document.body.appendChild(div);
+    (anchorContainer || document.body).appendChild(div);
     var context = {
         isRTL: isRTL,
         table: table,
         zoomScale: zoomScale,
         onStart: onStart,
+        onEnd: onEnd,
+        div: div,
+        editor: editor,
+        contentDiv: contentDiv,
     };
-    setResizeDivPosition(context, div);
-    var featureHandler = new DragAndDropHelper_1.default(div, context, setResizeDivPosition, {
+    setDivPosition(context, div);
+    var featureHandler = new DragAndDropHelper_1.default(div, context, hideResizer, // Resizer is hidden while dragging only
+    {
         onDragStart: onDragStart,
         onDragging: onDragging,
         onDragEnd: onDragEnd,
@@ -30003,7 +30064,15 @@ function onDragging(context, event, initValue, deltaX, deltaY) {
         return false;
     }
 }
-function setResizeDivPosition(context, trigger) {
+function onDragEnd(context, event, initValue) {
+    if (isTableBottomVisible(context.editor, (0, roosterjs_editor_dom_1.normalizeRect)(context.table.getBoundingClientRect()), context.contentDiv)) {
+        context.div.style.visibility = 'visible';
+        setDivPosition(context, context.div);
+    }
+    context.onEnd();
+    return false;
+}
+function setDivPosition(context, trigger) {
     var table = context.table, isRTL = context.isRTL;
     var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (rect) {
@@ -30013,6 +30082,19 @@ function setResizeDivPosition(context, trigger) {
             : rect.right + "px";
     }
 }
+function hideResizer(context, trigger) {
+    trigger.style.visibility = 'hidden';
+}
+function isTableBottomVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if (contentDiv && (0, roosterjs_editor_dom_1.safeInstanceOf)(contentDiv, 'HTMLElement') && visibleViewport && rect) {
+        var containerRect = (0, roosterjs_editor_dom_1.normalizeRect)(contentDiv.getBoundingClientRect());
+        return (!!containerRect &&
+            containerRect.bottom >= rect.bottom &&
+            visibleViewport.bottom >= rect.bottom);
+    }
+    return true;
+}
 
 
 /***/ }),
@@ -30034,11 +30116,12 @@ var TABLE_SELECTOR_ID = '_Table_Selector';
 /**
  * @internal
  */
-function createTableSelector(table, zoomScale, editor, onFinishDragging, getOnMouseOut, onShowHelperElement, contentDiv) {
+function createTableSelector(table, editor, onFinishDragging, getOnMouseOut, onShowHelperElement, contentDiv, anchorContainer) {
     var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (!isTableTopVisible(editor, rect, contentDiv)) {
         return null;
     }
+    var zoomScale = editor.getZoomScale();
     var document = table.ownerDocument;
     var createElementData = {
         tag: 'div',
@@ -30049,28 +30132,29 @@ function createTableSelector(table, zoomScale, editor, onFinishDragging, getOnMo
     div.id = TABLE_SELECTOR_ID;
     div.style.width = TABLE_SELECTOR_LENGTH + "px";
     div.style.height = TABLE_SELECTOR_LENGTH + "px";
-    document.body.appendChild(div);
+    (anchorContainer || document.body).appendChild(div);
     var context = {
         table: table,
         zoomScale: zoomScale,
         rect: rect,
+        isRTL: (0, roosterjs_editor_dom_1.getComputedStyle)(table, 'direction') == 'rtl',
     };
-    setSelectorDivPosition(context, div);
+    setDivPosition(context, div);
     var onDragEnd = function (context, event) {
         if (event.target == div) {
             onFinishDragging(context.table);
         }
         return false;
     };
-    var featureHandler = new TableSelectorFeature(div, context, setSelectorDivPosition, {
+    var featureHandler = new TableSelectorFeature(div, context, setDivPosition, {
         onDragEnd: onDragEnd,
-    }, zoomScale, getOnMouseOut);
+    }, context.zoomScale, getOnMouseOut);
     return { div: div, featureHandler: featureHandler, node: table };
 }
 exports["default"] = createTableSelector;
 var TableSelectorFeature = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(TableSelectorFeature, _super);
-    function TableSelectorFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile) {
+    function TableSelectorFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
         var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
         _this.div = div;
         _this.onMouseOut = getOnMouseOut(div);
@@ -30086,7 +30170,7 @@ var TableSelectorFeature = /** @class */ (function (_super) {
     };
     return TableSelectorFeature;
 }(DragAndDropHelper_1.default));
-function setSelectorDivPosition(context, trigger) {
+function setDivPosition(context, trigger) {
     var rect = context.rect;
     if (rect) {
         trigger.style.top = rect.top - TABLE_SELECTOR_LENGTH + "px";
@@ -31286,6 +31370,16 @@ var CompatibleExperimentalFeatures;
      * @deprecated
      */
     CompatibleExperimentalFeatures["DefaultFormatOnContainer"] = "DefaultFormatOnContainer";
+    /**
+     * @deprecated This feature is always enabled
+     * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
+     */
+    CompatibleExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
+    /**
+     * @deprecated This feature is always enabled
+     * Handle keyboard editing event with Content Model
+     */
+    CompatibleExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     //#endregion
     /**
      * Provide additional Tab Key Features. Requires Text Features Content Editable Features
@@ -31302,14 +31396,6 @@ var CompatibleExperimentalFeatures;
      * is the one closest to the item.
      */
     CompatibleExperimentalFeatures["ReuseAllAncestorListElements"] = "ReuseAllAncestorListElements";
-    /**
-     * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
-     */
-    CompatibleExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
-    /**
-     * Handle keyboard editing event with Content Model
-     */
-    CompatibleExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     /**
      * Delete table with Backspace key with the whole was selected with table selector
      */
@@ -33453,6 +33539,16 @@ var ExperimentalFeatures;
      * @deprecated
      */
     ExperimentalFeatures["DefaultFormatOnContainer"] = "DefaultFormatOnContainer";
+    /**
+     * @deprecated This feature is always enabled
+     * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
+     */
+    ExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
+    /**
+     * @deprecated This feature is always enabled
+     * Handle keyboard editing event with Content Model
+     */
+    ExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     //#endregion
     /**
      * Provide additional Tab Key Features. Requires Text Features Content Editable Features
@@ -33469,14 +33565,6 @@ var ExperimentalFeatures;
      * is the one closest to the item.
      */
     ExperimentalFeatures["ReuseAllAncestorListElements"] = "ReuseAllAncestorListElements";
-    /**
-     * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
-     */
-    ExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
-    /**
-     * Handle keyboard editing event with Content Model
-     */
-    ExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     /**
      * Delete table with Backspace key with the whole was selected with table selector
      */