fix(Clipboard): correct handling of pasting into code (#678)

Author: d3m1d0v

src/extensions/behavior/Clipboard/code.ts

@@ -1,5 +1,10 @@
-import type {Mark} from 'prosemirror-model';
-import type {EditorState} from 'prosemirror-state';
+import dd from 'ts-dedent';
+
+import {getLoggerFromState} from '#core';
+import type {Mark} from '#pm/model';
+import {type EditorState, Plugin} from '#pm/state';
+
+import {DataTransferType, isFilesOnly, isIosSafariShare} from './utils';
 
 const isCodeMark = (mark: Mark) => mark.type.spec.code;
 
@@ -23,3 +28,63 @@ export function isInsideInlineCode(state: EditorState): boolean {
     }
     return fromHasCodeMark;
 }
+
+/**
+ * This plugin handles paste into any type of code: code block or code mark.
+ * If selection is inside code, it always prevents execution of all next paste handlers.
+ * It takes a value from following clipboard data types: uri-list, files or text data.
+ */
+export const handlePasteIntoCodePlugin = () => {
+    return new Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, event) {
+                    if (!event.clipboardData) return false;
+                    const {clipboardData} = event;
+
+                    const codeType = isInsideCode(view.state);
+                    if (!codeType) return false;
+
+                    let text: string;
+                    let dataFormat: string;
+
+                    if (isIosSafariShare(clipboardData)) {
+                        dataFormat = DataTransferType.UriList;
+                        text = clipboardData.getData(DataTransferType.UriList);
+                    } else if (isFilesOnly(clipboardData)) {
+                        dataFormat = DataTransferType.Files;
+                        text = Array.from(clipboardData.files)
+                            .map((file) => file.name)
+                            .join(' ');
+                    } else {
+                        dataFormat = DataTransferType.Text;
+                        text = dd(clipboardData.getData(DataTransferType.Text));
+                    }
+
+                    if (codeType === 'inline') {
+                        text = text.replaceAll('\n', '↵');
+                    }
+
+                    const {state, dispatch} = view;
+
+                    getLoggerFromState(state).event({
+                        codeType,
+                        dataFormat,
+                        domEvent: 'paste',
+                        event: 'paste-into-code',
+                        dataTypes: clipboardData.types,
+                    });
+
+                    event.preventDefault();
+                    dispatch(
+                        state.tr
+                            .replaceSelectionWith(state.schema.text(text), true)
+                            .scrollIntoView(),
+                    );
+
+                    return true;
+                },
+            },
+        },
+    });
+};

src/extensions/behavior/Clipboard/index.ts

@@ -1,6 +1,7 @@
-import type {ExtensionAuto} from '../../../core';
+import type {ExtensionAuto} from '#core';
 
 import {type ClipboardPluginOptions, clipboard} from './clipboard';
+import {handlePasteIntoCodePlugin} from './code';
 import * as clipboardUtils from './utils';
 
 export {clipboardUtils};
@@ -22,4 +23,6 @@ export const Clipboard: ExtensionAuto<ClipboardOptions> = (builder, opts) => {
             }),
         builder.Priority.VeryLow,
     );
+
+    builder.addPlugin(handlePasteIntoCodePlugin, builder.Priority.Highest);
 };