selection

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -114,6 +114,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
     private markdownPanePlugin: MarkdownPanePlugin;
+    private imageEditPlugin: ImageEditPlugin;
     private findReplacePlugin: FindReplacePlugin;
     private findReplaceContext: FindReplaceContext;
 
@@ -173,26 +174,24 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             },
             activeTab: 'all',
         };
+
+        this.imageEditPlugin = new ImageEditPlugin({
+            disableSideResize: this.state.initState.disableSideResize,
+        });
     }
 
     render() {
         const theme = getTheme(this.state.isDarkMode);
 
-        const imageEditPlugin = this.state.initState.pluginList.imageEditPlugin
-            ? new ImageEditPlugin({
-                  disableSideResize: this.state.initState.disableSideResize,
-              })
-            : null;
-
         return (
             <ThemeProvider applyTo="body" theme={theme} className={styles.mainPane}>
                 {this.renderTitleBar()}
                 {!this.state.popoutWindow && this.renderTabs()}
-                {!this.state.popoutWindow && this.renderRibbon(imageEditPlugin)}
+                {!this.state.popoutWindow && this.renderRibbon(this.imageEditPlugin)}
                 <div className={styles.body + ' ' + (this.state.isDarkMode ? 'dark' : '')}>
                     {this.state.popoutWindow
-                        ? this.renderPopout(imageEditPlugin)
-                        : this.renderMainPane(imageEditPlugin)}
+                        ? this.renderPopout(this.imageEditPlugin)
+                        : this.renderMainPane(this.imageEditPlugin)}
                 </div>
             </ThemeProvider>
         );
@@ -237,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,
         });
@@ -553,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(),

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

@@ -72,6 +72,7 @@ const initialState: OptionState = {
     experimentalFeatures: new Set<ExperimentalFeature>([
         'HandleEnterKey',
         'CloneIndependentRoot',
+        'ImageEditV2',
         'CacheList',
         'TransformTableBorderColors',
     ]),

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

@@ -14,6 +14,7 @@ export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}
                 {this.renderFeature('HandleEnterKey')}
                 {this.renderFeature('KeepSelectionMarkerWhenEnteringTextNode')}
                 {this.renderFeature('CloneIndependentRoot')}
+                {this.renderFeature('ImageEditV2')}
                 {this.renderFeature('CacheList')}
                 {this.renderFeature('TransformTableBorderColors')}
             </>

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

@@ -25,8 +25,13 @@ export const formatContentModel: FormatContentModel = (
     options,
     domToModelOptions
 ) => {
-    const { onNodeCreated, rawEvent, selectionOverride, scrollCaretIntoView: scroll } =
-        options || {};
+    const {
+        onNodeCreated,
+        rawEvent,
+        selectionOverride,
+        scrollCaretIntoView: scroll,
+        skipSelectionChangedEvent,
+    } = options || {};
     const model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     const context: FormatContentModelContext = {
         newEntities: [],
@@ -63,7 +68,9 @@ export const formatContentModel: FormatContentModel = (
                     core,
                     model,
                     hasFocus ? undefined : { ignoreSelection: true }, // If editor did not have focus before format, do not set focus after format
-                    onNodeCreated
+                    onNodeCreated,
+                    undefined /* isInitializing */,
+                    skipSelectionChangedEvent
                 ) ?? undefined;
 
             handlePendingFormat(core, context, selection);

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

@@ -21,7 +21,8 @@ export const setContentModel: SetContentModel = (
     model,
     option,
     onNodeCreated,
-    isInitializing
+    isInitializing,
+    skipSelectionChangedEvent
 ) => {
     const editorContext = core.api.createEditorContext(core, true /*saveIndex*/);
     const modelToDomContext = option
@@ -54,7 +55,7 @@ export const setContentModel: SetContentModel = (
         updateCache(core.cache, model, selection);
 
         if (!option?.ignoreSelection && selection) {
-            core.api.setDOMSelection(core, selection);
+            core.api.setDOMSelection(core, selection, skipSelectionChangedEvent);
         } else {
             core.selection.selection = selection;
         }

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

@@ -184,6 +184,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
 
         // Image selection
         if (
+            !editor.isExperimentalFeatureEnabled('ImageEditV2') &&
             selection?.type == 'image' &&
             (rawEvent.button == MouseLeftButton ||
                 (rawEvent.button == MouseRightButton &&
@@ -691,6 +692,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
 
             //If am image selection changed to a wider range due a keyboard event, we should update the selection
             const selection = this.editor.getDocument().getSelection();
+
             if (selection && selection.focusNode) {
                 const image = isSingleImageInSelection(selection);
                 if (newSelection?.type == 'image' && !image) {