feat: support uploading files dragged and dropped from device (#214)

d3m1d0v · web-flow · commit 3367f4b83143 · 2024-04-05T13:05:11.000+03:00
diff --git a/src/extensions/behavior/FilePaste/index.ts b/src/extensions/behavior/FilePaste/index.ts
@@ -1,30 +1,60 @@
-import {Fragment, Node, Slice} from 'prosemirror-model';
+import {Fragment, Node, Schema, Slice} from 'prosemirror-model';
 import {Plugin} from 'prosemirror-state';
+import {dropPoint} from 'prosemirror-transform';
 
-import {ExtensionAuto} from '../../../core';
+import type {ExtensionAuto} from '../../../core';
 import {pType} from '../../../extensions/base';
 import {isFilesOnly} from '../Clipboard/utils';
 
-// Custom handler of pasted files to prevent insert a file preview in base64-format into editor's content
+// Custom handler of pasted (or dropped) files to prevent insert a file preview in base64-format into editor's content (or open file in browser)
 export const FilePaste: ExtensionAuto = (builder) => {
-    builder.addPlugin(({schema}) => {
+    builder.addPlugin(() => {
         return new Plugin({
             props: {
                 handlePaste(view, event) {
-                    const {clipboardData} = event;
-                    if (!clipboardData || !isFilesOnly(clipboardData)) return false;
-                    const nodes: Node[] = [];
-                    for (const file of Array.from(clipboardData.files)) {
-                        nodes.push(pType(schema).create(null, schema.text(file.name)));
-                    }
+                    const files = getFiles(event.clipboardData);
+                    if (!files) return false;
+
                     view.dispatch(
                         view.state.tr
-                            .replaceSelection(new Slice(Fragment.from(nodes), 0, 0))
+                            .replaceSelection(createFilesSlice(view.state.schema, files))
                             .scrollIntoView(),
                     );
+
+                    return true;
+                },
+                handleDrop(view, event) {
+                    if (view.dragging) return false;
+
+                    const files = getFiles(event.dataTransfer);
+                    if (!files) return false;
+
+                    const slice = createFilesSlice(view.state.schema, files);
+
+                    const dropPos =
+                        view.posAtCoords({left: event.clientX, top: event.clientY})?.pos ?? -1;
+                    if (dropPos === -1) return false;
+
+                    const posToInsert = dropPoint(view.state.doc, dropPos, slice);
+                    if (posToInsert === null) return false;
+
+                    view.dispatch(view.state.tr.insert(posToInsert, slice.content));
                     return true;
                 },
             },
         });
     }, builder.Priority.Lowest);
 };
+
+function getFiles(dataTransfer: DataTransfer | null) {
+    if (!dataTransfer || !isFilesOnly(dataTransfer)) return null;
+    return Array.from(dataTransfer.files);
+}
+
+function createFilesSlice(schema: Schema, files: File[]): Slice {
+    const nodes: Node[] = [];
+    for (const file of files) {
+        nodes.push(pType(schema).create(null, schema.text(file.name)));
+    }
+    return new Slice(Fragment.from(nodes), 0, 0);
+}
diff --git a/src/extensions/behavior/ImgSizeAdditions/ImagePaste/index.ts b/src/extensions/behavior/ImgSizeAdditions/ImagePaste/index.ts
@@ -1,9 +1,10 @@
 import {decode as base64ToBuffer} from 'base64-arraybuffer';
-import {Node, Slice} from 'prosemirror-model';
+import {Fragment, Node, Schema, Slice} from 'prosemirror-model';
 import {Plugin} from 'prosemirror-state';
+import {dropPoint} from 'prosemirror-transform';
 
 import {ExtensionAuto} from '../../../../core';
-import {ImgSizeAttr} from '../../../../extensions/specs';
+import {ImageAttr, ImgSizeAttr, imageType} from '../../../../extensions/specs';
 import {isFunction} from '../../../../lodash';
 import {FileUploadHandler} from '../../../../utils/upload';
 import {clipboardUtils} from '../../Clipboard';
@@ -41,6 +42,36 @@ export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {
                             }
                             return false;
                         },
+                        drop(view, e) {
+                            // handle drop images from device
+                            if (view.dragging) return false;
+
+                            const files = getPastedImages(e.dataTransfer);
+                            if (!files) return false;
+
+                            const dropPos =
+                                view.posAtCoords({left: e.clientX, top: e.clientY})?.pos ?? -1;
+                            if (dropPos === -1) return false;
+
+                            const posToInsert = dropPoint(
+                                view.state.doc,
+                                dropPos,
+                                createFakeImageSlice(view.state.schema),
+                            );
+
+                            if (posToInsert !== null) {
+                                new ImagesUploadProcess(
+                                    view,
+                                    files,
+                                    opts.imageUploadHandler,
+                                    posToInsert,
+                                    opts,
+                                ).run();
+                            }
+
+                            e.preventDefault();
+                            return true;
+                        },
                     },
                     handlePaste(view, _event, slice) {
                         const node = sliceSingleNode(slice);
@@ -73,6 +104,19 @@ function getPastedImages(data: DataTransfer | null): File[] | null {
     return files.every(isImageFile) ? files : null;
 }
 
+function createFakeImageSlice(schema: Schema): Slice {
+    return new Slice(
+        Fragment.from(
+            imageType(schema).create({
+                [ImageAttr.Src]: 'fake',
+                [ImageAttr.Title]: 'image',
+            }),
+        ),
+        0,
+        0,
+    );
+}
+
 // copied from prosemirror-view input.ts
 function sliceSingleNode(slice: Slice): Node | null {
     return slice.openStart === 0 && slice.openEnd === 0 && slice.content.childCount === 1
diff --git a/src/extensions/behavior/YfmFileAdditions/YfmFilePaste/index.ts b/src/extensions/behavior/YfmFileAdditions/YfmFilePaste/index.ts
@@ -1,9 +1,11 @@
-import {Node} from 'prosemirror-model';
+import {Fragment, Node, Schema, Slice} from 'prosemirror-model';
 import {Plugin} from 'prosemirror-state';
+import {dropPoint} from 'prosemirror-transform';
 import {EditorView} from 'prosemirror-view';
 
 import {ExtensionAuto} from '../../../../core';
 import {imageType} from '../../../../extensions/markdown';
+import {fileType} from '../../../../extensions/yfm/YfmFile';
 import {isFunction} from '../../../../lodash';
 import {FileUploadHandler, UploadSuccessItem} from '../../../../utils/upload';
 import {clipboardUtils} from '../../Clipboard';
@@ -40,6 +42,35 @@ export const YfmFilePaste: ExtensionAuto<YfmFilePasteOptions> = (builder, opts)
                             }
                             return false;
                         },
+                        drop(view, e) {
+                            // handle drop files from device
+                            if (view.dragging) return false;
+
+                            const files = getPastedFiles(e.dataTransfer);
+                            if (!files) return false;
+
+                            const dropPos =
+                                view.posAtCoords({left: e.clientX, top: e.clientY})?.pos ?? -1;
+                            if (dropPos === -1) return false;
+
+                            const posToInsert = dropPoint(
+                                view.state.doc,
+                                dropPos,
+                                createFakeFileSlice(view.state.schema),
+                            );
+
+                            if (posToInsert !== null) {
+                                new YfmFilesPasteUploadProcess(view, files, {
+                                    pos: posToInsert,
+                                    uploadHandler: opts.fileUploadHandler,
+                                    needToSetDimensionsForUploadedImages:
+                                        opts.needToSetDimensionsForUploadedImages,
+                                }).run();
+                            }
+
+                            e.preventDefault();
+                            return true;
+                        },
                     },
                 },
             }),
