roosterjs 9.7.0 → 9.8.1

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.7.0)
+// Type definitions for roosterjs (Version 9.8.1)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -3466,7 +3466,11 @@ export type ExperimentalFeature = /**
  * When this feature is enabled, we will persist a content model in memory as long as we can,
  * and use cached element when write back if it is not changed.
  */
-'PersistCache';
+'PersistCache'
+/**
+ * Workaround for the Legacy Image Edit
+ */
+ | 'LegacyImageSelection';
 
 /**
  * Options for editor
@@ -5046,6 +5050,11 @@ export interface AnnounceData {
      * @optional if provided, will attempt to replace {n} with each of the values inside of the array.
      */
     formatStrings?: string[];
+    /**
+     * @optional if provided, will set the ariaLive property of the announce container element to the provided value.
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live#values
+     */
+    ariaLiveMode?: 'assertive' | 'polite' | 'off';
 }
 
 /**
@@ -6195,6 +6204,15 @@ export function isElementOfType<Tag extends keyof HTMLElementTagNameMap>(element
  */
 export function getObjectKeys<T extends string | number | symbol>(obj: Record<T, any> | Partial<Record<T, any>>): T[];
 
+/**
+ * Returns a safe Id to use in Native APIs.
+ * IDs that start with number or hyphen can throw errors if used.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+ * @param id
+ * @returns
+ */
+export function getSafeIdSelector(id: string): string;
+
 /**
  * Convert a named node map to an array
  * @param collection The map to convert
@@ -8328,6 +8346,11 @@ export class PastePlugin implements EditorPlugin  {
     private setEventSanitizers;
 }
 
+/**
+ * Default style sanitizers for PastePlugin.
+ */
+export const DefaultSanitizers: Record<string, ValueSanitizer>;
+
 /**
  * Edit plugins helps editor to do editing operation on top of content model.
  * This includes:

package/dist/rooster-amd.js

@@ -3461,6 +3461,15 @@ function setListType(model, listType, removeMargins) {
                     }
                     (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks.splice(index, 1, newListItem);
                     existingListItems.push(newListItem);
+                    var levelIndex = newListItem.levels.length - 1;
+                    var level = (0, roosterjs_content_model_dom_1.mutateBlock)(newListItem).levels[levelIndex];
+                    if (level) {
+                        (0, roosterjs_content_model_dom_1.updateListMetadata)(level, function (metadata) {
+                            return Object.assign({}, metadata, {
+                                applyListStyleFromLevel: true,
+                            });
+                        });
+                    }
                 }
                 else {
                     existingListItems.forEach(function (x) { return ((0, roosterjs_content_model_dom_1.mutateBlock)(x).levels[0].format.marginBottom = '0px'); });
@@ -8302,12 +8311,14 @@ exports.getPath = getPath;
 /*!********************************************************************************!*\
   !*** ./packages/roosterjs-content-model-core/lib/coreApi/announce/announce.ts ***!
   \********************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.announce = void 0;
+var createAriaLiveElement_1 = __webpack_require__(/*! ../../utils/createAriaLiveElement */ "./packages/roosterjs-content-model-core/lib/utils/createAriaLiveElement.ts");
+var DOT_STRING = '.';
 /**
  * @internal
  * Announce the given data
@@ -8315,17 +8326,20 @@ exports.announce = void 0;
  * @param announceData Data to announce
  */
 var announce = function (core, announceData) {
-    var _a;
-    var text = announceData.text, defaultStrings = announceData.defaultStrings, _b = announceData.formatStrings, formatStrings = _b === void 0 ? [] : _b;
+    var text = announceData.text, defaultStrings = announceData.defaultStrings, _a = announceData.formatStrings, formatStrings = _a === void 0 ? [] : _a, _b = announceData.ariaLiveMode, ariaLiveMode = _b === void 0 ? 'assertive' : _b;
     var announcerStringGetter = core.lifecycle.announcerStringGetter;
     var template = defaultStrings && (announcerStringGetter === null || announcerStringGetter === void 0 ? void 0 : announcerStringGetter(defaultStrings));
     var textToAnnounce = formatString(template || text, formatStrings);
-    if (textToAnnounce) {
+    if (!core.lifecycle.announceContainer) {
+        core.lifecycle.announceContainer = (0, createAriaLiveElement_1.createAriaLiveElement)(core.physicalRoot.ownerDocument);
+    }
+    if (textToAnnounce && core.lifecycle.announceContainer) {
         var announceContainer = core.lifecycle.announceContainer;
-        if (!announceContainer || textToAnnounce == announceContainer.textContent) {
-            (_a = announceContainer === null || announceContainer === void 0 ? void 0 : announceContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(announceContainer);
-            announceContainer = createAriaLiveElement(core.physicalRoot.ownerDocument);
-            core.lifecycle.announceContainer = announceContainer;
+        if (announceContainer.ariaLive != ariaLiveMode) {
+            announceContainer.ariaLive = ariaLiveMode;
+        }
+        if (textToAnnounce == announceContainer.textContent) {
+            textToAnnounce += DOT_STRING;
         }
         if (announceContainer) {
             announceContainer.textContent = textToAnnounce;
@@ -8344,19 +8358,6 @@ function formatString(text, formatStrings) {
     });
     return text;
 }
-function createAriaLiveElement(document) {
-    var div = document.createElement('div');
-    div.style.clip = 'rect(0px, 0px, 0px, 0px)';
-    div.style.clipPath = 'inset(100%)';
-    div.style.height = '1px';
-    div.style.overflow = 'hidden';
-    div.style.position = 'absolute';
-    div.style.whiteSpace = 'nowrap';
-    div.style.width = '1px';
-    div.ariaLive = 'assertive';
-    document.body.appendChild(div);
-    return div;
-}
 
 
 /***/ }),
@@ -9091,6 +9092,7 @@ exports.restoreSnapshotLogicalRoot = restoreSnapshotLogicalRoot;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.restoreSnapshotSelection = void 0;
 var getPositionFromPath_1 = __webpack_require__(/*! ./getPositionFromPath */ "./packages/roosterjs-content-model-core/lib/coreApi/restoreUndoSnapshot/getPositionFromPath.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
  */
@@ -9115,7 +9117,7 @@ function restoreSnapshotSelection(core, snapshot) {
                     };
                     break;
                 case 'table':
-                    var table = physicalRoot.querySelector('#' + snapshotSelection.tableId);
+                    var table = physicalRoot.querySelector((0, roosterjs_content_model_dom_1.getSafeIdSelector)(snapshotSelection.tableId));
                     if (table) {
                         domSelection = {
                             type: 'table',
@@ -9128,7 +9130,7 @@ function restoreSnapshotSelection(core, snapshot) {
                     }
                     break;
                 case 'image':
-                    var image = physicalRoot.querySelector('#' + snapshotSelection.imageId);
+                    var image = physicalRoot.querySelector((0, roosterjs_content_model_dom_1.getSafeIdSelector)(snapshotSelection.imageId));
                     if (image) {
                         domSelection = {
                             type: 'image',
@@ -9419,7 +9421,7 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                 var imageSelectionColor = isDarkMode
                     ? core.selection.imageSelectionBorderColorDark
                     : core.selection.imageSelectionBorderColor;
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:solid!important; outline-color:" + (imageSelectionColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID)]);
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:solid!important; outline-color:" + (imageSelectionColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", [(0, roosterjs_content_model_dom_1.getSafeIdSelector)((0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID))]);
                 core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
                 setRangeSelection(doc, image, false /* collapse */);
                 break;
@@ -9452,12 +9454,13 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                     lastColumn: lastCell.col,
                 };
                 var tableId = (0, ensureUniqueId_1.ensureUniqueId)(table, TABLE_ID);
+                var tableSelector = (0, roosterjs_content_model_dom_1.getSafeIdSelector)(tableId);
                 var tableSelectors = firstCell.row == 0 &&
                     firstCell.col == 0 &&
                     lastCell.row == parsedTable.length - 1 &&
                     lastCell.col == ((_b = (_a = parsedTable[lastCell.row]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1
-                    ? ["#" + tableId, "#" + tableId + " *"]
-                    : handleTableSelected(parsedTable, tableId, table, firstCell, lastCell);
+                    ? [tableSelector, tableSelector + " *"]
+                    : handleTableSelected(parsedTable, tableSelector, table, firstCell, lastCell);
                 core.selection.selection = selection;
                 var tableSelectionColor = isDarkMode
                     ? core.selection.tableCellSelectionBackgroundColorDark
@@ -9490,7 +9493,7 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     }
 };
 exports.setDOMSelection = setDOMSelection;
-function handleTableSelected(parsedTable, tableId, table, firstCell, lastCell) {
+function handleTableSelected(parsedTable, tableSelector, table, firstCell, lastCell) {
     var selectors = [];
     // Get whether table has thead, tbody or tfoot, then Set the start and end of each of the table children,
     // so we can build the selector according the element between the table and the row.
@@ -9524,7 +9527,7 @@ function handleTableSelected(parsedTable, tableId, table, firstCell, lastCell) {
                     rowIndex <= lastCell.row &&
                     cellIndex >= firstCell.col &&
                     cellIndex <= lastCell.col) {
-                    var selector = "#" + tableId + middleElSelector + " tr:nth-child(" + currentRow + ")>" + cell.tagName + ":nth-child(" + tdCount + ")";
+                    var selector = "" + tableSelector + middleElSelector + " tr:nth-child(" + currentRow + ")>" + cell.tagName + ":nth-child(" + tdCount + ")";
                     selectors.push(selector, selector + ' *');
                 }
             }
@@ -9561,12 +9564,13 @@ function setRangeSelection(doc, element, collapse) {
 /*!********************************************************************************************!*\
   !*** ./packages/roosterjs-content-model-core/lib/coreApi/setEditorStyle/ensureUniqueId.ts ***!
   \********************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ensureUniqueId = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
  */
@@ -9574,7 +9578,7 @@ function ensureUniqueId(element, idPrefix) {
     idPrefix = element.id || idPrefix;
     var doc = element.ownerDocument;
     var i = 0;
-    while (!element.id || doc.querySelectorAll('#' + element.id).length > 1) {
+    while (!element.id || doc.querySelectorAll((0, roosterjs_content_model_dom_1.getSafeIdSelector)(element.id)).length > 1) {
         element.id = idPrefix + '_' + i++;
     }
     return element.id;
@@ -9595,6 +9599,7 @@ exports.ensureUniqueId = ensureUniqueId;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setEditorStyle = void 0;
 var ensureUniqueId_1 = __webpack_require__(/*! ./ensureUniqueId */ "./packages/roosterjs-content-model-core/lib/coreApi/setEditorStyle/ensureUniqueId.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MAX_RULE_SELECTOR_LENGTH = 9000;
 var CONTENT_DIV_ID = 'contentDiv';
 /**
@@ -9616,7 +9621,7 @@ var setEditorStyle = function (core, key, cssRule, subSelectors, maxRuleLength)
             sheet.deleteRule(i);
         }
         if (cssRule) {
-            var rootSelector = '#' + (0, ensureUniqueId_1.ensureUniqueId)(core.physicalRoot, CONTENT_DIV_ID);
+            var rootSelector = (0, roosterjs_content_model_dom_1.getSafeIdSelector)((0, ensureUniqueId_1.ensureUniqueId)(core.physicalRoot, CONTENT_DIV_ID));
             var selectors = !subSelectors
                 ? [rootSelector]
                 : typeof subSelectors === 'string'
@@ -12277,6 +12282,7 @@ exports.applyPendingFormat = applyPendingFormat;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createLifecyclePlugin = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var createAriaLiveElement_1 = __webpack_require__(/*! ../../utils/createAriaLiveElement */ "./packages/roosterjs-content-model-core/lib/utils/createAriaLiveElement.ts");
 var ContentEditableAttributeName = 'contenteditable';
 var DefaultTextColor = '#000000';
 var DefaultBackColor = '#ffffff';
@@ -12336,6 +12342,8 @@ var LifecyclePlugin = /** @class */ (function () {
         this.adjustColor();
         // Let other plugins know that we are ready
         this.editor.triggerEvent('editorReady', {}, true /*broadcast*/);
+        // Initialize the Announce container.
+        this.state.announceContainer = (0, createAriaLiveElement_1.createAriaLiveElement)(editor.getDocument());
     };
     /**
      * Dispose this plugin
@@ -12419,6 +12427,7 @@ var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelect
 var normalizePos_1 = __webpack_require__(/*! ./normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MouseLeftButton = 0;
+var MouseMiddleButton = 1;
 var MouseRightButton = 2;
 var Up = 'ArrowUp';
 var Down = 'ArrowDown';
@@ -12625,7 +12634,7 @@ var SelectionPlugin = /** @class */ (function () {
                 this.onMouseDown(this.editor, event.rawEvent);
                 break;
             case 'mouseUp':
-                this.onMouseUp();
+                this.onMouseUp(this.editor, event);
                 break;
             case 'keyDown':
                 this.onKeyDown(this.editor, event.rawEvent);
@@ -12641,25 +12650,40 @@ var SelectionPlugin = /** @class */ (function () {
         }
     };
     SelectionPlugin.prototype.onMouseDown = function (editor, rawEvent) {
-        var _a;
+        var _a, _b;
         var selection = editor.getDOMSelection();
         var image;
         // Image selection
-        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
-            (rawEvent.button == MouseLeftButton ||
-                (rawEvent.button == MouseRightButton &&
-                    !this.getClickingImage(rawEvent) &&
-                    !this.getContainedTargetImage(rawEvent, selection)))) {
-            this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/);
+        if (editor.isExperimentalFeatureEnabled('LegacyImageSelection')) {
+            if (rawEvent.button === MouseRightButton &&
+                (image =
+                    (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
+                image.isContentEditable) {
+                this.selectImageWithRange(image, rawEvent);
+                return;
+            }
+            else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== rawEvent.target) {
+                this.selectBeforeOrAfterElement(editor, selection.image);
+                return;
+            }
         }
-        if ((image =
-            (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
-            image.isContentEditable) {
-            this.setDOMSelection({
-                type: 'image',
-                image: image,
-            }, null);
-            return;
+        else {
+            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                (rawEvent.button == MouseLeftButton ||
+                    (rawEvent.button == MouseRightButton &&
+                        !this.getClickingImage(rawEvent) &&
+                        !this.getContainedTargetImage(rawEvent, selection)))) {
+                this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/);
+            }
+            if ((image =
+                (_b = this.getClickingImage(rawEvent)) !== null && _b !== void 0 ? _b : this.getContainedTargetImage(rawEvent, selection)) &&
+                image.isContentEditable) {
+                this.setDOMSelection({
+                    type: 'image',
+                    image: image,
+                }, null);
+                return;
+            }
         }
         // Table selection
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'table' && rawEvent.button == MouseLeftButton) {
@@ -12687,7 +12711,33 @@ var SelectionPlugin = /** @class */ (function () {
             });
         }
     };
-    SelectionPlugin.prototype.onMouseUp = function () {
+    SelectionPlugin.prototype.selectImageWithRange = function (image, event) {
+        var _a;
+        var range = image.ownerDocument.createRange();
+        range.selectNode(image);
+        var domSelection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+        if ((domSelection === null || domSelection === void 0 ? void 0 : domSelection.type) == 'image' && image == domSelection.image) {
+            event.preventDefault();
+        }
+        else {
+            this.setDOMSelection({
+                type: 'range',
+                isReverted: false,
+                range: range,
+            }, null);
+        }
+    };
+    SelectionPlugin.prototype.onMouseUp = function (editor, event) {
+        var image;
+        if (editor.isExperimentalFeatureEnabled('LegacyImageSelection') &&
+            (image = this.getClickingImage(event.rawEvent)) &&
+            image.isContentEditable &&
+            event.rawEvent.button != MouseMiddleButton &&
+            (event.rawEvent.button ==
+                MouseRightButton /* it's not possible to drag using right click */ ||
+                event.isClicking)) {
+            this.selectImageWithRange(image, event.rawEvent);
+        }
         this.detachMouseEvent();
     };
     SelectionPlugin.prototype.onKeyDown = function (editor, rawEvent) {
@@ -14471,6 +14521,37 @@ function shouldUseTableProcessor(element, context) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/utils/createAriaLiveElement.ts":
+/*!**********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/utils/createAriaLiveElement.ts ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.createAriaLiveElement = void 0;
+/**
+ * @internal
+ */
+function createAriaLiveElement(document) {
+    var div = document.createElement('div');
+    div.style.clip = 'rect(0px, 0px, 0px, 0px)';
+    div.style.clipPath = 'inset(100%)';
+    div.style.height = '1px';
+    div.style.overflow = 'hidden';
+    div.style.position = 'absolute';
+    div.style.whiteSpace = 'nowrap';
+    div.style.width = '1px';
+    div.ariaLive = 'assertive';
+    document.body.appendChild(div);
+    return div;
+}
+exports.createAriaLiveElement = createAriaLiveElement;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/config/defaultContentModelFormatMap.ts":
@@ -17310,6 +17391,40 @@ function getObjectKeys(obj) {
 exports.getObjectKeys = getObjectKeys;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/domUtils/getSafeIdSelector.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/domUtils/getSafeIdSelector.ts ***!
+  \********************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getSafeIdSelector = void 0;
+var StartsWithUnsupportedCharacter = /^[.|\-|_|\d]/;
+/**
+ * Returns a safe Id to use in Native APIs.
+ * IDs that start with number or hyphen can throw errors if used.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+ * @param id
+ * @returns
+ */
+function getSafeIdSelector(id) {
+    if (!id) {
+        return id;
+    }
+    if (id.match(StartsWithUnsupportedCharacter)) {
+        return "[id=\"" + id + "\"]";
+    }
+    else {
+        return "#" + id;
+    }
+}
+exports.getSafeIdSelector = getSafeIdSelector;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/domUtils/isElementOfType.ts":
@@ -20025,9 +20140,9 @@ exports.shouldSetValue = shouldSetValue;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
-exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = void 0;
-exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = void 0;
+exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getSafeIdSelector = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
+exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = void 0;
+exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = exports.cacheGetEventData = void 0;
 var domToContentModel_1 = __webpack_require__(/*! ./domToModel/domToContentModel */ "./packages/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts");
 Object.defineProperty(exports, "domToContentModel", ({ enumerable: true, get: function () { return domToContentModel_1.domToContentModel; } }));
 var contentModelToDom_1 = __webpack_require__(/*! ./modelToDom/contentModelToDom */ "./packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts");
@@ -20062,6 +20177,8 @@ var isElementOfType_1 = __webpack_require__(/*! ./domUtils/isElementOfType */ ".
 Object.defineProperty(exports, "isElementOfType", ({ enumerable: true, get: function () { return isElementOfType_1.isElementOfType; } }));
 var getObjectKeys_1 = __webpack_require__(/*! ./domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
 Object.defineProperty(exports, "getObjectKeys", ({ enumerable: true, get: function () { return getObjectKeys_1.getObjectKeys; } }));
+var getSafeIdSelector_1 = __webpack_require__(/*! ./domUtils/getSafeIdSelector */ "./packages/roosterjs-content-model-dom/lib/domUtils/getSafeIdSelector.ts");
+Object.defineProperty(exports, "getSafeIdSelector", ({ enumerable: true, get: function () { return getSafeIdSelector_1.getSafeIdSelector; } }));
 var toArray_1 = __webpack_require__(/*! ./domUtils/toArray */ "./packages/roosterjs-content-model-dom/lib/domUtils/toArray.ts");
 Object.defineProperty(exports, "toArray", ({ enumerable: true, get: function () { return toArray_1.toArray; } }));
 var moveChildNodes_1 = __webpack_require__(/*! ./domUtils/moveChildNodes */ "./packages/roosterjs-content-model-dom/lib/domUtils/moveChildNodes.ts");
@@ -26813,7 +26930,9 @@ function canAppendList(index, previousListIndex) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.keyboardListTrigger = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var getListTypeStyle_1 = __webpack_require__(/*! ./getListTypeStyle */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
@@ -26827,6 +26946,7 @@ function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, s
         var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
         triggerList(model, listType, styleType, index);
         context.canUndoByBackspace = true;
+        setAnnounceData(model, context);
         return true;
     }
     return false;
@@ -26841,11 +26961,21 @@ var triggerList = function (model, listType, styleType, index) {
     (0, roosterjs_content_model_api_1.setModelListStyle)(model, isOrderedList
         ? {
             orderedStyleType: styleType,
+            applyListStyleFromLevel: false,
         }
         : {
             unorderedStyleType: styleType,
+            applyListStyleFromLevel: false,
         });
 };
+function setAnnounceData(model, context) {
+    var _a = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem'], [] // Set stop types to be empty so we can find list items even cross the boundary of table, then we can always operation on the list item if any
+    ), 1), paragraphOrListItems = _a[0];
+    if (paragraphOrListItems && (0, roosterjs_content_model_dom_1.isBlockGroupOfType)(paragraphOrListItems.block, 'ListItem')) {
+        var path = paragraphOrListItems.path, block = paragraphOrListItems.block;
+        context.announceData = (0, roosterjs_content_model_api_1.getListAnnounceData)((0, tslib_1.__spreadArray)([block], (0, tslib_1.__read)(path), false));
+    }
+}
 
 
 /***/ }),
@@ -28937,6 +29067,7 @@ var getHTMLImageOptions_1 = __webpack_require__(/*! ./utils/getHTMLImageOptions
 var getSelectedImage_1 = __webpack_require__(/*! ./utils/getSelectedImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts");
 var updateImageEditInfo_1 = __webpack_require__(/*! ./utils/updateImageEditInfo */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateImageEditInfo.ts");
 var ImageEditElementClass_1 = __webpack_require__(/*! ./types/ImageEditElementClass */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditElementClass.ts");
+var normalizeImageSelection_1 = __webpack_require__(/*! ./utils/normalizeImageSelection */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts");
 var resizerContext_1 = __webpack_require__(/*! ./Resizer/resizerContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/resizerContext.ts");
 var rotatorContext_1 = __webpack_require__(/*! ./Rotator/rotatorContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/rotatorContext.ts");
 var updateRotateHandle_1 = __webpack_require__(/*! ./Rotator/updateRotateHandle */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/updateRotateHandle.ts");
@@ -29119,6 +29250,9 @@ var ImageEditPlugin = /** @class */ (function () {
                         image.isSelected = shouldSelectImage;
                         image.isSelectedAsImageSelection = shouldSelectImage;
                     });
+                    if (shouldSelectImage) {
+                        (0, normalizeImageSelection_1.normalizeImageSelection)(previousSelectedImage);
+                    }
                     _this.cleanInfo();
                     result = true;
                 }
@@ -29176,7 +29310,7 @@ var ImageEditPlugin = /** @class */ (function () {
         this.croppers = croppers;
         this.zoomScale = editor.getDOMHelper().calculateZoomScale();
         editor.setEditorStyle('imageEdit', "outline-style:none!important;", [
-            "span:has(>img#" + this.selectedImage.id + ")",
+            "span:has(>img" + (0, roosterjs_content_model_dom_1.getSafeIdSelector)(this.selectedImage.id) + ")",
         ]);
     };
     ImageEditPlugin.prototype.startRotateAndResize = function (editor, image) {
@@ -30601,6 +30735,48 @@ function isFixedNumberValue(value) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts":
+/*!*************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts ***!
+  \*************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.normalizeImageSelection = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * Selecting directly on the image will only capture the image segment.
+ * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.
+ * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.
+ * To fix this behavior the extra selection markers are removed.
+ * @internal
+ */
+function normalizeImageSelection(imageAndParagraph) {
+    var paragraph = imageAndParagraph.paragraph;
+    var index = paragraph.segments.indexOf(imageAndParagraph.image);
+    if (index > 0) {
+        var markerBefore = paragraph.segments[index - 1];
+        var markerAfter = paragraph.segments[index + 1];
+        if (markerBefore &&
+            markerAfter &&
+            markerAfter.segmentType == 'SelectionMarker' &&
+            markerBefore.segmentType == 'SelectionMarker' &&
+            markerAfter.isSelected &&
+            markerBefore.isSelected) {
+            var mutatedParagraph = (0, roosterjs_content_model_dom_1.mutateBlock)(paragraph);
+            mutatedParagraph.segments.splice(index - 1, 1);
+            mutatedParagraph.segments.splice(index, 1);
+        }
+        return imageAndParagraph;
+    }
+}
+exports.normalizeImageSelection = normalizeImageSelection;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateHandleCursor.ts":
@@ -30816,11 +30992,13 @@ exports.updateWrapper = updateWrapper;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ImageEditPlugin = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
+exports.ImageEditPlugin = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.DefaultSanitizers = exports.PastePlugin = exports.TableEditPlugin = void 0;
 var TableEditPlugin_1 = __webpack_require__(/*! ./tableEdit/TableEditPlugin */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts");
 Object.defineProperty(exports, "TableEditPlugin", ({ enumerable: true, get: function () { return TableEditPlugin_1.TableEditPlugin; } }));
 var PastePlugin_1 = __webpack_require__(/*! ./paste/PastePlugin */ "./packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts");
 Object.defineProperty(exports, "PastePlugin", ({ enumerable: true, get: function () { return PastePlugin_1.PastePlugin; } }));
+var DefaultSanitizers_1 = __webpack_require__(/*! ./paste/DefaultSanitizers */ "./packages/roosterjs-content-model-plugins/lib/paste/DefaultSanitizers.ts");
+Object.defineProperty(exports, "DefaultSanitizers", ({ enumerable: true, get: function () { return DefaultSanitizers_1.DefaultSanitizers; } }));
 var EditPlugin_1 = __webpack_require__(/*! ./edit/EditPlugin */ "./packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts");
 Object.defineProperty(exports, "EditPlugin", ({ enumerable: true, get: function () { return EditPlugin_1.EditPlugin; } }));
 var AutoFormatPlugin_1 = __webpack_require__(/*! ./autoFormat/AutoFormatPlugin */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts");
@@ -31125,7 +31303,7 @@ exports.setFormat = setFormat;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.divParagraphSanitizer = exports.DefaultSanitizers = void 0;
 /**
- * @internal
+ * Default style sanitizers for PastePlugin.
  */
 exports.DefaultSanitizers = {
     width: divParagraphSanitizer,