roosterjs 8.53.0 → 8.55.0

package/dist/rooster.js

@@ -2725,7 +2725,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Get element based Format State at cursor
  * @param editor The editor instance
  * @param event (Optional) The plugin event, it stores the event cached data for looking up.
- * In this function the event cache is used to get list state and header level. If not passed,
+ * In this function the event cache is used to get list state and heading level. If not passed,
  * it will query the node within selection to get the info
  * @returns An ElementBasedFormatState object
  */
@@ -2739,17 +2739,19 @@ function getElementBasedFormatState(editor, event) {
         var endingBlock = editor.getBlockElementAtNode(range.endContainer);
         multiline = endingBlock && startingBlock ? !endingBlock.equals(startingBlock) : false;
     }
-    var headerTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', undefined /*startFrom*/, event));
+    var headingTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', undefined /*startFrom*/, event));
     var table = editor.queryElements('table', 1 /* OnSelection */)[0];
     var tableFormat = table ? (0, roosterjs_editor_dom_1.getTableFormatInfo)(table) : undefined;
-    var hasHeader = (table === null || table === void 0 ? void 0 : table.rows[0])
+    var hasTableHeader = (table === null || table === void 0 ? void 0 : table.rows[0])
         ? (0, roosterjs_editor_dom_1.toArray)(table.rows[0].cells).every(function (cell) { return (0, roosterjs_editor_dom_1.getTagOfNode)(cell) == 'TH'; })
         : undefined;
+    var headingLevel = (headingTag && parseInt(headingTag[1])) || 0;
     return {
         isBullet: listTag == 'UL',
         isNumbering: listTag == 'OL',
         isMultilineSelection: multiline,
-        headerLevel: (headerTag && parseInt(headerTag[1])) || 0,
+        headingLevel: headingLevel,
+        headerLevel: headingLevel,
         canUnlink: !!editor.queryElements('a[href]', 1 /* OnSelection */)[0],
         canAddImageAltText: !!editor.queryElements('img', 1 /* OnSelection */)[0],
         isBlockQuote: !!editor.queryElements('blockquote', 1 /* OnSelection */)[0],
@@ -2757,7 +2759,7 @@ function getElementBasedFormatState(editor, event) {
         isCodeBlock: !!editor.queryElements('pre>code', 1 /* OnSelection */)[0],
         isInTable: !!table,
         tableFormat: tableFormat || {},
-        tableHasHeader: hasHeader,
+        tableHasHeader: hasTableHeader,
         canMergeTableCell: canMergeTableCell(editor),
     };
 }
@@ -2768,7 +2770,7 @@ exports.getElementBasedFormatState = getElementBasedFormatState;
  * bold, italic, underline, font name, font size, etc.
  * @param editor The editor instance
  * @param event (Optional) The plugin event, it stores the event cached data for looking up.
- * In this function the event cache is used to get list state and header level. If not passed,
+ * In this function the event cache is used to get list state and heading level. If not passed,
  * it will query the node within selection to get the info
  * @returns The format state at cursor
  */