@@ -53,17 +84,34 @@ function getPastedFiles(data: DataTransfer | null): File[] | null {
     return Array.from(data.files);
 }
 
+function createFakeFileSlice(schema: Schema): Slice {
+    return new Slice(
+        Fragment.from(
+            fileType(schema).create({
+                href: 'fake',
+                download: 'file',
+            }),
+        ),
+        0,
+        0,
+    );
+}
+
 type YfmFilesPasteUploadProcessOptions = {
+    pos?: number;
     uploadHandler: FileUploadHandler;
     needToSetDimensionsForUploadedImages: boolean;
 };
 
 class YfmFilesPasteUploadProcess extends YfmFilesUploadProcessBase {
+    protected readonly pos?: number;
     protected readonly createImage?;
 
     constructor(view: EditorView, files: readonly File[], opts: YfmFilesPasteUploadProcessOptions) {
         super(view, files, opts.uploadHandler);
 
+        this.pos = opts.pos;
+
         const {schema} = this.view.state;
         if (imageType(schema)) {
             this.createImage = createImageNode(imageType(schema), {
@@ -73,7 +121,7 @@ class YfmFilesPasteUploadProcess extends YfmFilesUploadProcessBase {
     }
 
     protected getSkeletonInitPos(): number {
-        return this.view.state.tr.selection.from;
+        return this.pos ?? this.view.state.tr.selection.from;
     }
 
     protected async createPMNode(res: UploadSuccessItem): Promise<Node> {
