roosterjs 9.0.0 → 9.1.0

package/dist/rooster.js

@@ -2094,8 +2094,8 @@ exports["default"] = getDarkColor;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.setModelListStyle = exports.setListType = exports.formatSegmentWithContentModel = exports.formatParagraphWithContentModel = exports.formatImageWithContentModel = exports.formatTableWithContentModel = exports.insertTableColumn = exports.insertTableRow = exports.insertEntity = exports.toggleCode = exports.setParagraphMargin = exports.adjustImageSelection = exports.setImageAltText = exports.adjustLinkSelection = exports.removeLink = exports.insertLink = exports.clearFormat = exports.getFormatState = exports.changeImage = exports.setImageBoxShadow = exports.setImageBorder = exports.setSpacing = exports.toggleBlockQuote = exports.setHeadingLevel = exports.setDirection = exports.setAlignment = exports.setIndentation = exports.setListStartNumber = exports.setListStyle = exports.insertImage = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
-exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = void 0;
+exports.formatTextSegmentBeforeSelectionMarker = exports.formatSegmentWithContentModel = exports.formatParagraphWithContentModel = exports.formatImageWithContentModel = exports.formatTableWithContentModel = exports.clearSelectedCells = exports.insertTableColumn = exports.insertTableRow = exports.insertEntity = exports.toggleCode = exports.setParagraphMargin = exports.adjustImageSelection = exports.setImageAltText = exports.adjustLinkSelection = exports.removeLink = exports.insertLink = exports.clearFormat = exports.getFormatState = exports.changeImage = exports.setImageBoxShadow = exports.setImageBorder = exports.setSpacing = exports.toggleBlockQuote = exports.setHeadingLevel = exports.setDirection = exports.setAlignment = exports.setIndentation = exports.setListStartNumber = exports.setListStyle = exports.insertImage = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
+exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = void 0;
 var insertTable_1 = __webpack_require__(/*! ./publicApi/table/insertTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/insertTable.ts");
 Object.defineProperty(exports, "insertTable", ({ enumerable: true, get: function () { return insertTable_1.insertTable; } }));
 var formatTable_1 = __webpack_require__(/*! ./publicApi/table/formatTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/formatTable.ts");
@@ -2184,6 +2184,8 @@ var insertTableRow_1 = __webpack_require__(/*! ./modelApi/table/insertTableRow *
 Object.defineProperty(exports, "insertTableRow", ({ enumerable: true, get: function () { return insertTableRow_1.insertTableRow; } }));
 var insertTableColumn_1 = __webpack_require__(/*! ./modelApi/table/insertTableColumn */ "./packages/roosterjs-content-model-api/lib/modelApi/table/insertTableColumn.ts");
 Object.defineProperty(exports, "insertTableColumn", ({ enumerable: true, get: function () { return insertTableColumn_1.insertTableColumn; } }));
+var clearSelectedCells_1 = __webpack_require__(/*! ./modelApi/table/clearSelectedCells */ "./packages/roosterjs-content-model-api/lib/modelApi/table/clearSelectedCells.ts");
+Object.defineProperty(exports, "clearSelectedCells", ({ enumerable: true, get: function () { return clearSelectedCells_1.clearSelectedCells; } }));
 var formatTableWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatTableWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTableWithContentModel.ts");
 Object.defineProperty(exports, "formatTableWithContentModel", ({ enumerable: true, get: function () { return formatTableWithContentModel_1.formatTableWithContentModel; } }));
 var formatImageWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatImageWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatImageWithContentModel.ts");
@@ -2192,6 +2194,8 @@ var formatParagraphWithContentModel_1 = __webpack_require__(/*! ./publicApi/util
 Object.defineProperty(exports, "formatParagraphWithContentModel", ({ enumerable: true, get: function () { return formatParagraphWithContentModel_1.formatParagraphWithContentModel; } }));
 var formatSegmentWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatSegmentWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatSegmentWithContentModel.ts");
 Object.defineProperty(exports, "formatSegmentWithContentModel", ({ enumerable: true, get: function () { return formatSegmentWithContentModel_1.formatSegmentWithContentModel; } }));
+var formatTextSegmentBeforeSelectionMarker_1 = __webpack_require__(/*! ./publicApi/utils/formatTextSegmentBeforeSelectionMarker */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts");
+Object.defineProperty(exports, "formatTextSegmentBeforeSelectionMarker", ({ enumerable: true, get: function () { return formatTextSegmentBeforeSelectionMarker_1.formatTextSegmentBeforeSelectionMarker; } }));
 var setListType_1 = __webpack_require__(/*! ./modelApi/list/setListType */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setListType.ts");
 Object.defineProperty(exports, "setListType", ({ enumerable: true, get: function () { return setListType_1.setListType; } }));
 var setModelListStyle_1 = __webpack_require__(/*! ./modelApi/list/setModelListStyle */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setModelListStyle.ts");
@@ -3882,7 +3886,6 @@ exports.clearSelectedCells = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * Clear selection of a table.
- * @internal
  * @param table The table model where the selection is to be cleared
  * @param sel The selection coordinates to be cleared
  */
@@ -6822,6 +6825,44 @@ function formatTableWithContentModel(editor, apiName, callback, selectionOverrid
 exports.formatTableWithContentModel = formatTableWithContentModel;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts":
+/*!************************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts ***!
+  \************************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.formatTextSegmentBeforeSelectionMarker = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * Invoke a callback to format the text segment before the selection marker using Content Model
+ * @param editor The editor object
+ * @param callback The callback to format the text segment.
+ */
+function formatTextSegmentBeforeSelectionMarker(editor, callback) {
+    editor.formatContentModel(function (model, context) {
+        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /*includeFormatHolder*/);
+        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
+            var marker = selectedSegmentsAndParagraphs[0][0];
+            var paragraph = selectedSegmentsAndParagraphs[0][1];
+            var markerIndex = paragraph.segments.indexOf(marker);
+            if (marker.segmentType === 'SelectionMarker' && markerIndex > 0) {
+                var previousSegment = paragraph.segments[markerIndex - 1];
+                if (previousSegment && previousSegment.segmentType === 'Text') {
+                    return callback(model, previousSegment, paragraph, marker.format, context);
+                }
+            }
+        }
+        return false;
+    });
+}
+exports.formatTextSegmentBeforeSelectionMarker = formatTextSegmentBeforeSelectionMarker;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/command/createModelFromHtml/convertInlineCss.ts":
@@ -8946,6 +8987,14 @@ function addRangeToSelection(doc, range, isReverted) {
     if (isReverted === void 0) { isReverted = false; }
     var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
     if (selection) {
+        var currentRange = selection.rangeCount > 0 && selection.getRangeAt(0);
+        if (currentRange &&
+            currentRange.startContainer == range.startContainer &&
+            currentRange.endContainer == range.endContainer &&
+            currentRange.startOffset == range.startOffset &&
+            currentRange.endOffset == range.endOffset) {
+            return;
+        }
         selection.removeAllRanges();
         if (!isReverted) {
             selection.addRange(range);
@@ -9066,11 +9115,14 @@ var findTableCellElement_1 = __webpack_require__(/*! ./findTableCellElement */ "
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var DOM_SELECTION_CSS_KEY = '_DOMSelection';
 var HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';
+var HIDE_SELECTION_CSS_KEY = '_DOMSelectionHideSelection';
 var IMAGE_ID = 'image';
 var TABLE_ID = 'table';
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 var TABLE_CSS_RULE = 'background-color:#C6C6C6!important;';
 var CARET_CSS_RULE = 'caret-color: transparent';
+var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important';
+var SELECTION_SELECTOR = '*::selection';
 /**
  * @internal
  */
@@ -9083,14 +9135,15 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     core.selection.skipReselectOnFocus = true;
     core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, null /*cssRule*/);
     core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, null /*cssRule*/);
+    core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, null /*cssRule*/);
     try {
         switch (selection === null || selection === void 0 ? void 0 : selection.type) {
             case 'image':
                 var image = selection.image;
                 core.selection.selection = selection;
                 core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID)]);
-                core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
-                setRangeSelection(doc, image);
+                core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
+                setRangeSelection(doc, image, false /* collapse */);
                 break;
             case 'table':
                 var table = selection.table, firstColumn = selection.firstColumn, firstRow = selection.firstRow, lastColumn = selection.lastColumn, lastRow = selection.lastRow;
@@ -9132,7 +9185,7 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                 core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
                 var nodeToSelect = ((_c = firstCell.cell) === null || _c === void 0 ? void 0 : _c.firstElementChild) || firstCell.cell;
                 if (nodeToSelect) {
-                    setRangeSelection(doc, nodeToSelect || undefined);
+                    setRangeSelection(doc, nodeToSelect || undefined, true /* collapse */);
                 }
                 break;
             case 'range':
@@ -9198,12 +9251,25 @@ function handleTableSelected(parsedTable, tableId, table, firstCell, lastCell) {
     });
     return selectors;
 }