@@ -3294,6 +3296,66 @@ function setFontSize(editor, fontSize) {
 exports["default"] = setFontSize;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/format/setHeadingLevel.ts":
+/*!*********************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/format/setHeadingLevel.ts ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.toggleHeader = void 0;
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * Set heading level at selection
+ * @param editor The editor instance
+ * @param level The heading level, can be a number from 0 to 6, in which 1 ~ 6 refers to
+ * the HTML heading element <H1> to <H6>, 0 means no heading
+ * if passed in param is outside the range, will be rounded to nearest number in the range
+ */
+function setHeadingLevel(editor, level) {
+    level = Math.min(Math.max(Math.round(level), 0), 6);
+    (0, formatUndoSnapshot_1.default)(editor, function () {
+        editor.focus();
+        var wrapped = false;
+        editor.queryElements('H1,H2,H3,H4,H5,H6', 1 /* OnSelection */, function (heading) {
+            if (!wrapped) {
+                editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, '<DIV>');
+                wrapped = true;
+            }
+            var div = editor.getDocument().createElement('div');
+            (0, roosterjs_editor_dom_1.moveChildNodes)(div, heading);
+            editor.replaceNode(heading, div);
+        });
+        if (level > 0) {
+            var traverser = editor.getSelectionTraverser();
+            var blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.currentBlockElement;
+            var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer({
+                cssStyleCallbacks: {
+                    'font-size': function () { return false; },
+                },
+            });
+            while (blockElement) {
+                var element = blockElement.collapseToSingleElement();
+                sanitizer.sanitize(element);
+                blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.getNextBlockElement();
+            }
+            editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, "<H" + level + ">");
+        }
+    }, 'toggleHeader');
+}
+exports["default"] = setHeadingLevel;
+/**
+ * @deprecated Use setHeadingLevel instead
+ * Keep this for compatibility only, will be removed in next major release
+ */
+exports.toggleHeader = setHeadingLevel;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/format/setImageAltText.ts":
@@ -3638,60 +3700,6 @@ function toggleCodeBlock(editor, styler) {
 exports["default"] = toggleCodeBlock;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-api/lib/format/toggleHeader.ts":
-/*!******************************************************************!*\
-  !*** ./packages/roosterjs-editor-api/lib/format/toggleHeader.ts ***!
-  \******************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * Toggle header at selection
- * @param editor The editor instance
- * @param level The header level, can be a number from 0 to 6, in which 1 ~ 6 refers to
- * the HTML header element &lt;H1&gt; to &lt;H6&gt;, 0 means no header
- * if passed in param is outside the range, will be rounded to nearest number in the range
- */
-function toggleHeader(editor, level) {
-    level = Math.min(Math.max(Math.round(level), 0), 6);
-    (0, formatUndoSnapshot_1.default)(editor, function () {
-        editor.focus();
-        var wrapped = false;
-        editor.queryElements('H1,H2,H3,H4,H5,H6', 1 /* OnSelection */, function (header) {
-            if (!wrapped) {
-                editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, '<DIV>');
-                wrapped = true;
-            }
-            var div = editor.getDocument().createElement('div');
-            (0, roosterjs_editor_dom_1.moveChildNodes)(div, header);
-            editor.replaceNode(header, div);
-        });
-        if (level > 0) {
-            var traverser = editor.getSelectionTraverser();
-            var blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.currentBlockElement;
-            var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer({
-                cssStyleCallbacks: {
-                    'font-size': function () { return false; },
-                },
-            });
-            while (blockElement) {
-                var element = blockElement.collapseToSingleElement();
-                sanitizer.sanitize(element);
-                blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.getNextBlockElement();
-            }
-            editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, "<H" + level + ">");
-        }
-    }, 'toggleHeader');
-}
-exports["default"] = toggleHeader;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/format/toggleItalic.ts":
@@ -3866,7 +3874,7 @@ exports["default"] = toggleUnderline;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.experimentCommitListChains = exports.commitListChains = exports.blockFormat = exports.toggleListType = exports.applyCellShading = exports.toggleHeader = exports.toggleUnderline = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleCodeBlock = exports.toggleBlockQuote = exports.setOrderedListNumbering = exports.toggleNumbering = exports.toggleItalic = exports.toggleBullet = exports.toggleBold = exports.changeCapitalization = exports.setIndentation = exports.setImageAltText = exports.setFontSize = exports.setFontName = exports.setDirection = exports.setTextColor = exports.setBackgroundColor = exports.setAlignment = exports.rotateElement = exports.replaceWithNode = exports.removeLink = exports.formatTable = exports.editTable = exports.insertTable = exports.insertImage = exports.insertEntity = exports.getElementBasedFormatState = exports.getFormatState = exports.createLink = exports.clearFormat = exports.clearBlockFormat = exports.FONT_SIZES = exports.changeFontSize = void 0;
+exports.experimentCommitListChains = exports.commitListChains = exports.blockFormat = exports.toggleListType = exports.applyCellShading = exports.toggleHeader = exports.setHeadingLevel = exports.toggleUnderline = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleCodeBlock = exports.toggleBlockQuote = exports.setOrderedListNumbering = exports.toggleNumbering = exports.toggleItalic = exports.toggleBullet = exports.toggleBold = exports.changeCapitalization = exports.setIndentation = exports.setImageAltText = exports.setFontSize = exports.setFontName = exports.setDirection = exports.setTextColor = exports.setBackgroundColor = exports.setAlignment = exports.rotateElement = exports.replaceWithNode = exports.removeLink = exports.formatTable = exports.editTable = exports.insertTable = exports.insertImage = exports.insertEntity = exports.getElementBasedFormatState = exports.getFormatState = exports.createLink = exports.clearFormat = exports.clearBlockFormat = exports.FONT_SIZES = exports.changeFontSize = void 0;
 var changeFontSize_1 = __webpack_require__(/*! ./format/changeFontSize */ "./packages/roosterjs-editor-api/lib/format/changeFontSize.ts");
 Object.defineProperty(exports, "changeFontSize", ({ enumerable: true, get: function () { return changeFontSize_1.default; } }));
 Object.defineProperty(exports, "FONT_SIZES", ({ enumerable: true, get: function () { return changeFontSize_1.FONT_SIZES; } }));
