roosterjs-content-model-core - npm Package Compare versions

Comparing version 9.1.0 to 9.2.0

lib-amd/coreApi/coreApiMap.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./addUndoSnapshot/addUndoSnapshot", "./attachDomEvent/attachDomEvent", "./createContentModel/createContentModel", "./createEditorContext/createEditorContext", "./focus/focus", "./formatContentModel/formatContentModel", "./getDOMSelection/getDOMSelection", "./getVisibleViewport/getVisibleViewport", "./restoreUndoSnapshot/restoreUndoSnapshot", "./setContentModel/setContentModel", "./setDOMSelection/setDOMSelection", "./setEditorStyle/setEditorStyle", "./setLogicalRoot/setLogicalRoot", "./switchShadowEdit/switchShadowEdit", "./triggerEvent/triggerEvent"], function (require, exports, addUndoSnapshot_1, attachDomEvent_1, createContentModel_1, createEditorContext_1, focus_1, formatContentModel_1, getDOMSelection_1, getVisibleViewport_1, restoreUndoSnapshot_1, setContentModel_1, setDOMSelection_1, setEditorStyle_1, setLogicalRoot_1, switchShadowEdit_1, triggerEvent_1) {
+define(["require", "exports", "./addUndoSnapshot/addUndoSnapshot", "./announce/announce", "./attachDomEvent/attachDomEvent", "./createContentModel/createContentModel", "./createEditorContext/createEditorContext", "./focus/focus", "./formatContentModel/formatContentModel", "./getDOMSelection/getDOMSelection", "./getVisibleViewport/getVisibleViewport", "./restoreUndoSnapshot/restoreUndoSnapshot", "./setContentModel/setContentModel", "./setDOMSelection/setDOMSelection", "./setEditorStyle/setEditorStyle", "./setLogicalRoot/setLogicalRoot", "./switchShadowEdit/switchShadowEdit", "./triggerEvent/triggerEvent"], function (require, exports, addUndoSnapshot_1, announce_1, attachDomEvent_1, createContentModel_1, createEditorContext_1, focus_1, formatContentModel_1, getDOMSelection_1, getVisibleViewport_1, restoreUndoSnapshot_1, setContentModel_1, setDOMSelection_1, setEditorStyle_1, setLogicalRoot_1, switchShadowEdit_1, triggerEvent_1) {
     "use strict";
@@ -25,4 +25,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         setEditorStyle: setEditorStyle_1.setEditorStyle,
+        announce: announce_1.announce,
     };
 });
 //# sourceMappingURL=coreApiMap.js.map

lib-amd/coreApi/createEditorContext/createEditorContext.js

@@ -14,14 +14,9 @@ define(["require", "exports", "tslib", "./getRootComputedStyleForContext"], function (require, exports, tslib_1, getRootComputedStyleForContext_1) {
         var context = (0, tslib_1.__assign)({ isDarkMode: lifecycle.isDarkMode, defaultFormat: format.defaultFormat, pendingFormat: (_a = format.pendingFormat) !== null && _a !== void 0 ? _a : undefined, darkColorHandler: darkColorHandler, addDelimiterForEntity: true, allowCacheElement: true, domIndexer: saveIndex ? cache.domIndexer : undefined, zoomScale: domHelper.calculateZoomScale() }, (0, getRootComputedStyleForContext_1.getRootComputedStyleForContext)(logicalRoot.ownerDocument));
-        checkRootRtl(logicalRoot, context);
+        if (core.domHelper.isRightToLeft()) {
+            context.isRootRtl = true;
+        }
         return context;
     };
     exports.createEditorContext = createEditorContext;
-    function checkRootRtl(element, context) {
-        var _a;
-        var style = (_a = element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(element);
-        if ((style === null || style === void 0 ? void 0 : style.direction) == 'rtl') {
-            context.isRootRtl = true;
-        }
-    }
 });
 //# sourceMappingURL=createEditorContext.js.map

lib-amd/coreApi/formatContentModel/formatContentModel.js

@@ -78,2 +78,5 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_dom_1) {
         }
+        if (context.announceData) {
+            core.api.announce(core, context.announceData);
+        }
     };
@@ -83,11 +86,8 @@ exports.formatContentModel = formatContentModel;
         if (context.newImages.length > 0) {
-            var viewport = core.api.getVisibleViewport(core);
-            if (viewport) {
-                var left = viewport.left, right = viewport.right;
-                var minMaxImageSize = 10;
-                var maxWidth_1 = Math.max(right - left, minMaxImageSize);
-                context.newImages.forEach(function (image) {
-                    image.format.maxWidth = maxWidth_1 + "px";
-                });
-            }
+            var width = core.domHelper.getClientWidth();
+            var minMaxImageSize = 10;
+            var maxWidth_1 = Math.max(width, minMaxImageSize);
+            context.newImages.forEach(function (image) {
+                image.format.maxWidth = maxWidth_1 + "px";
+            });
         }
@@ -94,0 +94,0 @@ }

lib-amd/coreApi/restoreUndoSnapshot/restoreSnapshotHTML.js

@@ -5,3 +5,2 @@ define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
     exports.restoreSnapshotHTML = void 0;
