Port Image Edit Operations

demo/scripts/controlsV2/demoButtons/createImageEditButtons.ts

@@ -12,11 +12,8 @@ function createImageCropButton(handler: ImageEditor): RibbonButton<'buttonNameCr
         iconName: 'Crop',
         isDisabled: formatState =>
             !formatState.canAddImageAltText || !handler.isOperationAllowed('crop'),
-        onClick: editor => {
-            const selection = editor.getDOMSelection();
-            if (selection.type === 'image' && selection.image) {
-                handler.cropImage(selection.image);
-            }
+        onClick: () => {
+            handler.cropImage();
         },
     };
 }
@@ -39,13 +36,10 @@ function createImageRotateButton(handler: ImageEditor): RibbonButton<'buttonName
             items: directions,
         },
         isDisabled: formatState => !formatState.canAddImageAltText,
-        onClick: (editor, direction) => {
-            const selection = editor.getDOMSelection();
-            if (selection.type === 'image' && selection.image) {
-                const rotateDirection = direction as 'left' | 'right';
-                const rad = degreeToRad(rotateDirection == 'left' ? 270 : 90);
-                handler.rotateImage(selection.image, rad);
-            }
+        onClick: (_editor, direction) => {
+            const rotateDirection = direction as 'left' | 'right';
+            const rad = degreeToRad(rotateDirection == 'left' ? 270 : 90);
+            handler.rotateImage(rad);
         },
     };
 }
@@ -68,11 +62,8 @@ function createImageFlipButton(handler: ImageEditor): RibbonButton<'buttonNameFl
             items: flipDirections,
         },
         isDisabled: formatState => !formatState.canAddImageAltText,
-        onClick: (editor, flipDirection) => {
-            const selection = editor.getDOMSelection();
-            if (selection.type === 'image' && selection.image) {
-                handler.flipImage(selection.image, flipDirection as 'horizontal' | 'vertical');
-            }
+        onClick: (_editor, flipDirection) => {
+            handler.flipImage(flipDirection as 'horizontal' | 'vertical');
         },
     };
 }

demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createImageEditMenuProvider.tsx

@@ -91,13 +91,13 @@ const ImageRotateMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEdit
             imageEditor.canRegenerateImage(node as HTMLImageElement)
         );
     },
-    onClick: (key, _editor, node, strings, uiUtilities, imageEdit) => {
+    onClick: (key, _editor, _node, _strings, _uiUtilities, imageEdit) => {
         switch (key) {
             case 'menuNameImageRotateLeft':
-                imageEdit?.rotateImage(node as HTMLImageElement, -Math.PI / 2);
+                imageEdit?.rotateImage(-Math.PI / 2);
                 break;
             case 'menuNameImageRotateRight':
-                imageEdit?.rotateImage(node as HTMLImageElement, Math.PI / 2);
+                imageEdit?.rotateImage(Math.PI / 2);
                 break;
         }
     },
@@ -116,13 +116,13 @@ const ImageFlipMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEditor
             imageEditor.canRegenerateImage(node as HTMLImageElement)
         );
     },
-    onClick: (key, _editor, node, strings, uiUtilities, imageEdit) => {
+    onClick: (key, _editor, _node, _strings, _uiUtilities, imageEdit) => {
         switch (key) {
             case 'menuNameImageRotateFlipHorizontally':
-                imageEdit?.flipImage(node as HTMLImageElement, 'horizontal');
+                imageEdit?.flipImage('horizontal');
                 break;
             case 'menuNameImageRotateFlipVertically':
-                imageEdit?.flipImage(node as HTMLImageElement, 'vertical');
+                imageEdit?.flipImage('vertical');
                 break;
         }
     },
@@ -137,8 +137,8 @@ const ImageCropMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEditor
             imageEditor.canRegenerateImage(node as HTMLImageElement)
         );
     },
-    onClick: (_, _editor, node, strings, uiUtilities, imageEdit) => {
-        imageEdit?.cropImage(node as HTMLImageElement);
+    onClick: (_, _editor, _node, _strings, _uiUtilities, imageEdit) => {
+        imageEdit?.cropImage();
     },
 };
 

demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts

@@ -43,6 +43,7 @@ export interface OptionState {
     // Editor options
     isRtl: boolean;
     disableCache: boolean;
+    experimentalFeatures: Set<ExperimentalFeature>;
 }
 
 export interface OptionPaneProps extends OptionState, SidePaneElementProps {}

demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Code } from './Code';
 import { DefaultFormatPane } from './DefaultFormatPane';
 import { EditorCode } from './codes/EditorCode';
+import { ExperimentalFeatures } from './ExperimentalFeatures';
 import { MainPane } from '../../mainPane/MainPane';
 import { OptionPaneProps, OptionState } from './OptionState';
 import { Plugins } from './Plugins';
@@ -55,7 +56,12 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
                     </summary>
                     <Plugins state={this.state} resetState={this.resetState} />
                 </details>
-                <details></details>
+                <details>
+                    <summary>
+                        <b>Experimental features</b>
+                    </summary>
+                    <ExperimentalFeatures state={this.state} resetState={this.resetState} />
+                </details>
                 <div>
                     <br />
                 </div>

packages/roosterjs-content-model-dom/lib/domUtils/ensureImageHasSpanParent.ts → packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/ensureImageHasSpanParent.ts

@@ -1,18 +1,14 @@
-import { isElementOfType } from './isElementOfType';
-import { isNodeOfType } from './isNodeOfType';
-import { wrap } from './wrap';
+import { isElementOfType, isNodeOfType, wrap } from 'roosterjs-content-model-dom';
 
 /**
+ * @internal
  * Ensure image is wrapped by a span element
  * @param image
  * @returns the image
  */