@@ -3935,8 +3943,9 @@ var toggleSuperscript_1 = __webpack_require__(/*! ./format/toggleSuperscript */
 Object.defineProperty(exports, "toggleSuperscript", ({ enumerable: true, get: function () { return toggleSuperscript_1.default; } }));
 var toggleUnderline_1 = __webpack_require__(/*! ./format/toggleUnderline */ "./packages/roosterjs-editor-api/lib/format/toggleUnderline.ts");
 Object.defineProperty(exports, "toggleUnderline", ({ enumerable: true, get: function () { return toggleUnderline_1.default; } }));
-var toggleHeader_1 = __webpack_require__(/*! ./format/toggleHeader */ "./packages/roosterjs-editor-api/lib/format/toggleHeader.ts");
-Object.defineProperty(exports, "toggleHeader", ({ enumerable: true, get: function () { return toggleHeader_1.default; } }));
+var setHeadingLevel_1 = __webpack_require__(/*! ./format/setHeadingLevel */ "./packages/roosterjs-editor-api/lib/format/setHeadingLevel.ts");
+Object.defineProperty(exports, "setHeadingLevel", ({ enumerable: true, get: function () { return setHeadingLevel_1.default; } }));
+Object.defineProperty(exports, "toggleHeader", ({ enumerable: true, get: function () { return setHeadingLevel_1.toggleHeader; } }));
 var applyCellShading_1 = __webpack_require__(/*! ./table/applyCellShading */ "./packages/roosterjs-editor-api/lib/table/applyCellShading.ts");
 Object.defineProperty(exports, "applyCellShading", ({ enumerable: true, get: function () { return applyCellShading_1.default; } }));
 var toggleListType_1 = __webpack_require__(/*! ./utils/toggleListType */ "./packages/roosterjs-editor-api/lib/utils/toggleListType.ts");
@@ -4977,8 +4986,10 @@ function createFragmentFromClipboardData(core, clipboardData, position, pasteAsT
         // Paste text
         (0, roosterjs_editor_dom_1.handleTextPaste)(text, position, fragment);
     }
-    // Step 4: Trigger BeforePasteEvent so that plugins can do proper change before paste
-    core.api.triggerEvent(core, event, true /*broadcast*/);
+    // Step 4: Trigger BeforePasteEvent so that plugins can do proper change before paste, when the type of paste is different than Plain Text
+    if (event.pasteType !== 1 /* AsPlainText */) {
+        core.api.triggerEvent(core, event, true /*broadcast*/);
+    }
     // Step 5. Sanitize the fragment before paste to make sure the content is safe
     (0, roosterjs_editor_dom_1.sanitizePasteContent)(event, position);
     return fragment;
@@ -6811,6 +6822,14 @@ var DOMEventPlugin = /** @class */ (function () {
         var _a;
         this.editor = null;
         this.disposer = null;
+        this.onDragStart = function (e) {
+            var _a;
+            var dragEvent = e;
+            var element = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getElementAtCursor('*', dragEvent.target);
+            if (element && !element.isContentEditable) {
+                dragEvent.preventDefault();
+            }
+        };
         this.onDrop = function () {
             var _a;
             (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.runAsync(function (editor) {
@@ -6933,7 +6952,8 @@ var DOMEventPlugin = /** @class */ (function () {
                         rawEvent: rawEvent,
                     });
                 },
-                // 4. Drop event
+                // 4. Drag and Drop event
+                dragstart: this.onDragStart,
                 drop: this.onDrop,
                 // 5. Focus management
                 focus: this.onFocus
@@ -7139,7 +7159,6 @@ var EntityPlugin = /** @class */ (function () {
     function EntityPlugin() {
         var _this = this;
         this.editor = null;
-        this.disposer = null;
         this.handleCutEvent = function (event) {
             var _a;
             var range = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getSelectionRange();
@@ -7147,14 +7166,6 @@ var EntityPlugin = /** @class */ (function () {
                 _this.checkRemoveEntityForRange(event);
             }
         };
-        this.onDragStart = function (e) {
-            var _a, _b;
-            var dragEvent = e;
-            var entityWrapper = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), dragEvent.target);
-            if (entityWrapper && ((_b = (0, roosterjs_editor_dom_1.getEntityFromElement)(entityWrapper)) === null || _b === void 0 ? void 0 : _b.isReadonly)) {
-                dragEvent.preventDefault();
-            }
-        };
         this.state = {
             entityMap: {},
         };
@@ -7171,15 +7182,11 @@ var EntityPlugin = /** @class */ (function () {
      */
     EntityPlugin.prototype.initialize = function (editor) {
         this.editor = editor;
-        this.disposer = this.editor.addDomEventHandler('dragstart', this.onDragStart);
     };
     /**
      * Dispose this plugin
      */
     EntityPlugin.prototype.dispose = function () {
-        var _a;
-        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.disposer = null;
         this.editor = null;
         this.state.entityMap = {};
     };
@@ -9721,10 +9728,12 @@ var EditorBase = /** @class */ (function () {
     /**
      * Transform the given node and all its child nodes to dark mode color if editor is in dark mode
      * @param node The node to transform
+     * @param direction The transform direction. @default ColorTransformDirection.LightToDark
      */
-    EditorBase.prototype.transformToDarkColor = function (node) {
+    EditorBase.prototype.transformToDarkColor = function (node, direction) {
+        if (direction === void 0) { direction = 0 /* LightToDark */; }
         var core = this.getCore();
-        core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
+        core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, direction);
     };
     /**
      * Get a darkColorHandler object for this editor.
@@ -17763,6 +17772,17 @@ var VTable = /** @class */ (function () {
                         }
                     }
                 }
+                for (var col = 0; col < _this.cells[rowIndex].length; col++) {
+                    if (!_this.cells[rowIndex][col]) {
+                        _this.cells[rowIndex][col] = {
+                            td: null,
+                            spanLeft: false,
+                            spanAbove: false,
+                            width: undefined,
+                            height: undefined,
+                        };
+                    }
+                }
             });
             this.formatInfo = (0, tableFormatInfo_1.getTableFormatInfo)(this.table);
             if (normalizeSize) {
@@ -24180,7 +24200,7 @@ var ImageEdit = /** @class */ (function () {
                 var cropHandles = getEditElements(wrapper, "r_cropH" /* CropHandle */);
                 // Cropping and resizing will show different UI, so check if it is cropping here first
                 _this.isCropping = cropContainers.length == 1 && cropOverlays.length == 4;
-                var _c = _this.editInfo, angleRad = _c.angleRad, bottomPercent = _c.bottomPercent, leftPercent = _c.leftPercent, rightPercent = _c.rightPercent, topPercent = _c.topPercent;
+                var _c = _this.editInfo, angleRad = _c.angleRad, bottomPercent = _c.bottomPercent, leftPercent = _c.leftPercent, rightPercent = _c.rightPercent, topPercent = _c.topPercent, flippedHorizontal = _c.flippedHorizontal, flippedVertical = _c.flippedVertical;
                 // Width/height of the image
                 var _d = (0, getGeneratedImageSize_1.default)(_this.editInfo, _this.isCropping), targetWidth = _d.targetWidth, targetHeight = _d.targetHeight, originalWidth = _d.originalWidth, originalHeight = _d.originalHeight, visibleWidth = _d.visibleWidth, visibleHeight = _d.visibleHeight;
                 var marginHorizontal = (targetWidth - visibleWidth) / 2;
@@ -24199,6 +24219,8 @@ var ImageEdit = /** @class */ (function () {
                 // Update size of the image
                 _this.clonedImage.style.width = getPx(originalWidth);
                 _this.clonedImage.style.height = getPx(originalHeight);
+                //Update flip direction
+                setFlipped(_this.clonedImage.parentElement, flippedHorizontal, flippedVertical);
                 if (_this.isCropping) {
                     // For crop, we also need to set position of the overlays
                     setSize(cropContainers[0], cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
@@ -24222,7 +24244,7 @@ var ImageEdit = /** @class */ (function () {
                     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.updateRotateHandleState)(viewport, rotateCenter, rotateHandle, isSmall);
+                        (0, Rotator_1.updateRotateHandleState)(viewport, angleRad, wrapper, rotateCenter, rotateHandle, isSmall);
                     }
                     updateSideHandlesVisibility(resizeHandles, isSmall);
                     updateHandleCursor(resizeHandles, angleRad);
@@ -24273,7 +24295,7 @@ var ImageEdit = /** @class */ (function () {
      * @param e PluginEvent object
      */
     ImageEdit.prototype.onPluginEvent = function (e) {
-        var _a;
+        var _a, _b;
         switch (e.eventType) {
             case 22 /* SelectionChanged */:
                 if (e.selectionRangeEx &&
@@ -24293,6 +24315,13 @@ var ImageEdit = /** @class */ (function () {
                     this.setEditingImage(null);
                 }
                 break;
+            case 6 /* MouseUp */:
+                // When mouse up, if the image and the shadow span exists, the editing mode is on.
+                // To make sure the selection did not jump to the shadow root, reselect the image.
+                if (this.image && this.shadowSpan) {
+                    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(this.image);
+                }
+                break;
             case 0 /* KeyDown */:
                 this.setEditingImage(null);
                 break;
@@ -24302,7 +24331,7 @@ var ImageEdit = /** @class */ (function () {
                 break;
             case 8 /* ExtractContentWithDom */:
                 // When extract content, remove all image info since they may not be valid when load the content again
-                if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.imageSelector) {
+                if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.imageSelector) {
                     (0, roosterjs_editor_dom_1.toArray)(e.clonedRoot.querySelectorAll(this.options.imageSelector)).forEach(function (img) {
                         (0, editInfo_1.deleteEditInfo)(img);
                     });
@@ -24443,7 +24472,6 @@ var ImageEdit = /** @class */ (function () {
             // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
             if (this.clonedImage) {
                 this.clonedImage.src = (_c = this.pngSource) !== null && _c !== void 0 ? _c : this.editInfo.src;
-                setFlipped(this.clonedImage, this.editInfo.flippedHorizontal, this.editInfo.flippedVertical);
                 this.clonedImage.style.position = 'absolute';
             }
             // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
@@ -24614,7 +24642,9 @@ function getColorString(color, isDarkMode) {
     return isDarkMode ? color.darkModeColor.trim() : color.lightModeColor.trim();
 }
 function setFlipped(element, flippedHorizontally, flippedVertically) {
-    element.style.transform = "scale(" + (flippedHorizontally ? '-1' : '1') + ", " + (flippedVertically ? '-1' : '1') + ")";
+    if (element) {
+        element.style.transform = "scale(" + (flippedHorizontally ? -1 : 1) + ", " + (flippedVertically ? -1 : 1) + ")";
+    }
 }
 
 
@@ -24786,7 +24816,7 @@ function loadImage(img, src, callback) {
 "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.MIN_HEIGHT_WIDTH = exports.YS_CROP = exports.XS_CROP = exports.CROP_HANDLE_WIDTH = exports.CROP_HANDLE_SIZE = exports.ROTATE_HANDLE_TOP = exports.ROTATE_WIDTH = exports.Ys = exports.Xs = 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;
@@ -24800,12 +24830,14 @@ exports.ROTATION = {
     ne: 180,
     se: 270,
 };
+exports.Xs = ['w', '', 'e'];
+exports.Ys = ['s', '', 'n'];
 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.XS_CROP = ['w', 'e'];
+exports.YS_CROP = ['s', 'n'];
 exports.MIN_HEIGHT_WIDTH = 3 * exports.RESIZE_HANDLE_SIZE + 2 * exports.RESIZE_HANDLE_MARGIN;
 
 
@@ -25234,8 +25266,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 constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/constants/constants.ts");
 /**
  * @internal
  * Crop handle for DragAndDropHelper
@@ -25307,7 +25339,9 @@ function getCropHTML() {
         children: [],
     };
     if (containerHTML) {
-        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)); }); });
+        constants_1.XS_CROP.forEach(function (x) {
+            return constants_1.YS_CROP.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];
 }
@@ -25597,7 +25631,7 @@ 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 updateRotateHandleState(editorRect, rotateCenter, rotateHandle, isSmallImage) {
+function updateRotateHandleState(editorRect, angleRad, wrapper, rotateCenter, rotateHandle, isSmallImage) {
     if (isSmallImage) {
         rotateCenter.style.display = 'none';
         rotateHandle.style.display = 'none';
@@ -25607,23 +25641,30 @@ function updateRotateHandleState(editorRect, rotateCenter, rotateHandle, isSmall
         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 wrapperRect = wrapper.getBoundingClientRect();
+        if (rotateHandleRect && wrapperRect) {
             var adjustedDistance = Number.MAX_SAFE_INTEGER;
-            if (top_1 <= 0) {
+            var angle = angleRad * constants_1.DEG_PER_RAD;
+            if (angle < 45 && angle > -45 && wrapperRect.top - editorRect.top < constants_1.ROTATE_GAP) {
+                var top_1 = rotateHandleRect.top - editorRect.top;
                 adjustedDistance = top_1;
             }
-            else if (left <= 0) {
+            else if (angle <= -80 &&
+                angle >= -100 &&
+                wrapperRect.left - editorRect.left < constants_1.ROTATE_GAP) {
+                var left = rotateHandleRect.left - editorRect.left;
                 adjustedDistance = left;
             }
-            else if (right >= 0) {
-                adjustedDistance = right;
+            else if (angle >= 80 &&
+                angle <= 100 &&
+                editorRect.right - wrapperRect.right < constants_1.ROTATE_GAP) {
+                var right = rotateHandleRect.right - editorRect.right;
+                adjustedDistance = Math.min(editorRect.right - wrapperRect.right, right);
             }
-            else if (bottom >= 0) {
-                adjustedDistance = bottom;
+            else if ((angle <= -160 || angle >= 160) &&
+                editorRect.bottom - wrapperRect.bottom < constants_1.ROTATE_GAP) {
+                var bottom = rotateHandleRect.bottom - editorRect.bottom;
+                adjustedDistance = Math.min(editorRect.bottom - wrapperRect.bottom, 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);
@@ -25888,6 +25929,7 @@ var Paste = /** @class */ (function () {
             }
             (0, sanitizeLinks_1.default)(sanitizingOption);
             (0, sanitizeHtmlColorsFromPastedContent_1.default)(sanitizingOption);
+            sanitizeBlockStyles(sanitizingOption);
             // Replace unknown tags with SPAN
             sanitizingOption.unknownTagReplacement = this.unknownTagReplacement;
         }
@@ -25895,6 +25937,11 @@ var Paste = /** @class */ (function () {
     return Paste;
 }());
 exports["default"] = Paste;
+function sanitizeBlockStyles(sanitizingOption) {
+    (0, roosterjs_editor_dom_1.chainSanitizerCallback)(sanitizingOption.cssStyleCallbacks, 'display', function (value) {
+        return value != 'flex'; // return whether we keep the style
+    });
+}
 
 
 /***/ }),
@@ -26972,7 +27019,7 @@ function convertPastedContentFromWord(event) {
     });
     var wordConverter = (0, wordConverter_1.createWordConverter)();
     // First find all the nodes that we need to check for list item information
-    // This call will return all the p and header elements under the root node.. These are the elements that
+    // This call will return all the p and heading elements under the root node.. These are the elements that
     // Word uses a list items, so we'll only process them and avoid walking the whole tree.
     var elements = fragment.querySelectorAll(LIST_ELEMENTS_SELECTOR);
     if (elements.length > 0) {
@@ -28316,12 +28363,12 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @internal
  */
 function handleKeyDownEvent(event, state, editor) {
-    var _a;
-    var _b = event.rawEvent, shiftKey = _b.shiftKey, ctrlKey = _b.ctrlKey, metaKey = _b.metaKey, which = _b.which, defaultPrevented = _b.defaultPrevented;
+    var _a = event.rawEvent, shiftKey = _a.shiftKey, ctrlKey = _a.ctrlKey, metaKey = _a.metaKey, which = _a.which, defaultPrevented = _a.defaultPrevented;
     if ((shiftKey && (ctrlKey || metaKey)) || which == 16 /* SHIFT */ || defaultPrevented) {
         state.preventKeyUp = defaultPrevented;
         return;
     }
+    var range = editor.getSelectionRangeEx();
     if (shiftKey) {
         if (!state.firstTarget) {
             var pos = editor.getFocusedPosition();
@@ -28353,9 +28400,14 @@ function handleKeyDownEvent(event, state, editor) {
             }
         });
     }
-    else if (((_a = editor.getSelectionRangeEx()) === null || _a === void 0 ? void 0 : _a.type) == 1 /* TableSelection */ &&
+    else if ((range === null || range === void 0 ? void 0 : range.type) == 1 /* TableSelection */ &&
         (!(0, roosterjs_editor_dom_1.isCtrlOrMetaPressed)(event.rawEvent) || which == 36 /* HOME */ || which == 35 /* END */)) {
-        editor.select(null);
+        // Select all content in the first cell
+        var row = range.ranges[0];
+        var firstCell = row.startContainer.childNodes[row.startOffset];
+        var children = firstCell.childNodes;
+        var contentRange = (0, roosterjs_editor_dom_1.createRange)(children[0], children[children.length - 1]);
+        editor.select(contentRange);
     }
 }
 exports.handleKeyDownEvent = handleKeyDownEvent;
@@ -28484,6 +28536,7 @@ function shouldConvertToTableSelection(state, editor) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.handleKeyUpEvent = void 0;
 var clearState_1 = __webpack_require__(/*! ../utils/clearState */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/clearState.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var IGNORE_KEY_UP_KEYS = [
     16 /* SHIFT */,
     18 /* ALT */,
@@ -28501,6 +28554,9 @@ function handleKeyUpEvent(event, state, editor) {
         state.firstTarget &&
         !state.preventKeyUp &&
         IGNORE_KEY_UP_KEYS.indexOf(which) == -1) {
+        if ((0, roosterjs_editor_dom_1.isCharacterValue)(event.rawEvent)) {
+            editor.addUndoSnapshot();
+        }
         (0, clearState_1.clearState)(state, editor);
     }
     state.preventKeyUp = false;
@@ -28539,8 +28595,9 @@ var RIGHT_CLICK = 3;
  */
 function handleMouseDownEvent(event, state, editor) {
     var _a;
-    var _b = event.rawEvent, which = _b.which, shiftKey = _b.shiftKey, target = _b.target;
+    var _b = event.rawEvent, which = _b.which, shiftKey = _b.shiftKey, target = _b.target, detail = _b.detail;
     var table = editor.getElementAtCursor('table', target, event);
+    var tripleClick = detail >= 3;
     if (table && !table.isContentEditable) {
         return;
     }
@@ -28567,51 +28624,54 @@ function handleMouseDownEvent(event, state, editor) {
             }
         }
     }
-    if (which == LEFT_CLICK && !shiftKey) {
-        (0, clearState_1.clearState)(state, editor);
-        if ((0, getTableAtCursor_1.getTableAtCursor)(editor, event.rawEvent.target)) {
-            var doc_1 = editor.getDocument() || document;
-            var mouseUpListener_1 = getOnMouseUp(state);
-            var mouseMoveListener_1 = onMouseMove(state, editor);
-            doc_1.addEventListener('mouseup', mouseUpListener_1, true /*setCapture*/);
-            doc_1.addEventListener('mousemove', mouseMoveListener_1, true /*setCapture*/);
-            state.mouseMoveDisposer = function () {
-                doc_1.removeEventListener('mouseup', mouseUpListener_1, true /*setCapture*/);
-                doc_1.removeEventListener('mousemove', mouseMoveListener_1, true /*setCapture*/);
-            };
-            state.startedSelection = true;
-        }
-    }
-    if (which == LEFT_CLICK && shiftKey) {
-        editor.runAsync(function (editor) {
-            var _a;
-            var sel = (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
-            var first = (0, getCellAtCursor_1.getCellAtCursor)(editor, sel === null || sel === void 0 ? void 0 : sel.anchorNode);
-            var last = (0, getCellAtCursor_1.getCellAtCursor)(editor, sel === null || sel === void 0 ? void 0 : sel.focusNode);
-            var firstTable = (0, getTableAtCursor_1.getTableAtCursor)(editor, first);
-            var targetTable = (0, getTableAtCursor_1.getTableAtCursor)(editor, first);
-            if (firstTable == targetTable &&
-                (0, roosterjs_editor_dom_1.safeInstanceOf)(first, 'HTMLTableCellElement') &&
-                (0, roosterjs_editor_dom_1.safeInstanceOf)(last, 'HTMLTableCellElement')) {
-                state.vTable = new roosterjs_editor_dom_1.VTable(first);
-                var firstCord = (0, getCellCoordinates_1.getCellCoordinates)(state.vTable, first);
-                var lastCord = (0, getCellCoordinates_1.getCellCoordinates)(state.vTable, last);
-                if (!firstCord || !lastCord) {
-                    return;
-                }
-                state.vTable.selection = {
-                    firstCell: firstCord,
-                    lastCell: lastCord,
+    if (which == LEFT_CLICK) {
+        if (!shiftKey && !tripleClick) {
+            (0, clearState_1.clearState)(state, editor);
+            if ((0, getTableAtCursor_1.getTableAtCursor)(editor, event.rawEvent.target)) {
+                var doc_1 = editor.getDocument() || document;
+                var mouseUpListener_1 = getOnMouseUp(state);
+                var mouseMoveListener_1 = onMouseMove(state, editor);
+                doc_1.addEventListener('mouseup', mouseUpListener_1, true /*setCapture*/);
+                doc_1.addEventListener('mousemove', mouseMoveListener_1, true /*setCapture*/);
+                state.mouseMoveDisposer = function () {
+                    doc_1.removeEventListener('mouseup', mouseUpListener_1, true /*setCapture*/);
+                    doc_1.removeEventListener('mousemove', mouseMoveListener_1, true /*setCapture*/);
                 };
-                state.firstTarget = first;
-                state.lastTarget = last;
-                (0, selectTable_1.selectTable)(editor, state);
-                state.tableSelection = true;
-                state.firstTable = firstTable;
-                state.targetTable = targetTable;
-                (0, updateSelection_1.updateSelection)(editor, first, 0);
+                state.startedSelection = true;
             }
-        });
+        }
+        if (shiftKey || tripleClick) {
+            editor.runAsync(function (editor) {
+                var _a;
+                var sel = (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
+                var first = (0, getCellAtCursor_1.getCellAtCursor)(editor, sel === null || sel === void 0 ? void 0 : sel.anchorNode);
+                // Triple clicking a cell will select that cell only
+                // Assign last the same as first to make sure we can select the cell
+                var last = tripleClick ? first : (0, getCellAtCursor_1.getCellAtCursor)(editor, sel === null || sel === void 0 ? void 0 : sel.focusNode);
+                var firstTable = (0, getTableAtCursor_1.getTableAtCursor)(editor, first);
+                if (firstTable &&
+                    (0, roosterjs_editor_dom_1.safeInstanceOf)(first, 'HTMLTableCellElement') &&
+                    (0, roosterjs_editor_dom_1.safeInstanceOf)(last, 'HTMLTableCellElement')) {
+                    state.vTable = new roosterjs_editor_dom_1.VTable(first);
+                    var firstCord = (0, getCellCoordinates_1.getCellCoordinates)(state.vTable, first);
+                    var lastCord = (0, getCellCoordinates_1.getCellCoordinates)(state.vTable, last);
+                    if (!firstCord || !lastCord) {
+                        return;
+                    }
+                    state.vTable.selection = {
+                        firstCell: firstCord,
+                        lastCell: lastCord,
+                    };
+                    state.firstTarget = first;
+                    state.lastTarget = last;
+                    (0, selectTable_1.selectTable)(editor, state);
+                    state.tableSelection = true;
+                    state.firstTable = firstTable;
+                    state.targetTable = firstTable;
+                    (0, updateSelection_1.updateSelection)(editor, first, 0);
+                }
+            });
+        }
     }
 }
 exports.handleMouseDownEvent = handleMouseDownEvent;