-    var BlockEntityContainer = '_E_EBlockEntityContainer';
     /**
@@ -58,3 +57,3 @@ * @internal
             }
-            else if (isBlockEntityContainer(node)) {
+            else if ((0, roosterjs_content_model_dom_1.isBlockEntityContainer)(node)) {
                 result = tryGetEntityFromContainer(node, entityMap);
@@ -65,5 +64,2 @@ }
     }
-    function isBlockEntityContainer(node) {
-        return node.classList.contains(BlockEntityContainer);
-    }
     function tryGetEntityFromContainer(element, entityMap) {
@@ -75,3 +71,3 @@ var _a;
                 var parent_1 = (_a = getEntityWrapperForReuse(entityMap, format.id)) === null || _a === void 0 ? void 0 : _a.parentElement;
-                return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && isBlockEntityContainer(parent_1)
+                return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isBlockEntityContainer)(parent_1)
                     ? parent_1
@@ -78,0 +74,0 @@ : null;

lib-amd/corePlugin/cache/domIndexerImpl.js

@@ -72,2 +72,3 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_dom_1) {
                     var startContainer = newRange.startContainer, startOffset = newRange.startOffset, endContainer = newRange.endContainer, endOffset = newRange.endOffset, collapsed = newRange.collapsed;
+                    delete model.hasRevertedRangeSelection;
                     if (collapsed) {
@@ -78,2 +79,5 @@ return !!reconcileNodeSelection(startContainer, startOffset);
                         (0, roosterjs_content_model_dom_1.isNodeOfType)(startContainer, 'TEXT_NODE')) {
+                        if (newSelection.isReverted) {
+                            model.hasRevertedRangeSelection = true;
+                        }
                         return (isIndexedSegment(startContainer) &&
@@ -86,2 +90,5 @@ !!reconcileTextSelection(startContainer, startOffset, endOffset));
                         if (marker1 && marker2) {
+                            if (newSelection.isReverted) {
+                                model.hasRevertedRangeSelection = true;
+                            }
                             (0, roosterjs_content_model_dom_1.setSelection)(model, marker1, marker2);
@@ -88,0 +95,0 @@ return true;

lib-amd/corePlugin/copyPaste/CopyPastePlugin.js

@@ -127,4 +127,4 @@ define(["require", "exports", "tslib", "../../coreApi/setDOMSelection/addRangeToSelection", "./deleteEmptyList", "../../override/pasteCopyBlockEntityParser", "../../command/paste/paste", "roosterjs-content-model-dom"], function (require, exports, tslib_1, addRangeToSelection_1, deleteEmptyList_1, pasteCopyBlockEntityParser_1, paste_1, roosterjs_content_model_dom_1) {
                         cleanUpAndRestoreSelection(tempDiv_1);
+                        _this.editor.setDOMSelection(selection);
                         _this.editor.focus();
-                        _this.editor.setDOMSelection(selection);
                         if (isCut) {
@@ -131,0 +131,0 @@ _this.editor.formatContentModel(function (model, context) {

lib-amd/corePlugin/entity/entityDelimiterUtils.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "../selection/normalizePos", "roosterjs-content-model-dom"], function (require, exports, tslib_1, normalizePos_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "./adjustSelectionAroundEntity", "../selection/normalizePos", "roosterjs-content-model-dom"], function (require, exports, tslib_1, adjustSelectionAroundEntity_1, normalizePos_1, roosterjs_content_model_dom_1) {
     "use strict";
@@ -11,4 +11,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
     var InlineEntitySelector = 'span.' + EntityInfoName;
-    var BlockEntityContainer = '_E_EBlockEntityContainer';
-    var BlockEntityContainerSelector = '.' + BlockEntityContainer;
     /**
@@ -155,57 +153,82 @@ * @internal exported only for unit test
         var selection = editor.getDOMSelection();
-        var rawEvent = event.rawEvent;
         if (!selection || selection.type != 'range') {
             return;
         }
-        var isEnter = rawEvent.key === 'Enter';
-        var helper = editor.getDOMHelper();
-        if (selection.range.collapsed && ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) || isEnter)) {
-            var helper_1 = editor.getDOMHelper();
-            var node_1 = getFocusedElement(selection);
-            if (node_1 && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(node_1) && helper_1.isNodeInEditor(node_1)) {
-                var blockEntityContainer = node_1.closest(BlockEntityContainerSelector);
-                if (blockEntityContainer && helper_1.isNodeInEditor(blockEntityContainer)) {
-                    var isAfter = node_1.classList.contains(DelimiterAfter);
-                    if (isAfter) {
-                        selection.range.setStartAfter(blockEntityContainer);
+        var rawEvent = event.rawEvent;
+        var range = selection.range;
+        var key = rawEvent.key;
+        switch (key) {
+            case 'Enter':
+                if (range.collapsed) {
+                    handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+                }
+                else {
+                    var helper = editor.getDOMHelper();
+                    var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(range.startContainer, helper);
+                    if (entity &&
+                        (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') &&
+                        helper.isNodeInEditor(entity)) {
+                        triggerEntityEventOnEnter(editor, entity, rawEvent);
                     }
-                    else {
-                        selection.range.setStartBefore(blockEntityContainer);
-                    }
-                    selection.range.collapse(true /* toStart */);
-                    if (isEnter) {
-                        event.rawEvent.preventDefault();
-                    }
-                    editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
-                        selectionOverride: {
-                            type: 'range',
-                            isReverted: false,
-                            range: selection.range,
-                        },
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                if (!rawEvent.altKey && !rawEvent.ctrlKey && !rawEvent.metaKey) {
+                    // Handle in async so focus is already moved, this makes us easier to check if we should adjust the selection
+                    (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                        (0, adjustSelectionAroundEntity_1.adjustSelectionAroundEntity)(editor, key, rawEvent.shiftKey);
                     });
                 }
+                break;
+            default:
+                if ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) && range.collapsed) {
+                    handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+                }
+                break;
+        }
+    }
+    exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
+    function handleInputOnDelimiter(editor, range, focusedNode, rawEvent) {
+        var _a;
+        var helper = editor.getDOMHelper();
+        if (focusedNode && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(focusedNode) && helper.isNodeInEditor(focusedNode)) {
+            var blockEntityContainer = (0, roosterjs_content_model_dom_1.findClosestBlockEntityContainer)(focusedNode, helper);
+            var isEnter = rawEvent.key === 'Enter';
+            if (blockEntityContainer && helper.isNodeInEditor(blockEntityContainer)) {
+                var isAfter = focusedNode.classList.contains(DelimiterAfter);
+                if (isAfter) {
+                    range.setStartAfter(blockEntityContainer);
+                }
                 else {
-                    if (isEnter) {
-                        event.rawEvent.preventDefault();
-                        editor.formatContentModel(exports.handleEnterInlineEntity);
-                    }
-                    else {
-                        editor.takeSnapshot();
-                        (_a = editor
-                            .getDocument()
-                            .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
-                            return preventTypeInDelimiter(node_1, editor);
-                        });
-                    }
+                    range.setStartBefore(blockEntityContainer);
                 }
+                range.collapse(true /* toStart */);
+                if (isEnter) {
+                    rawEvent.preventDefault();
+                }
+                editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
+                    selectionOverride: {
+                        type: 'range',
+                        isReverted: false,
+                        range: range,
+                    },
+                });
             }
-        }
-        else if (isEnter) {
-            var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(selection.range.startContainer, helper);
-            if (entity && (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') && helper.isNodeInEditor(entity)) {
-                triggerEntityEventOnEnter(editor, entity, rawEvent);
+            else {
+                if (isEnter) {
+                    rawEvent.preventDefault();
+                    editor.formatContentModel(exports.handleEnterInlineEntity);
+                }
+                else {
+                    editor.takeSnapshot();
+                    (_a = editor
+                        .getDocument()
+                        .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                        return preventTypeInDelimiter(focusedNode, editor);
+                    });
+                }
             }
         }
     }
-    exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
     /**
@@ -212,0 +235,0 @@ * @internal Exported Only for unit test

lib-amd/corePlugin/lifecycle/LifecyclePlugin.js

@@ -42,2 +42,3 @@ define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
                 styleElements: {},
+                announcerStringGetter: options.announcerStringGetter,
             };
@@ -70,3 +71,3 @@ }
             var _this = this;
-            var _a;
+            var _a, _b;
             (_a = this.editor) === null || _a === void 0 ? void 0 : _a.triggerEvent('beforeDispose', {}, true /*broadcast*/);
@@ -79,2 +80,7 @@ (0, roosterjs_content_model_dom_1.getObjectKeys)(this.state.styleElements).forEach(function (key) {
             });
+            var announceContainer = this.state.announceContainer;
+            if (announceContainer) {
+                (_b = announceContainer.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(announceContainer);
+                delete this.state.announceContainer;
+            }
             if (this.disposer) {
@@ -81,0 +87,0 @@ this.disposer();

lib-amd/corePlugin/selection/SelectionPlugin.js

@@ -325,3 +325,3 @@ define(["require", "exports", "./findCoordinate", "../../coreApi/setDOMSelection/findTableCellElement", "./isSingleImageInSelection", "./normalizePos", "roosterjs-content-model-dom"], function (require, exports, findCoordinate_1, findTableCellElement_1, isSingleImageInSelection_1, normalizePos_1, roosterjs_content_model_dom_1) {
         SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             if (!this.editor || !this.state.tableSelection) {
@@ -333,3 +333,3 @@ return;
             if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-                var _e = selection.range, collapsed = _e.collapsed, startContainer = _e.startContainer, endContainer = _e.endContainer, commonAncestorContainer = _e.commonAncestorContainer, isReverted = selection.isReverted;
+                var _g = selection.range, collapsed = _g.collapsed, startContainer = _g.startContainer, endContainer = _g.endContainer, commonAncestorContainer = _g.commonAncestorContainer, isReverted = selection.isReverted;
                 var start = isReverted ? endContainer : startContainer;
@@ -342,3 +342,3 @@ var end = isReverted ? startContainer : endContainer;
                 var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-                var _f = this.state.tableSelection, parsedTable = _f.parsedTable, oldCo = _f.firstCo, table = _f.table;
+                var _h = this.state.tableSelection, parsedTable = _h.parsedTable, oldCo = _h.firstCo, table = _h.table;
                 if (lastCo && tableSel.table == table) {
@@ -381,2 +381,4 @@ if (lastCo.col != oldCo.col && (key == Up || key == Down)) {
                                 this.setRangeSelectionInTable(cell, 0, this.editor);
+                                lastCo.row = row;
+                                lastCo.col = col;
                                 break;
@@ -389,2 +391,9 @@ }
                     }
+                    if (collapsed &&
+                        (lastCo.col != oldCo.col || lastCo.row != oldCo.row) &&
+                        lastCo.row >= 0 &&
+                        lastCo.row == parsedTable.length - 1 &&
+                        lastCo.col == ((_e = parsedTable[lastCo.row]) === null || _e === void 0 ? void 0 : _e.length) - 1) {
+                        (_f = this.editor) === null || _f === void 0 ? void 0 : _f.announce({ defaultStrings: 'announceOnFocusLastCell' });
+                    }
                 }
@@ -391,0 +400,0 @@ if (!collapsed && lastCo) {

lib-amd/editor/core/DOMHelperImpl.js

@@ -57,2 +57,22 @@ define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
         };
+        /**
+         * Check if the root element is in RTL mode
+         */
+        DOMHelperImpl.prototype.isRightToLeft = function () {
+            var _a;
+            var contentDiv = this.contentDiv;
+            var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+            return (style === null || style === void 0 ? void 0 : style.direction) == 'rtl';
+        };
+        /**
+         * Get the width of the editable area of the editor content div
+         */
+        DOMHelperImpl.prototype.getClientWidth = function () {
+            var _a;
+            var contentDiv = this.contentDiv;
+            var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+            var paddingLeft = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingLeft);
+            var paddingRight = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingRight);
+            return this.contentDiv.clientWidth - (paddingLeft + paddingRight);
+        };
         return DOMHelperImpl;
@@ -59,0 +79,0 @@ }());

