Merge branch 'master' into u/bvalverde/addUniqueIdToTempDiv

microsoft · Sep 30, 2024 · af93b30 · af93b30
2 parents 1230542 + 092c04b
commit af93b30
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 8 deletions.
diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -58,7 +58,7 @@ const initialState: OptionState = {
         handleTabKey: true,
     },
     customReplacements: emojiReplacements,
-    experimentalFeatures: new Set<ExperimentalFeature>(['PersistCache']),
+    experimentalFeatures: new Set<ExperimentalFeature>(['PersistCache', 'HandleEnterKey']),
 };
 
 export class EditorOptionsPlugin extends SidePanePluginImpl<OptionsPane, OptionPaneProps> {

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -9,7 +9,13 @@ export interface DefaultFormatProps {
 
 export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}> {
     render() {
-        return this.renderFeature('PersistCache');
+        return (
+            <>
+                {this.renderFeature('PersistCache')}
+                {this.renderFeature('HandleEnterKey')}
+                {this.renderFeature('LegacyImageSelection')}
+            </>
+        );
     }
 
     private renderFeature(featureName: ExperimentalFeature): JSX.Element {

diff --git a/packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts
@@ -63,7 +63,7 @@ export class EditPlugin implements EditorPlugin {
      */
     initialize(editor: IEditor) {
         this.editor = editor;
-        this.handleNormalEnter = this.editor.isExperimentalFeatureEnabled('PersistCache');
+        this.handleNormalEnter = this.editor.isExperimentalFeatureEnabled('HandleEnterKey');
 
         if (editor.getEnvironment().isAndroid) {
             this.disposer = this.editor.attachDomEvent({

diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -53,6 +53,8 @@ const DefaultOptions: Partial<ImageEditOptions> = {
 
 const MouseRightButton = 2;
 const DRAG_ID = '_dragging';
+const IMAGE_EDIT_CLASS = 'imageEdit';
+const IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
 
 /**
  * ImageEdit plugin handles the following image editing features:
@@ -66,7 +68,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     private shadowSpan: HTMLSpanElement | null = null;
     private selectedImage: HTMLImageElement | null = null;
     protected wrapper: HTMLSpanElement | null = null;
-    private imageEditInfo: ImageMetadataFormat | null = null;
+    protected imageEditInfo: ImageMetadataFormat | null = null;
     private imageHTMLOptions: ImageHtmlOptions | null = null;
     private dndHelpers: DragAndDropHelper<DragAndDropContext, any>[] = [];
     private clonedImage: HTMLImageElement | null = null;
@@ -384,9 +386,11 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         this.croppers = croppers;
         this.zoomScale = editor.getDOMHelper().calculateZoomScale();
 
-        editor.setEditorStyle('imageEdit', `outline-style:none!important;`, [
+        editor.setEditorStyle(IMAGE_EDIT_CLASS, `outline-style:none!important;`, [
             `span:has(>img${getSafeIdSelector(this.selectedImage.id)})`,
         ]);
+
+        editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, `caret-color: transparent;`);
     }
 
     public startRotateAndResize(editor: IEditor, image: HTMLImageElement) {
@@ -607,7 +611,8 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     }
 
     private cleanInfo() {
-        this.editor?.setEditorStyle('imageEdit', null);
+        this.editor?.setEditorStyle(IMAGE_EDIT_CLASS, null);
+        this.editor?.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
         this.selectedImage = null;
         this.shadowSpan = null;
         this.wrapper = null;

diff --git a/packages/roosterjs-content-model-plugins/test/edit/EditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/edit/EditPluginTest.ts
@@ -162,7 +162,7 @@ describe('EditPlugin', () => {
 
         it('Enter, normal enter enabled', () => {
             isExperimentalFeatureEnabledSpy.and.callFake(
-                (featureName: string) => featureName == 'PersistCache'
+                (featureName: string) => featureName == 'HandleEnterKey'
             );
             plugin = new EditPlugin();
             const rawEvent = { which: 13, key: 'Enter' } as any;

diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts
@@ -430,4 +430,61 @@ describe('ImageEditPlugin', () => {
         expect(formatContentModelSpy).toHaveBeenCalledTimes(3);
         plugin.dispose();
     });
+
+    it('flip setEditorStyle', () => {
+        const model: ContentModelDocument = {
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    segments: [
+                        {
+                            segmentType: 'Image',
+                            src: 'test',
+                            format: {
+                                fontFamily: 'Calibri',
+                                fontSize: '11pt',
+                                textColor: 'rgb(0, 0, 0)',
+                                id: 'image_0',
+                                maxWidth: '1800px',
+                            },
+                            dataset: {},
+                            isSelectedAsImageSelection: true,
+                            isSelected: true,
+                        },
+                    ],
+                    format: {},
+                    segmentFormat: {
+                        fontFamily: 'Calibri',
+                        fontSize: '11pt',
+                        textColor: 'rgb(0, 0, 0)',
+                    },
+                },
+            ],
+            format: {
+                fontFamily: 'Calibri',
+                fontSize: '11pt',
+                textColor: '#000000',
+            },
+        };
+        const plugin = new ImageEditPlugin();
+        const editor = initEditor('image_edit', [plugin], model);
+        spyOn(editor, 'setEditorStyle').and.callThrough();
+
+        plugin.initialize(editor);
+        plugin.flipImage('horizontal');
+        plugin.dispose();
+
+        expect(editor.setEditorStyle).toHaveBeenCalledWith(
+            'imageEdit',
+            'outline-style:none!important;',
+            ['span:has(>img#image_0)']
+        );
+        expect(editor.setEditorStyle).toHaveBeenCalledWith(
+            'imageEditCaretColor',
+            'caret-color: transparent;'
+        );
+        expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEdit', null);
+        expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEditCaretColor', null);
+    });
 });
diff --git a/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts b/packages/roosterjs-content-model-types/lib/editor/ExperimentalFeature.ts
@@ -12,4 +12,8 @@ export type ExperimentalFeature =
     /**
      * Workaround for the Legacy Image Edit
      */
-    | 'LegacyImageSelection';
+    | 'LegacyImageSelection'
+    /**
+     * Use Content Model handle ENTER key
+     */
+    | 'HandleEnterKey';