roosterjs 8.44.0 → 8.44.2

package/dist/rooster.js

@@ -3029,7 +3029,6 @@ function insertImageWithSrc(editor, src, attributes) {
                 return image.setAttribute(attribute, attributes[attribute]);
             });
         }
-        image.style.maxWidth = '100%';
         editor.insertNode(image);
     }, 'insertImage');
 }
@@ -4098,12 +4097,21 @@ function editTable(editor, operation) {
             vtable.writeBack();
             editor.transformToDarkColor(vtable.table);
             editor.focus();
-            var cellToSelect = calculateCellToSelect(operation, vtable.row, vtable.col);
-            editor.select(vtable.getCell(cellToSelect.newRow, cellToSelect.newCol).td, 0 /* Begin */);
+            if (isUndefined(vtable.row) || isUndefined(vtable.col)) {
+                return;
+            }
+            var _a = calculateCellToSelect(operation, vtable.row, vtable.col), newCol = _a.newCol, newRow = _a.newRow;
+            var newTd = vtable.getCell(newRow, newCol).td;
+            if (newTd) {
+                editor.select(newTd, 0 /* Begin */);
+            }
         }, 'editTable');
     }
 }
 exports.default = editTable;
+function isUndefined(n) {
+    return n == undefined;
+}
 function calculateCellToSelect(operation, currentRow, currentCol) {
     var newRow = currentRow;
     var newCol = currentCol;
@@ -4129,9 +4137,10 @@ function calculateCellToSelect(operation, currentRow, currentCol) {
     };
 }
 function saveTableSelection(editor, vtable) {
+    var _a;
     var selection = editor.getSelectionRangeEx();
     if (selection && selection.type === 1 /* TableSelection */) {
-        vtable.selection = selection.coordinates;
+        vtable.selection = (_a = selection.coordinates) !== null && _a !== void 0 ? _a : null;
     }
 }
 
@@ -4160,12 +4169,17 @@ function formatTable(editor, format, table) {
     table = table || editor.getElementAtCursor('TABLE');
     if (table) {
         (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
+            if (!table) {
+                return;
+            }
             var vtable = new roosterjs_editor_dom_1.VTable(table);
             vtable.applyFormat(format);
             vtable.writeBack();
             editor.transformToDarkColor(vtable.table);
             editor.focus();
-            editor.select(start, end);
+            if (start && end) {
+                editor.select(start, end);
+            }
         }, 'formatTable');
     }
 }
@@ -4218,7 +4232,7 @@ function insertTable(editor, columns, rows, format) {
             (0, setBackgroundColor_1.default)(editor, 'transparent');
         }
         var vtable = new roosterjs_editor_dom_1.VTable(table);