lib-amd/editor/Editor.d.ts

@@ -1,2 +0,2 @@
-import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel } from 'roosterjs-content-model-types';
+import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel, AnnounceData } from 'roosterjs-content-model-types';
 /**
@@ -168,2 +168,7 @@ * The main editor class based on Content Model
     /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    announce(announceData: AnnounceData): void;
+    /**
      * @returns the current EditorCore object
@@ -170,0 +175,0 @@ * @throws a standard Error if there's no core object

lib-amd/editor/Editor.js

@@ -309,2 +309,10 @@ define(["require", "exports", "tslib", "./core/createEditorCore", "roosterjs-content-model-dom"], function (require, exports, tslib_1, createEditorCore_1, roosterjs_content_model_dom_1) {
         /**
+         * Announce the given data
+         * @param announceData Data to announce
+         */
+        Editor.prototype.announce = function (announceData) {
+            var core = this.getCore();
+            core.api.announce(core, announceData);
+        };
+        /**
          * @returns the current EditorCore object
@@ -311,0 +319,0 @@ * @throws a standard Error if there's no core object

lib-amd/override/listMetadataApplier.js

@@ -1,92 +0,22 @@
-define(["require", "exports", "tslib", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.listLevelMetadataApplier = exports.listItemMetadataApplier = void 0;
-    var DefaultOrderedListStyles = ['decimal', 'lower-alpha', 'lower-roman'];
-    var DefaultUnorderedListStyles = ['disc', 'circle', 'square'];
     var OrderedMapPlaceholderRegex = /\$\{(\w+)\}/;
-    var CharCodeOfA = 65;
-    var RomanValues = {
-        M: 1000,
-        CM: 900,
-        D: 500,
-        CD: 400,
-        C: 100,
-        XC: 90,
-        L: 50,
-        XL: 40,
-        X: 10,
-        IX: 9,
-        V: 5,
-        IV: 4,
-        I: 1,
-    };
-    function getOrderedListStyleValue(template, listNumber) {
-        return template
-            ? template.replace(OrderedMapPlaceholderRegex, function (_, subStr) {
-                switch (subStr) {
-                    case 'Number':
-                        return listNumber + '';
-                    case 'LowerAlpha':
-                        return convertDecimalsToAlpha(listNumber, true /*isLowerCase*/);
-                    case 'UpperAlpha':
-                        return convertDecimalsToAlpha(listNumber, false /*isLowerCase*/);
-                    case 'LowerRoman':
-                        return convertDecimalsToRoman(listNumber, true /*isLowerCase*/);
-                    case 'UpperRoman':
-                        return convertDecimalsToRoman(listNumber, false /*isLowerCase*/);
-                }
-                return '';
-            })
-            : undefined;
-    }
-    function convertDecimalsToAlpha(decimal, isLowerCase) {
-        var alpha = '';
-        decimal--;
-        while (decimal >= 0) {
-            alpha = String.fromCharCode((decimal % 26) + CharCodeOfA) + alpha;
-            decimal = Math.floor(decimal / 26) - 1;
-        }
-        return isLowerCase ? alpha.toLowerCase() : alpha;
-    }
-    function convertDecimalsToRoman(decimal, isLowerCase) {
-        var e_1, _a;
-        var romanValue = '';
-        try {
-            for (var _b = (0, tslib_1.__values)((0, roosterjs_content_model_dom_1.getObjectKeys)(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var i = _c.value;
-                var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
-                decimal = decimal - timesRomanCharAppear * RomanValues[i];
-                romanValue = romanValue + i.repeat(timesRomanCharAppear);
-            }
-        }
-        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; }
-        }
-        return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
-    }
-    function shouldApplyToItem(listStyleType) {
-        return listStyleType.indexOf('"') >= 0;
-    }
-    function getRawListStyleType(listType, metadata, depth) {
-        var orderedStyleType = metadata.orderedStyleType, unorderedStyleType = metadata.unorderedStyleType, applyListStyleFromLevel = metadata.applyListStyleFromLevel;
+    function getListStyleValue(listType, listStyleType, listNumber) {
         if (listType == 'OL') {
-            return typeof orderedStyleType == 'number'
-                ? roosterjs_content_model_dom_1.OrderedListStyleMap[orderedStyleType]
-                : applyListStyleFromLevel
-                    ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
-                    : undefined;
+            var numberStr = (0, roosterjs_content_model_dom_1.getOrderedListNumberStr)(listStyleType, listNumber !== null && listNumber !== void 0 ? listNumber : 1);
+            var template = roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType];
+            return template ? template.replace(OrderedMapPlaceholderRegex, numberStr) : undefined;
         }
         else {
-            return typeof unorderedStyleType == 'number'
-                ? roosterjs_content_model_dom_1.UnorderedListStyleMap[unorderedStyleType]
-                : applyListStyleFromLevel
-                    ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
-                    : undefined;
+            return roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
         }
     }
