roosterjs 9.35.0 → 9.36.0

package/dist/rooster.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.35.0)
+// Type definitions for roosterjs (Version 9.36.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -4637,6 +4637,10 @@ interface EditorEnvironment {
      * Whether editor is running on Android
      */
     readonly isAndroid?: boolean;
+    /**
+     * Whether editor is running on iOS
+     */
+    readonly isIOS?: boolean;
     /**
      * Whether editor is running on Safari browser
      */
@@ -9935,7 +9939,7 @@ class ImageEditPlugin implements ImageEditor, EditorPlugin  {
     private startEditing;
     private updateImageDimensionsIfZero;
     private startEditingInternal;
-    startRotateAndResize(editor: IEditor, image: HTMLImageElement): void;
+    startRotateAndResize(editor: IEditor, image: HTMLImageElement, isRTL: boolean): void;
     private updateResizeHandleDirection;
     private updateRotateHandleState;
     isOperationAllowed(operation: ImageEditOperation): boolean;

package/dist/rooster.js

@@ -9956,7 +9956,7 @@ var setContentModel = function (core, model, option, onNodeCreated, isInitializi
         : (0, roosterjs_content_model_dom_1.createModelToDomContextWithConfig)(core.environment.modelToDomSettings.calculated, editorContext);
     modelToDomContext.onNodeCreated = onNodeCreated;
     (_a = core.onFixUpModel) === null || _a === void 0 ? void 0 : _a.call(core, model);
-    var selection = (0, roosterjs_content_model_dom_1.contentModelToDom)(core.logicalRoot.ownerDocument.implementation.createHTMLDocument(), core.logicalRoot, model, modelToDomContext);
+    var selection = (0, roosterjs_content_model_dom_1.contentModelToDom)(core.logicalRoot.ownerDocument, core.logicalRoot, model, modelToDomContext);
     if (!core.lifecycle.shadowEditFragment) {
         // Clear pending mutations since we will use our latest model object to replace existing cache
         (_b = core.cache.textMutationObserver) === null || _b === void 0 ? void 0 : _b.flushMutations(true /*ignoreMutations*/);
@@ -15458,6 +15458,7 @@ function createEditorEnvironment(contentDiv, options) {
         modelToDomSettings: (0, createEditorDefaultSettings_1.createModelToDomSettings)(options),
         isMac: appVersion.indexOf('Mac') != -1,
         isAndroid: /android/i.test(userAgent),
+        isIOS: /iPad|iPhone/.test(userAgent),
         isSafari: userAgent.indexOf('Safari') >= 0 &&
             userAgent.indexOf('Chrome') < 0 &&
             userAgent.indexOf('Android') < 0,
@@ -27888,8 +27889,8 @@ var handleParagraph = function (doc, parent, paragraph, context, refNode) {
                     paragraph.segments.some(function (segment) { return segment.segmentType != 'SelectionMarker'; }));
             var formatOnWrapper = needParagraphWrapper
                 ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (((_a = paragraph.decorator) === null || _a === void 0 ? void 0 : _a.format) || {})), paragraph.segmentFormat) : {};
-            var prevRefNode = refNode === null || refNode === void 0 ? void 0 : refNode.previousSibling;
             container = doc.createElement(((_b = paragraph.decorator) === null || _b === void 0 ? void 0 : _b.tagName) || DefaultParagraphTag);
+            parent.insertBefore(container, refNode);
             context.regularSelection.current = {
                 block: needParagraphWrapper ? container : container.parentNode,
                 segment: null,
@@ -27931,13 +27932,7 @@ var handleParagraph = function (doc, parent, paragraph, context, refNode) {
             // since this paragraph it is implicit. In that case container.nextSibling will become original
             // inline entity's next sibling. So reset refNode to its real next sibling (after change) here
             // to make sure the value is correct.
-            refNode =
-                prevRefNode === undefined // When refNode is not passed in
-                    ? null
-                    : prevRefNode === null // When refNode is the first child of parent
-                        ? parent.firstChild
-                        : prevRefNode.nextSibling; // Normal case
-            parent.insertBefore(container, refNode);
+            refNode = container.nextSibling;
             if (container) {
                 (_d = context.onNodeCreated) === null || _d === void 0 ? void 0 : _d.call(context, paragraph, container);
                 (_e = context.domIndexer) === null || _e === void 0 ? void 0 : _e.onParagraph(container);
@@ -32179,10 +32174,11 @@ var deleteCollapsedSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteCol
  * @returns True if the event is handled by content model, otherwise false
  */
 function keyboardDelete(editor, rawEvent, handleExpandedSelection) {
+    var _a;
     if (handleExpandedSelection === void 0) { handleExpandedSelection = true; }
     var handled = false;
     var selection = editor.getDOMSelection();
-    if (shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection)) {
+    if (shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection, (_a = editor.getEnvironment().isIOS) !== null && _a !== void 0 ? _a : false)) {
         editor.formatContentModel(function (model, context) {
             var result = (0, roosterjs_content_model_dom_1.deleteSelection)(model, getDeleteSteps(rawEvent, !!editor.getEnvironment().isMac), context).deleteResult;
             handled = (0, handleKeyboardEventCommon_1.handleKeyboardEventResult)(editor, model, rawEvent, result, context);
@@ -32219,7 +32215,7 @@ function getDeleteSteps(rawEvent, isMac) {
         deleteParagraphStyle_1.deleteParagraphStyle,
     ];
 }
-function shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection) {
+function shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection, isIOS) {
     var _a, _b;
     if (!selection) {
         return false; // Nothing to delete
@@ -32245,15 +32241,19 @@ function shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelecti
         // When selection is collapsed and is in middle of text node, no need to use Content Model to delete
         return !((0, roosterjs_content_model_dom_1.isNodeOfType)(startContainer, 'TEXT_NODE') &&
             !(0, roosterjs_content_model_dom_1.isModifierKey)(rawEvent) &&
-            (canDeleteBefore(rawEvent, startContainer, startOffset) ||
+            (canDeleteBefore(rawEvent, startContainer, startOffset, isIOS) ||
                 canDeleteAfter(rawEvent, startContainer, startOffset)));
     }
 }
-function canDeleteBefore(rawEvent, text, offset) {
+function canDeleteBefore(rawEvent, text, offset, isIOS) {
     var _a, _b;
-    if (rawEvent.key != 'Backspace' || offset <= 1) {
+    if (rawEvent.key != 'Backspace') {
         return false;
     }
+    if (offset <= 1) {
+        // For iOS, allow browser to handle deletion of first character on iOS to preserve auto-capitalization
+        return offset === 1 && isIOS;
+    }
     var length = (_b = (_a = text.nodeValue) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     if (offset == length) {
         // At the end of text, need to check if next segment is deletable
@@ -33580,6 +33580,7 @@ var ImageEditPlugin = /** @class */ (function () {
         var _this = this;
         var editingImageModel;
         var selection = editor.getDOMSelection();
+        var isRTL = false;
         editor.formatContentModel(function (model, context) {
             var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
             var previousSelectedImage = isApiOperation
@@ -33633,6 +33634,7 @@ var ImageEditPlugin = /** @class */ (function () {
                     _this.isCropMode = isCropMode;
                     (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
                         editingImageModel = image;
+                        isRTL = editingImage.paragraph.format.direction == 'rtl';
                         _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
                         image.format.imageState = 'isEditing';
                     });
@@ -33649,10 +33651,10 @@ var ImageEditPlugin = /** @class */ (function () {
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
                     (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
                     if (isCropMode) {
-                        _this.startCropMode(editor, node);
+                        _this.startCropMode(editor, node, isRTL);
                     }
                     else {
-                        _this.startRotateAndResize(editor, node);
+                        _this.startRotateAndResize(editor, node, isRTL);
                     }
                 }
             },
@@ -33713,7 +33715,7 @@ var ImageEditPlugin = /** @class */ (function () {
         ]);
         editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, "caret-color: transparent;");
     };
-    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image) {
+    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, isRTL) {
         var _this = this;
         var _a, _b;
         if (this.imageEditInfo) {
@@ -33725,7 +33727,7 @@ var ImageEditPlugin = /** @class */ (function () {
                         _this.selectedImage &&
                         _this.wrapper &&
                         _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers);
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers, undefined /* croppers */, isRTL);
                         _this.wasImageResized = true;
                     }
                 }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
@@ -33734,12 +33736,12 @@ var ImageEditPlugin = /** @class */ (function () {
                         _this.selectedImage &&
                         _this.wrapper &&
                         _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper);
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, undefined /* croppers */, isRTL);
                         _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
                         _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
                     }
                 }, this.zoomScale, isMobileOrTable)), false);
-                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers, undefined /* croppers */, isRTL);
                 this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
             }
         }
@@ -33771,7 +33773,7 @@ var ImageEditPlugin = /** @class */ (function () {
     ImageEditPlugin.prototype.canRegenerateImage = function (image) {
         return (0, canRegenerateImage_1.canRegenerateImage)(image);
     };
-    ImageEditPlugin.prototype.startCropMode = function (editor, image) {
+    ImageEditPlugin.prototype.startCropMode = function (editor, image, isRTL) {
         var _this = this;
         if (this.imageEditInfo) {
             this.startEditing(editor, image, ['crop']);
@@ -33781,11 +33783,11 @@ var ImageEditPlugin = /** @class */ (function () {
                         _this.selectedImage &&
                         _this.wrapper &&
                         _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined, _this.croppers);
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, _this.croppers, isRTL);
                         _this.isCropMode = true;
                     }
                 }, this.zoomScale, !!editor.getEnvironment().isMobileOrTablet)), false);
-                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined /* resizers */, this.croppers, isRTL);
             }
         }
     };
@@ -35071,7 +35073,7 @@ exports.getSelectedImage = getSelectedImage;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.isRTL = exports.checkIfImageWasResized = exports.setSize = exports.setWrapperSizeDimensions = exports.setFlipped = exports.rotateCoordinate = exports.isASmallImage = exports.getPx = void 0;
+exports.checkIfImageWasResized = exports.setSize = exports.setWrapperSizeDimensions = exports.setFlipped = exports.rotateCoordinate = exports.isASmallImage = exports.getPx = void 0;
 var constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/constants/constants.ts");
 /**
  * @internal
@@ -35159,13 +35161,6 @@ function checkIfImageWasResized(image) {
     }
 }
 exports.checkIfImageWasResized = checkIfImageWasResized;
-/**
- * @internal
- */
-function isRTL(image) {
-    return window.getComputedStyle(image).direction === 'rtl';
-}
-exports.isRTL = isRTL;
 function isFixedNumberValue(value) {
     var numberValue = typeof value === 'string' ? parseInt(value) : value;
     return !isNaN(numberValue);
@@ -35344,7 +35339,7 @@ var imageEditUtils_1 = __webpack_require__(/*! ./imageEditUtils */ "./packages/r
 /**
  * @internal
  */
-function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers, croppers) {
+function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers, croppers, isRTL) {
     var angleRad = editInfo.angleRad, bottomPercent = editInfo.bottomPercent, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, flippedHorizontal = editInfo.flippedHorizontal, flippedVertical = editInfo.flippedVertical;
     var generateImageSize = (0, generateImageSize_1.getGeneratedImageSize)(editInfo, croppers && (croppers === null || croppers === void 0 ? void 0 : croppers.length) > 0);
     if (!generateImageSize) {
@@ -35367,7 +35362,7 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
     wrapper.style.verticalAlign = 'text-bottom';
     // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
     // or if the direction is Right To Left
-    if ((0, imageEditUtils_1.isRTL)(clonedImage)) {
+    if (isRTL) {
         wrapper.style.textAlign = 'right';
         if (!croppers) {
             clonedImage.style.left = (0, imageEditUtils_1.getPx)(cropLeftPx);