-        vtable.applyFormat(format);
+        vtable.applyFormat(format || {});
         vtable.writeBack();
         editor.insertNode(table);
         editor.runAsync(function (editor) {
@@ -4294,6 +4308,9 @@ function applyInlineStyle(editor, callback, apiName) {
             var lastNode;
             selection.ranges.forEach(function (range) {
                 var contentTraverser = editor.getSelectionTraverser(range);
+                if (!contentTraverser) {
+                    return;
+                }
                 var inlineElement = contentTraverser && contentTraverser.currentInlineElement;
                 while (inlineElement) {
                     var nextInlineElement = contentTraverser.getNextInlineElement();
@@ -4392,7 +4409,7 @@ function blockFormat(editor, callback, beforeRunCallback, apiName) {
                 (0, commitListChains_1.default)(editor, chains_1);
             }
         }
-        if (selection.type == 0 /* Normal */) {
+        if (selection.type == 0 /* Normal */ && start && end) {
             editor.select(start, end);
         }
         else {
@@ -4441,9 +4458,11 @@ function blockWrap(editor, wrapFunction, beforeRunCallback, apiName) {
                 }
             }
             while (nodes[0] &&
+                nodes[0].parentNode &&
                 (0, roosterjs_editor_dom_1.isNodeInRegion)(region, nodes[0].parentNode) &&
                 nodes.some(function (node) { return (0, roosterjs_editor_dom_1.getTagOfNode)(node) == 'LI'; })) {
-                nodes = [(0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes)];
+                var result = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes);
+                nodes = result ? [result] : [];
             }
             wrapFunction(nodes);
         }
@@ -4473,7 +4492,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function collapseSelectedBlocks(editor, forEachCallback) {
     var traverser = editor.getSelectionTraverser();
-    var block = traverser && traverser.currentBlockElement;
+    if (!traverser) {
+        return;
+    }
+    var block = traverser.currentBlockElement;
     var blocks = [];
     while (block) {
         if (!isEmptyBlockUnderTR(block)) {
@@ -4521,7 +4543,9 @@ function commitListChains(editor, chains) {
         var end = range && roosterjs_editor_dom_1.Position.getEnd(range);
         var shouldReuseAllAncestorListElements_1 = editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */);
         chains.forEach(function (chain) { return chain.commit(shouldReuseAllAncestorListElements_1); });
-        editor.select(start, end);
+        if (start && end) {
+            editor.select(start, end);
+        }
     }
 }
 exports.default = commitListChains;
@@ -4558,7 +4582,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function execCommand(editor, command, apiName) {
     editor.focus();
-    var formatter = function () { return editor.getDocument().execCommand(command, false, null); };
+    var formatter = function () { return editor.getDocument().execCommand(command, false, undefined); };
     var selection = editor.getSelectionRangeEx();
     if (selection && selection.areAllCollapsed) {
         editor.addUndoSnapshot();
@@ -4611,9 +4635,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Default value is false.
  */
 function formatUndoSnapshot(editor, callback, apiName) {
-    editor.addUndoSnapshot(callback, "Format" /* Format */, undefined /* canUndoByBackspace */, apiName && {
-        formatApiName: apiName,
-    });
+    editor.addUndoSnapshot(callback, "Format" /* Format */, undefined /* canUndoByBackspace */, apiName && apiName != ''
+        ? {
+            formatApiName: apiName,
+        }
+        : undefined);
 }
 exports.default = formatUndoSnapshot;
 
@@ -4641,6 +4667,9 @@ function normalizeBlockquote(node, quotesHandled) {
     if ((0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement')) {
         var alignment = node.style.textAlign;
         var quote = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, undefined /* root */, 'blockquote');
+        if (!quote) {
+            return;
+        }
         var isNodeRTL = isRTL(node);
         if (quotesHandled) {
             if (quotesHandled.indexOf(quote) > -1) {
@@ -4651,17 +4680,17 @@ function normalizeBlockquote(node, quotesHandled) {
         while (quote) {
             if (alignment == 'center') {
                 if (isNodeRTL) {
-                    delete quote.style.marginInlineEnd;
+                    quote.style.removeProperty('marginInlineEnd');
                     quote.style.marginInlineStart = 'auto';
                 }
                 else {
-                    delete quote.style.marginInlineStart;
+                    quote.style.removeProperty('marginInlineStart');
                     quote.style.marginInlineEnd = 'auto';
                 }
             }
             else {
-                delete quote.style.marginInlineStart;
-                delete quote.style.marginInlineEnd;
+                quote.style.removeProperty('marginInlineEnd');
+                quote.style.removeProperty('marginInlineStart');
             }
             quote = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(quote.parentElement, undefined /* root */, 'blockquote');
         }
@@ -4708,14 +4737,19 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param apiNameOverride (Optional) Set a new api name, if empty the api name will be 'toggleListType'.
  */
 function toggleListType(editor, listType, startNumber, includeSiblingLists, orderedStyle, unorderedStyle, apiNameOverride) {
+    if (startNumber === void 0) { startNumber = 0; }
     if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     (0, blockFormat_1.default)(editor, function (region, start, end, chains) {
-        var _a;
+        var _a, _b;
         var chain = startNumber > 0 && chains.filter(function (chain) { return chain.canAppendAtCursor(startNumber); })[0];
-        var vList = chain && start.equalTo(end)
-            ? chain.createVListAtBlock((_a = (0, roosterjs_editor_dom_1.getBlockElementAtNode)(region.rootNode, start.node)) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement(), startNumber)
+        var block = (_b = (0, roosterjs_editor_dom_1.getBlockElementAtNode)(region.rootNode, (_a = start === null || start === void 0 ? void 0 : start.node) !== null && _a !== void 0 ? _a : null)) === null || _b === void 0 ? void 0 : _b.collapseToSingleElement();
+        if (!block) {
+            return;
+        }
+        var vList = chain && end && (start === null || start === void 0 ? void 0 : start.equalTo(end))
+            ? chain.createVListAtBlock(block, startNumber)
             : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, startNumber === 1 ? false : includeSiblingLists);
-        if (vList) {
+        if (vList && start && end) {
             vList.changeListType(start, end, listType);
             if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
                 vList.setListStyleType(orderedStyle, unorderedStyle);
@@ -8807,7 +8841,6 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 var DELIMITER_SELECTOR = '.' + "entityDelimiterAfter" /* DELIMITER_AFTER */ + ',.' + "entityDelimiterBefore" /* DELIMITER_BEFORE */;
 var ZERO_WIDTH_SPACE = '\u200B';
 var INLINE_ENTITY_SELECTOR = 'span' + (0, roosterjs_editor_dom_1.getEntitySelector)();
-var NBSP = '\u00A0';
 function inlineEntityOnPluginEvent(event, editor) {
     switch (event.eventType) {
         case 7 /* ContentChanged */:
@@ -8819,7 +8852,14 @@ function inlineEntityOnPluginEvent(event, editor) {
             normalizeDelimitersInEditor(editor);
             break;
         case 10 /* BeforePaste */:
-            addDelimitersIfNeeded(event.fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+            var fragment = event.fragment, sanitizingOption = event.sanitizingOption;
+            addDelimitersIfNeeded(fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+            if (sanitizingOption.additionalAllowedCssClasses) {
+                (0, roosterjs_editor_dom_1.arrayPush)(sanitizingOption.additionalAllowedCssClasses, [
+                    "entityDelimiterAfter" /* DELIMITER_AFTER */,
+                    "entityDelimiterBefore" /* DELIMITER_BEFORE */,
+                ]);
+            }
             break;
         case 8 /* ExtractContentWithDom */:
         case 9 /* BeforeCutCopy */:
@@ -8865,12 +8905,12 @@ function normalizeDelimitersInEditor(editor) {
 exports.normalizeDelimitersInEditor = normalizeDelimitersInEditor;
 function addDelimitersIfNeeded(nodes) {
     nodes.forEach(function (node) {
-        if (tryGetEntityFromNode(node)) {
+        if (isEntityElement(node)) {
             (0, roosterjs_editor_dom_1.addDelimiters)(node);
         }
     });
 }
-function tryGetEntityFromNode(node) {
+function isEntityElement(node) {
     return !!(node &&
         (0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement') &&
         isReadOnly((0, roosterjs_editor_dom_1.getEntityFromElement)(node)));
@@ -8899,13 +8939,14 @@ function removeInvalidDelimiters(nodes) {
         }
     });
 }
-function removeDelimiterAttr(node) {
+function removeDelimiterAttr(node, checkEntity) {
+    if (checkEntity === void 0) { checkEntity = true; }
     if (!node) {
         return;
     }
     var isAfter = node.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
     var entitySibling = isAfter ? node.previousElementSibling : node.nextElementSibling;
-    if (entitySibling && tryGetEntityFromNode(entitySibling)) {
+    if (checkEntity && entitySibling && isEntityElement(entitySibling)) {
         return;
     }
     node.classList.remove("entityDelimiterAfter" /* DELIMITER_AFTER */, "entityDelimiterBefore" /* DELIMITER_BEFORE */);
@@ -8919,31 +8960,34 @@ function removeDelimiterAttr(node) {
     });
 }
 function handleCollapsedEnter(editor, delimiter) {
+    var _a;
     var isAfter = delimiter.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
-    var sibling = isAfter ? delimiter.nextSibling : delimiter.previousSibling;
-    var positionToUse;
-    var element;
-    if (sibling) {
-        positionToUse = new roosterjs_editor_dom_1.Position(sibling, isAfter ? 0 /* Begin */ : -1 /* End */);
-    }
-    else {
-        element = delimiter.insertAdjacentElement(isAfter ? 'afterend' : 'beforebegin', (0, roosterjs_editor_dom_1.createElement)({
-            tag: 'span',
-            children: [NBSP],
-        }, editor.getDocument()));
-        if (!element) {
+    var entity = !isAfter ? delimiter.nextSibling : delimiter.previousSibling;
+    var block = (_a = editor.getBlockElementAtNode(delimiter)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    editor.runAsync(function () {
+        if (!block) {
             return;
         }
-        positionToUse = new roosterjs_editor_dom_1.Position(element, 0 /* Begin */);
-    }
-    if (positionToUse) {
-        editor.select(positionToUse);
-        editor.runAsync(function (aEditor) {
-            var elAfter = aEditor.getElementAtCursor();
-            removeDelimiterAttr(elAfter);
-            removeNode(element);
-        });
-    }
+        var blockToCheck = isAfter ? block.nextSibling : block.previousSibling;
+        if (blockToCheck && (0, roosterjs_editor_dom_1.safeInstanceOf)(blockToCheck, 'HTMLElement')) {
+            var delimiters = blockToCheck.querySelectorAll(DELIMITER_SELECTOR);
+            // Check if the last or first delimiter still contain the delimiter class and remove it.
+            var delimiterToCheck = delimiters.item(isAfter ? 0 : delimiters.length - 1);
+            removeDelimiterAttr(delimiterToCheck);
+        }
+        if (isEntityElement(entity)) {
+            var nextElementSibling = entity.nextElementSibling, previousElementSibling = entity.previousElementSibling;
+            [nextElementSibling, previousElementSibling].forEach(function (el) {
+                // Check if after Enter the ZWS got removed but we still have a element with the class
+                // Remove the attributes of the element if it is invalid now.
+                if (el && (0, roosterjs_editor_dom_1.matchesSelector)(el, DELIMITER_SELECTOR) && !(0, roosterjs_editor_dom_1.getDelimiterFromElement)(el)) {
+                    removeDelimiterAttr(el, false /* checkEntity */);
+                }
+            });
+            // Add delimiters to the entity if needed because on Enter we can sometimes lose the ZWS of the element.
+            (0, roosterjs_editor_dom_1.addDelimiters)(entity);
+        }
+    });
 }
 var getPosition = function (container) {
     if (container && (0, roosterjs_editor_dom_1.getDelimiterFromElement)(container)) {
@@ -11504,7 +11548,7 @@ function insertDelimiter(element, delimiterClass) {
         var insertPosition = delimiterClass == "entityDelimiterAfter" /* DELIMITER_AFTER */ ? 'afterend' : 'beforebegin';
         element.insertAdjacentElement(insertPosition, span);
     }
-    return element;
+    return span;
 }
 
 
@@ -21280,6 +21324,7 @@ exports.CursorFeatures = {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityFeatures = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var roosterjs_editor_dom_2 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * A content edit feature to trigger EntityOperation event with operation "Click" when user
  * clicks on a readonly entity.
@@ -21303,13 +21348,13 @@ var EscapeFromEntityFeature = {
     },
 };
 function cacheGetReadonlyEntityElement(event, editor, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'READONLY_ENTITY_ELEMENT', function () {
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'READONLY_ENTITY_ELEMENT', function () {
         var node = event.rawEvent.target;
-        var entityElement = node && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), node);
+        var entityElement = node && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), node);
         return entityElement && !entityElement.isContentEditable ? entityElement : null;
     });
     if (element && operation !== undefined) {
-        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity) {
             editor.triggerPluginEvent(15 /* EntityOperation */, {
                 operation: operation,
@@ -21338,7 +21383,7 @@ var EnterBeforeReadonlyEntityFeature = {
         if (!range) {
             return;
         }
-        var node = roosterjs_editor_dom_1.Position.getEnd(range).normalize().node;
+        var node = roosterjs_editor_dom_2.Position.getEnd(range).normalize().node;
         var br = editor.getDocument().createElement('BR');
         (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, node.nextSibling);
         var block = editor.getBlockElementAtNode(node);
@@ -21380,13 +21425,13 @@ var DeleteBeforeEntityFeature = {
     },
 };
 function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'NEIGHBOR_ENTITY_ELEMENT_' + isNext + '_' + collapseOnly, function () {
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'NEIGHBOR_ENTITY_ELEMENT_' + isNext + '_' + collapseOnly, function () {
         var range = editor.getSelectionRange();
         if (!range || (collapseOnly && !range.collapsed)) {
             return null;
         }
         range.commonAncestorContainer.normalize();
-        var pos = roosterjs_editor_dom_1.Position.getEnd(range).normalize();
+        var pos = roosterjs_editor_dom_2.Position.getEnd(range).normalize();
         var isAtBeginOrEnd = pos.offset == 0 || pos.isAtEnd;
         var entityNode = null;
         if (isAtBeginOrEnd) {
@@ -21405,12 +21450,12 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
                     node = null;
                 }
             }
-            entityNode = node && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), node);
+            entityNode = node && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), node);
         }
         return entityNode;
     });
     if (element && operation !== undefined) {
-        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity) {
             triggerOperation(entity, editor, operation, event);
         }
@@ -21423,15 +21468,17 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
  */
 var MoveBetweenDelimitersFeature = {
     keys: [39 /* RIGHT */, 37 /* LEFT */],
+    allowFunctionKeys: true,
     shouldHandleEvent: function (event, editor) {
-        if (!editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+        if (event.rawEvent.altKey ||
+            !editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
             return false;
         }
         var element = editor.getElementAtCursor();
         if (!element) {
             return false;
         }
-        var isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'direction') === 'rtl';
+        var isRTL = (0, roosterjs_editor_dom_2.getComputedStyle)(element, 'direction') === 'rtl';
         var shouldCheckBefore = isRTL == (event.rawEvent.which === 37 /* LEFT */);
         return getIsDelimiterAtCursor(event, editor, shouldCheckBefore);
     },
@@ -21441,8 +21488,8 @@ var MoveBetweenDelimitersFeature = {
         if (!delimiter) {
             return;
         }
-        var _a = getRelatedElements(delimiter, checkBefore), delimiterPair = _a.delimiterPair, entity = _a.entity;
-        if (delimiterPair && entity && (0, roosterjs_editor_dom_1.matchesSelector)(entity, (0, roosterjs_editor_dom_1.getEntitySelector)())) {
+        var _a = getRelatedElements(delimiter, checkBefore, editor), delimiterPair = _a.delimiterPair, entity = _a.entity;
+        if (delimiterPair && entity && (0, roosterjs_editor_dom_2.matchesSelector)(entity, (0, roosterjs_editor_dom_2.getEntitySelector)())) {
             event.rawEvent.preventDefault();
             editor.runAsync(function () {
                 var positionType = checkBefore
@@ -21450,7 +21497,7 @@ var MoveBetweenDelimitersFeature = {
                         ? -3 /* After */
                         : -1 /* End */
                     : -2 /* Before */;
-                var position = new roosterjs_editor_dom_1.Position(delimiterPair, positionType);
+                var position = new roosterjs_editor_dom_2.Position(delimiterPair, positionType);
                 if (event.rawEvent.shiftKey) {
                     var selection = delimiterPair.ownerDocument.getSelection();
                     selection === null || selection === void 0 ? void 0 : selection.extend(position.node, position.offset);
@@ -21504,51 +21551,65 @@ function getIsDelimiterAtCursor(event, editor, checkBefore) {
         : position.node == position.element
             ? position.element.childNodes.item(position.offset)
             : position.element;
-    var searcher = editor.getContentSearcherOfCursor(event);
     var data = checkBefore
         ? {
             class: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
             pairClass: "entityDelimiterAfter" /* DELIMITER_AFTER */,
-            getDelimiterPair: function (element) { var _a; return (_a = element.nextElementSibling) === null || _a === void 0 ? void 0 : _a.nextElementSibling; },
-            getNextSibling: function () {
-                var _a;
-                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementAfter()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
-            },
             isAtEndOrBeginning: position.isAtEnd,
         }
         : {
             class: "entityDelimiterAfter" /* DELIMITER_AFTER */,
             pairClass: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
-            getDelimiterPair: function (element) { var _a; return (_a = element.previousElementSibling) === null || _a === void 0 ? void 0 : _a.previousElementSibling; },
-            getNextSibling: function () {
-                var _a;
-                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
-            },
             isAtEndOrBeginning: position.offset == 0,
         };
-    var sibling = data.getNextSibling();
+    var sibling = getNextSibling(editor, focusedElement, checkBefore);
     if (data.isAtEndOrBeginning && sibling) {
         var elAtCursor = editor.getElementAtCursor('.' + data.class, sibling);
         if (elAtCursor && !!shouldHandle(elAtCursor)) {
             return true;
         }
     }
-    var entityAtCursor = editor.getElementAtCursor('.' + data.class, focusedElement);
+    var entityAtCursor = focusedElement && editor.getElementAtCursor('.' + data.class, focusedElement);
     return !!shouldHandle(entityAtCursor);
     function shouldHandle(element) {
-        var _a;
-        return (element &&
-            (((_a = data.getDelimiterPair(element)) === null || _a === void 0 ? void 0 : _a.className) || '').indexOf(data.pairClass) > -1 &&
+        if (!element) {
+            return false;
+        }
+        var delimiterPair = getRelatedElements(element, checkBefore, editor).delimiterPair;
+        return (delimiterPair &&
+            (delimiterPair.className || '').indexOf(data.pairClass) > -1 &&
             cacheDelimiter(event, checkBefore, element));
     }
 }
+function getNextSibling(editor, element, checkBefore) {
+    var traverser = getBlockTraverser(editor, element);
+    if (!traverser) {
+        return undefined;
+    }
+    var traverseFn = function (t) {
+        return checkBefore ? t.getNextInlineElement() : t.getPreviousInlineElement();
+    };
+    var currentInline = traverser.currentInlineElement;
+    while (currentInline && currentInline.getContainerNode() === element) {
+        currentInline = traverseFn(traverser);
+    }
+    return currentInline === null || currentInline === void 0 ? void 0 : currentInline.getContainerNode();
+}
+function getBlockTraverser(editor, element) {
+    var _a;
+    if (!element) {
+        return undefined;
+    }
+    var blockElement = (_a = editor.getBlockElementAtNode(element)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    return blockElement ? roosterjs_editor_dom_1.ContentTraverser.createBodyTraverser(blockElement, element) : undefined;
+}
 function cacheDelimiter(event, checkBefore, delimiter) {
-    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
+    return (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
 }
 function cacheEntityBetweenDelimiter(event, editor, checkBefore, entity, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'entity_delimiter_cache_key_' + checkBefore, function () { return entity && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), entity); });
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'entity_delimiter_cache_key_' + checkBefore, function () { return entity && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), entity); });
     if (element && operation !== undefined) {
-        var entity_1 = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity_1 = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity_1) {
             triggerOperation(entity_1, editor, operation, event);
         }
@@ -21563,7 +21624,7 @@ function triggerOperation(entity, editor, operation, event) {
         entity: entity,
     });
     if (entity.isReadonly &&
-        !(0, roosterjs_editor_dom_1.isBlockElement)(entity.wrapper) &&
+        !(0, roosterjs_editor_dom_2.isBlockElement)(entity.wrapper) &&
         editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
         if (event.rawEvent.defaultPrevented) {
             editor.runAsync(function () {
@@ -21571,41 +21632,58 @@ function triggerOperation(entity, editor, operation, event) {
                     removeDelimiters(nextElementSibling, previousElementSibling);
                 }
                 else {
-                    var delimiterAfter = (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper)[0];
+                    var delimiterAfter = (0, roosterjs_editor_dom_2.addDelimiters)(entity.wrapper)[0];
                     if (delimiterAfter) {
                         editor.select(delimiterAfter, -3 /* After */);
                     }
                 }
             });
         }
-        else if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(nextElementSibling) &&
-            (0, roosterjs_editor_dom_1.getDelimiterFromElement)(previousElementSibling)) {
-            editor.select((0, roosterjs_editor_dom_1.createRange)(previousElementSibling, nextElementSibling));
+        else if ((0, roosterjs_editor_dom_2.getDelimiterFromElement)(nextElementSibling) &&
+            (0, roosterjs_editor_dom_2.getDelimiterFromElement)(previousElementSibling)) {
+            editor.select((0, roosterjs_editor_dom_2.createRange)(previousElementSibling, nextElementSibling));
         }
     }
 }
 function removeDelimiters(nextElementSibling, previousElementSibling) {
     [nextElementSibling, previousElementSibling].forEach(function (sibling) {
         var _a;
-        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(sibling)) {
+        if ((0, roosterjs_editor_dom_2.getDelimiterFromElement)(sibling)) {
             (_a = sibling === null || sibling === void 0 ? void 0 : sibling.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(sibling);
         }
     });
 }
 function cacheGetCheckBefore(event, checkBefore) {
-    return !!(0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'Check_Before', function () { return checkBefore; });
+    return !!(0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'Check_Before', function () { return checkBefore; });
 }
-function getRelatedElements(delimiter, checkBefore) {
-    var _a, _b;
-    var entity;
-    var delimiterPair;
-    if (checkBefore) {
-        entity = delimiter.nextElementSibling;
-        delimiterPair = (_a = entity === null || entity === void 0 ? void 0 : entity.nextElementSibling) !== null && _a !== void 0 ? _a : null;
+function getRelatedElements(delimiter, checkBefore, editor) {
+    var entity = null;
+    var delimiterPair = null;
+    var traverser = getBlockTraverser(editor, delimiter);
+    if (!traverser) {
+        return { delimiterPair: delimiterPair, entity: entity };
     }
-    else {
-        entity = delimiter.previousElementSibling;
-        delimiterPair = (_b = entity === null || entity === void 0 ? void 0 : entity.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+    var selector = "." + (checkBefore ? "entityDelimiterAfter" /* DELIMITER_AFTER */ : "entityDelimiterBefore" /* DELIMITER_BEFORE */);
+    var traverseFn = function (t) {
+        return checkBefore ? t.getNextInlineElement() : t.getPreviousInlineElement();
+    };
+    var getElementFromInline = function (element, selector) {
+        var _a;
+        var node = element === null || element === void 0 ? void 0 : element.getContainerNode();
+        return (_a = (node && editor.getElementAtCursor(selector, node))) !== null && _a !== void 0 ? _a : null;
+    };
+    var entitySelector = (0, roosterjs_editor_dom_2.getEntitySelector)();
+    var current = traverser.currentInlineElement;
+    while (current && (!entity || !delimiterPair)) {
+        entity = entity || getElementFromInline(current, entitySelector);
+        delimiterPair = delimiterPair || getElementFromInline(current, selector);
+        // If we found the entity but the next inline after the entity is not a delimiter,
+        // it means that the delimiter pair got removed or is invalid, return null instead.
+        if (entity && !delimiterPair && !getElementFromInline(current, entitySelector)) {
+            delimiterPair = null;
+            break;
+        }
+        current = traverseFn(traverser);
     }
     return { entity: entity, delimiterPair: delimiterPair };
 }
@@ -21665,21 +21743,19 @@ var handleIndentationEvent = function (indenting) { return function (event, edit
  * IndentWhenTab edit feature, provides the ability to indent current list when user press TAB
  */
 var IndentWhenTab = {
-    keys: [9 /* TAB */, 39 /* RIGHT */],
+    keys: roosterjs_editor_dom_1.Browser.isMac ? [9 /* TAB */] : [9 /* TAB */, 39 /* RIGHT */],
     shouldHandleEvent: shouldHandleIndentationEvent(true),
     handleEvent: handleIndentationEvent(true),
     allowFunctionKeys: true,
-    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
 };
 /**
  * OutdentWhenShiftTab edit feature, provides the ability to outdent current list when user press Shift+TAB
  */
 var OutdentWhenShiftTab = {
-    keys: [9 /* TAB */, 37 /* LEFT */],
+    keys: roosterjs_editor_dom_1.Browser.isMac ? [9 /* TAB */] : [9 /* TAB */, 37 /* LEFT */],
     shouldHandleEvent: shouldHandleIndentationEvent(false),
     handleEvent: handleIndentationEvent(false),
     allowFunctionKeys: true,
-    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
 };
 /**
  * MergeInNewLine edit feature, provides the ability to merge current line into a new line when user press
@@ -23833,12 +23909,8 @@ var ImageEdit = /** @class */ (function () {
          * Remove the temp wrapper of the image
          */
         this.removeWrapper = function () {
-            if (_this.editor &&
-                _this.image &&
-                _this.image.parentNode &&
-                _this.editor.contains(_this.image) &&
-                _this.wrapper) {
-                (0, roosterjs_editor_dom_1.unwrap)(_this.image.parentNode);
+            if (_this.shadowSpan) {
+                (0, roosterjs_editor_dom_1.unwrap)(_this.shadowSpan);
             }
             _this.wrapper = null;
             _this.shadowSpan = null;
@@ -23906,7 +23978,7 @@ var ImageEdit = /** @class */ (function () {
                     }
                     var viewport = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getVisibleViewport();
                     if (rotateHandle && rotateCenter && viewport) {
-                        (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, viewport, marginVertical, rotateCenter, rotateHandle);
+                        (0, Rotator_1.updateRotateHandlePosition)(viewport, rotateCenter, rotateHandle);
                     }
                     updateHandleCursor(resizeHandles, angleRad);
                 }
@@ -24049,6 +24121,54 @@ var ImageEdit = /** @class */ (function () {
             this.editor.select(this.image);
         }
     };
+    /**
+     * Flip the image.
+     * @param image The image to be flipped
+     * @param direction
+     */
+    ImageEdit.prototype.flipImage = function (image, direction) {
+        var _a;
+        this.image = image;
+        this.editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
+        var angleRad = this.editInfo.angleRad;
+        var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
+            (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
+        if (isInVerticalPostion) {
+            if (direction === 'horizontal') {
+                this.editInfo.flippedVertical = !this.editInfo.flippedVertical;
+            }
+            else {
+                this.editInfo.flippedHorizontal = !this.editInfo.flippedHorizontal;
+            }
+        }
+        else {
+            if (direction === 'vertical') {
+                this.editInfo.flippedVertical = !this.editInfo.flippedVertical;
+            }
+            else {
+                this.editInfo.flippedHorizontal = !this.editInfo.flippedHorizontal;
+            }
+        }
+        this.createWrapper(4 /* Rotate */);
+        this.updateWrapper();
+        this.setEditingImage(null);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(image);
+    };
+    /**
+     * Rotate the image in radian angle.
+     * @param image The image to be rotated
+     * @param angleRad The angle in radian that the image must be rotated.
+     */
+    ImageEdit.prototype.rotateImage = function (image, angleRad) {
+        var _a;
+        this.image = image;
+        this.editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
+        this.editInfo.angleRad = this.editInfo.angleRad + angleRad;
+        this.createWrapper(4 /* Rotate */);
+        this.updateWrapper();
+        this.setEditingImage(null);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(image);
+    };
     /**
      * Create editing wrapper for the image
      */
@@ -24067,6 +24187,7 @@ 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 = 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
@@ -24224,6 +24345,9 @@ function getColorString(color, isDarkMode) {
     }
     return isDarkMode ? color.darkModeColor.trim() : color.lightModeColor.trim();
 }
+function setFlipped(element, flipppedHorizontally, flipppedVertically) {
+    element.style.transform = "scale(" + (flipppedHorizontally ? '-1' : '1') + ", " + (flipppedVertically ? '-1' : '1') + ")";
+}
 
 
 /***/ }),
@@ -24510,13 +24634,18 @@ function checkEditInfoState(editInfo, compareTo) {
     if (!editInfo || !editInfo.src || ALL_KEYS.some(function (key) { return !isNumber(editInfo[key]); })) {
         return 0 /* Invalid */;
     }
-    else if (ROTATE_CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); })) {
+    else if (ROTATE_CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
+        !editInfo.flippedHorizontal &&
+        !editInfo.flippedVertical &&
+        (!compareTo || (compareTo && editInfo.angleRad === compareTo.angleRad))) {
         return 1 /* ResizeOnly */;
     }
     else if (compareTo &&
         ROTATE_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
         ROTATE_KEYS.every(function (key) { return areSameNumber(compareTo[key], 0); }) &&
-        CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], compareTo[key]); })) {
+        CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], compareTo[key]); }) &&
+        compareTo.flippedHorizontal === editInfo.flippedHorizontal &&
+        compareTo.flippedVertical === editInfo.flippedVertical) {
         return 2 /* SameWithLast */;
     }
     else {
@@ -24637,6 +24766,7 @@ function generateDataURL(image, editInfo) {
     if (context) {
         context.translate(targetWidth / 2, targetHeight / 2);
         context.rotate(angle);
+        context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);
         context.drawImage(image, naturalWidth * left, naturalHeight * top, imageWidth, imageHeight, -width / 2, -height / 2, width, height);
     }
     return canvas.toDataURL('image/png', 1.0);
@@ -25142,15 +25272,26 @@ 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(editInfo, editorRect, marginVertical, rotateCenter, rotateHandle) {
+function updateRotateHandlePosition(editorRect, rotateCenter, rotateHandle) {
     var rotateHandleRect = rotateHandle.getBoundingClientRect();
     if (rotateHandleRect) {
         var top_1 = rotateHandleRect.top - editorRect.top;
-        var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
-        var cosAngle = Math.cos(angleRad);
-        var adjustedDistance = cosAngle <= 0
-            ? Number.MAX_SAFE_INTEGER
-            : (top_1 + heightPx / 2 + marginVertical) / cosAngle - heightPx / 2;
+        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(ROTATE_GAP, adjustedDistance), 0);
         var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
         rotateCenter.style.top = -rotateGap + 'px';
@@ -25672,7 +25813,8 @@ function checkAndAddBr(root, block, isFirst, firstBlock) {
         // If the first block and the last block are Siblings, add a BR before so the only two
         // lines that are being pasted are not merged.
         var previousSibling = (0, roosterjs_editor_dom_1.getPreviousLeafSibling)(root, block.start);
-        if (firstBlock.end.contains(previousSibling)) {
+        if (firstBlock.end.contains(previousSibling) &&
+            !(0, roosterjs_editor_dom_1.findClosestElementAncestor)(block.start, root, 'li')) {
             var br = (_c = block.start.ownerDocument) === null || _c === void 0 ? void 0 : _c.createElement('br');
             if (br) {
                 (_d = block.start.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(br, block.start);