+    function shouldApplyToItem(listStyleType, listType) {
+        var style = listType == 'OL'
+            ? roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType]
+            : roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
+        return (style === null || style === void 0 ? void 0 : style.indexOf('"')) >= 0;
+    }
     /**
@@ -102,9 +32,6 @@ * @internal
                 var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-                var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-                if (listStyleType) {
-                    if (shouldApplyToItem(listStyleType)) {
-                        format.listStyleType =
-                            listType == 'OL'
-                                ? getOrderedListStyleValue(listStyleType, context.listFormat.threadItemCounts[depth])
-                                : listStyleType;
+                var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+                if (listStyleType !== undefined) {
+                    if (shouldApplyToItem(listStyleType, listType)) {
+                        format.listStyleType = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
                     }
@@ -128,6 +55,9 @@ else {
                 var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-                var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-                if (listStyleType) {
-                    if (!shouldApplyToItem(listStyleType)) {
-                        format.listStyleType = listStyleType;
+                var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+                if (listStyleType !== undefined) {
+                    if (!shouldApplyToItem(listStyleType, listType)) {
+                        var listStyleTypeFormat = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
+                        if (listStyleTypeFormat) {
+                            format.listStyleType = listStyleTypeFormat;
+                        }
                     }
@@ -134,0 +64,0 @@ else {

lib-mjs/coreApi/coreApiMap.js

 import { addUndoSnapshot } from './addUndoSnapshot/addUndoSnapshot';
+import { announce } from './announce/announce';
 import { attachDomEvent } from './attachDomEvent/attachDomEvent';
@@ -36,3 +37,4 @@ import { createContentModel } from './createContentModel/createContentModel';
     setEditorStyle: setEditorStyle,
+    announce: announce,
 };
 //# sourceMappingURL=coreApiMap.js.map

lib-mjs/coreApi/createEditorContext/createEditorContext.js

@@ -12,12 +12,7 @@ import { __assign } from "tslib";
     var context = __assign({ isDarkMode: lifecycle.isDarkMode, defaultFormat: format.defaultFormat, pendingFormat: (_a = format.pendingFormat) !== null && _a !== void 0 ? _a : undefined, darkColorHandler: darkColorHandler, addDelimiterForEntity: true, allowCacheElement: true, domIndexer: saveIndex ? cache.domIndexer : undefined, zoomScale: domHelper.calculateZoomScale() }, getRootComputedStyleForContext(logicalRoot.ownerDocument));
-    checkRootRtl(logicalRoot, context);
+    if (core.domHelper.isRightToLeft()) {
+        context.isRootRtl = true;
+    }
     return context;
 };
-function checkRootRtl(element, context) {
-    var _a;
-    var style = (_a = element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(element);
-    if ((style === null || style === void 0 ? void 0 : style.direction) == 'rtl') {
-        context.isRootRtl = true;
-    }
-}
 //# sourceMappingURL=createEditorContext.js.map

lib-mjs/coreApi/formatContentModel/formatContentModel.js

@@ -76,14 +76,14 @@ import { __assign } from "tslib";
     }
+    if (context.announceData) {
+        core.api.announce(core, context.announceData);
+    }
 };
 function handleImages(core, context) {
     if (context.newImages.length > 0) {
-        var viewport = core.api.getVisibleViewport(core);
-        if (viewport) {
-            var left = viewport.left, right = viewport.right;
-            var minMaxImageSize = 10;
-            var maxWidth_1 = Math.max(right - left, minMaxImageSize);
-            context.newImages.forEach(function (image) {
-                image.format.maxWidth = maxWidth_1 + "px";
-            });
-        }
+        var width = core.domHelper.getClientWidth();
+        var minMaxImageSize = 10;
+        var maxWidth_1 = Math.max(width, minMaxImageSize);
+        context.newImages.forEach(function (image) {
+            image.format.maxWidth = maxWidth_1 + "px";
+        });
     }
@@ -90,0 +90,0 @@ }

lib-mjs/coreApi/restoreUndoSnapshot/restoreSnapshotHTML.js

@@ -1,3 +0,2 @@
-import { getAllEntityWrappers, isEntityElement, isNodeOfType, parseEntityFormat, reuseCachedElement, } from 'roosterjs-content-model-dom';
-var BlockEntityContainer = '_E_EBlockEntityContainer';
+import { getAllEntityWrappers, isBlockEntityContainer, isEntityElement, isNodeOfType, parseEntityFormat, reuseCachedElement, } from 'roosterjs-content-model-dom';
 /**
@@ -59,5 +58,2 @@ * @internal
 }
-function isBlockEntityContainer(node) {
-    return node.classList.contains(BlockEntityContainer);
-}
 function tryGetEntityFromContainer(element, entityMap) {
@@ -64,0 +60,0 @@ var _a;

lib-mjs/corePlugin/cache/domIndexerImpl.js

@@ -70,2 +70,3 @@ import { __read, __spreadArray } from "tslib";
                 var startContainer = newRange.startContainer, startOffset = newRange.startOffset, endContainer = newRange.endContainer, endOffset = newRange.endOffset, collapsed = newRange.collapsed;
+                delete model.hasRevertedRangeSelection;
                 if (collapsed) {
@@ -76,2 +77,5 @@ return !!reconcileNodeSelection(startContainer, startOffset);
                     isNodeOfType(startContainer, 'TEXT_NODE')) {
+                    if (newSelection.isReverted) {
+                        model.hasRevertedRangeSelection = true;
+                    }
                     return (isIndexedSegment(startContainer) &&
@@ -84,2 +88,5 @@ !!reconcileTextSelection(startContainer, startOffset, endOffset));
                     if (marker1 && marker2) {
+                        if (newSelection.isReverted) {
+                            model.hasRevertedRangeSelection = true;
+                        }
                         setSelection(model, marker1, marker2);
@@ -86,0 +93,0 @@ return true;

lib-mjs/corePlugin/copyPaste/CopyPastePlugin.js

@@ -129,4 +129,4 @@ import { __assign } from "tslib";
                     cleanUpAndRestoreSelection(tempDiv_1);
+                    _this.editor.setDOMSelection(selection);
                     _this.editor.focus();
-                    _this.editor.setDOMSelection(selection);
                     if (isCut) {
@@ -133,0 +133,0 @@ _this.editor.formatContentModel(function (model, context) {

lib-mjs/corePlugin/entity/entityDelimiterUtils.js

 import { __assign, __read, __spreadArray } from "tslib";
+import { adjustSelectionAroundEntity } from './adjustSelectionAroundEntity';
 import { normalizePos } from '../selection/normalizePos';
-import { addDelimiters, createBr, createModelToDomContext, createParagraph, isEntityDelimiter, isEntityElement, isNodeOfType, parseEntityFormat, findClosestEntityWrapper, iterateSelections, isCharacterValue, } from 'roosterjs-content-model-dom';
+import { addDelimiters, createBr, createModelToDomContext, createParagraph, isEntityDelimiter, isEntityElement, isNodeOfType, parseEntityFormat, findClosestEntityWrapper, iterateSelections, isCharacterValue, findClosestBlockEntityContainer, } from 'roosterjs-content-model-dom';
 var DelimiterBefore = 'entityDelimiterBefore';
@@ -10,4 +11,2 @@ var DelimiterAfter = 'entityDelimiterAfter';
 var InlineEntitySelector = 'span.' + EntityInfoName;
-var BlockEntityContainer = '_E_EBlockEntityContainer';
-var BlockEntityContainerSelector = '.' + BlockEntityContainer;
 /**
@@ -151,53 +150,78 @@ * @internal exported only for unit test
     var selection = editor.getDOMSelection();
-    var rawEvent = event.rawEvent;
     if (!selection || selection.type != 'range') {
         return;
     }
-    var isEnter = rawEvent.key === 'Enter';
-    var helper = editor.getDOMHelper();
-    if (selection.range.collapsed && (isCharacterValue(rawEvent) || isEnter)) {
-        var helper_1 = editor.getDOMHelper();
-        var node_1 = getFocusedElement(selection);
-        if (node_1 && isEntityDelimiter(node_1) && helper_1.isNodeInEditor(node_1)) {
-            var blockEntityContainer = node_1.closest(BlockEntityContainerSelector);
-            if (blockEntityContainer && helper_1.isNodeInEditor(blockEntityContainer)) {
-                var isAfter = node_1.classList.contains(DelimiterAfter);
-                if (isAfter) {
-                    selection.range.setStartAfter(blockEntityContainer);
+    var rawEvent = event.rawEvent;
+    var range = selection.range;
+    var key = rawEvent.key;
+    switch (key) {
+        case 'Enter':
+            if (range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            else {
+                var helper = editor.getDOMHelper();
+                var entity = findClosestEntityWrapper(range.startContainer, helper);
+                if (entity &&
+                    isNodeOfType(entity, 'ELEMENT_NODE') &&
+                    helper.isNodeInEditor(entity)) {
+                    triggerEntityEventOnEnter(editor, entity, rawEvent);
                 }
-                else {
-                    selection.range.setStartBefore(blockEntityContainer);
-                }
-                selection.range.collapse(true /* toStart */);
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
-                }
-                editor.formatContentModel(handleKeyDownInBlockDelimiter, {
-                    selectionOverride: {
-                        type: 'range',
-                        isReverted: false,
-                        range: selection.range,
-                    },
+            }
+            break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            if (!rawEvent.altKey && !rawEvent.ctrlKey && !rawEvent.metaKey) {
+                // Handle in async so focus is already moved, this makes us easier to check if we should adjust the selection
+                (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    adjustSelectionAroundEntity(editor, key, rawEvent.shiftKey);
                 });
             }