-export function ensureImageHasSpanParent(
-    image: HTMLImageElement,
-    entryPoint?: string
-): HTMLImageElement {
+export function ensureImageHasSpanParent(image: HTMLImageElement): HTMLImageElement {
     const parent = image.parentElement;
-    // console.log(parent, entryPoint);
+
     if (
         parent &&
         isNodeOfType(parent, 'ELEMENT_NODE') &&

packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/setDOMSelection.ts

@@ -1,13 +1,9 @@
 import { addRangeToSelection } from './addRangeToSelection';
+import { ensureImageHasSpanParent } from './ensureImageHasSpanParent';
 import { ensureUniqueId } from '../setEditorStyle/ensureUniqueId';
 import { findLastedCoInMergedCell } from './findLastedCoInMergedCell';
 import { findTableCellElement } from './findTableCellElement';
-import {
-    ensureImageHasSpanParent,
-    isNodeOfType,
-    parseTableCells,
-    toArray,
-} from 'roosterjs-content-model-dom';
+import { isNodeOfType, parseTableCells, toArray } from 'roosterjs-content-model-dom';
 import type {
     ParsedTable,
     SelectionChangedEvent,
@@ -55,8 +51,8 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC
                 core.api.setEditorStyle(
                     core,
                     DOM_SELECTION_CSS_KEY,
-                    `outline-style:auto!important; outline-color:${imageSelectionColor}!important;display: ${
-                        core.environment.isSafari ? 'inline-block' : 'inline-flex'
+                    `outline-style:solid!important; outline-color:${imageSelectionColor}!important;display: ${
+                        core.environment.isSafari ? '-webkit-inline-flex' : 'inline-flex'
                     };`,
                     [`span:has(>img#${ensureUniqueId(image, IMAGE_ID)})`]
                 );

packages/roosterjs-content-model-core/test/coreApi/setDOMSelection/setDOMSelectionTest.ts

@@ -310,7 +310,7 @@ describe('setDOMSelection', () => {
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
                 core,
                 '_DOMSelection',
-                'outline-style:auto!important; outline-color:#DB626C!important;display: inline-flex;',
+                'outline-style:solid!important; outline-color:#DB626C!important;display: inline-flex;',
                 ['span:has(>img#image_0)']
             );
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
@@ -370,7 +370,7 @@ describe('setDOMSelection', () => {
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
                 core,
                 '_DOMSelection',
-                'outline-style:auto!important; outline-color:red!important;display: inline-flex;',
+                'outline-style:solid!important; outline-color:red!important;display: inline-flex;',
                 ['span:has(>img#image_0)']
             );
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
@@ -437,7 +437,7 @@ describe('setDOMSelection', () => {
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
                 coreValue,
                 '_DOMSelection',
-                'outline-style:auto!important; outline-color:DarkColorMock-red!important;display: inline-flex;',
+                'outline-style:solid!important; outline-color:DarkColorMock-red!important;display: inline-flex;',
                 ['span:has(>img#image_0)']
             );
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
@@ -498,7 +498,7 @@ describe('setDOMSelection', () => {
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
                 core,
                 '_DOMSelection',
-                'outline-style:auto!important; outline-color:#DB626C!important;display: inline-flex;',
+                'outline-style:solid!important; outline-color:#DB626C!important;display: inline-flex;',
                 ['span:has(>img#image_0)']
             );
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
@@ -559,7 +559,7 @@ describe('setDOMSelection', () => {
             expect(setEditorStyleSpy).toHaveBeenCalledWith(
                 core,
                 '_DOMSelection',
-                'outline-style:auto!important; outline-color:#DB626C!important;display: inline-flex;',
+                'outline-style:solid!important; outline-color:#DB626C!important;display: inline-flex;',
                 ['span:has(>img#image_0_0)']
             );
             expect(setEditorStyleSpy).toHaveBeenCalledWith(

packages/roosterjs-content-model-dom/lib/index.ts

@@ -23,7 +23,6 @@ export { toArray } from './domUtils/toArray';
 export { moveChildNodes, wrapAllChildNodes } from './domUtils/moveChildNodes';
 export { wrap } from './domUtils/wrap';
 export { unwrap } from './domUtils/unwrap';
-export { ensureImageHasSpanParent } from './domUtils/ensureImageHasSpanParent';
 export {
     isEntityElement,
     findClosestEntityWrapper,

packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateImageMetadata.ts

@@ -18,7 +18,7 @@ const BooleanDefinition = createBooleanDefinition(true);
  * @internal
  * Definition of ImageMetadataFormat
  */
-export const ImageMetadataFormatDefinition = createObjectDefinition<Required<ImageMetadataFormat>>({
+const ImageMetadataFormatDefinition = createObjectDefinition<Required<ImageMetadataFormat>>({
     widthPx: NumberDefinition,
     heightPx: NumberDefinition,
     leftPercent: NumberDefinition,

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

@@ -13,10 +13,10 @@ import { updateImageEditInfo } from './utils/updateImageEditInfo';
 import { updateRotateHandle } from './Rotator/updateRotateHandle';
 import { updateWrapper } from './utils/updateWrapper';
 import {
-    ensureImageHasSpanParent,
     getSelectedSegmentsAndParagraphs,
     isElementOfType,
     isNodeOfType,
+    mutateSegment,
     unwrap,
 } from 'roosterjs-content-model-dom';
 import type { DragAndDropHelper } from '../pluginUtils/DragAndDrop/DragAndDropHelper';
@@ -39,7 +39,7 @@ const DefaultOptions: Partial<ImageEditOptions> = {
     preserveRatio: true,
     disableRotate: false,
     disableSideResize: false,
-    onSelectState: 'resizeAndRotate',
+    onSelectState: 'resize',
 };
 
 const IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';
@@ -127,7 +127,6 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         apiOperation?: ImageEditOperation
     ) {
         const contentModelImage = getContentModelImage(editor);
-        ensureImageHasSpanParent(image);
         const imageSpan = image.parentElement;
         if (
             !contentModelImage ||
@@ -293,13 +292,15 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     }
 
     public canRegenerateImage(image: HTMLImageElement): boolean {
-        return canRegenerateImage(image) || canRegenerateImage(this.selectedImage);
+        return canRegenerateImage(image);
     }
 
-    public cropImage(image: HTMLImageElement) {
-        if (!this.editor) {
+    public cropImage() {
+        const selection = this.editor?.getDOMSelection();
+        if (!this.editor || !selection || selection.type !== 'image') {
             return;
         }
+        let image = selection.image;
         if (this.wrapper && this.selectedImage && this.shadowSpan) {
             image = this.removeImageWrapper() ?? image;
         }
@@ -411,35 +412,39 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
             this.shadowSpan
         ) {
             editor.formatContentModel(
-                (model, _) => {
+                (model, context) => {
                     const selectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs(
                         model,
                         false
                     );
                     if (!selectedSegmentsAndParagraphs[0]) {
                         return false;
                     }
-                    const segment = selectedSegmentsAndParagraphs[0][0];
-
-                    if (
-                        this.lastSrc &&
-                        this.selectedImage &&
-                        this.imageEditInfo &&
-                        this.clonedImage &&
-                        segment.segmentType == 'Image'
-                    ) {
-                        applyChange(
-                            editor,
-                            this.selectedImage,
-                            segment,
-                            this.imageEditInfo,
-                            this.lastSrc,
-                            this.wasImageResized || this.isCropMode,
-                            this.clonedImage
-                        );
-                        segment.isSelected = shouldSelectImage;
-                        segment.isSelectedAsImageSelection = shouldSelectAsImageSelection;
 
+                    const segment = selectedSegmentsAndParagraphs[0][0];
+                    const paragraph = selectedSegmentsAndParagraphs[0][1];
+
+                    if (paragraph && segment.segmentType == 'Image') {
+                        mutateSegment(paragraph, segment, image => {
+                            if (
+                                this.lastSrc &&
+                                this.selectedImage &&
+                                this.imageEditInfo &&
+                                this.clonedImage
+                            ) {
+                                applyChange(
+                                    editor,
+                                    this.selectedImage,
+                                    image,
+                                    this.imageEditInfo,
+                                    this.lastSrc,
+                                    this.wasImageResized || this.isCropMode,
+                                    this.clonedImage
+                                );
+                                image.isSelected = shouldSelectImage;
+                                image.isSelectedAsImageSelection = shouldSelectAsImageSelection;
+                            }
+                        });
                         return true;
                     }
 
@@ -473,7 +478,12 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         return image;
     }
 
-    public flipImage(image: HTMLImageElement, direction: 'horizontal' | 'vertical') {
+    public flipImage(direction: 'horizontal' | 'vertical') {
+        const selection = this.editor?.getDOMSelection();
+        if (!this.editor || !selection || selection.type !== 'image') {
+            return;
+        }
+        const image = selection.image;
         if (this.editor) {
             this.editImage(this.editor, image, 'flip', imageEditInfo => {
                 const angleRad = imageEditInfo.angleRad || 0;
@@ -497,7 +507,12 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         }
     }
 
-    public rotateImage(image: HTMLImageElement, angleRad: number) {
+    public rotateImage(angleRad: number) {
+        const selection = this.editor?.getDOMSelection();
+        if (!this.editor || !selection || selection.type !== 'image') {
+            return;
+        }
+        const image = selection.image;
         if (this.editor) {
             this.editImage(this.editor, image, 'rotate', imageEditInfo => {
                 imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;

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

@@ -38,11 +38,11 @@ export function createImageWrapper(
     const doc = editor.getDocument();
 
     let rotators: HTMLDivElement[] = [];
-    if (!options.disableRotate && (operation === 'resizeAndRotate' || operation === 'rotate')) {
+    if (!options.disableRotate && operation === 'rotate') {
         rotators = createImageRotator(doc, htmlOptions);
     }
     let resizers: HTMLDivElement[] = [];
-    if (operation === 'resize' || operation === 'resizeAndRotate') {
+    if (operation === 'resize') {
         resizers = createImageResizer(doc);
     }
 

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

@@ -5,10 +5,10 @@ import type { ContentModelImage, IEditor } from 'roosterjs-content-model-types';
  * @internal
  */
 export function getContentModelImage(editor: IEditor): ContentModelImage | null {
-    const model = editor.getContentModelCopy('disconnected' /*mode*/);
+    const model = editor.getContentModelCopy('disconnected');
     const selectedSegments = getSelectedSegments(model, false /*includeFormatHolder*/);
     if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {
-        return selectedSegments[0];
+        return selectedSegments[0] as ContentModelImage;
     }
     return null;
 }