Merge branch 'master' into u/jisong/2859

microsoft · Dec 2, 2024 · 7918a8c · 7918a8c
2 parents f46c11c + 0d6f734
commit 7918a8c
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 16 deletions.
diff --git a/...ontent-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts b/...ontent-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts
@@ -6,6 +6,7 @@ import { getRootComputedStyleForContext } from '../../coreApi/createEditorContex
 import { pasteBlockEntityParser } from '../../override/pasteCopyBlockEntityParser';
 import { pasteDisplayFormatParser } from '../../override/pasteDisplayFormatParser';
 import { pasteTextProcessor } from '../../override/pasteTextProcessor';
+import { pasteWhiteSpaceFormatParser } from '../../override/pasteWhiteSpaceFormatParser';
 import type {
     ContentModelSegmentFormat,
     DomToModelContext,
@@ -52,6 +53,7 @@ export function createDomToModelContextForSanitizing(
             },
             formatParserOverride: {
                 display: pasteDisplayFormatParser,
+                whiteSpace: pasteWhiteSpaceFormatParser,
             },
             additionalFormatParsers: {
                 container: [containerSizeFormatParser],

diff --git a/packages/roosterjs-content-model-core/lib/override/pasteWhiteSpaceFormatParser.ts b/packages/roosterjs-content-model-core/lib/override/pasteWhiteSpaceFormatParser.ts
@@ -0,0 +1,17 @@
+import type { FormatParser, WhiteSpaceFormat } from 'roosterjs-content-model-types';
+
+const WhiteSpacePre = 'pre';
+
+/**
+ * @internal
+ */
+export const pasteWhiteSpaceFormatParser: FormatParser<WhiteSpaceFormat> = (
+    format,
+    element,
+    context,
+    defaultStyle
+) => {
+    if (element.style.whiteSpace != WhiteSpacePre) {
+        context.defaultFormatParsers.whiteSpace?.(format, element, context, defaultStyle);
+    }
+};
diff --git a/...t-model-core/test/command/createModelFromHtml/createDomToModelContextForSanitizingTest.ts b/...t-model-core/test/command/createModelFromHtml/createDomToModelContextForSanitizingTest.ts
@@ -7,6 +7,7 @@ import { DomToModelOptionForSanitizing } from 'roosterjs-content-model-types';
 import { pasteBlockEntityParser } from '../../../lib/override/pasteCopyBlockEntityParser';
 import { pasteDisplayFormatParser } from '../../../lib/override/pasteDisplayFormatParser';
 import { pasteTextProcessor } from '../../../lib/override/pasteTextProcessor';
+import { pasteWhiteSpaceFormatParser } from '../../../lib/override/pasteWhiteSpaceFormatParser';
 
 describe('createDomToModelContextForSanitizing', () => {
     const mockedPasteGeneralProcessor = 'GENERALPROCESSOR' as any;
@@ -61,6 +62,7 @@ describe('createDomToModelContextForSanitizing', () => {
                 },
                 formatParserOverride: {
                     display: pasteDisplayFormatParser,
+                    whiteSpace: pasteWhiteSpaceFormatParser,
                 },
                 additionalFormatParsers: {
                     container: [containerSizeFormatParser],
@@ -106,6 +108,7 @@ describe('createDomToModelContextForSanitizing', () => {
                 },
                 formatParserOverride: {
                     display: pasteDisplayFormatParser,
+                    whiteSpace: pasteWhiteSpaceFormatParser,
                 },
                 additionalFormatParsers: {
                     container: [containerSizeFormatParser],

diff --git a/packages/roosterjs-content-model-core/test/overrides/pasteWhiteSpaceFormatParserTest.ts b/packages/roosterjs-content-model-core/test/overrides/pasteWhiteSpaceFormatParserTest.ts
@@ -0,0 +1,39 @@
+import { pasteWhiteSpaceFormatParser } from '../../lib/override/pasteWhiteSpaceFormatParser';
+import { WhiteSpaceFormat } from 'roosterjs-content-model-types/lib';
+
+describe('pasteWhiteSpaceFormatParser', () => {
+    let format: WhiteSpaceFormat;
+    let element: HTMLElement;
+    let context: any;
+    let defaultStyle: any;
+    let defaultParserSpy: jasmine.Spy;
+
+    beforeEach(() => {
+        format = {};
+        element = document.createElement('div');
+        defaultParserSpy = jasmine.createSpy();
+        context = {
+            defaultFormatParsers: {
+                whiteSpace: defaultParserSpy,
+            },
+        };
+        defaultStyle = {};
+    });
+
+    it('should call default whiteSpace parser when element.style.whiteSpace is not "pre"', () => {
+        element.style.whiteSpace = 'normal';
+        pasteWhiteSpaceFormatParser(format, element, context, defaultStyle);
+        expect(context.defaultFormatParsers.whiteSpace).toHaveBeenCalledWith(
+            format,
+            element,
+            context,
+            defaultStyle
+        );
+    });
+
+    it('should not call default whiteSpace parser when element.style.whiteSpace is "pre"', () => {
+        element.style.whiteSpace = 'pre';
+        pasteWhiteSpaceFormatParser(format, element, context, defaultStyle);
+        expect(context.defaultFormatParsers.whiteSpace).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -121,6 +121,16 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                     }
                 },
             },
+            dragend: {
+                beforeDispatch: ev => {
+                    if (this.editor) {
+                        const target = ev.target as Node;
+                        if (this.isImageSelection(target) && target.id.includes(DRAG_ID)) {
+                            target.id = target.id.replace(DRAG_ID, '').trim();
+                        }
+                    }
+                },
+            },
         });
     }
 

diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts
@@ -11,6 +11,8 @@ import type {
 import type { ImageEditOptions } from '../types/ImageEditOptions';
 import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
 
+const IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';
+
 /**
  * @internal
  */
@@ -69,6 +71,7 @@ const createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {
     const shadowRoot = imageSpan.attachShadow({
         mode: 'open',
     });
+    imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
     wrapper.style.verticalAlign = 'bottom';
     shadowRoot.appendChild(wrapper);
     return imageSpan;

diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts
@@ -9,6 +9,7 @@ import { initEditor } from '../TestHelper';
 import {
     ContentModelDocument,
     ContentModelFormatter,
+    DOMEventRecord,
     EditorEnvironment,
     FormatContentModelOptions,
     IEditor,
@@ -64,7 +65,6 @@ describe('ImageEditPlugin', () => {
     };
     let editor: IEditor;
     let mockedEnvironment: EditorEnvironment;
-    let attachDomEventSpy: jasmine.Spy;
     let getDOMSelectionSpy: jasmine.Spy;
     let formatContentModelSpy: jasmine.Spy;
     let focusSpy: jasmine.Spy;
@@ -76,8 +76,9 @@ describe('ImageEditPlugin', () => {
     let setEditorStyleSpy: jasmine.Spy;
     let triggerEventSpy: jasmine.Spy;
     let getAttributeSpy: jasmine.Spy;
+    let domEvents: Record<string, DOMEventRecord> = {};
+
     beforeEach(() => {
-        attachDomEventSpy = jasmine.createSpy('attachDomEvent');
         getDOMSelectionSpy = jasmine.createSpy('getDOMSelection');
         mockedEnvironment = {
             isSafari: false,
@@ -124,7 +125,9 @@ describe('ImageEditPlugin', () => {
         });
         editor = {
             getEnvironment: () => mockedEnvironment,
-            attachDomEvent: attachDomEventSpy,
+            attachDomEvent: (eventMap: Record<string, DOMEventRecord>) => {
+                domEvents = eventMap;
+            },
             getDOMSelection: getDOMSelectionSpy,
             formatContentModel: formatContentModelSpy,
             focus: focusSpy,
@@ -560,6 +563,35 @@ describe('ImageEditPlugin', () => {
         plugin.dispose();
     });
 
+    it('dragImage only', () => {
+        const plugin = new ImageEditPlugin();
+        plugin.initialize(editor);
+        const draggedImage = document.createElement('img');
+        draggedImage.id = 'image_0';
+        triggerEventSpy.and.callThrough();
+        domEvents.dragstart?.beforeDispatch?.({
+            target: draggedImage,
+        } as any);
+        expect(draggedImage.id).toBe('image_0_dragging');
+        plugin.dispose();
+    });
+
+    it('dragImage at same place', () => {
+        const plugin = new ImageEditPlugin();
+        plugin.initialize(editor);
+        const draggedImage = document.createElement('img');
+        draggedImage.id = 'image_0';
+        triggerEventSpy.and.callThrough();
+        domEvents.dragstart?.beforeDispatch?.({
+            target: draggedImage,
+        } as any);
+        domEvents.dragend?.beforeDispatch?.({
+            target: draggedImage,
+        } as any);
+        expect(draggedImage.id).toBe('image_0');
+        plugin.dispose();
+    });
+
     it('flip setEditorStyle', () => {
         const model: ContentModelDocument = {
             blockGroupType: 'Document',

diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/utils/createImageWrapperTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/utils/createImageWrapperTest.ts
@@ -14,22 +14,13 @@ describe('createImageWrapper', () => {
     const editor = initEditor('editor_test');
     function runTest(
         image: HTMLImageElement,
-        imageSpan: HTMLSpanElement,
         options: ImageEditOptions,
         editInfo: ImageMetadataFormat,
         htmlOptions: ImageHtmlOptions,
         operation: ImageEditOperation[],
         expectResult: WrapperElements
     ) {
-        const result = createImageWrapper(
-            editor,
-            image,
-
-            options,
-            editInfo,
-            htmlOptions,
-            operation
-        );
+        const result = createImageWrapper(editor, image, options, editInfo, htmlOptions, operation);
         expect(JSON.stringify(result)).toEqual(JSON.stringify(expectResult));
     }
 
@@ -69,7 +60,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['resize'], {
+        runTest(image, options, editInfo, htmlOptions, ['resize'], {
             wrapper,
             shadowSpan,
             imageClone,
@@ -116,7 +107,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['rotate'], {
+        runTest(image, options, editInfo, htmlOptions, ['rotate'], {
             wrapper: wrapper,
             shadowSpan: shadowSpan,
             imageClone: imageClone,
@@ -171,7 +162,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['crop'], {
+        runTest(image, options, editInfo, htmlOptions, ['crop'], {
             wrapper,
             shadowSpan,
             imageClone,
@@ -202,6 +193,7 @@ const createShadowSpan = (wrapper: HTMLSpanElement) => {
     const shadowRoot = span.attachShadow({
         mode: 'open',
     });
+    span.id = 'IMAGE_EDIT_SHADOW_ROOT';
     wrapper.style.verticalAlign = 'bottom';
     shadowRoot.append(wrapper);
     return span;