-function setRangeSelection(doc, element) {
+function setRangeSelection(doc, element, collapse) {
+    var _a;
     if (element && doc.contains(element)) {
         var range = doc.createRange();
+        var isReverted = undefined;
         range.selectNode(element);
-        range.collapse();
-        (0, addRangeToSelection_1.addRangeToSelection)(doc, range);
+        if (collapse) {
+            range.collapse();
+        }
+        else {
+            var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
+            var range_1 = selection && selection.rangeCount > 0 && selection.getRangeAt(0);
+            if (selection && range_1) {
+                isReverted =
+                    selection.focusNode != range_1.endContainer ||
+                        selection.focusOffset != range_1.endOffset;
+            }
+        }
+        (0, addRangeToSelection_1.addRangeToSelection)(doc, range, isReverted);
     }
 }
 
@@ -11697,6 +11763,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createSelectionPlugin = void 0;
 var findCoordinate_1 = __webpack_require__(/*! ./findCoordinate */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/findCoordinate.ts");
 var findTableCellElement_1 = __webpack_require__(/*! ../../coreApi/setDOMSelection/findTableCellElement */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findTableCellElement.ts");
+var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts");
 var normalizePos_1 = __webpack_require__(/*! ./normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MouseLeftButton = 0;
@@ -11706,6 +11773,7 @@ var Up = 'ArrowUp';
 var Down = 'ArrowDown';
 var Left = 'ArrowLeft';
 var Right = 'ArrowRight';
+var Tab = 'Tab';
 var SelectionPlugin = /** @class */ (function () {
     function SelectionPlugin(options) {
         var _this = this;
@@ -11713,6 +11781,7 @@ var SelectionPlugin = /** @class */ (function () {
         this.disposer = null;
         this.isSafari = false;
         this.isMac = false;
+        this.scrollTopCache = 0;
         this.onMouseMove = function (event) {
             var _a, _b, _c;
             if (_this.editor && _this.state.tableSelection) {
@@ -11783,20 +11852,45 @@ var SelectionPlugin = /** @class */ (function () {
                 // Editor is focused, now we can get live selection. So no need to keep a selection if the selection type is range.
                 _this.state.selection = null;
             }
+            if (_this.scrollTopCache && _this.editor) {
+                var sc = _this.editor.getScrollContainer();
+                sc.scrollTop = _this.scrollTopCache;
+                _this.scrollTopCache = 0;
+            }
         };
         this.onBlur = function () {
-            if (!_this.state.selection && _this.editor) {
-                _this.state.selection = _this.editor.getDOMSelection();
+            if (_this.editor) {
+                if (!_this.state.selection) {
+                    _this.state.selection = _this.editor.getDOMSelection();
+                }
+                var sc = _this.editor.getScrollContainer();
+                _this.scrollTopCache = sc.scrollTop;
             }
         };
-        this.onSelectionChangeSafari = function () {
+        this.onSelectionChange = function () {
             var _a;
             if (((_a = _this.editor) === null || _a === void 0 ? void 0 : _a.hasFocus()) && !_this.editor.isInShadowEdit()) {
+                var newSelection = _this.editor.getDOMSelection();
+                //If am image selection changed to a wider range due a keyboard event, we should update the selection
+                var selection = _this.editor.getDocument().getSelection();
+                if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'image' && selection) {
+                    if (selection && !(0, isSingleImageInSelection_1.isSingleImageInSelection)(selection)) {
+                        var range = selection.getRangeAt(0);
+                        _this.editor.setDOMSelection({
+                            type: 'range',
+                            range: range,
+                            isReverted: selection.focusNode != range.endContainer ||
+                                selection.focusOffset != range.endOffset,
+                        });
+                    }
+                }
                 // Safari has problem to handle onBlur event. When blur, we cannot get the original selection from editor.
                 // So we always save a selection whenever editor has focus. Then after blur, we can still use this cached selection.
-                var newSelection = _this.editor.getDOMSelection();
                 if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'range') {
-                    _this.state.selection = newSelection;
+                    if (_this.isSafari) {
+                        _this.state.selection = newSelection;
+                    }
+                    _this.trySelectSingleImage(newSelection);
                 }
             }
         };
@@ -11815,8 +11909,8 @@ var SelectionPlugin = /** @class */ (function () {
         var document = this.editor.getDocument();
         this.isSafari = !!env.isSafari;
         this.isMac = !!env.isMac;
+        document.addEventListener('selectionchange', this.onSelectionChange);
         if (this.isSafari) {
-            document.addEventListener('selectionchange', this.onSelectionChangeSafari);
             this.disposer = this.editor.attachDomEvent({
                 focus: { beforeDispatch: this.onFocus },
                 drop: { beforeDispatch: this.onDrop },
@@ -11832,7 +11926,7 @@ var SelectionPlugin = /** @class */ (function () {
     };
     SelectionPlugin.prototype.dispose = function () {
         var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument().removeEventListener('selectionchange', this.onSelectionChangeSafari);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument().removeEventListener('selectionchange', this.onSelectionChange);
         if (this.disposer) {
             this.disposer();
             this.disposer = null;
@@ -11860,6 +11954,11 @@ var SelectionPlugin = /** @class */ (function () {
             case 'contentChanged':
                 this.state.tableSelection = null;
                 break;
+            case 'scroll':
+                if (!this.editor.hasFocus()) {
+                    this.scrollTopCache = event.scrollContainer.scrollTop;
+                }
+                break;
         }
     };
     SelectionPlugin.prototype.onMouseDown = function (editor, rawEvent) {
@@ -11871,11 +11970,11 @@ var SelectionPlugin = /** @class */ (function () {
             (image =
                 (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
             image.isContentEditable) {
-            this.selectImage(image);
+            this.selectImageWithRange(image, rawEvent);
             return;
         }
         else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== rawEvent.target) {
-            this.selectBeforeImage(editor, selection.image);
+            this.selectBeforeOrAfterElement(editor, selection.image);
             return;
         }
         // Table selection
@@ -11904,6 +12003,22 @@ var SelectionPlugin = /** @class */ (function () {
             });
         }
     };
+    SelectionPlugin.prototype.selectImageWithRange = function (image, event) {
+        var _a;
+        var range = image.ownerDocument.createRange();
+        range.selectNode(image);
+        var domSelection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+        if ((domSelection === null || domSelection === void 0 ? void 0 : domSelection.type) == 'image' && image == domSelection.image) {
+            event.preventDefault();
+        }
+        else {
+            this.setDOMSelection({
+                type: 'range',
+                isReverted: false,
+                range: range,
+            }, null);
+        }
+    };
     SelectionPlugin.prototype.onMouseUp = function (event) {
         var image;
         if ((image = this.getClickingImage(event.rawEvent)) &&
@@ -11912,7 +12027,7 @@ var SelectionPlugin = /** @class */ (function () {
             (event.rawEvent.button ==
                 MouseRightButton /* it's not possible to drag using right click */ ||
                 event.isClicking)) {
-            this.selectImage(image);
+            this.selectImageWithRange(image, event.rawEvent);
         }
         this.detachMouseEvent();
     };
@@ -11926,20 +12041,21 @@ var SelectionPlugin = /** @class */ (function () {
             case 'image':
                 if (!(0, roosterjs_content_model_dom_1.isModifierKey)(rawEvent) && !rawEvent.shiftKey && selection.image.parentNode) {
                     if (key === 'Escape') {
-                        this.selectBeforeImage(editor, selection.image);
+                        this.selectBeforeOrAfterElement(editor, selection.image);
                         rawEvent.stopPropagation();
                     }
                     else if (key !== 'Delete' && key !== 'Backspace') {
-                        this.selectBeforeImage(editor, selection.image);
+                        this.selectBeforeOrAfterElement(editor, selection.image);
                     }
                 }
                 break;
             case 'range':
-                if (key == Up || key == Down || key == Left || key == Right) {
+                if (key == Up || key == Down || key == Left || key == Right || key == Tab) {
                     var start = selection.range.startContainer;
                     this.state.tableSelection = this.parseTableSelection(start, start, editor.getDOMHelper());
+                    var rangeKey_1 = key == Tab ? this.getTabKey(rawEvent) : key;
                     if (this.state.tableSelection) {
-                        win === null || win === void 0 ? void 0 : win.requestAnimationFrame(function () { return _this.handleSelectionInTable(key); });
+                        win === null || win === void 0 ? void 0 : win.requestAnimationFrame(function () { return _this.handleSelectionInTable(rangeKey_1); });
                     }
                 }
                 break;
@@ -11966,15 +12082,18 @@ var SelectionPlugin = /** @class */ (function () {
                 break;
         }
     };
+    SelectionPlugin.prototype.getTabKey = function (rawEvent) {
+        return rawEvent.shiftKey ? 'TabLeft' : 'TabRight';
+    };
     SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!this.editor || !this.state.tableSelection) {
             return;
         }
         var selection = this.editor.getDOMSelection();
         var domHelper = this.editor.getDOMHelper();
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-            var _c = selection.range, collapsed = _c.collapsed, startContainer = _c.startContainer, endContainer = _c.endContainer, commonAncestorContainer = _c.commonAncestorContainer, isReverted = selection.isReverted;
+            var _e = selection.range, collapsed = _e.collapsed, startContainer = _e.startContainer, endContainer = _e.endContainer, commonAncestorContainer = _e.commonAncestorContainer, isReverted = selection.isReverted;
             var start = isReverted ? endContainer : startContainer;
             var end = isReverted ? startContainer : endContainer;
             var tableSel = this.parseTableSelection(commonAncestorContainer, start, domHelper);
@@ -11982,9 +12101,9 @@ var SelectionPlugin = /** @class */ (function () {
                 return;
             }
             var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-            var _d = this.state.tableSelection, parsedTable = _d.parsedTable, oldCo = _d.firstCo, table = _d.table;
-            if (lastCo && tableSel.table == table && lastCo.col != oldCo.col) {
-                if (key == Up || key == Down) {
+            var _f = this.state.tableSelection, parsedTable = _f.parsedTable, oldCo = _f.firstCo, table = _f.table;
+            if (lastCo && tableSel.table == table) {
+                if (lastCo.col != oldCo.col && (key == Up || key == Down)) {
                     var change = key == Up ? -1 : 1;
                     var originalTd = (_a = (0, findTableCellElement_1.findTableCellElement)(parsedTable, oldCo)) === null || _a === void 0 ? void 0 : _a.cell;
                     var td = null;
@@ -11999,15 +12118,29 @@ var SelectionPlugin = /** @class */ (function () {
                         }
                     }
                     if (collapsed && td) {
-                        var _e = (0, normalizePos_1.normalizePos)(td, key == Up ? td.childNodes.length : 0), node = _e.node, offset = _e.offset;
-                        var range = this.editor.getDocument().createRange();
-                        range.setStart(node, offset);
-                        range.collapse(true /*toStart*/);
-                        this.setDOMSelection({
-                            type: 'range',
-                            range: range,
-                            isReverted: false,
-                        }, null /*tableSelection*/);
+                        this.setRangeSelectionInTable(td, key == Up ? td.childNodes.length : 0, this.editor);
+                    }
+                }
+                else if (key == 'TabLeft' || key == 'TabRight') {
+                    var reverse = key == 'TabLeft';
+                    for (var step = reverse ? -1 : 1, row = (_c = lastCo.row) !== null && _c !== void 0 ? _c : 0, col = ((_d = lastCo.col) !== null && _d !== void 0 ? _d : 0) + step;; col += step) {
+                        if (col < 0 || col >= parsedTable[row].length) {
+                            row += step;
+                            if (row < 0) {
+                                this.selectBeforeOrAfterElement(this.editor, tableSel.table);
+                                break;
+                            }
+                            else if (row >= parsedTable.length) {
+                                this.selectBeforeOrAfterElement(this.editor, tableSel.table, true /*after*/);
+                                break;
+                            }
+                            col = reverse ? parsedTable[row].length - 1 : 0;
+                        }
+                        var cell = parsedTable[row][col];
+                        if (typeof cell != 'string') {
+                            this.setRangeSelectionInTable(cell, 0, this.editor);
+                            break;
+                        }
                     }
                 }
                 else {
@@ -12020,6 +12153,18 @@ var SelectionPlugin = /** @class */ (function () {
             }
         }
     };
+    SelectionPlugin.prototype.setRangeSelectionInTable = function (cell, nodeOffset, editor) {
+        // Get deepest editable position in the cell
+        var _a = (0, normalizePos_1.normalizePos)(cell, nodeOffset), node = _a.node, offset = _a.offset;
+        var range = editor.getDocument().createRange();
+        range.setStart(node, offset);
+        range.collapse(true /*toStart*/);
+        this.setDOMSelection({
+            type: 'range',
+            range: range,
+            isReverted: false,
+        }, null /*tableSelection*/);
+    };
     SelectionPlugin.prototype.updateTableSelectionFromKeyboard = function (rowChange, colChange) {
         var _a;
         if (((_a = this.state.tableSelection) === null || _a === void 0 ? void 0 : _a.lastCo) && this.editor) {
@@ -12031,19 +12176,13 @@ var SelectionPlugin = /** @class */ (function () {
             }
         }
     };
-    SelectionPlugin.prototype.selectImage = function (image) {
-        this.setDOMSelection({
-            type: 'image',
-            image: image,
-        }, null /*tableSelection*/);
-    };
-    SelectionPlugin.prototype.selectBeforeImage = function (editor, image) {
+    SelectionPlugin.prototype.selectBeforeOrAfterElement = function (editor, element, after) {
         var doc = editor.getDocument();
-        var parent = image.parentNode;
-        var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(image);
+        var parent = element.parentNode;
+        var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(element);
         if (parent && index !== null && index >= 0) {
             var range = doc.createRange();
-            range.setStart(parent, index);
+            range.setStart(parent, index + (after ? 1 : 0));
             range.collapse();
             this.setDOMSelection({
                 type: 'range',
@@ -12100,6 +12239,17 @@ var SelectionPlugin = /** @class */ (function () {
             this.state.mouseDisposer = undefined;
         }
     };
+    SelectionPlugin.prototype.trySelectSingleImage = function (selection) {
+        if (!selection.range.collapsed) {
+            var image = (0, isSingleImageInSelection_1.isSingleImageInSelection)(selection.range);
+            if (image) {
+                this.setDOMSelection({
+                    type: 'image',
+                    image: image,
+                }, null /*tableSelection*/);
+            }
+        }
+    };
     return SelectionPlugin;
 }());
 /**
@@ -12152,6 +12302,58 @@ function findCoordinate(parsedTable, element, domHelper) {
 exports.findCoordinate = findCoordinate;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.isSingleImageInSelection = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+function isSingleImageInSelection(selection) {
+    var _a = getProps(selection), startNode = _a.startNode, endNode = _a.endNode, startOffset = _a.startOffset, endOffset = _a.endOffset;
+    var max = Math.max(startOffset, endOffset);
+    var min = Math.min(startOffset, endOffset);
+    if (startNode && endNode && startNode == endNode && max - min == 1) {
+        var node = startNode === null || startNode === void 0 ? void 0 : startNode.childNodes.item(min);
+        if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
+            return node;
+        }
+    }
+    return null;
+}
+exports.isSingleImageInSelection = isSingleImageInSelection;
+function getProps(selection) {
+    if (isSelection(selection)) {
+        return {
+            startNode: selection.anchorNode,
+            endNode: selection.focusNode,
+            startOffset: selection.anchorOffset,
+            endOffset: selection.focusOffset,
+        };
+    }
+    else {
+        return {
+            startNode: selection.startContainer,
+            endNode: selection.endContainer,
+            startOffset: selection.startOffset,
+            endOffset: selection.endOffset,
+        };
+    }
+}
+function isSelection(selection) {
+    return !!selection.getRangeAt;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts":
@@ -12165,6 +12367,30 @@ exports.findCoordinate = findCoordinate;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.normalizePos = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * HTML void elements
+ * Per https://www.w3.org/TR/html/syntax.html#syntax-elements, cannot have child nodes
+ * This regex is used when we move focus to very begin of editor. We should avoid putting focus inside
+ * void elements so users don't accidentally create child nodes in them
+ */
+var HTML_VOID_ELEMENTS = [
+    'AREA',
+    'BASE',
+    'BR',
+    'COL',
+    'COMMAND',
+    'EMBED',
+    'HR',
+    'IMG',
+    'INPUT',
+    'KEYGEN',
+    'LINK',
+    'META',
+    'PARAM',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+];
 /**
  * @internal
  */
@@ -12182,8 +12408,15 @@ function normalizePos(node, offset) {
                 : node.childNodes.length;
         }
         else {
-            node = node.childNodes[offset];
-            offset = 0;
+            var nextNode = node.childNodes[offset];
+            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(nextNode, 'ELEMENT_NODE') &&
+                HTML_VOID_ELEMENTS.indexOf(nextNode.tagName) >= 0) {
+                break;
+            }
+            else {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
         }
     }
     return { node: node, offset: offset };
@@ -13610,6 +13843,7 @@ exports.defaultContentModelFormatMap = void 0;
 exports.defaultContentModelFormatMap = {
     a: {
         underline: true,
+        textColor: undefined, // Set to undefined to force override color from parent element so we can write correct link color if any, because browser will assign a default color for link if it doesn't have one
     },
     blockquote: {
         marginTop: '1em',
@@ -24552,6 +24786,7 @@ exports.stackFormat = stackFormat;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.contentModelToText = void 0;
+var TextForHR = '________________________________________';
 /**
  * Convert Content Model to plain text
  * @param model The source Content Model
@@ -24589,9 +24824,13 @@ function contentModelToTextArray(group, textArray) {
                             break;
                     }
                 });
-                textArray.push(text_1);
+                if (text_1) {
+                    textArray.push(text_1);
+                }
                 break;
             case 'Divider':
+                textArray.push(block.tagName == 'hr' ? TextForHR : '');
+                break;
             case 'Entity':
                 textArray.push('');
                 break;
@@ -24624,7 +24863,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AutoFormatPlugin = void 0;
 var createLink_1 = __webpack_require__(/*! ./link/createLink */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts");
 var createLinkAfterSpace_1 = __webpack_require__(/*! ./link/createLinkAfterSpace */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var keyboardListTrigger_1 = __webpack_require__(/*! ./list/keyboardListTrigger */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/list/keyboardListTrigger.ts");
+var transformHyphen_1 = __webpack_require__(/*! ./hyphen/transformHyphen */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts");
 var unlink_1 = __webpack_require__(/*! ./link/unlink */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/unlink.ts");
 /**
  * @internal
@@ -24634,6 +24875,7 @@ var DefaultOptions = {
     autoNumbering: false,
     autoUnlink: false,
     autoLink: false,
+    autoHyphen: false,
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -24646,6 +24888,7 @@ var AutoFormatPlugin = /** @class */ (function () {
      *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to false.
      *  - autoLink: A boolean that enables or disables automatic hyperlink creation when pasting or typing content. Defaults to false.
      *  - autoUnlink: A boolean that enables or disables automatic hyperlink removal when pressing backspace. Defaults to false.
+     *  - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
      */
     function AutoFormatPlugin(options) {
         if (options === void 0) { options = DefaultOptions; }
@@ -24697,15 +24940,29 @@ var AutoFormatPlugin = /** @class */ (function () {
         }
     };
     AutoFormatPlugin.prototype.handleEditorInputEvent = function (editor, event) {
+        var _this = this;
         var rawEvent = event.rawEvent;
-        if (rawEvent.inputType === 'insertText') {
+        var selection = editor.getDOMSelection();
+        if (rawEvent.inputType === 'insertText' &&
+            selection &&
+            selection.type === 'range' &&
+            selection.range.collapsed) {
             switch (rawEvent.data) {
                 case ' ':
-                    var _a = this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoLink = _a.autoLink;
-                    (0, keyboardListTrigger_1.keyboardListTrigger)(editor, autoBullet, autoNumbering);
-                    if (autoLink) {
-                        (0, createLinkAfterSpace_1.createLinkAfterSpace)(editor);
-                    }
+                    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, previousSegment, paragraph, _markerFormat, context) {
+                        var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoLink = _a.autoLink, autoHyphen = _a.autoHyphen;
+                        var shouldHyphen = false;
+                        var shouldLink = false;
+                        if (autoLink) {
+                            shouldLink = (0, createLinkAfterSpace_1.createLinkAfterSpace)(previousSegment, paragraph, context);
+                        }
+                        if (autoHyphen) {
+                            shouldHyphen = (0, transformHyphen_1.transformHyphen)(previousSegment, paragraph, context);
+                        }
+                        return ((0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering) ||
+                            shouldHyphen ||
+                            shouldLink);
+                    });
                     break;
             }
         }
@@ -24733,6 +24990,51 @@ var AutoFormatPlugin = /** @class */ (function () {
 exports.AutoFormatPlugin = AutoFormatPlugin;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts ***!
+  \*******************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.transformHyphen = void 0;
+var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
+/**
+ * @internal
+ */
+function transformHyphen(previousSegment, paragraph, context) {
+    var segments = previousSegment.text.split(' ');
+    var dashes = segments[segments.length - 2];
+    if (dashes === '--') {
+        var textIndex = previousSegment.text.lastIndexOf('--');
+        var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + 2);
+        textSegment.text = textSegment.text.replace('--', '—');
+        context.canUndoByBackspace = true;
+        return true;
+    }
+    else {
+        var text = segments.pop();
+        var hasDashes = text && (text === null || text === void 0 ? void 0 : text.indexOf('--')) > -1;
+        if (hasDashes && text.trim() !== '--') {
+            var textIndex = previousSegment.text.indexOf(text);
+            var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + text.length - 1);
+            var textLength = textSegment.text.length;
+            if (textSegment.text[0] !== '-' && textSegment.text[textLength - 1] !== '-') {
+                textSegment.text = textSegment.text.replace('--', '—');
+                context.canUndoByBackspace = true;
+                return true;
+            }
+        }
+    }
+    return false;
+}
+exports.transformHyphen = transformHyphen;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts":
@@ -24746,17 +25048,17 @@ exports.AutoFormatPlugin = AutoFormatPlugin;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createLink = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var getLinkSegment_1 = __webpack_require__(/*! ./getLinkSegment */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
 function createLink(editor) {
-    editor.formatContentModel(function (model) {
-        var link = (0, getLinkSegment_1.getLinkSegment)(model);
-        if (link && !link.link) {
-            (0, roosterjs_content_model_dom_1.addLink)(link, {
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
+        var linkData = null;
+        if (!linkSegment.link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(linkSegment.text))) {
+            (0, roosterjs_content_model_dom_1.addLink)(linkSegment, {
                 format: {
-                    href: link.text,
+                    href: linkData.normalizedUrl,
                     underline: true,
                 },
                 dataset: {},
@@ -24781,84 +25083,30 @@ exports.createLink = createLink;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createLinkAfterSpace = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function createLinkAfterSpace(editor) {
-    editor.formatContentModel(function (model, context) {
-        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /* includingFormatHolder */);
-        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
-            var markerIndex = selectedSegmentsAndParagraphs[0][1].segments.findIndex(function (segment) { return segment.segmentType == 'SelectionMarker'; });
-            var paragraph = selectedSegmentsAndParagraphs[0][1];
-            if (markerIndex > 0) {
-                var textSegment = paragraph.segments[markerIndex - 1];
-                var marker = paragraph.segments[markerIndex];
-                if (marker.segmentType == 'SelectionMarker' &&
-                    textSegment &&
-                    textSegment.segmentType == 'Text' &&
-                    !textSegment.link) {
-                    var link = textSegment.text.split(' ').pop();
-                    var url = link === null || link === void 0 ? void 0 : link.trim();
-                    var linkData = null;
-                    if (url && link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(url))) {
-                        var linkSegment = (0, splitTextSegment_1.splitTextSegment)(textSegment, paragraph, textSegment.text.length - link.trimLeft().length, textSegment.text.trimRight().length);
-                        linkSegment.link = {
-                            format: {
-                                href: linkData.normalizedUrl,
-                                underline: true,
-                            },
-                            dataset: {},
-                        };
-                        context.canUndoByBackspace = true;
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    });
-}
-exports.createLinkAfterSpace = createLinkAfterSpace;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts ***!
-  \****************************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getLinkSegment = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
-/**
- * @internal
- */
-function getLinkSegment(model) {
-    var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /* includingFormatHolder */);
-    if (selectedSegmentsAndParagraphs.length == 1 && selectedSegmentsAndParagraphs[0][1]) {
-        var selectedParagraph = selectedSegmentsAndParagraphs[0][1];
-        var marker = selectedParagraph.segments[selectedParagraph.segments.length - 1];
-        var link = selectedParagraph.segments[selectedParagraph.segments.length - 2];
-        if (marker &&
-            link &&
-            marker.segmentType === 'SelectionMarker' &&
-            marker.isSelected &&
-            link.segmentType === 'Text' &&
-            ((0, roosterjs_content_model_api_1.matchLink)(link.text) || link.link)) {
-            return link;
-        }
+function createLinkAfterSpace(previousSegment, paragraph, context) {
+    var link = previousSegment.text.split(' ').pop();
+    var url = link === null || link === void 0 ? void 0 : link.trim();
+    var linkData = null;
+    if (url && link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(url))) {
+        var linkSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - link.trimLeft().length, previousSegment.text.trimRight().length);
+        linkSegment.link = {
+            format: {
+                href: linkData.normalizedUrl,
+                underline: true,
+            },
+            dataset: {},
+        };
+        context.canUndoByBackspace = true;
+        return true;
     }
-    return undefined;
+    return false;
 }
-exports.getLinkSegment = getLinkSegment;
+exports.createLinkAfterSpace = createLinkAfterSpace;
 
 
 /***/ }),
@@ -24873,15 +25121,14 @@ exports.getLinkSegment = getLinkSegment;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.unlink = void 0;
-var getLinkSegment_1 = __webpack_require__(/*! ./getLinkSegment */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
 function unlink(editor, rawEvent) {
-    editor.formatContentModel(function (model) {
-        var link = (0, getLinkSegment_1.getLinkSegment)(model);
-        if (link === null || link === void 0 ? void 0 : link.link) {
-            link.link = undefined;
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
+        if (linkSegment === null || linkSegment === void 0 ? void 0 : linkSegment.link) {
+            linkSegment.link = undefined;
             rawEvent.preventDefault();
             return true;
         }
@@ -24980,7 +25227,7 @@ function getListTypeStyle(model, shouldSearchForBullet, shouldSearchForNumbering
         marker.segmentType == 'SelectionMarker' &&
         listMarkerSegment &&
         listMarkerSegment.segmentType == 'Text') {
-        var listMarker = listMarkerSegment.text;
+        var listMarker = listMarkerSegment.text.trim();
         var bulletType = bulletListType[listMarker];
         if (bulletType && shouldSearchForBullet) {
             return { listType: 'UL', styleType: bulletType };
@@ -25043,7 +25290,7 @@ var bulletListType = {
     '—': roosterjs_content_model_dom_1.BulletListType.Hyphen,
 };
 var isNewList = function (listMarker) {
-    var marker = listMarker.replace(/[^\w\s]/g, '').trim();
+    var marker = listMarker.replace(/[^\w\s]/g, '');
     var pattern = /^[1aAiI]$/;
     return pattern.test(marker);
 };
@@ -25226,32 +25473,24 @@ function canAppendList(index, previousListIndex) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.keyboardListTrigger = void 0;
 var getListTypeStyle_1 = __webpack_require__(/*! ./getListTypeStyle */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
-function keyboardListTrigger(editor, shouldSearchForBullet, shouldSearchForNumbering) {
+function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, shouldSearchForNumbering) {
     if (shouldSearchForBullet === void 0) { shouldSearchForBullet = true; }
     if (shouldSearchForNumbering === void 0) { shouldSearchForNumbering = true; }
     if (shouldSearchForBullet || shouldSearchForNumbering) {
-        editor.formatContentModel(function (model, context) {
-            var listStyleType = (0, getListTypeStyle_1.getListTypeStyle)(model, shouldSearchForBullet, shouldSearchForNumbering);
-            if (listStyleType) {
-                var segmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
-                if (segmentsAndParagraphs[0] && segmentsAndParagraphs[0][1]) {
-                    segmentsAndParagraphs[0][1].segments.splice(0, 1);
-                }
-                var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
-                triggerList(model, listType, styleType, index);
-                context.canUndoByBackspace = true;
-                return true;
-            }
-            return false;
-        }, {
-            apiName: 'autoToggleList',
-        });
+        var listStyleType = (0, getListTypeStyle_1.getListTypeStyle)(model, shouldSearchForBullet, shouldSearchForNumbering);
+        if (listStyleType) {
+            paragraph.segments.splice(0, 1);
+            var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
+            triggerList(model, listType, styleType, index);
+            context.canUndoByBackspace = true;
+            return true;
+        }
     }
+    return false;
 }
 exports.keyboardListTrigger = keyboardListTrigger;
 var triggerList = function (model, listType, styleType, index) {
@@ -25744,15 +25983,21 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * @internal
  */
 var deleteList = function (context) {
+    if (context.deleteResult != 'notDeleted') {
+        return;
+    }
     var _a = context.insertPoint, paragraph = _a.paragraph, marker = _a.marker, path = _a.path;
-    if (context.deleteResult == 'nothingToDelete' || context.deleteResult == 'notDeleted') {
-        var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem', 'TableCell']);
+    if (paragraph.segments[0] == marker) {
+        var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['TableCell', 'FormatContainer']);
         var item = path[index];
-        if (item &&
-            index >= 0 &&
-            paragraph.segments[0] == marker &&
-            item.blockGroupType == 'ListItem') {
-            item.levels = [];
+        var lastLevel = item === null || item === void 0 ? void 0 : item.levels[item.levels.length - 1];
+        if (lastLevel && (item === null || item === void 0 ? void 0 : item.blocks[0]) == paragraph) {
+            if (lastLevel.format.displayForDummyItem == 'block') {
+                item.levels.pop();
+            }
+            else {
+                lastLevel.format.displayForDummyItem = 'block';
+            }
             context.deleteResult = 'range';
         }
     }
@@ -26096,7 +26341,7 @@ var createNewListItem = function (context, listItem, listParent) {
 };
 var createNewListLevel = function (listItem) {
     return listItem.levels.map(function (level) {
-        return (0, roosterjs_content_model_dom_1.createListLevel)(level.listType, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, level.format), { startNumberOverride: undefined }), level.dataset);
+        return (0, roosterjs_content_model_dom_1.createListLevel)(level.listType, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, level.format), { startNumberOverride: undefined, displayForDummyItem: undefined }), level.dataset);
     });
 };
 var createNewParagraph = function (insertPoint) {
@@ -26127,10 +26372,10 @@ var createNewParagraph = function (insertPoint) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.keyboardDelete = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var deleteAllSegmentBefore_1 = __webpack_require__(/*! ./deleteSteps/deleteAllSegmentBefore */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteAllSegmentBefore.ts");
 var deleteEmptyQuote_1 = __webpack_require__(/*! ./deleteSteps/deleteEmptyQuote */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteEmptyQuote.ts");
 var deleteList_1 = __webpack_require__(/*! ./deleteSteps/deleteList */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteList.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var handleKeyboardEventCommon_1 = __webpack_require__(/*! ./handleKeyboardEventCommon */ "./packages/roosterjs-content-model-plugins/lib/edit/handleKeyboardEventCommon.ts");
 var deleteWordSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteWordSelection */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteWordSelection.ts");
 var deleteCollapsedSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteCollapsedSelection */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteCollapsedSelection.ts");
@@ -26174,8 +26419,8 @@ function getDeleteSteps(rawEvent, isMac) {
     return [
         deleteAllSegmentBeforeStep,
         deleteWordSelection,
+        isForward ? null : deleteList_1.deleteList,
         deleteCollapsedSelection,
-        deleteList_1.deleteList,
         deleteQuote,
     ];
 }
@@ -26288,34 +26533,50 @@ exports.keyboardTab = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var handleTabOnList_1 = __webpack_require__(/*! ./tabUtils/handleTabOnList */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnList.ts");
 var handleTabOnParagraph_1 = __webpack_require__(/*! ./tabUtils/handleTabOnParagraph */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnParagraph.ts");
+var handleTabOnTable_1 = __webpack_require__(/*! ./tabUtils/handleTabOnTable */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts");
+var handleTabOnTableCell_1 = __webpack_require__(/*! ./tabUtils/handleTabOnTableCell */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
 function keyboardTab(editor, rawEvent) {
     var selection = editor.getDOMSelection();
-    if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-        editor.formatContentModel(function (model) {
-            return handleTab(model, rawEvent);
-        }, {
-            apiName: 'handleTabKey',
-        });
-        return true;
+    switch (selection === null || selection === void 0 ? void 0 : selection.type) {
+        case 'range':
+            editor.formatContentModel(function (model) {
+                return handleTab(model, rawEvent);
+            }, {
+                apiName: 'handleTabKey',
+            });
+            return true;
+        case 'table':
+            editor.formatContentModel(function (model) {
+                return (0, handleTabOnTable_1.handleTabOnTable)(model, rawEvent);
+            }, {
+                apiName: 'handleTabKey',
+            });
+            return true;
     }
 }
 exports.keyboardTab = keyboardTab;
 /**
  * If multiple blocks are selected, indent or outdent the selected blocks with setModelIndentation.
- * If only one block is selected, call handleTabOnParagraph or handleTabOnList to handle the tab key.
+ * If only one block is selected:
+ * - If it is a table cell, call handleTabOnTableCell to handle the tab key.
+ * - If it is a paragraph, call handleTabOnParagraph to handle the tab key.
+ * - If it is a list item, call handleTabOnList to handle the tab key.
  */
 function handleTab(model, rawEvent) {
-    var blocks = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem'], ['TableCell']);
+    var blocks = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem', 'TableCell'], []);
     var block = blocks.length > 0 ? blocks[0].block : undefined;
     if (blocks.length > 1) {
         (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
         rawEvent.preventDefault();
         return true;
     }
+    else if ((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(block, 'TableCell')) {
+        return (0, handleTabOnTableCell_1.handleTabOnTableCell)(model, block, rawEvent);
+    }
     else if ((block === null || block === void 0 ? void 0 : block.blockType) === 'Paragraph') {
         return (0, handleTabOnParagraph_1.handleTabOnParagraph)(model, block, rawEvent);
     }
@@ -26468,6 +26729,91 @@ function handleTabOnParagraph(model, paragraph, rawEvent) {
 exports.handleTabOnParagraph = handleTabOnParagraph;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.handleTabOnTable = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+/**
+ * When the whole table is selected, indent or outdent the whole table with setModelIndentation.
+ * @internal
+ */
+function handleTabOnTable(model, rawEvent) {
+    var tableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
+    if (tableModel && isWholeTableSelected(tableModel)) {
+        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
+        rawEvent.preventDefault();
+        return true;
+    }
+    return false;
+}
+exports.handleTabOnTable = handleTabOnTable;
+function isWholeTableSelected(tableModel) {
+    var _a, _b, _c, _d;
+    return (((_b = (_a = tableModel.rows[0]) === null || _a === void 0 ? void 0 : _a.cells[0]) === null || _b === void 0 ? void 0 : _b.isSelected) &&
+        ((_d = (_c = tableModel.rows[tableModel.rows.length - 1]) === null || _c === void 0 ? void 0 : _c.cells[tableModel.widths.length - 1]) === null || _d === void 0 ? void 0 : _d.isSelected));
+}
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts ***!
+  \********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.handleTabOnTableCell = void 0;
+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");
+/**
+ * When the cursor is on the last cell of a table, add new row and focus first new cell.
+ * @internal
+ */
+function handleTabOnTableCell(model, cell, rawEvent) {
+    var _a, _b, _c;
+    var tableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
+    // Check if cursor is on last cell of the table
+    if (!rawEvent.shiftKey &&
+        tableModel &&
+        ((_a = tableModel.rows[tableModel.rows.length - 1]) === null || _a === void 0 ? void 0 : _a.cells[tableModel.widths.length - 1]) === cell) {
+        (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow');
+        // Clear Table selection
+        (0, roosterjs_content_model_api_1.clearSelectedCells)(tableModel, {
+            firstRow: tableModel.rows.length - 1,
+            firstColumn: 0,
+            lastRow: tableModel.rows.length - 1,
+            lastColumn: tableModel.widths.length - 1,
+        });
+        (0, roosterjs_content_model_dom_1.normalizeTable)(tableModel, model.format);
+        // Add selection marker to the first cell of the new row
+        var markerParagraph = (_c = (_b = tableModel.rows[tableModel.rows.length - 1]) === null || _b === void 0 ? void 0 : _b.cells[0]) === null || _c === void 0 ? void 0 : _c.blocks[0];
+        if (markerParagraph.blockType == 'Paragraph') {
+            var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
+            markerParagraph.segments.unshift(marker);
+            (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
+            (0, roosterjs_content_model_dom_1.setSelection)(tableModel.rows[tableModel.rows.length - 1].cells[0], marker);
+        }
+        rawEvent.preventDefault();
+        return true;
+    }
+    return false;
+}
+exports.handleTabOnTableCell = handleTabOnTableCell;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/edit/utils/getLeafSiblingBlock.ts":
@@ -26554,6 +26900,157 @@ function getLeafSiblingBlock(path, block, isNext) {
 exports.getLeafSiblingBlock = getLeafSiblingBlock;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts":
+/*!***********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts ***!
+  \***********************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.HyperlinkPlugin = void 0;
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var defaultToolTipCallback = function (url) { return url; };
+/**
+ * Hyperlink plugin does the following jobs for a hyperlink in editor:
+ * 1. When hover on a link, show a tool tip
+ * 2. When Ctrl+Click on a link, open a new window with the link
+ * 3. When type directly on a link whose text matches its link url, update the link url with the link text
+ */
+var HyperlinkPlugin = /** @class */ (function () {
+    /**
+     * Create a new instance of HyperLink class
+     * @param tooltip Tooltip to show when mouse hover over a link
+     * Default value is to return the href itself. If null, there will be no tooltip text.
+     * @param target (Optional) Target window name for hyperlink. If null, will use "_blank"
+     * @param onLinkClick (Optional) Open link callback (return false to use default behavior)
+     */
+    function HyperlinkPlugin(tooltip, target, onLinkClick) {
+        var _this = this;
+        if (tooltip === void 0) { tooltip = defaultToolTipCallback; }
+        this.tooltip = tooltip;
+        this.target = target;
+        this.onLinkClick = onLinkClick;
+        this.editor = null;
+        this.domHelper = null;
+        this.isMac = false;
+        this.disposer = null;
+        this.currentNode = null;
+        this.currentLink = null;
+        this.onMouse = function (e) {
+            _this.runWithHyperlink(e.target, function (href, a) {
+                var _a;
+                var tooltip = e.type == 'mouseover'
+                    ? typeof _this.tooltip == 'function'
+                        ? _this.tooltip(href, a)
+                        : _this.tooltip
+                    : null;
+                (_a = _this.domHelper) === null || _a === void 0 ? void 0 : _a.setDomAttribute('title', tooltip);
+            });
+        };
+    }
+    /**
+     * Get a friendly name of this plugin
+     */
+    HyperlinkPlugin.prototype.getName = function () {
+        return 'Hyperlink';
+    };
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    HyperlinkPlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+        this.domHelper = editor.getDOMHelper();
+        this.isMac = !!editor.getEnvironment().isMac;
+        this.disposer = editor.attachDomEvent({
+            mouseover: { beforeDispatch: this.onMouse },
+            mouseout: { beforeDispatch: this.onMouse },
+        });
+    };
+    /**
+     * Dispose this plugin
+     */
+    HyperlinkPlugin.prototype.dispose = function () {
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+        this.currentNode = null;
+        this.currentLink = null;
+        this.editor = null;
+    };
+    /**
+     * Handle events triggered from editor
+     * @param event PluginEvent object
+     */
+    HyperlinkPlugin.prototype.onPluginEvent = function (event) {
+        var _this = this;
+        var _a, _b;
+        var matchedLink;
+        if (event.eventType == 'keyDown') {
+            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+            var node_1 = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' ? selection.range.commonAncestorContainer : null;
+            if (node_1 && node_1 != this.currentNode) {
+                this.currentNode = node_1;
+                this.currentLink = null;
+                this.runWithHyperlink(node_1, function (href, a) {
+                    if (node_1.textContent &&
+                        (matchedLink = (0, roosterjs_content_model_api_1.matchLink)(node_1.textContent)) &&
+                        matchedLink.normalizedUrl == href) {
+                        _this.currentLink = a;
+                    }
+                });
+            }
+        }
+        else if (event.eventType == 'keyUp') {
+            var selection = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.getDOMSelection();
+            var node = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' ? selection.range.commonAncestorContainer : null;
+            if (node &&
+                node == this.currentNode &&
+                this.currentLink &&
+                this.currentLink.contains(node) &&
+                node.textContent &&
+                (matchedLink = (0, roosterjs_content_model_api_1.matchLink)(node.textContent))) {
+                this.currentLink.setAttribute('href', matchedLink.normalizedUrl);
+            }
+        }
+        else if (event.eventType == 'mouseUp' && event.isClicking) {
+            this.runWithHyperlink(event.rawEvent.target, function (href, anchor) {
+                var _a, _b;
+                if (!((_a = _this.onLinkClick) === null || _a === void 0 ? void 0 : _a.call(_this, anchor, event.rawEvent)) &&
+                    _this.isCtrlOrMetaPressed(event.rawEvent) &&
+                    event.rawEvent.button === 0) {
+                    event.rawEvent.preventDefault();
+                    var target = _this.target || '_blank';
+                    var window_1 = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getDocument().defaultView;
+                    try {
+                        window_1 === null || window_1 === void 0 ? void 0 : window_1.open(href, target);
+                    }
+                    catch (_c) { }
+                }
+            });
+        }
+    };
+    HyperlinkPlugin.prototype.runWithHyperlink = function (node, callback) {
+        var _a;
+        var a = (_a = this.domHelper) === null || _a === void 0 ? void 0 : _a.findClosestElementAncestor(node, 'a[href]');
+        var href = a === null || a === void 0 ? void 0 : a.getAttribute('href');
+        if (href && a) {
+            callback(href, a);
+        }
+    };
+    HyperlinkPlugin.prototype.isCtrlOrMetaPressed = function (event) {
+        return this.isMac ? event.metaKey : event.ctrlKey;
+    };
+    return HyperlinkPlugin;
+}());
+exports.HyperlinkPlugin = HyperlinkPlugin;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/index.ts":
@@ -26565,7 +27062,7 @@ exports.getLeafSiblingBlock = getLeafSiblingBlock;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
+exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
 var TableEditPlugin_1 = __webpack_require__(/*! ./tableEdit/TableEditPlugin */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts");
 Object.defineProperty(exports, "TableEditPlugin", ({ enumerable: true, get: function () { return TableEditPlugin_1.TableEditPlugin; } }));
 var PastePlugin_1 = __webpack_require__(/*! ./paste/PastePlugin */ "./packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts");
@@ -26597,6 +27094,8 @@ var WatermarkPlugin_1 = __webpack_require__(/*! ./watermark/WatermarkPlugin */ "
 Object.defineProperty(exports, "WatermarkPlugin", ({ enumerable: true, get: function () { return WatermarkPlugin_1.WatermarkPlugin; } }));
 var MarkdownPlugin_1 = __webpack_require__(/*! ./markdown/MarkdownPlugin */ "./packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts");
 Object.defineProperty(exports, "MarkdownPlugin", ({ enumerable: true, get: function () { return MarkdownPlugin_1.MarkdownPlugin; } }));
+var HyperlinkPlugin_1 = __webpack_require__(/*! ./hyperlink/HyperlinkPlugin */ "./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts");
+Object.defineProperty(exports, "HyperlinkPlugin", ({ enumerable: true, get: function () { return HyperlinkPlugin_1.HyperlinkPlugin; } }));
 
 
 /***/ }),
@@ -26626,9 +27125,10 @@ var DefaultOptions = {
 var MarkdownPlugin = /** @class */ (function () {
     /**
      * @param options An optional parameter that takes in an object of type MarkdownOptions, which includes the following properties:
-     *  - strikethrough: If true text between ~ will receive strikethrough format. Defaults to true.
-     *  - bold: If true text between * will receive bold format. Defaults to true.
-     *  - italic: If true text between _ will receive italic format. Defaults to true.
+     *  - strikethrough: If true text between ~ will receive strikethrough format. Defaults to false.
+     *  - bold: If true text between * will receive bold format. Defaults to false.
+     *  - italic: If true text between _ will receive italic format. Defaults to false.
+     *  - codeFormat: If provided, text between ` will receive code format. Defaults to undefined.
      */
     function MarkdownPlugin(options) {
         if (options === void 0) { options = DefaultOptions; }
@@ -26637,6 +27137,7 @@ var MarkdownPlugin = /** @class */ (function () {
         this.shouldBold = false;
         this.shouldItalic = false;
         this.shouldStrikethrough = false;
+        this.shouldCode = false;
         this.lastKeyTyped = null;
     }
     /**
@@ -26661,9 +27162,7 @@ var MarkdownPlugin = /** @class */ (function () {
      */
     MarkdownPlugin.prototype.dispose = function () {
         this.editor = null;
-        this.shouldBold = false;
-        this.shouldItalic = false;
-        this.shouldStrikethrough = false;
+        this.disableAllFeatures();
         this.lastKeyTyped = null;
     };
     /**
@@ -26729,6 +27228,17 @@ var MarkdownPlugin = /** @class */ (function () {
                         }
                     }
                     break;
+                case '`':
+                    if (this.options.codeFormat) {
+                        if (this.shouldCode) {
+                            (0, setFormat_1.setFormat)(editor, '`', {} /* format */, this.options.codeFormat);
+                            this.shouldCode = false;
+                        }
+                        else {
+                            this.shouldCode = true;
+                        }
+                    }
+                    break;
             }
         }
     };
@@ -26737,9 +27247,7 @@ var MarkdownPlugin = /** @class */ (function () {
         if (!event.handledByEditFeature && !rawEvent.defaultPrevented) {
             switch (rawEvent.key) {
                 case 'Enter':
-                    this.shouldBold = false;
-                    this.shouldItalic = false;
-                    this.shouldStrikethrough = false;
+                    this.disableAllFeatures();
                     this.lastKeyTyped = null;
                     break;
                 case ' ':
@@ -26752,6 +27260,9 @@ var MarkdownPlugin = /** @class */ (function () {
                     else if (this.lastKeyTyped === '_' && this.shouldItalic) {
                         this.shouldItalic = false;
                     }
+                    else if (this.lastKeyTyped === '`' && this.shouldCode) {
+                        this.shouldCode = false;
+                    }
                     this.lastKeyTyped = null;
                     break;
                 default:
@@ -26771,16 +27282,23 @@ var MarkdownPlugin = /** @class */ (function () {
             else if (this.lastKeyTyped === '_' && this.shouldItalic) {
                 this.shouldItalic = false;
             }
+            else if (this.lastKeyTyped === '`' && this.shouldCode) {
+                this.shouldCode = false;
+            }
             this.lastKeyTyped = null;
         }
     };
     MarkdownPlugin.prototype.handleContentChangedEvent = function (event) {
         if (event.source == 'Format') {
-            this.shouldBold = false;
-            this.shouldItalic = false;
-            this.shouldStrikethrough = false;
+            this.disableAllFeatures();
         }
     };
+    MarkdownPlugin.prototype.disableAllFeatures = function () {
+        this.shouldBold = false;
+        this.shouldItalic = false;
+        this.shouldStrikethrough = false;
+        this.shouldCode = false;
+    };
     return MarkdownPlugin;
 }());
 exports.MarkdownPlugin = MarkdownPlugin;
@@ -26799,41 +27317,31 @@ exports.MarkdownPlugin = MarkdownPlugin;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setFormat = 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 roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function setFormat(editor, character, format) {
-    editor.formatContentModel(function (model, context) {
-        var _a;
-        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /*includeFormatHolder*/);
-        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
-            var marker = selectedSegmentsAndParagraphs[0][0];
-            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, marker.format), { strikethrough: !!marker.format.strikethrough, italic: !!marker.format.italic, fontWeight: ((_a = marker.format) === null || _a === void 0 ? void 0 : _a.fontWeight) ? 'bold' : undefined });
-            var paragraph = selectedSegmentsAndParagraphs[0][1];
-            if (marker.segmentType == 'SelectionMarker') {
-                var markerIndex = paragraph.segments.indexOf(marker);
-                if (markerIndex > 0 && paragraph.segments[markerIndex - 1]) {
-                    var segmentBeforeMarker = paragraph.segments[markerIndex - 1];
-                    if (segmentBeforeMarker.segmentType == 'Text' &&
-                        segmentBeforeMarker.text[segmentBeforeMarker.text.length - 1] == character) {
-                        var textBeforeMarker = segmentBeforeMarker.text.slice(0, -1);
-                        if (textBeforeMarker.indexOf(character) > -1) {
-                            var lastCharIndex = segmentBeforeMarker.text.length;
-                            var firstCharIndex = segmentBeforeMarker.text
-                                .substring(0, lastCharIndex - 1)
-                                .lastIndexOf(character);
-                            var formattedText = (0, splitTextSegment_1.splitTextSegment)(segmentBeforeMarker, paragraph, firstCharIndex, lastCharIndex);
-                            formattedText.text = formattedText.text
-                                .replace(character, '')
-                                .slice(0, -1);
-                            formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
-                            context.canUndoByBackspace = true;
-                            return true;
-                        }
-                    }
+function setFormat(editor, character, format, codeFormat) {
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, previousSegment, paragraph, markerFormat, context) {
+        if (previousSegment.text[previousSegment.text.length - 1] == character) {
+            var textBeforeMarker = previousSegment.text.slice(0, -1);
+            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, markerFormat), { strikethrough: !!markerFormat.strikethrough, italic: !!markerFormat.italic, fontWeight: (markerFormat === null || markerFormat === void 0 ? void 0 : markerFormat.fontWeight) ? 'bold' : undefined });
+            if (textBeforeMarker.indexOf(character) > -1) {
+                var lastCharIndex = previousSegment.text.length;
+                var firstCharIndex = previousSegment.text
+                    .substring(0, lastCharIndex - 1)
+                    .lastIndexOf(character);
+                var formattedText = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, firstCharIndex, lastCharIndex);
+                formattedText.text = formattedText.text.replace(character, '').slice(0, -1);
+                formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
+                if (codeFormat) {
+                    formattedText.code = {
+                        format: codeFormat,
+                    };
                 }
+                context.canUndoByBackspace = true;
+                return true;
             }
         }
         return false;
@@ -28697,7 +29205,7 @@ exports.ShortcutUnderline = {
 /**
  * Shortcut command for Clear Format
  * Windows: Ctrl + Space
- * MacOS: Meta + Space
+ * MacOS: N/A
  */
 exports.ShortcutClearFormat = {
     shortcutKey: {
@@ -28706,6 +29214,7 @@ exports.ShortcutClearFormat = {
         which: 32 /* SPACE */,
     },
     onClick: function (editor) { return (0, roosterjs_content_model_api_1.clearFormat)(editor); },
+    environment: 'nonMac',
 };
 /**
  * Shortcut command for Undo 1
@@ -28817,7 +29326,7 @@ exports.ShortcutDecreaseFont = {
 /**
  * Shortcut command for Intent list
  * Windows: Alt + Shift + Arrow Right
- * MacOS: Option + Shift+ Arrow Right
+ * MacOS: N/A
  */
 exports.ShortcutIndentList = {
     shortcutKey: {
@@ -28828,11 +29337,12 @@ exports.ShortcutIndentList = {
     onClick: function (editor) {
         (0, setShortcutIndentationCommand_1.setShortcutIndentationCommand)(editor, 'indent');
     },
+    environment: 'nonMac',
 };
 /**
  * Shortcut command for Outdent list
  * Windows: Alt + Shift + Arrow Left
- * MacOS: Option + Shift+ Arrow Left
+ * MacOS: N/A
  */
 exports.ShortcutOutdentList = {
     shortcutKey: {
@@ -28843,6 +29353,7 @@ exports.ShortcutOutdentList = {
     onClick: function (editor) {
         (0, setShortcutIndentationCommand_1.setShortcutIndentationCommand)(editor, 'outdent');
     },
+    environment: 'nonMac',
 };