roosterjs 9.26.0 → 9.27.0

package/dist/rooster.js

@@ -5615,8 +5615,9 @@ function insertLink(editor, link, anchorTitle, displayText, target) {
                 .map(function (x) { return (x.segmentType == 'Text' ? x.text : ''); })
                 .join('');
             var text = displayText || originalText || '';
-            if (segments.some(function (x) { return x.segmentType != 'SelectionMarker'; }) &&
-                originalText == text) {
+            if ((segments.some(function (x) { return x.segmentType != 'SelectionMarker'; }) &&
+                originalText == text) ||
+                (segments.length == 1 && segments[0].segmentType == 'Image')) {
                 segments.forEach(function (x) {
                     var link = createLink(linkUrl_1, anchorTitle, target, x.segmentType == 'Text');
                     (0, roosterjs_content_model_dom_1.addLink)(x, link);
@@ -8020,6 +8021,64 @@ function exportContent(editor, mode, optionsOrCallbacks) {
 exports.exportContent = exportContent;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/command/paste/cleanHtmlComments.ts":
+/*!**************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/command/paste/cleanHtmlComments.ts ***!
+  \**************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.cleanHtmlComments = void 0;
+var HtmlCommentStart = '\x3C!--';
+var HtmlCommentStart2 = '<!--';
+var HtmlCommentEnd = '-->';
+var styleTag = '<style';
+var styleClosingTag = '</style>';
+var nonWordCharacterRegex = /\W/;
+/**
+ * @internal
+ * Exported only for unit test
+ */
+function cleanHtmlComments(html) {
+    var _a;
+    var _b = extractHtmlIndexes(html), styleIndex = _b.styleIndex, styleEndIndex = _b.styleEndIndex;
+    while (styleIndex > -1) {
+        html = removeCommentsFromHtml(html, HtmlCommentStart, styleEndIndex, styleIndex);
+        html = removeCommentsFromHtml(html, HtmlCommentStart2, styleEndIndex, styleIndex);
+        html = removeCommentsFromHtml(html, HtmlCommentEnd, styleEndIndex, styleIndex);
+        (_a = extractHtmlIndexes(html, styleEndIndex + 1), styleIndex = _a.styleIndex, styleEndIndex = _a.styleEndIndex);
+    }
+    return html;
+}
+exports.cleanHtmlComments = cleanHtmlComments;
+function extractHtmlIndexes(html, startIndex) {
+    if (startIndex === void 0) { startIndex = 0; }
+    var htmlLowercase = html.toLowerCase();
+    var styleIndex = htmlLowercase.indexOf(styleTag, startIndex);
+    var currentIndex = styleIndex + styleTag.length;
+    var nextChar = html.substring(currentIndex, currentIndex + 1);
+    while (!nonWordCharacterRegex.test(nextChar) && styleIndex > -1) {
+        styleIndex = htmlLowercase.indexOf(styleTag, styleIndex + 1);
+        currentIndex = styleIndex + styleTag.length;
+        nextChar = html.substring(currentIndex, currentIndex + 1);
+    }
+    var styleEndIndex = htmlLowercase.indexOf(styleClosingTag, startIndex);
+    return { styleIndex: styleIndex, styleEndIndex: styleEndIndex };
+}
+function removeCommentsFromHtml(html, marker, endId, startId) {
+    var id = html.indexOf(marker, startId);
+    while (id > -1 && id < endId) {
+        html = html.substring(0, id) + html.substring(id + marker.length);
+        id = html.indexOf(marker, id + 1);
+    }
+    return html;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/command/paste/createPasteFragment.ts":
@@ -8259,6 +8318,7 @@ function getLastSegmentFormat(pasteModel) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.paste = void 0;
+var cleanHtmlComments_1 = __webpack_require__(/*! ./cleanHtmlComments */ "./packages/roosterjs-content-model-core/lib/command/paste/cleanHtmlComments.ts");
 var mergePasteContent_1 = __webpack_require__(/*! ./mergePasteContent */ "./packages/roosterjs-content-model-core/lib/command/paste/mergePasteContent.ts");
 var convertInlineCss_1 = __webpack_require__(/*! ../createModelFromHtml/convertInlineCss */ "./packages/roosterjs-content-model-core/lib/command/createModelFromHtml/convertInlineCss.ts");
 var createPasteFragment_1 = __webpack_require__(/*! ./createPasteFragment */ "./packages/roosterjs-content-model-core/lib/command/paste/createPasteFragment.ts");
@@ -8283,7 +8343,11 @@ function paste(editor, clipboardData, pasteTypeOrGetter) {
         });
     }
     // 1. Prepare variables
-    var doc = createDOMFromHtml(clipboardData.rawHtml, editor.getDOMCreator());
+    var domCreator = editor.getDOMCreator();
+    if (!domCreator.isBypassed && clipboardData.rawHtml) {
+        clipboardData.rawHtml = (0, cleanHtmlComments_1.cleanHtmlComments)(clipboardData.rawHtml);
+    }
+    var doc = createDOMFromHtml(clipboardData.rawHtml, domCreator);
     var pasteType = typeof pasteTypeOrGetter == 'function'
         ? pasteTypeOrGetter(doc, clipboardData)
         : pasteTypeOrGetter;
@@ -8292,7 +8356,7 @@ function paste(editor, clipboardData, pasteTypeOrGetter) {
     // 3. Create target fragment
     var sourceFragment = (0, createPasteFragment_1.createPasteFragment)(editor.getDocument(), clipboardData, pasteType, (_a = (clipboardData.rawHtml == clipboardData.html
         ? doc
-        : createDOMFromHtml(clipboardData.html, editor.getDOMCreator()))) === null || _a === void 0 ? void 0 : _a.body);
+        : createDOMFromHtml(clipboardData.html, domCreator))) === null || _a === void 0 ? void 0 : _a.body);
     // 4. Trigger BeforePaste event to allow plugins modify the fragment
     var eventResult = (0, generatePasteOptionFromPlugins_1.generatePasteOptionFromPlugins)(editor, clipboardData, sourceFragment, htmlFromClipboard, pasteType);
     // 5. Convert global CSS to inline CSS
@@ -10743,11 +10807,14 @@ var DomIndexerImpl = /** @class */ (function () {
     DomIndexerImpl.prototype.reconcileSelection = function (model, newSelection, oldSelection) {
         var _a, _b;
         if (oldSelection) {
+            var startNode = void 0;
             if (oldSelection.type == 'range' &&
                 this.isCollapsed(oldSelection) &&
-                (0, roosterjs_content_model_dom_1.isNodeOfType)(oldSelection.start.node, 'TEXT_NODE') &&
-                isIndexedSegment(oldSelection.start.node)) {
-                this.reconcileTextSelection(oldSelection.start.node);
+                (startNode = oldSelection.start.node) &&
+                (0, roosterjs_content_model_dom_1.isNodeOfType)(startNode, 'TEXT_NODE') &&
+                isIndexedSegment(startNode) &&
+                startNode.__roosterjsContentModel.segments.length > 0) {
+                this.reconcileTextSelection(startNode);
             }
             else {
                 (0, roosterjs_content_model_dom_1.setSelection)(model);
@@ -11409,6 +11476,7 @@ var adjustImageSelectionOnSafari_1 = __webpack_require__(/*! ./utils/adjustImage
 var deleteEmptyList_1 = __webpack_require__(/*! ./utils/deleteEmptyList */ "./packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/utils/deleteEmptyList.ts");
 var pasteCopyBlockEntityParser_1 = __webpack_require__(/*! ../../override/pasteCopyBlockEntityParser */ "./packages/roosterjs-content-model-core/lib/override/pasteCopyBlockEntityParser.ts");
 var paste_1 = __webpack_require__(/*! ../../command/paste/paste */ "./packages/roosterjs-content-model-core/lib/command/paste/paste.ts");
+var pruneUnselectedModel_1 = __webpack_require__(/*! ./utils/pruneUnselectedModel */ "./packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/utils/pruneUnselectedModel.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TEMP_DIV_ID = 'roosterJS_copyCutTempDiv';
 /**
@@ -11423,6 +11491,7 @@ var CopyPastePlugin = /** @class */ (function () {
         var _this = this;
         this.editor = null;
         this.disposer = null;
+        this.customCopyCutEnabled = false;
         this.onPaste = function (event) {
             if (_this.editor && isClipboardEvent(event)) {
                 var editor_1 = _this.editor;
@@ -11467,6 +11536,7 @@ var CopyPastePlugin = /** @class */ (function () {
                 beforeDispatch: function (e) { return _this.onCutCopy(e, true /*isCut*/); },
             },
         });
+        this.customCopyCutEnabled = editor.isExperimentalFeatureEnabled('CustomCopyCut');
     };
     /**
      * Dispose this plugin
@@ -11491,7 +11561,7 @@ var CopyPastePlugin = /** @class */ (function () {
     };
     CopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
         var _this = this;
-        var _a;
+        var _a, _b, _c;
         if (!this.editor) {
             return;
         }
@@ -11500,6 +11570,7 @@ var CopyPastePlugin = /** @class */ (function () {
         (0, adjustImageSelectionOnSafari_1.adjustImageSelectionOnSafari)(this.editor, selection);
         if (selection && (selection.type != 'range' || !selection.range.collapsed)) {
             var pasteModel = this.editor.getContentModelCopy('disconnected');
+            (0, pruneUnselectedModel_1.pruneUnselectedModel)(pasteModel);
             if (selection.type === 'table') {
                 (0, roosterjs_content_model_dom_1.iterateSelections)(pasteModel, function (_, tableContext) {
                     if (tableContext === null || tableContext === void 0 ? void 0 : tableContext.table) {
@@ -11526,10 +11597,16 @@ var CopyPastePlugin = /** @class */ (function () {
                     rawEvent: event,
                     isCut: isCut,
                 }).range;
-                if (newRange) {
+                if (this.customCopyCutEnabled && isClipboardEvent(event)) {
+                    event.preventDefault();
+                    var text = (0, roosterjs_content_model_dom_1.contentModelToText)(pasteModel);
+                    (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.setData('text/html', tempDiv_1.innerHTML);
+                    (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.setData('text/plain', text);
+                }
+                else if (newRange) {
                     (0, addRangeToSelection_1.addRangeToSelection)(doc, newRange);
                 }
-                (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                (_c = doc.defaultView) === null || _c === void 0 ? void 0 : _c.requestAnimationFrame(function () {
                     if (!_this.editor) {
                         return;
                     }
@@ -11566,7 +11643,9 @@ var CopyPastePlugin = /** @class */ (function () {
             tempDiv.style.left = '0';
             tempDiv.style.userSelect = 'text';
             tempDiv.contentEditable = 'true';
-            doc.body.appendChild(tempDiv);
+            if (!this.customCopyCutEnabled) {
+                doc.body.appendChild(tempDiv);
+            }
             this.state.tempDiv = tempDiv;
         }
         var div = this.state.tempDiv;
@@ -11778,6 +11857,151 @@ var deleteEmptyList = function (context) {
 exports.deleteEmptyList = deleteEmptyList;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/utils/pruneUnselectedModel.ts":
+/*!******************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/utils/pruneUnselectedModel.ts ***!
+  \******************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.pruneUnselectedModel = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+/**
+ * @internal
+ */
+function pruneUnselectedModel(model) {
+    pruneUnselectedModelInternal(model, false /* isSelectionAfterElement */);
+    unwrap(model);
+}
+exports.pruneUnselectedModel = pruneUnselectedModel;
+function pruneUnselectedModelInternal(model, isSelectionAfterElement) {
+    var e_1, _a, _b;
+    for (var index = model.blocks.length - 1; index >= 0; index--) {
+        var block = model.blocks[index];
+        switch (block.blockType) {
+            case 'BlockGroup':
+                pruneUnselectedModelInternal(block, isSelectionAfterElement);
+                if (block.blockGroupType == 'General'
+                    ? block.blocks.length == 0 && !block.isSelected
+                    : block.blocks.length == 0) {
+                    model.blocks.splice(index, 1);
+                }
+                break;
+            case 'Divider':
+            case 'Entity':
+                if (!block.isSelected) {
+                    model.blocks.splice(index, 1);
+                }
+                else {
+                    isSelectionAfterElement = true;
+                }
+                break;
+            case 'Paragraph':
+                var newSegments = [];
+                try {
+                    for (var _c = (e_1 = void 0, (0, tslib_1.__values)(block.segments)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var segment = _d.value;
+                        if (segment.segmentType == 'General') {
+                            pruneUnselectedModel(segment);
+                            if (segment.blocks.length > 0 || segment.isSelected) {
+                                newSegments.push(segment);
+                            }
+                        }
+                        else if (segment.isSelected && segment.segmentType != 'SelectionMarker') {
+                            newSegments.push(segment);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                block.segments = newSegments;
+                if (block.segments.length == 0) {
+                    model.blocks.splice(index, 1);
+                }
+                else {
+                    isSelectionAfterElement = true;
+                }
+                break;
+            case 'Table':
+                var filteredRows = [];
+                for (var i = 0; i < block.rows.length; i++) {
+                    var row = block.rows[i];
+                    for (var j = 0; j < row.cells.length; j++) {
+                        var cell = row.cells[j];
+                        if (!cell.isSelected) {
+                            pruneUnselectedModelInternal(cell, isSelectionAfterElement);
+                        }
+                        else {
+                            isSelectionAfterElement = true;
+                        }
+                    }
+                    var newCells = [];
+                    for (var k = 0; k < row.cells.length; k++) {
+                        var cell = row.cells[k];
+                        if (cell.isSelected || cell.blocks.length > 0) {
+                            newCells.push(cell);
+                        }
+                    }
+                    row.cells = newCells;
+                    if (row.cells.length > 0) {
+                        filteredRows.push(row);
+                    }
+                }
+                if (!isSelectionAfterElement &&
+                    filteredRows.length == 1 &&
+                    filteredRows[0].cells.length == 1 &&
+                    !filteredRows[0].cells[0].isSelected) {
+                    var cell = filteredRows[0].cells[0];
+                    (_b = model.blocks).splice.apply(_b, (0, tslib_1.__spreadArray)([index, 1], (0, tslib_1.__read)(cell.blocks), false));
+                }
+                else if (filteredRows.length == 0) {
+                    model.blocks.splice(index, 1);
+                }
+                else {
+                    block.rows = filteredRows;
+                }
+                break;
+        }
+    }
+    return isSelectionAfterElement;
+}
+function unwrap(model) {
+    var block = model.blocks[0];
+    if (model.blocks.length == 1) {
+        while (block.blockType == 'BlockGroup') {
+            model.blocks = block.blocks;
+            block = model.blocks[0];
+            if (model.blocks.length > 1) {
+                return;
+            }
+        }
+        if (block.blockType == 'Paragraph') {
+            block.isImplicit = true;
+            block.format = {};
+            inheritSegmentFormatToChildren(block);
+        }
+    }
+}
+function inheritSegmentFormatToChildren(parent) {
+    var value = parent.segmentFormat;
+    if (value !== undefined) {
+        for (var index = 0; index < parent.segments.length; index++) {
+            var segment = parent.segments[index];
+            segment.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, parent.segmentFormat), segment.format);
+        }
+    }
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/corePlugin/createEditorCorePlugins.ts":
@@ -12816,6 +13040,7 @@ var FormatPlugin = /** @class */ (function () {
      */
     FormatPlugin.prototype.initialize = function (editor) {
         this.editor = editor;
+        this.state.defaultFormat = (0, roosterjs_content_model_dom_1.normalizeSegmentFormat)(this.state.defaultFormat, editor.getEnvironment());
     };
     /**
      * The last method that editor will call to a plugin before it is disposed.
@@ -15437,6 +15662,7 @@ function trustedHTMLHandlerToDOMCreator(trustedHTMLHandler) {
     var handler = trustedHTMLHandler || exports.defaultTrustHtmlHandler;
     return {
         htmlToDOM: function (html) { return new DOMParser().parseFromString(handler(html), 'text/html'); },
+        isBypassed: !trustedHTMLHandler,
     };
 }
 
@@ -15705,10 +15931,22 @@ exports.BulletListType = {
      * Bullet type circle
      */
     Circle: 9,
+    /**
+     * Box Shadow bullet type
+     */
+    BoxShadow: 10,
+    /**
+     * Rhombus with a cross inside
+     */
+    Xrhombus: 11,
+    /**
+     * Check mark bullet type
+     */
+    CheckMark: 12,
     /**
      * Maximum value of the enum
      */
-    Max: 9,
+    Max: 12,
 };
 
 
@@ -16081,7 +16319,7 @@ var BulletListType_1 = __webpack_require__(/*! ./BulletListType */ "./packages/r
  */
 exports.UnorderedListStyleMap = (_a = {},
     _a[BulletListType_1.BulletListType.Disc] = 'disc',
-    _a[BulletListType_1.BulletListType.Square] = '"∎ "',
+    _a[BulletListType_1.BulletListType.Square] = 'square',
     _a[BulletListType_1.BulletListType.Circle] = 'circle',
     _a[BulletListType_1.BulletListType.Dash] = '"- "',
     _a[BulletListType_1.BulletListType.LongArrow] = '"➔ "',
@@ -16089,6 +16327,9 @@ exports.UnorderedListStyleMap = (_a = {},
     _a[BulletListType_1.BulletListType.ShortArrow] = '"➢ "',
     _a[BulletListType_1.BulletListType.UnfilledArrow] = '"➪ "',
     _a[BulletListType_1.BulletListType.Hyphen] = '"— "',
+    _a[BulletListType_1.BulletListType.CheckMark] = '"✔ "',
+    _a[BulletListType_1.BulletListType.Xrhombus] = '"❖ "',
+    _a[BulletListType_1.BulletListType.BoxShadow] = '"❑ "',
     _a);
 
 
@@ -16997,6 +17238,7 @@ var FormatContainerTriggerStyles = [
     'minWidth',
     'minHeight',
 ];
+var FormatContainerTriggerAttributes = ['id'];
 var ByPassFormatContainerTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'A'];
 var SegmentDecoratorTags = ['A', 'CODE'];
 /**
@@ -17050,7 +17292,8 @@ function shouldUseFormatContainer(element, context) {
     }
     // For block element with positive value of border width or top/bottom margin/padding,
     // we need to use format container
-    if (FormatContainerTriggerStyles.some(function (key) { return parseInt(style[key] || defaultStyle[key] || '') > 0; })) {
+    if (FormatContainerTriggerStyles.some(function (key) { return parseInt(style[key] || defaultStyle[key] || '') > 0; }) ||
+        FormatContainerTriggerAttributes.some(function (attr) { return element.hasAttribute(attr); })) {
         return true;
     }
     // For margin left/right with value "auto", we need to use format container
@@ -18407,6 +18650,35 @@ function setHiddenProperty(node, key, value) {
 exports.setHiddenProperty = setHiddenProperty;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/imageState.ts":
+/*!******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/imageState.ts ***!
+  \******************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.setImageState = exports.getImageState = void 0;
+var hiddenProperty_1 = __webpack_require__(/*! ./hiddenProperty */ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/hiddenProperty.ts");
+/**
+ * Get image state from element. This is used to store a image state.
+ */
+function getImageState(element) {
+    return (0, hiddenProperty_1.getHiddenProperty)(element, 'imageState');
+}
+exports.getImageState = getImageState;
+/**
+ * Set image state to element. This is used to store a image state.
+ */
+function setImageState(element, marker) {
+    (0, hiddenProperty_1.setHiddenProperty)(element, 'imageState', marker);
+}
+exports.setImageState = setImageState;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/paragraphMarker.ts":
@@ -19949,6 +20221,7 @@ var fontSizeFormatHandler_1 = __webpack_require__(/*! ./segment/fontSizeFormatHa
 var getObjectKeys_1 = __webpack_require__(/*! ../domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
 var htmlAlignFormatHandler_1 = __webpack_require__(/*! ./block/htmlAlignFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/block/htmlAlignFormatHandler.ts");
 var idFormatHandler_1 = __webpack_require__(/*! ./common/idFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/idFormatHandler.ts");
+var imageStateFormatHandler_1 = __webpack_require__(/*! ./segment/imageStateFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/imageStateFormatHandler.ts");
 var italicFormatHandler_1 = __webpack_require__(/*! ./segment/italicFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/italicFormatHandler.ts");
 var letterSpacingFormatHandler_1 = __webpack_require__(/*! ./segment/letterSpacingFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/letterSpacingFormatHandler.ts");
 var lineHeightFormatHandler_1 = __webpack_require__(/*! ./block/lineHeightFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/block/lineHeightFormatHandler.ts");
@@ -19988,6 +20261,7 @@ var defaultFormatHandlerMap = {
     entity: entityFormatHandler_1.entityFormatHandler,
     htmlAlign: htmlAlignFormatHandler_1.htmlAlignFormatHandler,
     id: idFormatHandler_1.idFormatHandler,
+    imageState: imageStateFormatHandler_1.imageStateFormatHandler,
     italic: italicFormatHandler_1.italicFormatHandler,
     letterSpacing: letterSpacingFormatHandler_1.letterSpacingFormatHandler,
     lineHeight: lineHeightFormatHandler_1.lineHeightFormatHandler,
@@ -20100,6 +20374,7 @@ exports.defaultFormatKeysPerCategory = {
         'display',
         'float',
         'verticalAlign',
+        'imageState',
     ],
     link: [
         'link',
@@ -20118,7 +20393,7 @@ exports.defaultFormatKeysPerCategory = {
     code: ['fontFamily', 'display'],
     dataset: ['dataset'],
     divider: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), (0, tslib_1.__read)(sharedContainerFormats), false), ['display', 'size', 'htmlAlign'], false),
-    container: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedContainerFormats), false), ['htmlAlign', 'size', 'display'], false),
+    container: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedContainerFormats), false), ['htmlAlign', 'size', 'display', 'id'], false),
     entity: ['entity'],
     general: ['textColor', 'backgroundColor'], // General model still need to do color transformation in dark mode
 };
@@ -20477,6 +20752,37 @@ function normalizeFontSize(fontSize, contextFont, context) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/imageStateFormatHandler.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/imageStateFormatHandler.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.imageStateFormatHandler = void 0;
+var imageState_1 = __webpack_require__(/*! ../../domUtils/hiddenProperties/imageState */ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/imageState.ts");
+/**
+ * @internal
+ */
+exports.imageStateFormatHandler = {
+    parse: function (format, element) {
+        var marker = (0, imageState_1.getImageState)(element);
+        if (marker) {
+            format.imageState = marker;
+        }
+    },
+    apply: function (format, element) {
+        if (format.imageState) {
+            (0, imageState_1.setImageState)(element, format.imageState);
+        }
+    },
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/italicFormatHandler.ts":
@@ -21267,9 +21573,9 @@ exports.shouldSetValue = shouldSetValue;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.isLinkUndeletable = exports.setLinkUndeletable = 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.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.mergeTextSegments = 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 = exports.createGeneralBlock = exports.createGeneralSegment = void 0;
-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.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = void 0;
-exports.EmptySegmentFormat = void 0;
+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.normalizeSegmentFormat = exports.mergeTextSegments = 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 = exports.createGeneralBlock = exports.createGeneralSegment = void 0;
+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.getImageState = exports.setImageState = exports.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = void 0;
+exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = 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");
@@ -21398,6 +21704,8 @@ var normalizeSegment_1 = __webpack_require__(/*! ./modelApi/common/normalizeSegm
 Object.defineProperty(exports, "normalizeSingleSegment", ({ enumerable: true, get: function () { return normalizeSegment_1.normalizeSingleSegment; } }));
 var mergeTextSegments_1 = __webpack_require__(/*! ./modelApi/common/mergeTextSegments */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mergeTextSegments.ts");
 Object.defineProperty(exports, "mergeTextSegments", ({ enumerable: true, get: function () { return mergeTextSegments_1.mergeTextSegments; } }));
+var normalizeSegmentFormat_1 = __webpack_require__(/*! ./modelApi/common/normalizeSegmentFormat */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts");
+Object.defineProperty(exports, "normalizeSegmentFormat", ({ enumerable: true, get: function () { return normalizeSegmentFormat_1.normalizeSegmentFormat; } }));
 var setParagraphNotImplicit_1 = __webpack_require__(/*! ./modelApi/block/setParagraphNotImplicit */ "./packages/roosterjs-content-model-dom/lib/modelApi/block/setParagraphNotImplicit.ts");
 Object.defineProperty(exports, "setParagraphNotImplicit", ({ enumerable: true, get: function () { return setParagraphNotImplicit_1.setParagraphNotImplicit; } }));
 var getOrderedListNumberStr_1 = __webpack_require__(/*! ./modelApi/list/getOrderedListNumberStr */ "./packages/roosterjs-content-model-dom/lib/modelApi/list/getOrderedListNumberStr.ts");
@@ -21452,6 +21760,9 @@ Object.defineProperty(exports, "cacheGetEventData", ({ enumerable: true, get: fu
 var paragraphMarker_1 = __webpack_require__(/*! ./domUtils/hiddenProperties/paragraphMarker */ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/paragraphMarker.ts");
 Object.defineProperty(exports, "setParagraphMarker", ({ enumerable: true, get: function () { return paragraphMarker_1.setParagraphMarker; } }));
 Object.defineProperty(exports, "getParagraphMarker", ({ enumerable: true, get: function () { return paragraphMarker_1.getParagraphMarker; } }));
+var imageState_1 = __webpack_require__(/*! ./domUtils/hiddenProperties/imageState */ "./packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/imageState.ts");
+Object.defineProperty(exports, "setImageState", ({ enumerable: true, get: function () { return imageState_1.setImageState; } }));
+Object.defineProperty(exports, "getImageState", ({ enumerable: true, get: function () { return imageState_1.getImageState; } }));
 var isBlockGroupOfType_1 = __webpack_require__(/*! ./modelApi/typeCheck/isBlockGroupOfType */ "./packages/roosterjs-content-model-dom/lib/modelApi/typeCheck/isBlockGroupOfType.ts");
 Object.defineProperty(exports, "isBlockGroupOfType", ({ enumerable: true, get: function () { return isBlockGroupOfType_1.isBlockGroupOfType; } }));
 var iterateSelections_1 = __webpack_require__(/*! ./modelApi/selection/iterateSelections */ "./packages/roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections.ts");
@@ -22301,6 +22612,44 @@ function normalizeLastTextSegment(paragraph, segment, lastInlineSegment) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts ***!
+  \********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.normalizeSegmentFormat = void 0;
+var createContentModelDocument_1 = __webpack_require__(/*! ../creators/createContentModelDocument */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createContentModelDocument.ts");
+var createText_1 = __webpack_require__(/*! ../creators/createText */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createText.ts");
+var ensureParagraph_1 = __webpack_require__(/*! ./ensureParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/ensureParagraph.ts");
+var createModelToDomContext_1 = __webpack_require__(/*! ../../modelToDom/context/createModelToDomContext */ "./packages/roosterjs-content-model-dom/lib/modelToDom/context/createModelToDomContext.ts");
+var createDomToModelContext_1 = __webpack_require__(/*! ../../domToModel/context/createDomToModelContext */ "./packages/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts");
+/**
+ * Some format values can be changed when apply to DOM, such as font family.
+ * This function will normalize the format and return the same string after DOM modification.
+ * @param format The format to be normalized
+ * @return Normalized format
+ */
+function normalizeSegmentFormat(format, environment) {
+    var _a, _b;
+    var span = document.createElement('span');
+    var segment = (0, createText_1.createText)('text', format);
+    var domToModelContext = (0, createDomToModelContext_1.createDomToModelContextWithConfig)(environment.domToModelSettings.calculated);
+    var modelToDomContext = (0, createModelToDomContext_1.createModelToDomContextWithConfig)(environment.modelToDomSettings.calculated);
+    var model = (0, createContentModelDocument_1.createContentModelDocument)();
+    modelToDomContext.modelHandlers.segment(span.ownerDocument, span, segment, modelToDomContext, []);
+    domToModelContext.elementProcessors.element(model, span, domToModelContext);
+    var paragraph = (0, ensureParagraph_1.ensureParagraph)(model);
+    return (_b = (_a = paragraph.segments[0]) === null || _a === void 0 ? void 0 : _a.format) !== null && _b !== void 0 ? _b : format;
+}
+exports.normalizeSegmentFormat = normalizeSegmentFormat;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/modelApi/common/unwrapBlock.ts":
@@ -24454,6 +24803,7 @@ exports.retrieveModelFormatState = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var borderValues_1 = __webpack_require__(/*! ../../domUtils/style/borderValues */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts");
 var getClosestAncestorBlockGroupIndex_1 = __webpack_require__(/*! ./getClosestAncestorBlockGroupIndex */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getClosestAncestorBlockGroupIndex.ts");
+var updateImageMetadata_1 = __webpack_require__(/*! ../metadata/updateImageMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateImageMetadata.ts");
 var updateTableMetadata_1 = __webpack_require__(/*! ../metadata/updateTableMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableMetadata.ts");
 var isBold_1 = __webpack_require__(/*! ../../domUtils/style/isBold */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/isBold.ts");
 var iterateSelections_1 = __webpack_require__(/*! ../selection/iterateSelections */ "./packages/roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections.ts");
@@ -24526,6 +24876,7 @@ function retrieveModelFormatState(model, pendingFormat, formatState, conflictSol
                     }
                     else {
                         formatState.imageFormat = undefined;
+                        formatState.imageEditingMetadata = undefined;
                     }
                 }
             });
@@ -24622,6 +24973,7 @@ function retrieveImageFormat(image, result) {
         boxShadow: format.boxShadow,
         borderRadius: format.borderRadius,
     };
+    result.imageEditingMetadata = (0, updateImageMetadata_1.getImageMetadata)(image);
 }
 function mergeValue(format, key, newValue, isFirst, conflictSolution, parseFn) {
     if (conflictSolution === void 0) { conflictSolution = 'remove'; }
@@ -28957,52 +29309,71 @@ var AutoFormatPlugin = /** @class */ (function () {
         if (options === void 0) { options = DefaultOptions; }
         this.options = options;
         this.editor = null;
-        this.features = [
+        this.autoLink = {
+            enabled: !!(this.options.autoLink || this.options.autoTel || this.options.autoMailto),
+            transformFunction: function (_model, previousSegment, paragraph, context) {
+                var _a;
+                var _b = _this.options, autoLink = _b.autoLink, autoTel = _b.autoTel, autoMailto = _b.autoMailto;
+                var linkSegment = (0, roosterjs_content_model_api_1.promoteLink)(previousSegment, paragraph, {
+                    autoLink: autoLink,
+                    autoTel: autoTel,
+                    autoMailto: autoMailto,
+                });
+                if (linkSegment) {
+                    return createAnchor(((_a = linkSegment.link) === null || _a === void 0 ? void 0 : _a.format.href) || '', linkSegment.text);
+                }
+                return false;
+            },
+            apiName: 'autoLink',
+            changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
+        };
+        this.tabFeatures = [
             {
-                autoFormat: 'list',
                 enabled: !!(this.options.autoBullet || this.options.autoNumbering),
                 transformFunction: function (model, _previousSegment, paragraph, context) {
                     return (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, _this.options.autoBullet, _this.options.autoNumbering, _this.options.removeListMargins);
                 },
+                apiName: 'autoToggleList',
+                changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoFormat,
             },
+            this.autoLink,
+        ];
+        this.features = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(this.tabFeatures), false), [
             {
-                autoFormat: 'link',
-                enabled: !!(this.options.autoLink || this.options.autoTel || this.options.autoMailto),
-                transformFunction: function (_model, previousSegment, paragraph, context) {
-                    var _a;
-                    var _b = _this.options, autoLink = _b.autoLink, autoTel = _b.autoTel, autoMailto = _b.autoMailto;
-                    var linkSegment = (0, roosterjs_content_model_api_1.promoteLink)(previousSegment, paragraph, {
-                        autoLink: autoLink,
-                        autoTel: autoTel,
-                        autoMailto: autoMailto,
-                    });
-                    if (linkSegment) {
-                        return createAnchor(((_a = linkSegment.link) === null || _a === void 0 ? void 0 : _a.format.href) || '', linkSegment.text);
-                    }
-                    return false;
-                },
-            },
-            {
-                autoFormat: 'hyphen',
                 enabled: !!this.options.autoHyphen,
+                apiName: 'autoHyphen',
+                changeSource: roosterjs_content_model_dom_1.ChangeSource.Format,
                 transformFunction: function (_model, previousSegment, paragraph, context) {
                     return (0, transformHyphen_1.transformHyphen)(previousSegment, paragraph, context);
                 },
             },
             {
-                autoFormat: 'fraction',
                 enabled: !!this.options.autoFraction,
+                apiName: 'autoFraction',
+                changeSource: roosterjs_content_model_dom_1.ChangeSource.Format,
                 transformFunction: function (_model, previousSegment, paragraph, context) {
                     return (0, transformFraction_1.transformFraction)(previousSegment, paragraph, context);
                 },
             },
             {
-                autoFormat: 'ordinal',
                 enabled: !!this.options.autoOrdinals,
+                apiName: 'autoOrdinal',
+                changeSource: roosterjs_content_model_dom_1.ChangeSource.Format,
                 transformFunction: function (_model, previousSegment, paragraph, context) {
                     return (0, transformOrdinals_1.transformOrdinals)(previousSegment, paragraph, context);
                 },
             },
+        ], false);
+        this.enterFeatures = [
+            {
+                enabled: !!this.options.autoHorizontalLine,
+                transformFunction: function (model, _previousSegment, paragraph, context) {
+                    return (0, checkAndInsertHorizontalLine_1.checkAndInsertHorizontalLine)(model, paragraph, context);
+                },
+                apiName: 'autoHorizontalLine',
+                changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoFormat,
+            },
+            this.autoLink,
         ];
     }
     /**
@@ -29049,8 +29420,51 @@ var AutoFormatPlugin = /** @class */ (function () {
             }
         }
     };
+    AutoFormatPlugin.prototype.handleKeyboardEvents = function (editor, features) {
+        var formatOptions = {
+            changeSource: '',
+            apiName: '',
+            getChangeData: undefined,
+        };
+        (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, previousSegment, paragraph, _markerFormat, context) {
+            var e_1, _a;
+            var featureApplied = undefined;
+            var _loop_1 = function (feature) {
+                if (feature.enabled) {
+                    var result_1 = feature.transformFunction(model, previousSegment, paragraph, context);
+                    if (result_1) {
+                        if (typeof result_1 !== 'boolean') {
+                            formatOptions.getChangeData = function () { return result_1; };
+                        }
+                        featureApplied = feature;
+                        return "break";
+                    }
+                }
+            };
+            try {
+                for (var features_1 = (0, tslib_1.__values)(features), features_1_1 = features_1.next(); !features_1_1.done; features_1_1 = features_1.next()) {
+                    var feature = features_1_1.value;
+                    var state_1 = _loop_1(feature);
+                    if (state_1 === "break")
+                        break;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (features_1_1 && !features_1_1.done && (_a = features_1.return)) _a.call(features_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (featureApplied) {
+                formatOptions.changeSource = featureApplied.changeSource;
+                formatOptions.apiName = featureApplied.apiName;
+            }
+            return !!featureApplied;
+        }, formatOptions);
+        return formatOptions;
+    };
     AutoFormatPlugin.prototype.handleEditorInputEvent = function (editor, event) {
-        var _this = this;
         var rawEvent = event.rawEvent;
         var selection = editor.getDOMSelection();
         if (rawEvent.inputType === 'insertText' &&
@@ -29059,53 +29473,12 @@ var AutoFormatPlugin = /** @class */ (function () {
             selection.range.collapsed) {
             switch (rawEvent.data) {
                 case ' ':
-                    var formatOptions_1 = {
-                        changeSource: '',
-                        apiName: '',
-                        getChangeData: undefined,
-                    };
-                    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, previousSegment, paragraph, _markerFormat, context) {
-                        var e_1, _a;
-                        var formatApplied = undefined;
-                        var _loop_1 = function (feature) {
-                            if (feature.enabled) {
-                                var result_1 = feature.transformFunction(model, previousSegment, paragraph, context);
-                                if (result_1) {
-                                    if (typeof result_1 !== 'boolean') {
-                                        formatOptions_1.getChangeData = function () { return result_1; };
-                                    }
-                                    formatApplied = feature.autoFormat;
-                                    return "break";
-                                }
-                            }
-                        };
-                        try {
-                            for (var _b = (0, tslib_1.__values)(_this.features), _c = _b.next(); !_c.done; _c = _b.next()) {
-                                var feature = _c.value;
-                                var state_1 = _loop_1(feature);
-                                if (state_1 === "break")
-                                    break;
-                            }
-                        }
-                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                        finally {
-                            try {
-                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                        }
-                        if (formatApplied) {
-                            formatOptions_1.changeSource = getChangeSource(formatApplied);
-                            formatOptions_1.apiName = getApiName(formatApplied);
-                        }
-                        return !!formatApplied;
-                    }, formatOptions_1);
+                    this.handleKeyboardEvents(editor, this.features);
                     break;
             }
         }
     };
     AutoFormatPlugin.prototype.handleKeyDownEvent = function (editor, event) {
-        var _this = this;
         var rawEvent = event.rawEvent;
         if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {
             switch (rawEvent.key) {
@@ -29116,34 +29489,21 @@ var AutoFormatPlugin = /** @class */ (function () {
                     break;
                 case 'Tab':
                     if (!rawEvent.shiftKey) {
-                        (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, _previousSegment, paragraph, _markerFormat, context) {
-                            var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, removeListMargins = _a.removeListMargins;
-                            var shouldList = false;
-                            if (autoBullet || autoNumbering) {
-                                shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering, removeListMargins);
-                                context.canUndoByBackspace = shouldList;
-                            }
-                            if (shouldList) {
-                                event.rawEvent.preventDefault();
-                            }
-                            return shouldList;
-                        }, {
-                            changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoFormat,
-                            apiName: 'autoToggleList',
-                        });
+                        var eventHandled_1 = this.handleKeyboardEvents(editor, this.tabFeatures);
+                        if (eventHandled_1.apiName == 'autoToggleList') {
+                            event.rawEvent.preventDefault();
+                        }
                     }
                     break;
                 case 'Enter':
-                    this.handleEnterKey(editor, event);
+                    var eventHandled = this.handleKeyboardEvents(editor, this.enterFeatures);
+                    if (eventHandled.apiName == 'autoHorizontalLine') {
+                        event.rawEvent.preventDefault();
+                    }
                     break;
             }
         }
     };
-    AutoFormatPlugin.prototype.handleEnterKey = function (editor, event) {
-        if (this.options.autoHorizontalLine) {
-            (0, checkAndInsertHorizontalLine_1.checkAndInsertHorizontalLine)(editor, event);
-        }
-    };
     AutoFormatPlugin.prototype.handleContentChangedEvent = function (editor, event) {
         var _a = this.options, autoLink = _a.autoLink, autoTel = _a.autoTel, autoMailto = _a.autoMailto;
         if (event.source == 'Paste' && (autoLink || autoTel || autoMailto)) {
@@ -29157,16 +29517,6 @@ var AutoFormatPlugin = /** @class */ (function () {
     return AutoFormatPlugin;
 }());
 exports.AutoFormatPlugin = AutoFormatPlugin;
-var getApiName = function (autoFormat) {
-    return autoFormat == 'list' ? 'autoToggleList' : autoFormat == 'hyphen' ? 'autoHyphen' : '';
-};
-var getChangeSource = function (autoFormat) {
-    return autoFormat == 'list' || autoFormat == 'hyphen'
-        ? roosterjs_content_model_dom_1.ChangeSource.AutoFormat
-        : autoFormat == 'link'
-            ? roosterjs_content_model_dom_1.ChangeSource.AutoLink
-            : '';
-};
 var createAnchor = function (url, text) {
     var anchor = document.createElement('a');
     anchor.href = url;
@@ -29188,7 +29538,6 @@ var createAnchor = function (url, text) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.checkAndInsertHorizontalLine = exports.insertHorizontalLineIntoModel = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var HorizontalLineTriggerCharacters = [
     '-',
@@ -29252,28 +29601,22 @@ exports.insertHorizontalLineIntoModel = insertHorizontalLineIntoModel;
  * @param event The keydown event
  * @returns True if horizontal line is inserted, otherwise false
  */
-function checkAndInsertHorizontalLine(editor, event) {
-    return (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, _, para, __, context) {
-        var allText = para.segments.reduce(function (acc, segment) { return (segment.segmentType === 'Text' ? acc + segment.text : acc); }, '');
-        // At least 3 characters are needed to trigger horizontal line
-        if (allText.length < 3) {
-            return false;
+var checkAndInsertHorizontalLine = function (model, paragraph, context) {
+    var allText = paragraph.segments.reduce(function (acc, segment) { return (segment.segmentType === 'Text' ? acc + segment.text : acc); }, '');
+    // At least 3 characters are needed to trigger horizontal line
+    if (allText.length < 3) {
+        return false;
+    }
+    return HorizontalLineTriggerCharacters.some(function (triggerCharacter) {
+        var shouldFormat = allText.split('').every(function (char) { return char === triggerCharacter; });
+        if (shouldFormat) {
+            paragraph.segments = paragraph.segments.filter(function (s) { return s.segmentType != 'Text'; });
+            insertHorizontalLineIntoModel(model, context, triggerCharacter);
+            context.canUndoByBackspace = true;
         }
-        return HorizontalLineTriggerCharacters.some(function (triggerCharacter) {
-            var shouldFormat = allText.split('').every(function (char) { return char === triggerCharacter; });
-            if (shouldFormat) {
-                para.segments = para.segments.filter(function (s) { return s.segmentType != 'Text'; });
-                insertHorizontalLineIntoModel(model, context, triggerCharacter);
-                event.rawEvent.preventDefault();
-                context.canUndoByBackspace = true;
-            }
-            return shouldFormat;
-        });
-    }, {
-        changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoFormat,
-        apiName: 'autoHorizontalLine',
+        return shouldFormat;
     });
-}
+};
 exports.checkAndInsertHorizontalLine = checkAndInsertHorizontalLine;
 
 
@@ -30138,8 +30481,24 @@ var EditPlugin = /** @class */ (function () {
         this.disposer = null;
         this.shouldHandleNextInputEvent = false;
         this.selectionAfterDelete = null;
-        this.handleNormalEnter = false;
+        this.handleNormalEnter = function (editor) { return false; };
     }
+    EditPlugin.prototype.createNormalEnterChecker = function (result) {
+        return result ? function () { return true; } : function () { return false; };
+    };
+    EditPlugin.prototype.getHandleNormalEnter = function (editor) {
+        switch (typeof this.options.shouldHandleEnterKey) {
+            case 'function':
+                return this.options.shouldHandleEnterKey;
+                break;
+            case 'boolean':
+                return this.createNormalEnterChecker(this.options.shouldHandleEnterKey);
+                break;
+            default:
+                return this.createNormalEnterChecker(editor.isExperimentalFeatureEnabled('HandleEnterKey'));
+                break;
+        }
+    };
     /**
      * Get name of this plugin
      */
@@ -30155,7 +30514,7 @@ var EditPlugin = /** @class */ (function () {
     EditPlugin.prototype.initialize = function (editor) {
         var _this = this;
         this.editor = editor;
-        this.handleNormalEnter = this.editor.isExperimentalFeatureEnabled('HandleEnterKey');
+        this.handleNormalEnter = this.getHandleNormalEnter(editor);
         if (editor.getEnvironment().isAndroid) {
             this.disposer = this.editor.attachDomEvent({
                 beforeinput: {
@@ -30262,7 +30621,7 @@ var EditPlugin = /** @class */ (function () {
                     if (!hasCtrlOrMetaKey &&
                         !event.rawEvent.isComposing &&
                         event.rawEvent.keyCode !== DEAD_KEY) {
-                        (0, keyboardEnter_1.keyboardEnter)(editor, rawEvent, this.handleNormalEnter);
+                        (0, keyboardEnter_1.keyboardEnter)(editor, rawEvent, this.handleNormalEnter(editor));
                     }
                     break;
                 default:
@@ -31671,17 +32030,36 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.splitParagraph = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var DEFAULT_FORMAT_KEYS = [
+    'backgroundColor',
+    'direction',
+    'textAlign',
+    'htmlAlign',
+    'lineHeight',
+    'textIndent',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+];
 /**
  * @internal
  * Split the given paragraph from insert point into two paragraphs,
  * and move the selection marker to the beginning of the second paragraph
  * @param insertPoint The input insert point which includes the paragraph and selection marker
+ * @param formatKeys The format that needs to be copied from the splitted paragraph, if not specified,  some default format will be copied
  * @returns The new paragraph it created
  */
-function splitParagraph(insertPoint) {
+function splitParagraph(insertPoint, formatKeys) {
     var _a;
+    if (formatKeys === void 0) { formatKeys = DEFAULT_FORMAT_KEYS; }
     var paragraph = insertPoint.paragraph, marker = insertPoint.marker;
-    var newParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /*isImplicit*/, paragraph.format, paragraph.segmentFormat);
+    var newFormat = createNewFormat(paragraph.format, formatKeys);
+    var newParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /*isImplicit*/, newFormat, paragraph.segmentFormat);
     var markerIndex = paragraph.segments.indexOf(marker);
     var segments = paragraph.segments.splice(markerIndex, paragraph.segments.length - markerIndex);
     if (paragraph.segments.length == 0) {
@@ -31694,6 +32072,26 @@ function splitParagraph(insertPoint) {
     return newParagraph;
 }
 exports.splitParagraph = splitParagraph;
+var createNewFormat = function (format, formatKeys) {
+    var e_1, _a, _b;
+    var newFormat = {};
+    try {
+        for (var formatKeys_1 = (0, tslib_1.__values)(formatKeys), formatKeys_1_1 = formatKeys_1.next(); !formatKeys_1_1.done; formatKeys_1_1 = formatKeys_1.next()) {
+            var key = formatKeys_1_1.value;
+            if (format[key]) {
+                newFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, newFormat), (_b = {}, _b[key] = format[key], _b));
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (formatKeys_1_1 && !formatKeys_1_1.done && (_a = formatKeys_1.return)) _a.call(formatKeys_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return newFormat;
+};
 
 
 /***/ }),
@@ -32302,9 +32700,6 @@ var ImageEditPlugin = /** @class */ (function () {
     ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {
         var images = clonedRoot.querySelectorAll('img');
         images.forEach(function (image) {
-            if (image.dataset.isEditing) {
-                delete image.dataset.isEditing;
-            }
             if (image.dataset.editingInfo) {
                 delete image.dataset.editingInfo;
             }
@@ -32375,8 +32770,11 @@ var ImageEditPlugin = /** @class */ (function () {
     };
     ImageEditPlugin.prototype.setContentHandler = function (editor) {
         var selection = editor.getDOMSelection();
-        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image.dataset.isEditing && !this.isEditing) {
-            delete selection.image.dataset.isEditing;
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+            this.cleanInfo();
+            (0, roosterjs_content_model_dom_1.setImageState)(selection.image, '');
+            this.isEditing = false;
+            this.isCropMode = false;
         }
     };
     ImageEditPlugin.prototype.formatEventHandler = function (event) {
@@ -32414,7 +32812,7 @@ var ImageEditPlugin = /** @class */ (function () {
             var result = false;
             if (shouldSelectImage ||
                 (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
-                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.dataset.isEditing) ||
+                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.format.imageState) == findEditingImage_1.EDITING_MARKER ||
                 isApiOperation) {
                 var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
                 if ((_this.isEditing || isApiOperation) &&
@@ -32427,7 +32825,7 @@ var ImageEditPlugin = /** @class */ (function () {
                         (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
                         image.isSelected = shouldSelectImage;
                         image.isSelectedAsImageSelection = shouldSelectImage;
-                        delete image.dataset.isEditing;
+                        image.format.imageState = undefined;
                         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
                             var selectedParagraphs = (0, roosterjs_content_model_dom_1.getSelectedParagraphs)(model, true);
                             var isImageInRange = selectedParagraphs.some(function (paragraph) {
@@ -32455,7 +32853,7 @@ var ImageEditPlugin = /** @class */ (function () {
                     (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
                         editingImageModel = image;
                         _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
-                        image.dataset.isEditing = 'true';
+                        image.format.imageState = 'isEditing';
                     });
                     result = true;
                 }
@@ -32466,7 +32864,7 @@ var ImageEditPlugin = /** @class */ (function () {
                 if (!isApiOperation &&
                     editingImageModel &&
                     editingImageModel == model &&
-                    editingImageModel.dataset.isEditing &&
+                    editingImageModel.format.imageState == findEditingImage_1.EDITING_MARKER &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
                     (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
                     if (isCropMode) {
@@ -33557,9 +33955,13 @@ exports.doubleCheckResize = doubleCheckResize;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.findEditingImage = void 0;
+exports.findEditingImage = exports.EDITING_MARKER = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+/**
+ * @internal
+ */
+exports.EDITING_MARKER = 'isEditing';
 /**
  * @internal
  */
@@ -33571,7 +33973,8 @@ function findEditingImage(group, imageId) {
             for (var _b = (0, tslib_1.__values)(paragraph.segments), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var segment = _c.value;
                 if (segment.segmentType == 'Image' &&
-                    ((imageId && segment.format.id == imageId) || segment.dataset.isEditing)) {
+                    ((imageId && segment.format.id == imageId) ||
+                        segment.format.imageState == exports.EDITING_MARKER)) {
                     imageAndParagraph = { image: segment, paragraph: paragraph };
                     return true;
                 }
@@ -34689,9 +35092,9 @@ var addParser_1 = __webpack_require__(/*! ./utils/addParser */ "./packages/roost
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var chainSanitizerCallback_1 = __webpack_require__(/*! ./utils/chainSanitizerCallback */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/chainSanitizerCallback.ts");
 var DefaultSanitizers_1 = __webpack_require__(/*! ./DefaultSanitizers */ "./packages/roosterjs-content-model-plugins/lib/paste/DefaultSanitizers.ts");
-var deprecatedColorParser_1 = __webpack_require__(/*! ./utils/deprecatedColorParser */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/deprecatedColorParser.ts");
+var deprecatedColorParser_1 = __webpack_require__(/*! ./parsers/deprecatedColorParser */ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/deprecatedColorParser.ts");
 var getPasteSource_1 = __webpack_require__(/*! ./pasteSourceValidations/getPasteSource */ "./packages/roosterjs-content-model-plugins/lib/paste/pasteSourceValidations/getPasteSource.ts");
-var linkParser_1 = __webpack_require__(/*! ./utils/linkParser */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/linkParser.ts");
+var linkParser_1 = __webpack_require__(/*! ./parsers/linkParser */ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/linkParser.ts");
 var constants_1 = __webpack_require__(/*! ./pasteSourceValidations/constants */ "./packages/roosterjs-content-model-plugins/lib/paste/pasteSourceValidations/constants.ts");
 var processPastedContentFromExcel_1 = __webpack_require__(/*! ./Excel/processPastedContentFromExcel */ "./packages/roosterjs-content-model-plugins/lib/paste/Excel/processPastedContentFromExcel.ts");
 var processPastedContentFromOneNote_1 = __webpack_require__(/*! ./oneNote/processPastedContentFromOneNote */ "./packages/roosterjs-content-model-plugins/lib/paste/oneNote/processPastedContentFromOneNote.ts");
@@ -34762,7 +35165,7 @@ var PastePlugin = /** @class */ (function () {
         var pasteType = event.pasteType;
         switch (pasteSource) {
             case 'wordDesktop':
-                (0, processPastedContentFromWordDesktop_1.processPastedContentFromWordDesktop)(event, this.editor.getDOMCreator());
+                (0, processPastedContentFromWordDesktop_1.processPastedContentFromWordDesktop)(event);
                 break;
             case 'wacComponents':
                 (0, processPastedContentWacComponents_1.processPastedContentWacComponents)(event);
@@ -34854,22 +35257,153 @@ function tableBorderParser(format, element) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.processPastedContentFromPowerPoint = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var addParser_1 = __webpack_require__(/*! ../utils/addParser */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/addParser.ts");
+var customListUtils_1 = __webpack_require__(/*! ../utils/customListUtils */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/customListUtils.ts");
+var removeNegativeTextIndentParser_1 = __webpack_require__(/*! ../parsers/removeNegativeTextIndentParser */ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/removeNegativeTextIndentParser.ts");
+var setProcessor_1 = __webpack_require__(/*! ../utils/setProcessor */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/setProcessor.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var BulletSelector = '* > span > span[style*=mso-special-format]';
+var MsOfficeSpecialFormat = 'mso-special-format';
+var CssStyleKey = 'style';
+var MsoSpecialFormatRegex = /mso-special-format:\s*([^;]*)/;
+var clearListItemStyles = function (format) {
+    delete format.textAlign;
+    delete format.marginLeft;
+    delete format.paddingLeft;
+};
 /**
  * @internal
  * Convert pasted content from PowerPoint
  * @param event The BeforePaste event
  */
 function processPastedContentFromPowerPoint(event, domCreator) {
-    var fragment = event.fragment, clipboardData = event.clipboardData;
+    var fragment = event.fragment, clipboardData = event.clipboardData, domToModelOption = event.domToModelOption;
     if (clipboardData.html && !clipboardData.text && clipboardData.image) {
         // It is possible that PowerPoint copied both image and HTML but not plain text.
         // We always prefer HTML if any.
         var doc = domCreator.htmlToDOM(clipboardData.html);
         (0, roosterjs_content_model_dom_1.moveChildNodes)(fragment, doc === null || doc === void 0 ? void 0 : doc.body);
     }
+    (0, addParser_1.addParser)(domToModelOption, 'block', removeNegativeTextIndentParser_1.removeNegativeTextIndentParser);
+    (0, setProcessor_1.setProcessor)(domToModelOption, 'element', function (group, element, context) {
+        var _a, _b;
+        var style = element.getAttribute(CssStyleKey) || '';
+        // If the element is the bullet element, just ignore it, otherwise we will see an extra bullet in the list
+        if (style.includes(MsOfficeSpecialFormat) && context.listFormat.levels.length > 0) {
+            return;
+        }
+        var bulletElement = element.querySelector(BulletSelector);
+        if (bulletElement) {
+            var _c = extractPowerPointListInfo(element, bulletElement), depth = _c.depth, unorderedBulletType = _c.unorderedBulletType, orderedBulletType = _c.orderedBulletType, startNumberOverrideOrBullet_1 = _c.startNumberOverrideOrBullet, isOrderedList = _c.isOrderedList, isNewList_1 = _c.isNewList;
+            // Setup the listformat with the metadata extracted from the bullet element
+            (0, customListUtils_1.setupListFormat)(isOrderedList ? 'OL' : 'UL', element, context, depth, context.listFormat, group, [clearListItemStyles]);
+            // Set the metadata for the list item, which will be used to set the correct bullet style type
+            var listMetadata = {
+                unorderedStyleType: !isOrderedList && unorderedBulletType
+                    ? roosterjs_content_model_dom_1.BulletListType[unorderedBulletType]
+                    : undefined,
+                orderedStyleType: isOrderedList && orderedBulletType
+                    ? roosterjs_content_model_dom_1.NumberingListType[orderedBulletType]
+                    : undefined,
+            };
+            // Process the Div element as a list item.
+            (0, customListUtils_1.processAsListItem)(context, element, group, listMetadata, function (listItem) {
+                var _a;
+                var currentMarkerSize = listItem.formatHolder.format.fontSize;
+                var bulletElementSize = (_a = bulletElement.parentElement) === null || _a === void 0 ? void 0 : _a.style.fontSize;
+                listItem.formatHolder.format.fontSize = bulletElementSize || currentMarkerSize;
+                if (isNewList_1) {
+                    listItem.levels[listItem.levels.length - 1].format.startNumberOverride = parseInt(startNumberOverrideOrBullet_1);
+                }
+                clearListItemStyles(listItem.levels[listItem.levels.length - 1].format);
+                clearListItemStyles(listItem.format);
+            });
+        }
+        else {
+            (_b = (_a = context.defaultElementProcessors).element) === null || _b === void 0 ? void 0 : _b.call(_a, group, element, context);
+        }
+    });
 }
 exports.processPastedContentFromPowerPoint = processPastedContentFromPowerPoint;
+/**
+ * Extract list information from PowerPoint pasted content
+ *
+ * The lists from PowerPoint are represent as:
+ *
+ * - The class 0# represents the depth of the list, if the list is in the first level, the class attribute wont be present.
+ * - The mso-special-format style represents the type of bullet and the start of the list.
+ *      The first part of the mso-special-format is the type of bullet, and the second part is the start of the list.
+ *  - All the items that are in the same list have the same mso-special-format style. Which we are leveraging to identify when a list is new or part of the existing list thread.
+ *
+ * @example
+ *  `   <div class="O1" style="...">
+            <span style="font-size: 5pt"
+                ><span style="mso-special-format: 'numbullet6\,1'; font-family: +mj-lt"
+                    >i.</span
+                ></span
+            ><span style="...;">123</span>
+        </div> `
+ *
+ * @param element The element to extract list information from
+ * @param bulletElement The bullet element to extract list information from
+ * @returns The extracted list information
+ */
+function extractPowerPointListInfo(element, bulletElement) {
+    var className = element.className.substring(1) || '0';
+    var depth = parseInt(className) + 1;
+    var style = bulletElement.getAttribute(CssStyleKey) || '';
+    var msoSpecialFormat = style.match(MsoSpecialFormatRegex);
+    var _a = (0, tslib_1.__read)((msoSpecialFormat === null || msoSpecialFormat === void 0 ? void 0 : msoSpecialFormat[1].replace('"', '').split('\\,')) || [], 2), bulletTypeHtml = _a[0], startNumberOverrideOrBullet = _a[1];
+    var isOrderedList = OrderedListStyleMap.has(bulletTypeHtml);
+    var unorderedBulletType = UnorderedBullets.get(bulletElement.innerText);
+    var orderedBulletType = OrderedListStyleMap.get(bulletTypeHtml);
+    return {
+        depth: depth,
+        unorderedBulletType: unorderedBulletType,
+        orderedBulletType: orderedBulletType,
+        startNumberOverrideOrBullet: startNumberOverrideOrBullet,
+        isOrderedList: isOrderedList,
+        isNewList: isOrderedList &&
+            !!orderedBulletType &&
+            bulletElement.innerText ===
+                getPptListStart(orderedBulletType, startNumberOverrideOrBullet),
+    };
+}
+var UnorderedBullets = new Map([
+    ['•', 'Disc'],
+    ['o', 'Circle'],
+    ['§', 'Square'],
+    ['q', 'BoxShadow'],
+    ['v', 'Xrhombus'],
+    ['Ø', 'ShortArrow'],
+    ['ü', 'CheckMark'],
+]);
+var OrderedListStyleMap = new Map([
+    ['numbullet1', 'UpperAlpha'],
+    ['numbullet2', 'DecimalParenthesis'],
+    ['numbullet3', 'Decimal'],
+    ['numbullet7', 'UpperRoman'],
+    ['numbullet9', 'LowerAlphaParenthesis'],
+    ['numbullet0', 'LowerAlpha'],
+    ['numbullet6', 'LowerRoman'],
+]);
+function getPptListStart(orderedBulletType, startNumberOverride) {
+    var bullet = (0, roosterjs_content_model_dom_1.getOrderedListNumberStr)(roosterjs_content_model_dom_1.NumberingListType[orderedBulletType], parseInt(startNumberOverride));
+    switch (orderedBulletType) {
+        case 'Decimal':
+        case 'UpperAlpha':
+        case 'LowerAlpha':
+        case 'UpperRoman':
+        case 'LowerRoman':
+            return bullet + '.';
+        case 'DecimalParenthesis':
+        case 'LowerAlphaParenthesis':
+            return bullet + ')';
+        default:
+            return undefined;
+    }
+}
 
 
 /***/ }),
@@ -35165,6 +35699,25 @@ exports.getStyleMetadata = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var FORMATING_REGEX = /[\n\t'{}"]+/g;
+var STYLE_TAG = '<style>';
+var STYLE_TAG_END = '</style>';
+function extractStyleTagsFromHtml(htmlContent) {
+    var styles = [];
+    var lowerCaseHtmlContent = htmlContent.toLowerCase();
+    var styleStartIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG);
+    while (styleStartIndex >= 0) {
+        var styleEndIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG_END, styleStartIndex);
+        if (styleEndIndex >= 0) {
+            var styleContent = htmlContent.substring(styleStartIndex + STYLE_TAG.length, styleEndIndex).trim();
+            styles.push(styleContent);
+            styleStartIndex = lowerCaseHtmlContent.indexOf(STYLE_TAG, styleEndIndex);
+        }
+        else {
+            break;
+        }
+    }
+    return styles;
+}
 /**
  * @internal
  * Word Desktop content has a style tag that contains data for the lists.
@@ -35185,12 +35738,10 @@ var FORMATING_REGEX = /[\n\t'{}"]+/g;
  * 5. Save data in record and only use the required information.
  *
  */
-function getStyleMetadata(ev, domCreator) {
+function getStyleMetadata(ev) {
     var metadataMap = new Map();
-    var doc = domCreator.htmlToDOM(ev.htmlBefore);
-    var styles = doc.querySelectorAll('style');
-    styles.forEach(function (style) {
-        var text = (style === null || style === void 0 ? void 0 : style.innerHTML.trim()) || '';
+    var headStyles = extractStyleTagsFromHtml(ev.htmlBefore);
+    headStyles.forEach(function (text) {
         var index = 0;
         var _loop_1 = function () {
             var indexAt = text.indexOf('@', index + 1);
@@ -35257,7 +35808,7 @@ var getStyleMetadata_1 = __webpack_require__(/*! ./getStyleMetadata */ "./packag
 var getStyles_1 = __webpack_require__(/*! ../utils/getStyles */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/getStyles.ts");
 var processWordComments_1 = __webpack_require__(/*! ./processWordComments */ "./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/processWordComments.ts");
 var processWordLists_1 = __webpack_require__(/*! ./processWordLists */ "./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/processWordLists.ts");
-var removeNegativeTextIndentParser_1 = __webpack_require__(/*! ./removeNegativeTextIndentParser */ "./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/removeNegativeTextIndentParser.ts");
+var removeNegativeTextIndentParser_1 = __webpack_require__(/*! ../parsers/removeNegativeTextIndentParser */ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/removeNegativeTextIndentParser.ts");
 var setProcessor_1 = __webpack_require__(/*! ../utils/setProcessor */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/setProcessor.ts");
 var PERCENTAGE_REGEX = /%/;
 // Default line height in browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#normal
@@ -35267,8 +35818,8 @@ var DEFAULT_BROWSER_LINE_HEIGHT_PERCENTAGE = 1.2;
  * Handles Pasted content when source is Word Desktop
  * @param ev BeforePasteEvent
  */
-function processPastedContentFromWordDesktop(ev, domCreator) {
-    var metadataMap = (0, getStyleMetadata_1.getStyleMetadata)(ev, domCreator);
+function processPastedContentFromWordDesktop(ev) {
+    var metadataMap = (0, getStyleMetadata_1.getStyleMetadata)(ev);
     (0, setProcessor_1.setProcessor)(ev.domToModelOption, 'element', wordDesktopElementProcessor(metadataMap));
     (0, addParser_1.addParser)(ev.domToModelOption, 'block', adjustPercentileLineHeight);
     (0, addParser_1.addParser)(ev.domToModelOption, 'block', removeNegativeTextIndentParser_1.removeNegativeTextIndentParser);
@@ -35296,12 +35847,12 @@ function adjustPercentileLineHeight(format, element) {
             (parsedLineHeight / 100)).toString();
     }
 }
-function listLevelParser(format, element, context, defaultStyle) {
+var listLevelParser = function (format, element, _context, defaultStyle) {
     if (element.style.marginLeft != '') {
         format.marginLeft = defaultStyle.marginLeft;
     }
     format.marginBottom = undefined;
-}
+};
 var wordTableParser = function (format) {
     var _a;
     if ((_a = format.marginLeft) === null || _a === void 0 ? void 0 : _a.startsWith('-')) {
@@ -35355,8 +35906,8 @@ exports.processWordComments = processWordComments;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.processWordList = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var removeNegativeTextIndentParser_1 = __webpack_require__(/*! ./removeNegativeTextIndentParser */ "./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/removeNegativeTextIndentParser.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var customListUtils_1 = __webpack_require__(/*! ../utils/customListUtils */ "./packages/roosterjs-content-model-plugins/lib/paste/utils/customListUtils.ts");
 /** Word list metadata style name */
 var MSO_LIST = 'mso-list';
 var MSO_LIST_IGNORE = 'ignore';
@@ -35395,28 +35946,28 @@ function processWordList(styles, group, element, context, metadata) {
     if (wordListStyle && group && typeof listFormat.wordLevel === 'number') {
         var wordLevel = listFormat.wordLevel, wordList = listFormat.wordList;
         // Retrieve the Fake bullet on the element and also the list type
-        var listMetadata = metadata.get(lNumber + ":" + level);
-        var listType = ((_a = listMetadata === null || listMetadata === void 0 ? void 0 : listMetadata['mso-level-number-format']) === null || _a === void 0 ? void 0 : _a.toLowerCase()) != BULLET_METADATA
+        var listMetadata_1 = metadata.get(lNumber + ":" + level);
+        var listType_1 = ((_a = listMetadata_1 === null || listMetadata_1 === void 0 ? void 0 : listMetadata_1['mso-level-number-format']) === null || _a === void 0 ? void 0 : _a.toLowerCase()) != BULLET_METADATA
             ? 'OL'
             : 'UL';
         // Create the new level of the list item and parse the format
-        var newLevel = (0, roosterjs_content_model_dom_1.createListLevel)(listType);
-        (0, roosterjs_content_model_dom_1.parseFormat)(element, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(context.formatParsers.listLevel), false), [wordListPaddingParser], false), newLevel.format, context);
-        // If the list format is in a different level, update the array so we get the new item
-        // To be in the same level as the provided level metadata.
-        if (wordLevel > listFormat.levels.length) {
-            while (wordLevel != listFormat.levels.length) {
-                listFormat.levels.push(newLevel);
-            }
-        }
-        else {
-            listFormat.levels.splice(wordLevel, listFormat.levels.length - 1);
-            listFormat.levels[wordLevel - 1] = newLevel;
-        }
+        (0, customListUtils_1.setupListFormat)(listType_1, element, context, wordLevel, listFormat, group, [
+            wordListPaddingParser,
+        ]);
         listFormat.levels[listFormat.levels.length - 1]
             .format.wordList = wordList;
-        listFormat.listParent = group;
-        processAsListItem(listFormat, context, element, group, listMetadata);
+        var bullet = getBulletFromMetadata(listMetadata_1, listType_1);
+        var listFormatMetadata = bullet
+            ? {
+                unorderedStyleType: listType_1 == 'UL' ? bullet : undefined,
+                orderedStyleType: listType_1 == 'OL' ? bullet : undefined,
+            }
+            : undefined;
+        (0, customListUtils_1.processAsListItem)(context, element, group, listFormatMetadata, function (listItem) {
+            if (listType_1 == 'OL') {
+                setStartNumber(listItem, context, listMetadata_1);
+            }
+        });
         if (listFormat.levels.length > 0 &&
             listFormat.wordKnownLevels.get(wordList) != listFormat.levels) {
             listFormat.wordKnownLevels.set(wordList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(listFormat.levels), false));
@@ -35426,28 +35977,6 @@ function processWordList(styles, group, element, context, metadata) {
     return false;
 }
 exports.processWordList = processWordList;
-function processAsListItem(listFormat, context, element, group, listMetadata) {
-    var listLevel = listFormat.levels[listFormat.levels.length - 1];
-    var listType = listLevel.listType;
-    var bullet = getBulletFromMetadata(listMetadata, listType);
-    if (bullet) {
-        (0, roosterjs_content_model_dom_1.updateListMetadata)(listFormat.levels[listFormat.levels.length - 1], function (metadata) {
-            return Object.assign({}, metadata, {
-                unorderedStyleType: listType == 'UL' ? bullet : undefined,
-                orderedStyleType: listType == 'OL' ? bullet : undefined,
-            });
-        });
-    }
-    var listItem = (0, roosterjs_content_model_dom_1.createListItem)(listFormat.levels, context.segmentFormat);
-    (0, roosterjs_content_model_dom_1.parseFormat)(element, context.formatParsers.segmentOnBlock, context.segmentFormat, context);
-    (0, roosterjs_content_model_dom_1.parseFormat)(element, context.formatParsers.listItemElement, listItem.format, context);
-    (0, roosterjs_content_model_dom_1.parseFormat)(element, [removeNegativeTextIndentParser_1.removeNegativeTextIndentParser, nonListElementParser], listItem.format, context);
-    if (listType == 'OL') {
-        setStartNumber(listItem, context, listMetadata);
-    }
-    context.elementProcessors.child(listItem, element, context);
-    (0, roosterjs_content_model_dom_1.addBlock)(group, listItem);
-}
 function getBulletFromMetadata(listMetadata, listType) {
     var templateType = (listMetadata === null || listMetadata === void 0 ? void 0 : listMetadata['mso-level-number-format']) || 'decimal';
     var templateFinal;
@@ -35494,14 +36023,6 @@ function getBulletFromMetadata(listMetadata, listType) {
     }
     return (0, roosterjs_content_model_dom_1.getListStyleTypeFromString)(listType, templateFinal);
 }
-function wordListPaddingParser(format, element) {
-    if (element.style.marginLeft && element.style.marginLeft != '0in') {
-        format.paddingLeft = '0px';
-    }
-    if (element.style.marginRight && element.style.marginRight != '0in') {
-        format.paddingRight = '0px';
-    }
-}
 function setStartNumber(listItem, context, listMetadata) {
     var _a, _b;
     var _c = context.listFormat, listParent = _c.listParent, wordList = _c.wordList, wordKnownLevels = _c.wordKnownLevels, wordLevel = _c.wordLevel, levels = _c.levels;
@@ -35529,43 +36050,14 @@ function getLastNotEmptyBlock(listParent) {
     }
     return undefined;
 }
-var nonListElementParser = function (format, element, _context, defaultStyle) {
-    if (!(0, roosterjs_content_model_dom_1.isElementOfType)(element, 'li')) {
-        Object.keys(defaultStyle).forEach(function (keyInput) {
-            var key = keyInput;
-            var formatKey = keyInput;
-            if (key != 'display' &&
-                format[formatKey] != undefined &&
-                format[formatKey] == defaultStyle[key]) {
-                delete format[formatKey];
-            }
-        });
+function wordListPaddingParser(format, element) {
+    if (element.style.marginLeft && element.style.marginLeft != '0in') {
+        format.paddingLeft = '0px';
     }
-};
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/removeNegativeTextIndentParser.ts":
-/*!**********************************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/removeNegativeTextIndentParser.ts ***!
-  \**********************************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.removeNegativeTextIndentParser = void 0;
-/**
- * @internal
- */
-var removeNegativeTextIndentParser = function (format, element) {
-    var _a;
-    if ((_a = format.textIndent) === null || _a === void 0 ? void 0 : _a.startsWith('-')) {
-        delete format.textIndent;
+    if (element.style.marginRight && element.style.marginRight != '0in') {
+        format.paddingRight = '0px';
     }
-};
-exports.removeNegativeTextIndentParser = removeNegativeTextIndentParser;
+}
 
 
 /***/ }),
@@ -35692,6 +36184,98 @@ function ensureOneNoteListContext(cmContext) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/deprecatedColorParser.ts":
+/*!*********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/paste/parsers/deprecatedColorParser.ts ***!
+  \*********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.deprecatedBorderColorParser = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+var deprecatedBorderColorParser = function (format) {
+    roosterjs_content_model_dom_1.BorderKeys.forEach(function (key) {
+        var value = format[key];
+        var color = '';
+        if (value &&
+            roosterjs_content_model_dom_1.DeprecatedColors.some(function (dColor) { return value.indexOf(dColor) > -1 && (color = dColor); })) {
+            var newValue = value.replace(color, '').trimRight();
+            format[key] = newValue;
+        }
+    });
+};
+exports.deprecatedBorderColorParser = deprecatedBorderColorParser;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/linkParser.ts":
+/*!**********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/paste/parsers/linkParser.ts ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.parseLink = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var SUPPORTED_PROTOCOLS = ['http:', 'https:', 'notes:', 'mailto:', 'onenote:'];
+var INVALID_LINKS_REGEX = /^file:\/\/\/[a-zA-Z\/]/i;
+/**
+ * @internal
+ */
+var parseLink = function (format, element) {
+    if (!(0, roosterjs_content_model_dom_1.isElementOfType)(element, 'a')) {
+        return;
+    }
+    var url;
+    try {
+        url = new URL(element.href);
+    }
+    catch (_a) {
+        url = undefined;
+    }
+    if ((url && SUPPORTED_PROTOCOLS.indexOf(url.protocol) === -1) ||
+        INVALID_LINKS_REGEX.test(element.href)) {
+        element.removeAttribute('href');
+        format.href = '';
+    }
+};
+exports.parseLink = parseLink;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/removeNegativeTextIndentParser.ts":
+/*!******************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/paste/parsers/removeNegativeTextIndentParser.ts ***!
+  \******************************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.removeNegativeTextIndentParser = void 0;
+/**
+ * @internal
+ */
+var removeNegativeTextIndentParser = function (format) {
+    var _a;
+    if ((_a = format.textIndent) === null || _a === void 0 ? void 0 : _a.startsWith('-')) {
+        delete format.textIndent;
+    }
+};
+exports.removeNegativeTextIndentParser = removeNegativeTextIndentParser;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/paste/pasteSourceValidations/constants.ts":
@@ -36108,32 +36692,75 @@ exports.chainSanitizerCallback = chainSanitizerCallback;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/paste/utils/deprecatedColorParser.ts":
-/*!*******************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/paste/utils/deprecatedColorParser.ts ***!
-  \*******************************************************************************************/
+/***/ "./packages/roosterjs-content-model-plugins/lib/paste/utils/customListUtils.ts":
+/*!*************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/paste/utils/customListUtils.ts ***!
+  \*************************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.deprecatedBorderColorParser = void 0;
+exports.processAsListItem = exports.setupListFormat = void 0;
+var removeNegativeTextIndentParser_1 = __webpack_require__(/*! ../parsers/removeNegativeTextIndentParser */ "./packages/roosterjs-content-model-plugins/lib/paste/parsers/removeNegativeTextIndentParser.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var removeMargin = function (format) {
+    delete format.marginLeft;
+};
 /**
  * @internal
  */
-var deprecatedBorderColorParser = function (format) {
-    roosterjs_content_model_dom_1.BorderKeys.forEach(function (key) {
-        var value = format[key];
-        var color = '';
-        if (value &&
-            roosterjs_content_model_dom_1.DeprecatedColors.some(function (dColor) { return value.indexOf(dColor) > -1 && (color = dColor); })) {
-            var newValue = value.replace(color, '').trimRight();
-            format[key] = newValue;
+function setupListFormat(listType, element, context, listDepth, listFormat, group, additionalParsers) {
+    if (additionalParsers === void 0) { additionalParsers = []; }
+    var newLevel = (0, roosterjs_content_model_dom_1.createListLevel)(listType);
+    (0, roosterjs_content_model_dom_1.parseFormat)(element, context.formatParsers.listLevel, newLevel.format, context);
+    (0, roosterjs_content_model_dom_1.parseFormat)(element, additionalParsers.concat(removeMargin), newLevel.format, context);
+    // If the list format is in a different level, update the array so we get the new item
+    // To be in the same level as the provided level metadata.
+    if (listDepth > listFormat.levels.length) {
+        while (listDepth != listFormat.levels.length) {
+            listFormat.levels.push(newLevel);
         }
-    });
+    }
+    else {
+        listFormat.levels.splice(listDepth, listFormat.levels.length - 1);
+        listFormat.levels[listDepth - 1] = newLevel;
+    }
+    listFormat.listParent = group;
+}
+exports.setupListFormat = setupListFormat;
+/**
+ * @internal
+ */
+function processAsListItem(context, element, group, listFormatMetadata, beforeProcessingChildren) {
+    var listFormat = context.listFormat;
+    if (listFormatMetadata) {
+        (0, roosterjs_content_model_dom_1.updateListMetadata)(listFormat.levels[listFormat.levels.length - 1], function (metadata) {
+            return Object.assign({}, metadata, listFormatMetadata);
+        });
+    }
+    var listItem = (0, roosterjs_content_model_dom_1.createListItem)(listFormat.levels, context.segmentFormat);
+    (0, roosterjs_content_model_dom_1.parseFormat)(element, context.formatParsers.segmentOnBlock, context.segmentFormat, context);
+    (0, roosterjs_content_model_dom_1.parseFormat)(element, context.formatParsers.listItemElement, listItem.format, context);
+    (0, roosterjs_content_model_dom_1.parseFormat)(element, [removeNegativeTextIndentParser_1.removeNegativeTextIndentParser, nonListElementParser], listItem.format, context);
+    beforeProcessingChildren === null || beforeProcessingChildren === void 0 ? void 0 : beforeProcessingChildren(listItem);
+    context.elementProcessors.child(listItem, element, context);
+    (0, roosterjs_content_model_dom_1.addBlock)(group, listItem);
+}
+exports.processAsListItem = processAsListItem;
+var nonListElementParser = function (format, element, _context, defaultStyle) {
+    if (!(0, roosterjs_content_model_dom_1.isElementOfType)(element, 'li')) {
+        Object.keys(defaultStyle).forEach(function (keyInput) {
+            var key = keyInput;
+            var formatKey = keyInput;
+            if (key != 'display' &&
+                format[formatKey] != undefined &&
+                format[formatKey] == defaultStyle[key]) {
+                delete format[formatKey];
+            }
+        });
+    }
 };
-exports.deprecatedBorderColorParser = deprecatedBorderColorParser;
 
 
 /***/ }),
@@ -36169,44 +36796,6 @@ function getStyles(element) {
 exports.getStyles = getStyles;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-content-model-plugins/lib/paste/utils/linkParser.ts":
-/*!********************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/paste/utils/linkParser.ts ***!
-  \********************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.parseLink = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var SUPPORTED_PROTOCOLS = ['http:', 'https:', 'notes:', 'mailto:', 'onenote:'];
-var INVALID_LINKS_REGEX = /^file:\/\/\/[a-zA-Z\/]/i;
-/**
- * @internal
- */
-var parseLink = function (format, element) {
-    if (!(0, roosterjs_content_model_dom_1.isElementOfType)(element, 'a')) {
-        return;
-    }
-    var url;
-    try {
-        url = new URL(element.href);
-    }
-    catch (_a) {
-        url = undefined;
-    }
-    if ((url && SUPPORTED_PROTOCOLS.indexOf(url.protocol) === -1) ||
-        INVALID_LINKS_REGEX.test(element.href)) {
-        element.removeAttribute('href');
-        format.href = '';
-    }
-};
-exports.parseLink = parseLink;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/paste/utils/setProcessor.ts":
@@ -38738,7 +39327,7 @@ var WatermarkPlugin = /** @class */ (function () {
         this.isShowing = true;
     };
     WatermarkPlugin.prototype.applyWatermarkStyle = function (editor) {
-        var rule = "position: absolute; pointer-events: none; content: \"" + this.watermark + "\";";
+        var rule = "position: absolute; pointer-events: none; margin-inline-start: 1px; content: \"" + this.watermark + "\";";
         var format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.format), { textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor });
         (0, roosterjs_content_model_dom_1.getObjectKeys)(styleMap).forEach(function (x) {
             if (format[x]) {