Bump version to 9.36.0

packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts

@@ -71,6 +71,7 @@ function createEditorEnvironment(
         modelToDomSettings: 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 &&

packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts

@@ -85,6 +85,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: false,
                 isAndroid: false,
+                isIOS: false,
                 isSafari: false,
                 isMobileOrTablet: false,
                 domToModelSettings: mockedDomToModelSettings,
@@ -218,6 +219,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: false,
                 isAndroid: true,
+                isIOS: false,
                 isSafari: false,
                 isMobileOrTablet: true,
                 domToModelSettings: mockedDomToModelSettings,
@@ -252,6 +254,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: false,
                 isAndroid: true,
+                isIOS: false,
                 isSafari: false,
                 isMobileOrTablet: true,
                 domToModelSettings: mockedDomToModelSettings,
@@ -286,6 +289,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: true,
                 isAndroid: false,
+                isIOS: false,
                 isSafari: false,
                 isMobileOrTablet: false,
                 domToModelSettings: mockedDomToModelSettings,
@@ -320,6 +324,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: false,
                 isAndroid: false,
+                isIOS: false,
                 isSafari: true,
                 isMobileOrTablet: false,
                 domToModelSettings: mockedDomToModelSettings,
@@ -354,6 +359,7 @@ describe('createEditorCore', () => {
             environment: {
                 isMac: false,
                 isAndroid: false,
+                isIOS: false,
                 isSafari: false,
                 isMobileOrTablet: false,
                 domToModelSettings: mockedDomToModelSettings,
@@ -368,4 +374,40 @@ describe('createEditorCore', () => {
             undefined
         );
     });
+
+    it('iOS iPhone Safari', () => {
+        const mockedDiv = {
+            ownerDocument: {
+                defaultView: {
+                    navigator: {
+                        userAgent:
+                            'Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
+                    },
+                },
+            },
+            attributes: {
+                a: 'b',
+            },
+        } as any;
+        const mockedOptions = {} as any;
+
+        runTest(mockedDiv, mockedOptions, {
+            environment: {
+                isMac: false,
+                isAndroid: false,
+                isIOS: true,
+                isSafari: false,
+                isMobileOrTablet: true,
+                domToModelSettings: mockedDomToModelSettings,
+                modelToDomSettings: mockedModelToDomSettings,
+            },
+        });
+
+        expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
+            mockedDiv,
+            getDarkColorFallback,
+            undefined,
+            undefined
+        );
+    });
 });

packages/roosterjs-content-model-plugins/lib/edit/keyboardDelete.ts