+            break;
+        default:
+            if (isCharacterValue(rawEvent) && range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            break;
+    }
+}
+function handleInputOnDelimiter(editor, range, focusedNode, rawEvent) {
+    var _a;
+    var helper = editor.getDOMHelper();
+    if (focusedNode && isEntityDelimiter(focusedNode) && helper.isNodeInEditor(focusedNode)) {
+        var blockEntityContainer = findClosestBlockEntityContainer(focusedNode, helper);
+        var isEnter = rawEvent.key === 'Enter';
+        if (blockEntityContainer && helper.isNodeInEditor(blockEntityContainer)) {
+            var isAfter = focusedNode.classList.contains(DelimiterAfter);
+            if (isAfter) {
+                range.setStartAfter(blockEntityContainer);
+            }
             else {
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
-                    editor.formatContentModel(handleEnterInlineEntity);
-                }
-                else {
-                    editor.takeSnapshot();
-                    (_a = editor
-                        .getDocument()
-                        .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
-                        return preventTypeInDelimiter(node_1, editor);
-                    });
-                }
+                range.setStartBefore(blockEntityContainer);
             }
+            range.collapse(true /* toStart */);
+            if (isEnter) {
+                rawEvent.preventDefault();
+            }
+            editor.formatContentModel(handleKeyDownInBlockDelimiter, {
+                selectionOverride: {
+                    type: 'range',
+                    isReverted: false,
+                    range: range,
+                },
+            });
         }
-    }
-    else if (isEnter) {
-        var entity = findClosestEntityWrapper(selection.range.startContainer, helper);
-        if (entity && isNodeOfType(entity, 'ELEMENT_NODE') && helper.isNodeInEditor(entity)) {
-            triggerEntityEventOnEnter(editor, entity, rawEvent);
+        else {
+            if (isEnter) {
+                rawEvent.preventDefault();
+                editor.formatContentModel(handleEnterInlineEntity);
+            }
+            else {
+                editor.takeSnapshot();
+                (_a = editor
+                    .getDocument()
+                    .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    return preventTypeInDelimiter(focusedNode, editor);
+                });
+            }
         }
@@ -204,0 +228,0 @@ }

lib-mjs/corePlugin/lifecycle/LifecyclePlugin.js

@@ -39,2 +39,3 @@ import { ChangeSource, getObjectKeys, setColor } from 'roosterjs-content-model-dom';
             styleElements: {},
+            announcerStringGetter: options.announcerStringGetter,
         };
@@ -67,3 +68,3 @@ }
         var _this = this;
-        var _a;
+        var _a, _b;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.triggerEvent('beforeDispose', {}, true /*broadcast*/);
@@ -76,2 +77,7 @@ getObjectKeys(this.state.styleElements).forEach(function (key) {
         });
