image edit

Author: juliaroldi

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -236,6 +236,9 @@ export class MainPane extends React.Component<{}, MainPaneState> {
 
     resetEditorPlugin(pluginState: OptionState) {
         this.updateContentPlugin.update();
+        this.imageEditPlugin = new ImageEditPlugin({
+            disableSideResize: pluginState.disableSideResize,
+        });
         this.setState({
             initState: pluginState,
         });
@@ -552,7 +555,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             pluginList.tableEdit && new TableEditPlugin(),
             pluginList.watermark && new WatermarkPlugin(watermarkText),
             pluginList.markdown && new MarkdownPlugin(markdownOptions),
-            imageEditPlugin,
+            pluginList.imageEditPlugin && imageEditPlugin,
             pluginList.emoji && createEmojiPlugin(),
             pluginList.pasteOption && createPasteOptionPlugin(),
             pluginList.sampleEntity && new SampleEntityPlugin(),

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

@@ -41,6 +41,18 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         return 'ImageEdit';
     }
 
+    /**
+     * @deprecated
+     * When ImageEditV2 is enabled, this will always be false
+     */
+    protected get isEditing() {
+        return this.imageEditPlugin?.isEditing;
+    }
+
+    protected get editor() {
+        return this.imageEditPlugin?.editor;
+    }
+
     /**
      * The first method that editor will call to a plugin when editor is initializing.
      * It will pass in the editor instance, plugin should take this chance to save the
@@ -93,4 +105,18 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     isOperationAllowed(operation: ImageEditOperation): boolean {
         return !!this.imageEditPlugin?.isOperationAllowed(operation);
     }
+
+    protected applyFormatWithContentModel(
+        editor: IEditor,
+        isCropMode: boolean,
+        shouldSelectImage?: boolean,
+        isApiOperation?: boolean
+    ) {
+        this.imageEditPlugin?.applyFormatWithContentModel(
+            editor,
+            isCropMode,
+            shouldSelectImage,
+            isApiOperation
+        );
+    }
 }