@@ -41,7 +41,14 @@ export function keyboardDelete(
     let handled = false;
     const selection = editor.getDOMSelection();
 
-    if (shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection)) {
+    if (
+        shouldDeleteWithContentModel(
+            selection,
+            rawEvent,
+            handleExpandedSelection,
+            editor.getEnvironment().isIOS ?? false
+        )
+    ) {
         editor.formatContentModel(
             (model, context) => {
                 const result = deleteSelection(
@@ -92,7 +99,8 @@ function getDeleteSteps(rawEvent: KeyboardEvent, isMac: boolean): (DeleteSelecti
 function shouldDeleteWithContentModel(
     selection: DOMSelection | null,
     rawEvent: KeyboardEvent,
-    handleExpandedSelection: boolean
+    handleExpandedSelection: boolean,
+    isIOS: boolean
 ) {
     if (!selection) {
         return false; // Nothing to delete
@@ -121,16 +129,20 @@ function shouldDeleteWithContentModel(
         return !(
             isNodeOfType(startContainer, 'TEXT_NODE') &&
             !isModifierKey(rawEvent) &&
-            (canDeleteBefore(rawEvent, startContainer, startOffset) ||
+            (canDeleteBefore(rawEvent, startContainer, startOffset, isIOS) ||
                 canDeleteAfter(rawEvent, startContainer, startOffset))
         );
     }
 }
 
-function canDeleteBefore(rawEvent: KeyboardEvent, text: Text, offset: number) {
-    if (rawEvent.key != 'Backspace' || offset <= 1) {
+function canDeleteBefore(rawEvent: KeyboardEvent, text: Text, offset: number, isIOS: boolean) {
+    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;
+    }
 
     const length = text.nodeValue?.length ?? 0;
 

packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts

@@ -344,6 +344,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     ) {
         let editingImageModel: ContentModelImage | undefined;
         const selection = editor.getDOMSelection();
+        let isRTL: boolean = false;
 
         editor.formatContentModel(
             (model, context) => {
@@ -426,6 +427,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                         this.isCropMode = isCropMode;
                         mutateSegment(editingImage.paragraph, editingImage.image, image => {
                             editingImageModel = image;
+                            isRTL = editingImage.paragraph.format.direction == 'rtl';
                             this.imageEditInfo = updateImageEditInfo(image, selection.image);
                             image.format.imageState = 'isEditing';
                         });
@@ -447,9 +449,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                         isElementOfType(node, 'img')
                     ) {
                         if (isCropMode) {
-                            this.startCropMode(editor, node);
+                            this.startCropMode(editor, node, isRTL);
                         } else {
-                            this.startRotateAndResize(editor, node);
+                            this.startRotateAndResize(editor, node, isRTL);
                         }
                     }
                 },
@@ -541,7 +543,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, `caret-color: transparent;`);
     }
 
-    public startRotateAndResize(editor: IEditor, image: HTMLImageElement) {
+    public startRotateAndResize(editor: IEditor, image: HTMLImageElement, isRTL: boolean) {
         if (this.imageEditInfo) {
             this.startEditing(editor, image, ['resize', 'rotate']);
             if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
@@ -566,7 +568,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                     this.selectedImage,
                                     this.clonedImage,
                                     this.wrapper,
-                                    this.resizers
+                                    this.resizers,
+                                    undefined /* croppers */,
+                                    isRTL
                                 );
                                 this.wasImageResized = true;
                             }
@@ -592,7 +596,10 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                     this.options,
                                     this.selectedImage,
                                     this.clonedImage,
-                                    this.wrapper
+                                    this.wrapper,
+                                    undefined /* resizers */,
+                                    undefined /* croppers */,
+                                    isRTL
                                 );
                                 this.updateRotateHandleState(
                                     editor,
@@ -619,7 +626,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                     this.selectedImage,
                     this.clonedImage,
                     this.wrapper,
-                    this.resizers
+                    this.resizers,
+                    undefined /* croppers */,
+                    isRTL
                 );
 
                 this.updateRotateHandleState(
@@ -684,7 +693,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         return canRegenerateImage(image);
     }
 
-    private startCropMode(editor: IEditor, image: HTMLImageElement) {
+    private startCropMode(editor: IEditor, image: HTMLImageElement, isRTL: boolean) {
         if (this.imageEditInfo) {
             this.startEditing(editor, image, ['crop']);
             if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
@@ -708,8 +717,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                     this.selectedImage,
                                     this.clonedImage,
                                     this.wrapper,
-                                    undefined,
-                                    this.croppers
+                                    undefined /* resizers */,
+                                    this.croppers,
+                                    isRTL
                                 );
                                 this.isCropMode = true;
                             }
@@ -724,8 +734,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                     this.selectedImage,
                     this.clonedImage,
                     this.wrapper,
-                    undefined,
-                    this.croppers
+                    undefined /* resizers */,
+                    this.croppers,
+                    isRTL
                 );
             }
         }

packages/roosterjs-content-model-plugins/lib/imageEdit/utils/imageEditUtils.ts

@@ -107,13 +107,6 @@ export function checkIfImageWasResized(image: HTMLImageElement): boolean {
     }
 }
 
-/**
- * @internal
- */
-export function isRTL(image: HTMLImageElement): boolean {
-    return window.getComputedStyle(image).direction === 'rtl';
-}
-
 function isFixedNumberValue(value: string | number) {
     const numberValue = typeof value === 'string' ? parseInt(value) : value;
     return !isNaN(numberValue);

packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateWrapper.ts

@@ -10,7 +10,6 @@ import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
 import {
     getPx,
     isASmallImage,
-    isRTL,
     setFlipped,
     setSize,
     setWrapperSizeDimensions,
@@ -26,7 +25,8 @@ export function updateWrapper(
     clonedImage: HTMLImageElement,
     wrapper: HTMLSpanElement,
     resizers?: HTMLDivElement[],
-    croppers?: HTMLDivElement[]
+    croppers?: HTMLDivElement[],
+    isRTL?: boolean
 ) {
     const {
         angleRad,
@@ -70,7 +70,7 @@ export function updateWrapper(
 
     // 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 (isRTL(clonedImage)) {
+    if (isRTL) {
         wrapper.style.textAlign = 'right';
         if (!croppers) {
             clonedImage.style.left = getPx(cropLeftPx);

packages/roosterjs-content-model-plugins/test/edit/keyboardDeleteTest.ts

@@ -536,6 +536,7 @@ describe('keyboardDelete', () => {
                 type: 'range',
                 range: { collapsed: false },
             }),
+            getEnvironment: () => ({}),
         } as any) as IEditor;
         const event = {
             which: Delete,
@@ -559,6 +560,7 @@ describe('keyboardDelete', () => {
                 type: 'range',
                 range: { collapsed: false },
             }),
+            getEnvironment: () => ({}),
         } as any;
         const which = Backspace;
         const event = {
@@ -589,6 +591,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent);
@@ -611,6 +614,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent);
@@ -636,6 +640,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent, false /* handleExpandedSelectionOnDelete */);
@@ -659,6 +664,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent);
@@ -682,6 +688,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent);
@@ -707,6 +714,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent, false /* handleExpandedSelectionOnDelete */);
@@ -740,6 +748,7 @@ describe('keyboardDelete', () => {
         const editor = {
             formatContentModel: formatWithContentModelSpy,
             getDOMSelection: () => range,
+            getEnvironment: () => ({}),
         } as any;
 
         keyboardDelete(editor, rawEvent, false /* handleExpandedSelectionOnDelete */);

packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts

@@ -920,7 +920,7 @@ describe('ImageEditPlugin - applyFormatWithContentModel', () => {
             getAttribute: () => 'test',
         };
         plugin.setEditingInfo(mockImageWithWidth);
-        plugin.startRotateAndResize(editor, mockedImage);
+        plugin.startRotateAndResize(editor, mockedImage, false);
         plugin.setIsEditing(isEditing);
         plugin.applyFormatWithContentModel(editor, isCropMode, shouldSelectImage, isApiOperation);
         const newModel = editor.getContentModelCopy('disconnected');

packages/roosterjs-content-model-plugins/test/imageEdit/utils/imageEditUtilsTest.ts

@@ -3,7 +3,6 @@ import {
     checkIfImageWasResized,
     getPx,
     isASmallImage,
-    isRTL,
     rotateCoordinate,
     setFlipped,
     setSize,
@@ -105,12 +104,4 @@ describe('imageEditUtils', () => {
             expect(result).toBeFalsy();
         });
     });
-
-    describe('isRTL', () => {
-        it(' not isRTL', () => {
-            const image = document.createElement('img');
-            const result = isRTL(image);
-            expect(result).toBeFalsy();
-        });
-    });
 });