Add option to configure the default paste type (#2457)

* init * Add tests * Fix build
microsoft · Feb 29, 2024 · 2397f7b · 2397f7b
1 parent e9ae3a3
commit 2397f7b
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 5 deletions.
diff --git a/packages-content-model/roosterjs-content-model-core/lib/corePlugin/CopyPastePlugin.ts b/packages-content-model/roosterjs-content-model-core/lib/corePlugin/CopyPastePlugin.ts
@@ -48,6 +48,7 @@ class CopyPastePlugin implements PluginWithState<CopyPastePluginState> {
         this.state = {
             allowedCustomPasteType: option.allowedCustomPasteType || [],
             tempDiv: null,
+            defaultPasteType: option.defaultPasteType,
         };
     }
 
@@ -199,7 +200,7 @@ class CopyPastePlugin implements PluginWithState<CopyPastePluginState> {
                     this.state.allowedCustomPasteType
                 ).then((clipboardData: ClipboardData) => {
                     if (!editor.isDisposed()) {
-                        editor.pasteFromClipboard(clipboardData);
+                        editor.pasteFromClipboard(clipboardData, this.state.defaultPasteType);
                     }
                 });
             }

diff --git a/packages-content-model/roosterjs-content-model-core/test/corePlugin/CopyPastePluginTest.ts b/packages-content-model/roosterjs-content-model-core/test/corePlugin/CopyPastePluginTest.ts
@@ -19,6 +19,7 @@ import {
     CopyPastePluginState,
     PluginWithState,
     DarkColorHandler,
+    PasteType,
 } from 'roosterjs-content-model-types';
 import {
     adjustSelectionForCopyCut,
@@ -42,18 +43,21 @@ describe('CopyPastePlugin.Ctor', () => {
         expect(state).toEqual({
             allowedCustomPasteType: [],
             tempDiv: null,
+            defaultPasteType: undefined,
         });
     });
 
     it('Ctor with options', () => {
         const plugin = createCopyPastePlugin({
             allowedCustomPasteType,
+            defaultPasteType: 'mergeFormat',
         });
         const state = plugin.getState();
 
         expect(state).toEqual({
             allowedCustomPasteType: allowedCustomPasteType,
             tempDiv: null,
+            defaultPasteType: 'mergeFormat',
         });
     });
 });
@@ -145,8 +149,8 @@ describe('CopyPastePlugin |', () => {
             isDarkMode: () => {
                 return false;
             },
-            pasteFromClipboard: (ar1: any) => {
-                pasteSpy(ar1);
+            pasteFromClipboard: (ar1: any, pasteType?: PasteType) => {
+                pasteSpy(ar1, pasteType);
             },
             getColorManager: () => mockedDarkColorHandler,
             isDisposed,
@@ -552,7 +556,7 @@ describe('CopyPastePlugin |', () => {
 
             domEvents.paste.beforeDispatch?.(clipboardEvent);
 
-            expect(pasteSpy).toHaveBeenCalledWith(clipboardData);
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, undefined);
             expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
                 Array.from(clipboardEvent.clipboardData!.items),
                 allowedCustomPasteType
@@ -581,7 +585,127 @@ describe('CopyPastePlugin |', () => {
 
             domEvents.paste.beforeDispatch?.(clipboardEvent);
 
-            expect(pasteSpy).toHaveBeenCalledWith(clipboardData);
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, undefined);
+            expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
+                Array.from(clipboardEvent.clipboardData!.items),
+                allowedCustomPasteType
+            );
+            expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('Handle with defaultPasteType mergePaste', () => {
+            const preventDefaultSpy = jasmine.createSpy('preventDefaultPaste');
+            plugin.getState().defaultPasteType = 'mergeFormat';
+            let clipboardEvent = <ClipboardEvent>{
+                clipboardData: <DataTransfer>(<any>{
+                    items: [<DataTransferItem>{}],
+                }),
+                preventDefault() {
+                    preventDefaultSpy();
+                },
+            };
+            spyOn(extractClipboardItemsFile, 'extractClipboardItems').and.returnValue(<
+                Promise<ClipboardData>
+            >{
+                then: (cb: (value: ClipboardData) => void | PromiseLike<void>) => {
+                    cb(clipboardData);
+                },
+            });
+            isDisposed.and.returnValue(false);
+
+            domEvents.paste.beforeDispatch?.(clipboardEvent);
+
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, 'mergeFormat');
+            expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
+                Array.from(clipboardEvent.clipboardData!.items),
+                allowedCustomPasteType
+            );
+            expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('Handle with defaultPasteType asImage', () => {
+            const preventDefaultSpy = jasmine.createSpy('preventDefaultPaste');
+            plugin.getState().defaultPasteType = 'asImage';
+            let clipboardEvent = <ClipboardEvent>{
+                clipboardData: <DataTransfer>(<any>{
+                    items: [<DataTransferItem>{}],
+                }),
+                preventDefault() {
+                    preventDefaultSpy();
+                },
+            };
+            spyOn(extractClipboardItemsFile, 'extractClipboardItems').and.returnValue(<
+                Promise<ClipboardData>
+            >{
+                then: (cb: (value: ClipboardData) => void | PromiseLike<void>) => {
+                    cb(clipboardData);
+                },
+            });
+            isDisposed.and.returnValue(false);
+
+            domEvents.paste.beforeDispatch?.(clipboardEvent);
+
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, 'asImage');
+            expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
+                Array.from(clipboardEvent.clipboardData!.items),
+                allowedCustomPasteType
+            );
+            expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('Handle with defaultPasteType asPlainText', () => {
+            const preventDefaultSpy = jasmine.createSpy('preventDefaultPaste');
+            plugin.getState().defaultPasteType = 'asPlainText';
+            let clipboardEvent = <ClipboardEvent>{
+                clipboardData: <DataTransfer>(<any>{
+                    items: [<DataTransferItem>{}],
+                }),
+                preventDefault() {
+                    preventDefaultSpy();
+                },
+            };
+            spyOn(extractClipboardItemsFile, 'extractClipboardItems').and.returnValue(<
+                Promise<ClipboardData>
+            >{
+                then: (cb: (value: ClipboardData) => void | PromiseLike<void>) => {
+                    cb(clipboardData);
+                },
+            });
+            isDisposed.and.returnValue(false);
+
+            domEvents.paste.beforeDispatch?.(clipboardEvent);
+
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, 'asPlainText');
+            expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
+                Array.from(clipboardEvent.clipboardData!.items),
+                allowedCustomPasteType
+            );
+            expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('Handle with defaultPasteType asPlainText', () => {
+            const preventDefaultSpy = jasmine.createSpy('preventDefaultPaste');
+            plugin.getState().defaultPasteType = 'normal';
+            let clipboardEvent = <ClipboardEvent>{
+                clipboardData: <DataTransfer>(<any>{
+                    items: [<DataTransferItem>{}],
+                }),
+                preventDefault() {
+                    preventDefaultSpy();
+                },
+            };
+            spyOn(extractClipboardItemsFile, 'extractClipboardItems').and.returnValue(<
+                Promise<ClipboardData>
+            >{
+                then: (cb: (value: ClipboardData) => void | PromiseLike<void>) => {
+                    cb(clipboardData);
+                },
+            });
+            isDisposed.and.returnValue(false);
+
+            domEvents.paste.beforeDispatch?.(clipboardEvent);
+
+            expect(pasteSpy).toHaveBeenCalledWith(clipboardData, 'normal');
             expect(extractClipboardItemsFile.extractClipboardItems).toHaveBeenCalledWith(
                 Array.from(clipboardEvent.clipboardData!.items),
                 allowedCustomPasteType

diff --git a/packages-content-model/roosterjs-content-model-types/lib/editor/EditorOptions.ts b/packages-content-model/roosterjs-content-model-types/lib/editor/EditorOptions.ts
@@ -1,3 +1,4 @@
+import type { PasteType } from '../enum/PasteType';
 import type { Colors, ColorTransformFunction } from '../context/DarkColorHandler';
 import type { EditorPlugin } from './EditorPlugin';
 import type { ContentModelSegmentFormat } from '../format/ContentModelSegmentFormat';
@@ -109,4 +110,9 @@ export interface EditorOptions {
      * @param error The error object we got
      */
     disposeErrorHandler?: (plugin: EditorPlugin, error: Error) => void;
+
+    /**
+     * Default paste type. By default will use the normal (as-is) paste type.
+     */
+    defaultPasteType?: PasteType;
 }
diff --git a/packages-content-model/roosterjs-content-model-types/lib/pluginState/CopyPastePluginState.ts b/packages-content-model/roosterjs-content-model-types/lib/pluginState/CopyPastePluginState.ts
@@ -1,3 +1,5 @@
+import type { PasteType } from '../enum/PasteType';
+
 /**
  * The state object for CopyPastePlugin
  */
@@ -12,4 +14,9 @@ export interface CopyPastePluginState {
      * A temporary DIV element used for cut/copy content
      */
     tempDiv: HTMLDivElement | null;
+
+    /**
+     * Default paste type. By default will use the normal (as-is) paste type.
+     */
+    defaultPasteType?: PasteType;
 }