+        var announceContainer = this.state.announceContainer;
+        if (announceContainer) {
+            (_b = announceContainer.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(announceContainer);
+            delete this.state.announceContainer;
+        }
         if (this.disposer) {
@@ -78,0 +84,0 @@ this.disposer();

lib-mjs/corePlugin/selection/SelectionPlugin.js

@@ -326,3 +326,3 @@ import { findCoordinate } from './findCoordinate';
     SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!this.editor || !this.state.tableSelection) {
@@ -334,3 +334,3 @@ return;
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-            var _e = selection.range, collapsed = _e.collapsed, startContainer = _e.startContainer, endContainer = _e.endContainer, commonAncestorContainer = _e.commonAncestorContainer, isReverted = selection.isReverted;
+            var _g = selection.range, collapsed = _g.collapsed, startContainer = _g.startContainer, endContainer = _g.endContainer, commonAncestorContainer = _g.commonAncestorContainer, isReverted = selection.isReverted;
             var start = isReverted ? endContainer : startContainer;
@@ -343,3 +343,3 @@ var end = isReverted ? startContainer : endContainer;
             var lastCo = findCoordinate(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-            var _f = this.state.tableSelection, parsedTable = _f.parsedTable, oldCo = _f.firstCo, table = _f.table;
+            var _h = this.state.tableSelection, parsedTable = _h.parsedTable, oldCo = _h.firstCo, table = _h.table;
             if (lastCo && tableSel.table == table) {
@@ -382,2 +382,4 @@ if (lastCo.col != oldCo.col && (key == Up || key == Down)) {
                             this.setRangeSelectionInTable(cell, 0, this.editor);
+                            lastCo.row = row;
+                            lastCo.col = col;
                             break;
@@ -390,2 +392,9 @@ }
                 }
+                if (collapsed &&
+                    (lastCo.col != oldCo.col || lastCo.row != oldCo.row) &&
+                    lastCo.row >= 0 &&
+                    lastCo.row == parsedTable.length - 1 &&
+                    lastCo.col == ((_e = parsedTable[lastCo.row]) === null || _e === void 0 ? void 0 : _e.length) - 1) {
+                    (_f = this.editor) === null || _f === void 0 ? void 0 : _f.announce({ defaultStrings: 'announceOnFocusLastCell' });
+                }
             }
@@ -392,0 +401,0 @@ if (!collapsed && lastCo) {

lib-mjs/editor/core/DOMHelperImpl.js

@@ -1,2 +0,2 @@
-import { isNodeOfType, toArray } from 'roosterjs-content-model-dom';
+import { isNodeOfType, parseValueWithUnit, toArray } from 'roosterjs-content-model-dom';
 var DOMHelperImpl = /** @class */ (function () {
@@ -54,2 +54,22 @@ function DOMHelperImpl(contentDiv) {
     };
+    /**
+     * Check if the root element is in RTL mode
+     */
+    DOMHelperImpl.prototype.isRightToLeft = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        return (style === null || style === void 0 ? void 0 : style.direction) == 'rtl';
+    };
+    /**
+     * Get the width of the editable area of the editor content div
+     */
+    DOMHelperImpl.prototype.getClientWidth = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        var paddingLeft = parseValueWithUnit(style === null || style === void 0 ? void 0 : style.paddingLeft);
+        var paddingRight = parseValueWithUnit(style === null || style === void 0 ? void 0 : style.paddingRight);
+        return this.contentDiv.clientWidth - (paddingLeft + paddingRight);
+    };
     return DOMHelperImpl;
@@ -56,0 +76,0 @@ }());

lib-mjs/editor/Editor.d.ts

@@ -1,2 +0,2 @@
-import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel } from 'roosterjs-content-model-types';
+import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel, AnnounceData } from 'roosterjs-content-model-types';
 /**
@@ -168,2 +168,7 @@ * The main editor class based on Content Model
     /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    announce(announceData: AnnounceData): void;
+    /**
      * @returns the current EditorCore object
@@ -170,0 +175,0 @@ * @throws a standard Error if there's no core object

lib-mjs/editor/Editor.js

@@ -308,2 +308,10 @@ import { __assign } from "tslib";
     /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    Editor.prototype.announce = function (announceData) {
+        var core = this.getCore();
+        core.api.announce(core, announceData);
+    };
+    /**
      * @returns the current EditorCore object
@@ -310,0 +318,0 @@ * @throws a standard Error if there's no core object

lib-mjs/override/listMetadataApplier.js

@@ -1,90 +0,19 @@
-import { __values } from "tslib";
-import { getObjectKeys, ListMetadataDefinition, OrderedListStyleMap, UnorderedListStyleMap, } from 'roosterjs-content-model-dom';
-var DefaultOrderedListStyles = ['decimal', 'lower-alpha', 'lower-roman'];
-var DefaultUnorderedListStyles = ['disc', 'circle', 'square'];
+import { ListMetadataDefinition, OrderedListStyleMap, UnorderedListStyleMap, getAutoListStyleType, getOrderedListNumberStr, } from 'roosterjs-content-model-dom';
 var OrderedMapPlaceholderRegex = /\$\{(\w+)\}/;
-var CharCodeOfA = 65;
-var RomanValues = {
-    M: 1000,
-    CM: 900,
-    D: 500,
-    CD: 400,
-    C: 100,
-    XC: 90,
-    L: 50,
-    XL: 40,
-    X: 10,
-    IX: 9,
-    V: 5,
-    IV: 4,
-    I: 1,
-};
-function getOrderedListStyleValue(template, listNumber) {
-    return template
-        ? template.replace(OrderedMapPlaceholderRegex, function (_, subStr) {
-            switch (subStr) {
-                case 'Number':
-                    return listNumber + '';
-                case 'LowerAlpha':
-                    return convertDecimalsToAlpha(listNumber, true /*isLowerCase*/);
-                case 'UpperAlpha':
-                    return convertDecimalsToAlpha(listNumber, false /*isLowerCase*/);
-                case 'LowerRoman':
-                    return convertDecimalsToRoman(listNumber, true /*isLowerCase*/);
-                case 'UpperRoman':
-                    return convertDecimalsToRoman(listNumber, false /*isLowerCase*/);
-            }
-            return '';
-        })
-        : undefined;
-}
-function convertDecimalsToAlpha(decimal, isLowerCase) {
-    var alpha = '';
-    decimal--;
-    while (decimal >= 0) {
-        alpha = String.fromCharCode((decimal % 26) + CharCodeOfA) + alpha;
-        decimal = Math.floor(decimal / 26) - 1;
-    }
-    return isLowerCase ? alpha.toLowerCase() : alpha;
-}
-function convertDecimalsToRoman(decimal, isLowerCase) {
-    var e_1, _a;
-    var romanValue = '';
-    try {
-        for (var _b = __values(getObjectKeys(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var i = _c.value;
-            var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
-            decimal = decimal - timesRomanCharAppear * RomanValues[i];
-            romanValue = romanValue + i.repeat(timesRomanCharAppear);
-        }
-    }
-    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; }
-    }
-    return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
-}
-function shouldApplyToItem(listStyleType) {
-    return listStyleType.indexOf('"') >= 0;
-}
-function getRawListStyleType(listType, metadata, depth) {
-    var orderedStyleType = metadata.orderedStyleType, unorderedStyleType = metadata.unorderedStyleType, applyListStyleFromLevel = metadata.applyListStyleFromLevel;
+function getListStyleValue(listType, listStyleType, listNumber) {
     if (listType == 'OL') {
-        return typeof orderedStyleType == 'number'
-            ? OrderedListStyleMap[orderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
-                : undefined;
+        var numberStr = getOrderedListNumberStr(listStyleType, listNumber !== null && listNumber !== void 0 ? listNumber : 1);
+        var template = OrderedListStyleMap[listStyleType];
+        return template ? template.replace(OrderedMapPlaceholderRegex, numberStr) : undefined;
     }
     else {
-        return typeof unorderedStyleType == 'number'
-            ? UnorderedListStyleMap[unorderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
-                : undefined;
+        return UnorderedListStyleMap[listStyleType];
     }
 }
+function shouldApplyToItem(listStyleType, listType) {
+    var style = listType == 'OL'
+        ? OrderedListStyleMap[listStyleType]
+        : UnorderedListStyleMap[listStyleType];
+    return (style === null || style === void 0 ? void 0 : style.indexOf('"')) >= 0;
+}
 /**
@@ -100,9 +29,6 @@ * @internal
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (shouldApplyToItem(listStyleType)) {
-                    format.listStyleType =
-                        listType == 'OL'
-                            ? getOrderedListStyleValue(listStyleType, context.listFormat.threadItemCounts[depth])
-                            : listStyleType;
+            var listStyleType = getAutoListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (shouldApplyToItem(listStyleType, listType)) {
+                    format.listStyleType = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
                 }
@@ -126,6 +52,9 @@ else {
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (!shouldApplyToItem(listStyleType)) {
-                    format.listStyleType = listStyleType;
+            var listStyleType = getAutoListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (!shouldApplyToItem(listStyleType, listType)) {
+                    var listStyleTypeFormat = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
+                    if (listStyleTypeFormat) {
+                        format.listStyleType = listStyleTypeFormat;
+                    }
                 }
@@ -132,0 +61,0 @@ else {

lib/coreApi/coreApiMap.js

@@ -5,2 +5,3 @@ "use strict";
 var addUndoSnapshot_1 = require("./addUndoSnapshot/addUndoSnapshot");
+var announce_1 = require("./announce/announce");
 var attachDomEvent_1 = require("./attachDomEvent/attachDomEvent");
@@ -40,3 +41,4 @@ var createContentModel_1 = require("./createContentModel/createContentModel");
     setEditorStyle: setEditorStyle_1.setEditorStyle,
+    announce: announce_1.announce,
 };
 //# sourceMappingURL=coreApiMap.js.map

lib/coreApi/createEditorContext/createEditorContext.js

@@ -15,13 +15,8 @@ "use strict";
     var context = (0, tslib_1.__assign)({ isDarkMode: lifecycle.isDarkMode, defaultFormat: format.defaultFormat, pendingFormat: (_a = format.pendingFormat) !== null && _a !== void 0 ? _a : undefined, darkColorHandler: darkColorHandler, addDelimiterForEntity: true, allowCacheElement: true, domIndexer: saveIndex ? cache.domIndexer : undefined, zoomScale: domHelper.calculateZoomScale() }, (0, getRootComputedStyleForContext_1.getRootComputedStyleForContext)(logicalRoot.ownerDocument));
-    checkRootRtl(logicalRoot, context);
+    if (core.domHelper.isRightToLeft()) {
+        context.isRootRtl = true;
+    }
     return context;
 };
 exports.createEditorContext = createEditorContext;
-function checkRootRtl(element, context) {
-    var _a;
-    var style = (_a = element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(element);
-    if ((style === null || style === void 0 ? void 0 : style.direction) == 'rtl') {
-        context.isRootRtl = true;
-    }
-}
 //# sourceMappingURL=createEditorContext.js.map

lib/coreApi/formatContentModel/formatContentModel.js

@@ -79,2 +79,5 @@ "use strict";
     }
+    if (context.announceData) {
+        core.api.announce(core, context.announceData);
+    }
 };
@@ -84,11 +87,8 @@ exports.formatContentModel = formatContentModel;
     if (context.newImages.length > 0) {
-        var viewport = core.api.getVisibleViewport(core);
-        if (viewport) {
-            var left = viewport.left, right = viewport.right;
-            var minMaxImageSize = 10;
-            var maxWidth_1 = Math.max(right - left, minMaxImageSize);
-            context.newImages.forEach(function (image) {
-                image.format.maxWidth = maxWidth_1 + "px";
-            });
-        }
+        var width = core.domHelper.getClientWidth();
+        var minMaxImageSize = 10;
+        var maxWidth_1 = Math.max(width, minMaxImageSize);
+        context.newImages.forEach(function (image) {
+            image.format.maxWidth = maxWidth_1 + "px";
+        });
     }
@@ -95,0 +95,0 @@ }

lib/coreApi/restoreUndoSnapshot/restoreSnapshotHTML.js

@@ -5,3 +5,2 @@ "use strict";
 var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
-var BlockEntityContainer = '_E_EBlockEntityContainer';
 /**
@@ -58,3 +57,3 @@ * @internal
         }
-        else if (isBlockEntityContainer(node)) {
+        else if ((0, roosterjs_content_model_dom_1.isBlockEntityContainer)(node)) {
             result = tryGetEntityFromContainer(node, entityMap);
@@ -65,5 +64,2 @@ }
 }
-function isBlockEntityContainer(node) {
-    return node.classList.contains(BlockEntityContainer);
-}
 function tryGetEntityFromContainer(element, entityMap) {
@@ -75,3 +71,3 @@ var _a;
             var parent_1 = (_a = getEntityWrapperForReuse(entityMap, format.id)) === null || _a === void 0 ? void 0 : _a.parentElement;
-            return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && isBlockEntityContainer(parent_1)
+            return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isBlockEntityContainer)(parent_1)
                 ? parent_1
@@ -78,0 +74,0 @@ : null;

lib/corePlugin/cache/domIndexerImpl.js

@@ -73,2 +73,3 @@ "use strict";
                 var startContainer = newRange.startContainer, startOffset = newRange.startOffset, endContainer = newRange.endContainer, endOffset = newRange.endOffset, collapsed = newRange.collapsed;
+                delete model.hasRevertedRangeSelection;
                 if (collapsed) {
@@ -79,2 +80,5 @@ return !!reconcileNodeSelection(startContainer, startOffset);
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(startContainer, 'TEXT_NODE')) {
+                    if (newSelection.isReverted) {
+                        model.hasRevertedRangeSelection = true;
+                    }
                     return (isIndexedSegment(startContainer) &&
@@ -87,2 +91,5 @@ !!reconcileTextSelection(startContainer, startOffset, endOffset));
                     if (marker1 && marker2) {
+                        if (newSelection.isReverted) {
+                            model.hasRevertedRangeSelection = true;
+                        }
                         (0, roosterjs_content_model_dom_1.setSelection)(model, marker1, marker2);
@@ -89,0 +96,0 @@ return true;

lib/corePlugin/copyPaste/CopyPastePlugin.js

@@ -132,4 +132,4 @@ "use strict";
                     cleanUpAndRestoreSelection(tempDiv_1);
+                    _this.editor.setDOMSelection(selection);
                     _this.editor.focus();
-                    _this.editor.setDOMSelection(selection);
                     if (isCut) {
@@ -136,0 +136,0 @@ _this.editor.formatContentModel(function (model, context) {

lib/corePlugin/entity/entityDelimiterUtils.js

@@ -5,2 +5,3 @@ "use strict";
 var tslib_1 = require("tslib");
+var adjustSelectionAroundEntity_1 = require("./adjustSelectionAroundEntity");
 var normalizePos_1 = require("../selection/normalizePos");
@@ -14,4 +15,2 @@ var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var InlineEntitySelector = 'span.' + EntityInfoName;
-var BlockEntityContainer = '_E_EBlockEntityContainer';
-var BlockEntityContainerSelector = '.' + BlockEntityContainer;
 /**
@@ -158,57 +157,82 @@ * @internal exported only for unit test
     var selection = editor.getDOMSelection();
-    var rawEvent = event.rawEvent;
     if (!selection || selection.type != 'range') {
         return;
     }
-    var isEnter = rawEvent.key === 'Enter';
-    var helper = editor.getDOMHelper();
-    if (selection.range.collapsed && ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) || isEnter)) {
-        var helper_1 = editor.getDOMHelper();
-        var node_1 = getFocusedElement(selection);
-        if (node_1 && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(node_1) && helper_1.isNodeInEditor(node_1)) {
-            var blockEntityContainer = node_1.closest(BlockEntityContainerSelector);
-            if (blockEntityContainer && helper_1.isNodeInEditor(blockEntityContainer)) {
-                var isAfter = node_1.classList.contains(DelimiterAfter);
-                if (isAfter) {
-                    selection.range.setStartAfter(blockEntityContainer);
+    var rawEvent = event.rawEvent;
+    var range = selection.range;
+    var key = rawEvent.key;
+    switch (key) {
+        case 'Enter':
+            if (range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            else {
+                var helper = editor.getDOMHelper();
+                var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(range.startContainer, helper);
+                if (entity &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') &&
+                    helper.isNodeInEditor(entity)) {
+                    triggerEntityEventOnEnter(editor, entity, rawEvent);
                 }
-                else {
-                    selection.range.setStartBefore(blockEntityContainer);
-                }
-                selection.range.collapse(true /* toStart */);
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
-                }
-                editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
-                    selectionOverride: {
-                        type: 'range',
-                        isReverted: false,
-                        range: selection.range,
-                    },
+            }
+            break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            if (!rawEvent.altKey && !rawEvent.ctrlKey && !rawEvent.metaKey) {
+                // Handle in async so focus is already moved, this makes us easier to check if we should adjust the selection
+                (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    (0, adjustSelectionAroundEntity_1.adjustSelectionAroundEntity)(editor, key, rawEvent.shiftKey);
                 });
             }
