roosterjs 9.29.3 → 9.30.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.29.3)
+// Type definitions for roosterjs (Version 9.30.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -3616,7 +3616,14 @@ export type ExperimentalFeature = /**
  *  Prevent default browser behavior for copy/cut event,
  *  and set the clipboard data with custom implementation.
  */
- | 'CustomCopyCut';
+ | 'CustomCopyCut'
+/**
+ * For CJK keyboard input on mobile, if the user toggles bold/italic/underline on an empty div,
+ * the pending format will be applied on the selection marker. When typing text, the selection moves to the text node and the
+ * selection marker may be recreated during reconciliation, potentially losing its original formatting. This feature ensures
+ * the original formatting of the selection marker is kept to match the pending format.
+ */
+ | 'KeepSelectionMarkerWhenEnteringTextNode';
 
 /**
  * Options for editor
@@ -6189,6 +6196,16 @@ export interface KeyUpEvent extends BasePluginDomEvent<'keyUp', KeyboardEvent> {
 export interface CompositionEndEvent extends BasePluginDomEvent<'compositionEnd', CompositionEvent> {
 }
 
+/**
+ * Fired when the logical root is about to be changed
+ */
+export interface BeforeLogicalRootChangeEvent extends BasePluginEvent<'beforeLogicalRootChange'> {
+    /**
+     * The logical root element that will no longer be the logical root
+     */
+    logicalRoot: HTMLDivElement;
+}
+
 /**
  * Fired when the logical root changes
  */
@@ -6218,7 +6235,7 @@ export interface MouseUpEvent extends BasePluginDomEvent<'mouseUp', MouseEvent>
 /**
  * Editor plugin event interface
  */
-export type PluginEvent = BeforeCutCopyEvent | BeforeDisposeEvent | BeforeKeyboardEditingEvent | BeforePasteEvent | BeforeSetContentEvent | CompositionEndEvent | ContentChangedEvent | ContextMenuEvent | RewriteFromModelEvent | EditImageEvent | EditorReadyEvent | EnterShadowEditEvent | EntityOperationEvent | ExtractContentWithDomEvent | EditorInputEvent | KeyDownEvent | KeyPressEvent | KeyUpEvent | LeaveShadowEditEvent | LogicalRootChangedEvent | MouseDownEvent | MouseUpEvent | ScrollEvent | SelectionChangedEvent | ZoomChangedEvent;
+export type PluginEvent = BeforeCutCopyEvent | BeforeDisposeEvent | BeforeKeyboardEditingEvent | BeforeLogicalRootChangeEvent | BeforePasteEvent | BeforeSetContentEvent | CompositionEndEvent | ContentChangedEvent | ContextMenuEvent | RewriteFromModelEvent | EditImageEvent | EditorReadyEvent | EnterShadowEditEvent | EntityOperationEvent | ExtractContentWithDomEvent | EditorInputEvent | KeyDownEvent | KeyPressEvent | KeyUpEvent | LeaveShadowEditEvent | LogicalRootChangedEvent | MouseDownEvent | MouseUpEvent | ScrollEvent | SelectionChangedEvent | ZoomChangedEvent;
 
 /**
  * A type to extract data part of a plugin event type. Data part is the plugin event without eventType field.
@@ -6352,7 +6369,13 @@ export type PluginEventType = /**
  * Editor content is about to be changed by keyboard event.
  * This is only used by Content Model editing
  */
- | 'beforeKeyboardEditing';
+ | 'beforeKeyboardEditing'
+/**
+ * The logical root is about to change
+ * This event is used to clean up any features from the old logical root
+ * before the new logical root is set.
+ */
+ | 'beforeLogicalRootChange';
 
 /**
  * This interface represents a PluginEvent wrapping native scroll event
@@ -9775,6 +9798,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin  {
      * @param event The event to handle:
      */
     onPluginEvent(event: PluginEvent): void;
+    private handleBeforeLogicalRootChange;
     private removeImageEditing;
     private isImageSelection;
     private mouseUpHandler;

