Allow browser's default paste behavior when pasting from Office Andro…

…id (#2863) * Implement shouldPreventDefaultPaste function * fix build * fix build
microsoft · Nov 7, 2024 · f753bec · f753bec
1 parent 53a7c76
commit f753bec
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/CopyPastePlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/copyPaste/CopyPastePlugin.ts
@@ -198,10 +198,10 @@ class CopyPastePlugin implements PluginWithState<CopyPastePluginState> {
 
             const dataTransfer = event.clipboardData;
 
-            if (dataTransfer?.items) {
+            if (shouldPreventDefaultPaste(dataTransfer, editor)) {
                 event.preventDefault();
                 extractClipboardItems(
-                    toArray(dataTransfer.items),
+                    toArray(dataTransfer!.items),
                     this.state.allowedCustomPasteType
                 ).then((clipboardData: ClipboardData) => {
                     if (!editor.isDisposed()) {
@@ -339,6 +339,32 @@ export function preprocessTable(table: ContentModelTable) {
         : [];
 }
 
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export function shouldPreventDefaultPaste(
+    dataTransfer: DataTransfer | null,
+    editor: IEditor
+): boolean {
+    if (!dataTransfer?.items) {
+        return false;
+    }
+
+    if (!editor.getEnvironment().isAndroid) {
+        return true;
+    }
+
+    // On Android, the clipboard data from Office apps is a file, which can't be loaded
+    // so we have to allow the default browser behavior
+    return toArray(dataTransfer.items).some(item => {
+        const { type } = item;
+        const isNormalFile = item.kind === 'file' && type !== '';
+        const isText = type.indexOf('text/') === 0;
+        return isNormalFile || isText;
+    });
+}
+
 /**
  * @internal
  * Create a new instance of CopyPastePlugin

diff --git a/packages/roosterjs-content-model-core/test/corePlugin/copyPaste/CopyPastePluginTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/copyPaste/CopyPastePluginTest.ts
@@ -27,6 +27,7 @@ import {
     createCopyPastePlugin,
     onNodeCreated,
     preprocessTable,
+    shouldPreventDefaultPaste,
 } from '../../../lib/corePlugin/copyPaste/CopyPastePlugin';
 
 const modelValue = {
@@ -1390,4 +1391,49 @@ describe('CopyPastePlugin |', () => {
             });
         });
     });
+
+    describe('shouldPreventDefaultPaste', () => {
+        it('should not prevent default for empty clipboard data', () => {
+            const clipboardData = <DataTransfer>(<any>{
+                items: null
+            });
+            const editor = <IEditor>(<any>{});
+            expect(shouldPreventDefaultPaste(clipboardData, editor)).toBeFalse();
+            expect(shouldPreventDefaultPaste(null, editor)).toBeFalse();
+        });
+
+        it('should prevent default on non-Android platforms', () => {
+            const clipboardData = <DataTransfer>(<any>{
+                items: [{ type: '', kind: 'file' }]
+            });
+            const editor = <IEditor>(<any>{
+                getEnvironment: () => ({ isAndroid: false })
+            });
+            expect(shouldPreventDefaultPaste(clipboardData, editor)).toBeTrue();
+        });
+
+        it('should prevent default for text or image clipboard data on Android platform', () => {
+            const textClipboardData = <DataTransfer>(<any>{
+                items: [{ type: 'text/plain', kind: 'string' }]
+            });
+            const imageClipboardData = <DataTransfer>(<any>{
+                items: [{ type: 'image/png', kind: 'file' }]
+            });
+            const editor = <IEditor>(<any>{
+                getEnvironment: () => ({ isAndroid: true })
+            });
+            expect(shouldPreventDefaultPaste(textClipboardData, editor)).toBeTrue();
+            expect(shouldPreventDefaultPaste(imageClipboardData, editor)).toBeTrue();
+        });
+
+        it('should not prevent default for file-only clipboard data on Android platform', () => {
+            const clipboardData = <DataTransfer>(<any>{
+                items: [{ type: '', kind: 'file' }]
+            });
+            const editor = <IEditor>(<any>{
+                getEnvironment: () => ({ isAndroid: true })
+            });
+            expect(shouldPreventDefaultPaste(clipboardData, editor)).toBeFalse();
+        });
+    });
 });