+            break;
+        default:
+            if ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) && range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            break;
+    }
+}
+exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
+function handleInputOnDelimiter(editor, range, focusedNode, rawEvent) {
+    var _a;
+    var helper = editor.getDOMHelper();
+    if (focusedNode && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(focusedNode) && helper.isNodeInEditor(focusedNode)) {
+        var blockEntityContainer = (0, roosterjs_content_model_dom_1.findClosestBlockEntityContainer)(focusedNode, helper);
+        var isEnter = rawEvent.key === 'Enter';
+        if (blockEntityContainer && helper.isNodeInEditor(blockEntityContainer)) {
+            var isAfter = focusedNode.classList.contains(DelimiterAfter);
+            if (isAfter) {
+                range.setStartAfter(blockEntityContainer);
+            }
             else {
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
-                    editor.formatContentModel(exports.handleEnterInlineEntity);
-                }
-                else {
-                    editor.takeSnapshot();
-                    (_a = editor
-                        .getDocument()
-                        .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
-                        return preventTypeInDelimiter(node_1, editor);
-                    });
-                }
+                range.setStartBefore(blockEntityContainer);
             }
+            range.collapse(true /* toStart */);
+            if (isEnter) {
+                rawEvent.preventDefault();
+            }
+            editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
+                selectionOverride: {
+                    type: 'range',
+                    isReverted: false,
+                    range: range,
+                },
+            });
         }
-    }
-    else if (isEnter) {
-        var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(selection.range.startContainer, helper);
-        if (entity && (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') && helper.isNodeInEditor(entity)) {
-            triggerEntityEventOnEnter(editor, entity, rawEvent);
+        else {
+            if (isEnter) {
+                rawEvent.preventDefault();
+                editor.formatContentModel(exports.handleEnterInlineEntity);
+            }
+            else {
+                editor.takeSnapshot();
+                (_a = editor
+                    .getDocument()
+                    .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    return preventTypeInDelimiter(focusedNode, editor);
+                });
+            }
         }
     }
 }
-exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
 /**
@@ -215,0 +239,0 @@ * @internal Exported Only for unit test

lib/corePlugin/lifecycle/LifecyclePlugin.js

@@ -42,2 +42,3 @@ "use strict";
             styleElements: {},
+            announcerStringGetter: options.announcerStringGetter,
         };
@@ -70,3 +71,3 @@ }
         var _this = this;
-        var _a;
+        var _a, _b;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.triggerEvent('beforeDispose', {}, true /*broadcast*/);
@@ -79,2 +80,7 @@ (0, roosterjs_content_model_dom_1.getObjectKeys)(this.state.styleElements).forEach(function (key) {
         });
+        var announceContainer = this.state.announceContainer;
+        if (announceContainer) {
+            (_b = announceContainer.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(announceContainer);
+            delete this.state.announceContainer;
+        }
         if (this.disposer) {
@@ -81,0 +87,0 @@ this.disposer();

lib/corePlugin/selection/SelectionPlugin.js

@@ -329,3 +329,3 @@ "use strict";
     SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!this.editor || !this.state.tableSelection) {
@@ -337,3 +337,3 @@ return;
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-            var _e = selection.range, collapsed = _e.collapsed, startContainer = _e.startContainer, endContainer = _e.endContainer, commonAncestorContainer = _e.commonAncestorContainer, isReverted = selection.isReverted;
+            var _g = selection.range, collapsed = _g.collapsed, startContainer = _g.startContainer, endContainer = _g.endContainer, commonAncestorContainer = _g.commonAncestorContainer, isReverted = selection.isReverted;
             var start = isReverted ? endContainer : startContainer;
@@ -346,3 +346,3 @@ var end = isReverted ? startContainer : endContainer;
             var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-            var _f = this.state.tableSelection, parsedTable = _f.parsedTable, oldCo = _f.firstCo, table = _f.table;
+            var _h = this.state.tableSelection, parsedTable = _h.parsedTable, oldCo = _h.firstCo, table = _h.table;
             if (lastCo && tableSel.table == table) {
@@ -385,2 +385,4 @@ if (lastCo.col != oldCo.col && (key == Up || key == Down)) {
                             this.setRangeSelectionInTable(cell, 0, this.editor);
+                            lastCo.row = row;
+                            lastCo.col = col;
                             break;
@@ -393,2 +395,9 @@ }
                 }
+                if (collapsed &&
+                    (lastCo.col != oldCo.col || lastCo.row != oldCo.row) &&
+                    lastCo.row >= 0 &&
+                    lastCo.row == parsedTable.length - 1 &&
+                    lastCo.col == ((_e = parsedTable[lastCo.row]) === null || _e === void 0 ? void 0 : _e.length) - 1) {
+                    (_f = this.editor) === null || _f === void 0 ? void 0 : _f.announce({ defaultStrings: 'announceOnFocusLastCell' });
+                }
             }
@@ -395,0 +404,0 @@ if (!collapsed && lastCo) {

lib/editor/core/DOMHelperImpl.js

@@ -57,2 +57,22 @@ "use strict";
     };
+    /**
+     * Check if the root element is in RTL mode
+     */
+    DOMHelperImpl.prototype.isRightToLeft = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        return (style === null || style === void 0 ? void 0 : style.direction) == 'rtl';
+    };
+    /**
+     * Get the width of the editable area of the editor content div
+     */
+    DOMHelperImpl.prototype.getClientWidth = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        var paddingLeft = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingLeft);
+        var paddingRight = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingRight);
+        return this.contentDiv.clientWidth - (paddingLeft + paddingRight);
+    };
     return DOMHelperImpl;