package/dist/rooster-amd.js

@@ -7383,6 +7383,7 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * @param selectionOverride Override the current selection. If we want to format a table even currently it is not selected, we can use this parameter to override current selection
  */
 function formatTableWithContentModel(editor, apiName, callback, selectionOverride) {
+    editor.focus();
     editor.formatContentModel(function (model) {
         var _a = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 2), readonlyTableModel = _a[0], path = _a[1];
         if (readonlyTableModel) {
@@ -10241,6 +10242,12 @@ var setLogicalRoot = function (core, logicalRoot) {
         }
         // if the logical root changed
         if (logicalRoot !== core.logicalRoot) {
+            // tell plugins that the logical root is about to change, so they can clean up listeners or caches
+            var beforeLogicalRootEvent = {
+                eventType: 'beforeLogicalRootChange',
+                logicalRoot: core.logicalRoot,
+            };
+            core.api.triggerEvent(core, beforeLogicalRootEvent, false /*broadcast*/);
             // make sure the old logical root is not content editable and the new one is
             core.logicalRoot.contentEditable = 'false';
             logicalRoot.contentEditable = 'true';
@@ -10432,7 +10439,8 @@ var CachePlugin = /** @class */ (function () {
         this.state = {};
         if (!option.disableCache) {
             this.state.domIndexer = new domIndexerImpl_1.DomIndexerImpl(option.experimentalFeatures &&
-                option.experimentalFeatures.indexOf('PersistCache') >= 0);
+                option.experimentalFeatures.indexOf('PersistCache') >= 0, option.experimentalFeatures &&
+                option.experimentalFeatures.indexOf('KeepSelectionMarkerWhenEnteringTextNode') >= 0);
             this.state.textMutationObserver = (0, textMutationObserver_1.createTextMutationObserver)(contentDiv, this.onMutation);
         }
         if (option.enableParagraphMap) {
@@ -10778,8 +10786,9 @@ function unindex(node) {
  * Implementation of DomIndexer
  */
 var DomIndexerImpl = /** @class */ (function () {
-    function DomIndexerImpl(persistCache) {
+    function DomIndexerImpl(persistCache, keepSelectionMarkerWhenEnteringTextNode) {
         this.persistCache = persistCache;
+        this.keepSelectionMarkerWhenEnteringTextNode = keepSelectionMarkerWhenEnteringTextNode;
     }
     DomIndexerImpl.prototype.onSegment = function (segmentNode, paragraph, segment) {
         var indexedText = segmentNode;
@@ -10838,6 +10847,7 @@ var DomIndexerImpl = /** @class */ (function () {
     };
     DomIndexerImpl.prototype.reconcileSelection = function (model, newSelection, oldSelection) {
         var _a, _b;
+        var selectionMarker;
         if (oldSelection) {
             var startNode = void 0;
             if (oldSelection.type == 'range' &&
@@ -10849,6 +10859,7 @@ var DomIndexerImpl = /** @class */ (function () {
                 this.reconcileTextSelection(startNode);
             }
             else {
+                selectionMarker = this.selectionMarkerToKeepWhenEnteringTextNode(oldSelection, newSelection);
                 (0, roosterjs_content_model_dom_1.setSelection)(model);
             }
         }
@@ -10889,7 +10900,7 @@ var DomIndexerImpl = /** @class */ (function () {
                             model.hasRevertedRangeSelection = true;
                         }
                         return (isIndexedSegment(startContainer) &&
-                            !!this.reconcileTextSelection(startContainer, startOffset, endOffset));
+                            !!this.reconcileTextSelection(startContainer, startOffset, endOffset, selectionMarker));
                     }
                     else {
                         var marker1 = this.reconcileNodeSelection(startContainer, startOffset);
@@ -11005,10 +11016,10 @@ var DomIndexerImpl = /** @class */ (function () {
         }
         return marker;
     };
-    DomIndexerImpl.prototype.reconcileTextSelection = function (textNode, startOffset, endOffset) {
+    DomIndexerImpl.prototype.reconcileTextSelection = function (textNode, startOffset, endOffset, selectionMarker) {
         var _a;
-        var _b, _c;
-        var _d = textNode.__roosterjsContentModel, paragraph = _d.paragraph, segments = _d.segments;
+        var _b, _c, _d, _e, _f, _g;
+        var _h = textNode.__roosterjsContentModel, paragraph = _h.paragraph, segments = _h.segments;
         var first = segments[0];
         var last = segments[segments.length - 1];
         var selectable;
@@ -11028,9 +11039,9 @@ var DomIndexerImpl = /** @class */ (function () {
                     textSegments.push(first);
                 }
                 if (endOffset === undefined) {
-                    var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(first.format);
+                    var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)((_b = selectionMarker === null || selectionMarker === void 0 ? void 0 : selectionMarker.format) !== null && _b !== void 0 ? _b : first.format);
                     newSegments.push(marker);
-                    if (startOffset < ((_b = textNode.nodeValue) !== null && _b !== void 0 ? _b : '').length) {
+                    if (startOffset < ((_c = textNode.nodeValue) !== null && _c !== void 0 ? _c : '').length) {
                         if (first.link) {
                             (0, roosterjs_content_model_dom_1.addLink)(marker, first.link);
                         }
@@ -11042,14 +11053,14 @@ var DomIndexerImpl = /** @class */ (function () {
                     endOffset = startOffset;
                 }
                 else if (endOffset > startOffset) {
-                    var middle = (0, roosterjs_content_model_dom_1.createText)(txt.substring(startOffset, endOffset), first.format, first.link, first.code);
+                    var middle = (0, roosterjs_content_model_dom_1.createText)(txt.substring(startOffset, endOffset), (_d = selectionMarker === null || selectionMarker === void 0 ? void 0 : selectionMarker.format) !== null && _d !== void 0 ? _d : first.format, first.link, first.code);
                     middle.isSelected = true;
                     newSegments.push(middle);
                     textSegments.push(middle);
                     selectable = middle;
                 }
                 if (endOffset < txt.length) {
-                    var newLast = (0, roosterjs_content_model_dom_1.createText)(txt.substring(endOffset), first.format, first.link, first.code);
+                    var newLast = (0, roosterjs_content_model_dom_1.createText)(txt.substring(endOffset), (_e = selectionMarker === null || selectionMarker === void 0 ? void 0 : selectionMarker.format) !== null && _e !== void 0 ? _e : first.format, first.link, first.code);
                     newSegments.push(newLast);
                     textSegments.push(newLast);
                 }
@@ -11079,7 +11090,7 @@ var DomIndexerImpl = /** @class */ (function () {
             var isBefore = wrapper.previousSibling == delimiter;
             var isAfter = wrapper.nextSibling == delimiter;
             if (index >= 0 && delimiter && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(delimiter) && (isBefore || isAfter)) {
-                var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(((_c = paragraph.segments[isAfter ? index + 1 : index - 1]) !== null && _c !== void 0 ? _c : first).format);
+                var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)((_f = selectionMarker === null || selectionMarker === void 0 ? void 0 : selectionMarker.format) !== null && _f !== void 0 ? _f : ((_g = paragraph.segments[isAfter ? index + 1 : index - 1]) !== null && _g !== void 0 ? _g : first).format);
                 paragraph.segments.splice(isAfter ? index + 1 : index, 0, marker);
                 selectable = marker;
             }
@@ -11184,6 +11195,25 @@ var DomIndexerImpl = /** @class */ (function () {
         paragraph.segments.splice(index, 0, text);
         this.onSegment(textNode, paragraph, [text]);
     };
+    DomIndexerImpl.prototype.selectionMarkerToKeepWhenEnteringTextNode = function (oldSelection, newSelection) {
+        // For CJK keyboard input on mobile, we may have a situation like this:
+        // User toggle bold/italic/underline on an empty div, the pending format will be applied on the selection marker
+        // then type some text, the selection move to the text node and the selection marker will be recreated during the reconciliation and lose its original formatting
+        // In this case, we need to keep the original formatting of the selection marker to match the pending format
+        if (this.keepSelectionMarkerWhenEnteringTextNode &&
+            oldSelection.type == 'range' &&
+            this.isCollapsed(oldSelection) &&
+            newSelection.type == 'range' &&
+            (0, roosterjs_content_model_dom_1.isNodeOfType)(newSelection.range.commonAncestorContainer, 'TEXT_NODE') &&
+            newSelection.range.commonAncestorContainer.parentElement == oldSelection.start.node &&
+            isIndexedSegment(newSelection.range.commonAncestorContainer) &&
+            newSelection.range.commonAncestorContainer.__roosterjsContentModel.paragraph.segments[0]
+                .segmentType == 'SelectionMarker') {
+            return newSelection.range.commonAncestorContainer.__roosterjsContentModel.paragraph
+                .segments[0];
+        }
+        return undefined;
+    };
     return DomIndexerImpl;
 }());
 exports.DomIndexerImpl = DomIndexerImpl;
@@ -12150,13 +12180,16 @@ var DOMEventPlugin = /** @class */ (function () {
         };
         this.keyboardEventHandler = {
             beforeDispatch: function (event) {
+                var _a, _b, _c;
                 var eventType = EventTypeMap[event.type];
                 if ((0, roosterjs_content_model_dom_1.isCharacterValue)(event) || (0, roosterjs_content_model_dom_1.isCursorMovingKey)(event)) {
                     // Stop propagation for Character keys and Up/Down/Left/Right/Home/End/PageUp/PageDown
                     // since editor already handles these keys and no need to propagate to parents
                     event.stopPropagation();
                 }
-                if (_this.editor && eventType && !event.isComposing && !_this.state.isInIME) {
+                var isAndroid = (_c = (_b = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getEnvironment()) === null || _b === void 0 ? void 0 : _b.isAndroid) !== null && _c !== void 0 ? _c : false;
+                var isComposing = !isAndroid && (event.isComposing || _this.state.isInIME);
+                if (_this.editor && eventType && !isComposing) {
                     _this.editor.triggerEvent(eventType, {
                         rawEvent: event,
                     });
@@ -12165,8 +12198,11 @@ var DOMEventPlugin = /** @class */ (function () {
         };
         this.inputEventHandler = {
             beforeDispatch: function (event) {
+                var _a, _b, _c;
                 event.stopPropagation();
-                if (_this.editor && !event.isComposing && !_this.state.isInIME) {
+                var isAndroid = (_c = (_b = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getEnvironment()) === null || _b === void 0 ? void 0 : _b.isAndroid) !== null && _c !== void 0 ? _c : false;
+                var isComposing = !isAndroid && (event.isComposing || _this.state.isInIME);
+                if (_this.editor && !isComposing) {
                     _this.editor.triggerEvent('input', {
                         rawEvent: event,
                     });
@@ -15436,7 +15472,10 @@ exports.listLevelMetadataApplier = {
             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]);
+                    var listNumber = context.listFormat.threadItemCounts[depth] > 0
+                        ? context.listFormat.threadItemCounts[depth]
+                        : 1;
+                    var listStyleTypeFormat = getListStyleValue(listType, listStyleType, listNumber);
                     if (listStyleTypeFormat) {
                         format.listStyleType = listStyleTypeFormat;
                     }
@@ -29334,7 +29373,7 @@ function createMarkdownParagraph(paragraph, context) {
                     markdownString += textProcessor(segment);
                     break;
                 case 'Image':
-                    markdownString += "![" + segment.alt + "](" + segment.src + ")";
+                    markdownString += "![" + (segment.alt || 'image') + "](" + segment.src + ")";
                     break;
                 case 'Br':
                     if (!(context === null || context === void 0 ? void 0 : context.ignoreLineBreaks)) {
@@ -29356,7 +29395,9 @@ function createMarkdownParagraph(paragraph, context) {
     if (paragraph.decorator) {
         var tagName = paragraph.decorator.tagName;
         var prefix = headings_1.MarkdownHeadings[tagName];
-        markdownString = "" + prefix + markdownString;
+        if (prefix) {
+            markdownString = "" + prefix + markdownString;
+        }
     }
     return markdownString;
 }
@@ -31647,7 +31688,7 @@ var handleEnterOnParagraph = function (context) {
     var _c = context.insertPoint, paragraph = _c.paragraph, path = _c.path;
     var paraIndex = (_b = (_a = path[0]) === null || _a === void 0 ? void 0 : _a.blocks.indexOf(paragraph)) !== null && _b !== void 0 ? _b : -1;
     if (context.deleteResult == 'notDeleted' && paraIndex >= 0) {
-        var newPara = (0, splitParagraph_1.splitParagraph)(context.insertPoint);
+        var newPara = (0, splitParagraph_1.splitParagraph)(context.insertPoint, false /* removeImplicitParagraph */);
         (0, roosterjs_content_model_dom_1.mutateBlock)(path[0]).blocks.splice(paraIndex + 1, 0, newPara);
         context.deleteResult = 'range';
         context.lastParagraph = newPara;
@@ -32335,21 +32376,26 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * Split the given paragraph from insert point into two paragraphs,
  * and move the selection marker to the beginning of the second paragraph
  * @param insertPoint The input insert point which includes the paragraph and selection marker
- * @param formatKeys The format that needs to be copied from the splitted paragraph, if not specified,  some default format will be copied
+ * @param removeImplicitParagraph Whether to remove the implicit paragraph if it becomes empty after split
+ * * If set to false, the implicit paragraph will be preserved even if it becomes empty
+ * * If set to true, the implicit paragraph will be removed if it becomes empty
  * @returns The new paragraph it created
  */
-function splitParagraph(insertPoint) {
+function splitParagraph(insertPoint, removeImplicitParagraph) {
     var _a;
+    if (removeImplicitParagraph === void 0) { removeImplicitParagraph = true; }
     var paragraph = insertPoint.paragraph, marker = insertPoint.marker;
     var newParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /*isImplicit*/, {}, paragraph.segmentFormat);
     (0, roosterjs_content_model_dom_1.copyFormat)(newParagraph.format, paragraph.format, roosterjs_content_model_dom_1.ParagraphFormats);
     var markerIndex = paragraph.segments.indexOf(marker);
     var segments = paragraph.segments.splice(markerIndex, paragraph.segments.length - markerIndex);
     (_a = newParagraph.segments).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(segments), false));
-    if (paragraph.segments.length == 0 && !paragraph.isImplicit) {
+    var isEmptyParagraph = paragraph.segments.length == 0;
+    var shouldPreserveImplicitParagraph = !paragraph.isImplicit || !removeImplicitParagraph;
+    if (isEmptyParagraph && shouldPreserveImplicitParagraph) {
         paragraph.segments.push((0, roosterjs_content_model_dom_1.createBr)(marker.format));
     }
-    else if (paragraph.segments.length > 0) {
+    else if (!isEmptyParagraph) {
         (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(paragraph);
     }
     insertPoint.paragraph = newParagraph;
@@ -32960,6 +33006,16 @@ var ImageEditPlugin = /** @class */ (function () {
             case 'extractContentWithDom':
                 this.removeImageEditing(event.clonedRoot);
                 break;
+            case 'beforeLogicalRootChange':
+                this.handleBeforeLogicalRootChange();
+                break;
+        }
+    };
+    ImageEditPlugin.prototype.handleBeforeLogicalRootChange = function () {
+        if (this.isEditing && this.editor && !this.editor.isDisposed()) {
+            this.applyFormatWithContentModel(this.editor, this.isCropMode, false /* shouldSelectImage */);
+            this.removeImageWrapper();
+            this.cleanInfo();
         }
     };
     ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {