roosterjs 9.8.0 → 9.9.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.8.0)
+// Type definitions for roosterjs (Version 9.9.0)
 // 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
@@ -3554,9 +3558,9 @@ export interface PasteOptions {
      */
     allowedCustomPasteType?: string[];
     /**
-     * Default paste type. By default will use the normal (as-is) paste type.
+     * Default paste type or function that returns the paste type. By default will use the normal (as-is) paste type.
      */
-    defaultPasteType?: PasteType;
+    defaultPasteType?: PasteTypeOrGetter;
 }
 
 /**
@@ -4106,7 +4110,7 @@ export interface CopyPastePluginState {
     /**
      * Default paste type. By default will use the normal (as-is) paste type.
      */
-    defaultPasteType?: PasteType;
+    defaultPasteType?: PasteTypeOrGetter;
 }
 
 /**
@@ -4664,6 +4668,12 @@ export interface ContentModelFormatState {
     isDarkMode?: boolean;
 }
 
+/**
+ * Represents the PasteType parameter used to set the paste type to use.
+ * It can be either the Paste Type value or a callback that retuns the Paste Type to use.
+ */
+export type PasteTypeOrGetter = PasteType | ((document: Document | null, clipboardData: ClipboardData) => PasteType);
+
 /**
  * Image Format
  */
@@ -5046,6 +5056,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 +6210,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
@@ -7738,9 +7762,9 @@ export function redo(editor: IEditor): void;
  * Paste into editor using a clipboardData object
  * @param editor The Editor object.
  * @param clipboardData Clipboard data retrieved from clipboard
- * @param pasteType Type of content to paste. @default normal
+ * @param pasteTypeOrGetter Type of content to paste or function that returns the Paste Type to use based on the document and the clipboard Data. @default normal
  */
-export function paste(editor: IEditor, clipboardData: ClipboardData, pasteType?: PasteType): void;
+export function paste(editor: IEditor, clipboardData: ClipboardData, pasteTypeOrGetter?: PasteTypeOrGetter): void;
 
 /**
  * Insert table into editor at current selection

package/dist/rooster-amd.js

@@ -7859,11 +7859,11 @@ var retrieveHtmlInfo_1 = __webpack_require__(/*! ./retrieveHtmlInfo */ "./packag
  * Paste into editor using a clipboardData object
  * @param editor The Editor object.
  * @param clipboardData Clipboard data retrieved from clipboard
- * @param pasteType Type of content to paste. @default normal
+ * @param pasteTypeOrGetter Type of content to paste or function that returns the Paste Type to use based on the document and the clipboard Data. @default normal
  */
-function paste(editor, clipboardData, pasteType) {
+function paste(editor, clipboardData, pasteTypeOrGetter) {
     var _a;
-    if (pasteType === void 0) { pasteType = 'normal'; }
+    if (pasteTypeOrGetter === void 0) { pasteTypeOrGetter = 'normal'; }
     editor.focus();
     var trustedHTMLHandler = editor.getTrustedHTMLHandler();
     if (!clipboardData.modelBeforePaste) {
@@ -7874,6 +7874,9 @@ function paste(editor, clipboardData, pasteType) {
     }
     // 1. Prepare variables
     var doc = createDOMFromHtml(clipboardData.rawHtml, trustedHTMLHandler);
+    var pasteType = typeof pasteTypeOrGetter == 'function'
+        ? pasteTypeOrGetter(doc, clipboardData)
+        : pasteTypeOrGetter;
     // 2. Handle HTML from clipboard
     var htmlFromClipboard = (0, retrieveHtmlInfo_1.retrieveHtmlInfo)(doc, clipboardData);
     // 3. Create target fragment
@@ -8326,7 +8329,7 @@ var DOT_STRING = '.';
  * @param announceData Data to announce
  */
 var announce = function (core, announceData) {
-    var text = announceData.text, defaultStrings = announceData.defaultStrings, _a = announceData.formatStrings, formatStrings = _a === void 0 ? [] : _a;
+    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);
@@ -8335,6 +8338,9 @@ var announce = function (core, announceData) {
     }
     if (textToAnnounce && core.lifecycle.announceContainer) {
         var announceContainer = core.lifecycle.announceContainer;
+        if (announceContainer.ariaLive != ariaLiveMode) {
+            announceContainer.ariaLive = ariaLiveMode;
+        }
         if (textToAnnounce == announceContainer.textContent) {
             textToAnnounce += DOT_STRING;
         }
@@ -9089,6 +9095,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
  */
@@ -9113,7 +9120,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',
@@ -9126,7 +9133,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',
@@ -9417,7 +9424,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;
@@ -9450,12 +9457,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
@@ -9488,7 +9496,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.
@@ -9522,7 +9530,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 + ' *');
                 }
             }
@@ -9559,12 +9567,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
  */
@@ -9572,7 +9581,7 @@ function ensureUniqueId(element, idPrefix) {
     idPrefix = element.id || idPrefix;
     var doc = element.ownerDocument;
     var i = 0;
-    while (!element.id || doc.querySelectorAll("[id=\"" + 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;
@@ -9593,6 +9602,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';
 /**
@@ -9614,7 +9624,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'
@@ -12420,6 +12430,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';
@@ -12626,7 +12637,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);
@@ -12642,25 +12653,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) {
@@ -12688,7 +12714,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) {
@@ -17342,6 +17394,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":
@@ -20057,9 +20143,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");
@@ -20094,6 +20180,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");
@@ -29225,7 +29313,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) {