@@ -59,0 +79,0 @@ }());

lib/editor/Editor.d.ts

@@ -1,2 +0,2 @@
-import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel } from 'roosterjs-content-model-types';
+import type { ContentModelDocument, ContentModelFormatter, ContentModelSegmentFormat, DarkColorHandler, DOMEventRecord, DOMHelper, DOMSelection, EditorEnvironment, FormatContentModelOptions, IEditor, PluginEventData, PluginEventFromType, PluginEventType, Snapshot, SnapshotsManager, EditorCore, EditorOptions, TrustedHTMLHandler, Rect, EntityState, DomToModelOptionForCreateModel, AnnounceData } from 'roosterjs-content-model-types';
 /**
@@ -168,2 +168,7 @@ * The main editor class based on Content Model
     /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    announce(announceData: AnnounceData): void;
+    /**
      * @returns the current EditorCore object
@@ -170,0 +175,0 @@ * @throws a standard Error if there's no core object

lib/editor/Editor.js

@@ -311,2 +311,10 @@ "use strict";
     /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    Editor.prototype.announce = function (announceData) {
+        var core = this.getCore();
+        core.api.announce(core, announceData);
+    };
+    /**
      * @returns the current EditorCore object
@@ -313,0 +321,0 @@ * @throws a standard Error if there's no core object

lib/override/listMetadataApplier.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listLevelMetadataApplier = exports.listItemMetadataApplier = void 0;
-var tslib_1 = require("tslib");
 var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
-var DefaultOrderedListStyles = ['decimal', 'lower-alpha', 'lower-roman'];
-var DefaultUnorderedListStyles = ['disc', 'circle', 'square'];
 var OrderedMapPlaceholderRegex = /\$\{(\w+)\}/;
-var CharCodeOfA = 65;
-var RomanValues = {
-    M: 1000,
-    CM: 900,
-    D: 500,
-    CD: 400,
-    C: 100,
-    XC: 90,
-    L: 50,
-    XL: 40,
-    X: 10,
-    IX: 9,
-    V: 5,
-    IV: 4,
-    I: 1,
-};
-function getOrderedListStyleValue(template, listNumber) {
-    return template
-        ? template.replace(OrderedMapPlaceholderRegex, function (_, subStr) {
-            switch (subStr) {
-                case 'Number':
-                    return listNumber + '';
-                case 'LowerAlpha':
-                    return convertDecimalsToAlpha(listNumber, true /*isLowerCase*/);
-                case 'UpperAlpha':
-                    return convertDecimalsToAlpha(listNumber, false /*isLowerCase*/);
-                case 'LowerRoman':
-                    return convertDecimalsToRoman(listNumber, true /*isLowerCase*/);
-                case 'UpperRoman':
-                    return convertDecimalsToRoman(listNumber, false /*isLowerCase*/);
-            }
-            return '';
-        })
-        : undefined;
-}
-function convertDecimalsToAlpha(decimal, isLowerCase) {
-    var alpha = '';
-    decimal--;
-    while (decimal >= 0) {
-        alpha = String.fromCharCode((decimal % 26) + CharCodeOfA) + alpha;
-        decimal = Math.floor(decimal / 26) - 1;
-    }
-    return isLowerCase ? alpha.toLowerCase() : alpha;
-}
-function convertDecimalsToRoman(decimal, isLowerCase) {
-    var e_1, _a;
-    var romanValue = '';
-    try {
-        for (var _b = (0, tslib_1.__values)((0, roosterjs_content_model_dom_1.getObjectKeys)(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var i = _c.value;
-            var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
-            decimal = decimal - timesRomanCharAppear * RomanValues[i];
-            romanValue = romanValue + i.repeat(timesRomanCharAppear);
-        }
-    }
-    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; }
-    }
-    return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
-}
-function shouldApplyToItem(listStyleType) {
-    return listStyleType.indexOf('"') >= 0;
-}
-function getRawListStyleType(listType, metadata, depth) {
-    var orderedStyleType = metadata.orderedStyleType, unorderedStyleType = metadata.unorderedStyleType, applyListStyleFromLevel = metadata.applyListStyleFromLevel;
+function getListStyleValue(listType, listStyleType, listNumber) {
     if (listType == 'OL') {
-        return typeof orderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.OrderedListStyleMap[orderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
-                : undefined;
+        var numberStr = (0, roosterjs_content_model_dom_1.getOrderedListNumberStr)(listStyleType, listNumber !== null && listNumber !== void 0 ? listNumber : 1);
+        var template = roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType];
+        return template ? template.replace(OrderedMapPlaceholderRegex, numberStr) : undefined;
     }
     else {
-        return typeof unorderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.UnorderedListStyleMap[unorderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
-                : undefined;
+        return roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
     }
 }
+function shouldApplyToItem(listStyleType, listType) {
+    var style = listType == 'OL'
+        ? roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType]
+        : roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
+    return (style === null || style === void 0 ? void 0 : style.indexOf('"')) >= 0;
+}
 /**
@@ -103,9 +32,6 @@ * @internal
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (shouldApplyToItem(listStyleType)) {
-                    format.listStyleType =
-                        listType == 'OL'
-                            ? getOrderedListStyleValue(listStyleType, context.listFormat.threadItemCounts[depth])
-                            : listStyleType;
+            var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (shouldApplyToItem(listStyleType, listType)) {
+                    format.listStyleType = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
                 }
@@ -129,6 +55,9 @@ else {
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (!shouldApplyToItem(listStyleType)) {
-                    format.listStyleType = listStyleType;
+            var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (!shouldApplyToItem(listStyleType, listType)) {
+                    var listStyleTypeFormat = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
+                    if (listStyleTypeFormat) {
+                        format.listStyleType = listStyleTypeFormat;
+                    }
                 }
@@ -135,0 +64,0 @@ else {

package.json

@@ -6,6 +6,6 @@ {
         "tslib": "^2.3.1",
-        "roosterjs-content-model-dom": "^9.1.0",
-        "roosterjs-content-model-types": "^9.1.0"
+        "roosterjs-content-model-dom": "^9.2.0",
+        "roosterjs-content-model-types": "^9.2.0"
     },
-    "version": "9.1.0",
+    "version": "9.2.0",
     "main": "./lib/index.js",
@@ -12,0 +12,0 @@ "typings": "./lib/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

2303339

increased by3.19%

Number of package files

714

increased by2.59%

Lines of code

20900

increased by2.5%

Dependency changes

• Updatedroosterjs-content-model-dom@^9.2.0

• Updatedroosterjs-content-model-types@^9.2.0