@milkdown/plugin-upload 5.2.1 → 5.3.3

package/README.md

@@ -14,7 +14,9 @@ import { upload } from '@milkdown/plugin-upload';
 Editor.make().use(commonmark).use(upload).create();
 ```
 
-# Setup Uploader
+# Config
+
+## Setup Uploader
 
 > By default, this plugin will transfer image to base64 and ignore other file types.
 >
@@ -66,6 +68,10 @@ Editor.make()
     .create();
 ```
 
+## enableHtmlFileUploader
+
+When paste files from html (for example copy images by right click context menu), this option will make the plugin to upload the image copied instead of using the original link.
+
 # License
 
 Milkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).

package/lib/index.d.ts

@@ -1,7 +1 @@
-import { AtomList } from '@milkdown/utils';
-export type { Uploader } from './upload';
-export { uploadPlugin } from './upload';
-export declare const upload: AtomList<import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, {
-    uploader: import("./upload").Uploader;
-}>> & import("@milkdown/core").MilkdownPlugin>;
-//# sourceMappingURL=index.d.ts.map
+export * from './src/index'

package/lib/index.es.js

@@ -69,31 +69,44 @@ const uploadPlugin = createPlugin((_, options) => {
         const found = decorations.find(null, null, (spec) => spec.id === id);
         return found.length ? found[0].from : -1;
       };
+      const handleUpload = (view, event, files) => {
+        var _a2, _b;
+        if (!files || files.length <= 0) {
+          return false;
+        }
+        const id = Symbol("upload symbol");
+        const { tr } = view.state;
+        const insertPos = event instanceof DragEvent ? (_b = (_a2 = view.posAtCoords({ left: event.clientX, top: event.clientY })) == null ? void 0 : _a2.pos) != null ? _b : tr.selection.from : tr.selection.from;
+        view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));
+        uploader(files, schema).then((fragment) => {
+          const pos = findPlaceholder(view.state, id);
+          if (pos < 0)
+            return;
+          view.dispatch(view.state.tr.replaceWith(pos, pos, fragment).setMeta(placeholderPlugin, { remove: { id } }));
+          return;
+        }).catch((e) => {
+          console.error(e);
+        });
+        return true;
+      };
       const uploadPlugin2 = new Plugin({
         props: {
-          handleDrop: (view, event) => {
-            var _a2, _b, _c;
-            if (!(event instanceof DragEvent)) {
+          handlePaste: (view, event) => {
+            var _a2, _b;
+            if (!(event instanceof ClipboardEvent)) {
               return false;
             }
-            const { files } = (_a2 = event.dataTransfer) != null ? _a2 : {};
-            if (!files || files.length <= 0) {
+            if (!(options == null ? void 0 : options.enableHtmlFileUploader) && ((_a2 = event.clipboardData) == null ? void 0 : _a2.getData("text/html"))) {
+              return false;
+            }
+            return handleUpload(view, event, (_b = event.clipboardData) == null ? void 0 : _b.files);
+          },
+          handleDrop: (view, event) => {
+            var _a2;
+            if (!(event instanceof DragEvent)) {
               return false;
             }
-            const id = Symbol("upload symbol");
-            const { tr } = view.state;
-            const insertPos = (_c = (_b = view.posAtCoords({ left: event.clientX, top: event.clientY })) == null ? void 0 : _b.pos) != null ? _c : tr.selection.from;
-            view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));
-            uploader(files, schema).then((fragment) => {
-              const pos = findPlaceholder(view.state, id);
-              if (pos < 0)
-                return;
-              view.dispatch(view.state.tr.replaceWith(pos, pos, fragment).setMeta(placeholderPlugin, { remove: { id } }));
-              return;
-            }).catch((e) => {
-              console.error(e);
-            });
-            return true;
+            return handleUpload(view, event, (_a2 = event.dataTransfer) == null ? void 0 : _a2.files);
           }
         }
       });

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/default-uploader.ts","../src/upload.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport type { Node } from '@milkdown/prose';\n\nimport type { Uploader } from './upload';\n\nconst readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> => {\n    return new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.addEventListener(\n            'load',\n            () => {\n                resolve({\n                    alt: file.name,\n                    src: reader.result as string,\n                });\n            },\n            false,\n        );\n        reader.readAsDataURL(file);\n    });\n};\n\nexport const defaultUploader: Uploader = async (files, schema) => {\n    const imgs: File[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (!file) {\n            continue;\n        }\n\n        if (!file.type.includes('image')) {\n            continue;\n        }\n\n        imgs.push(file);\n    }\n\n    const { image } = schema.nodes;\n\n    const data = await Promise.all(imgs.map((img) => readImageAsBase64(img)));\n\n    return data.map(({ alt, src }) => image.createAndFill({ src, alt }) as Node);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { schemaCtx, themeToolCtx } from '@milkdown/core';\nimport type { Fragment, Node, Schema } from '@milkdown/prose';\nimport { Decoration, DecorationSet, EditorState, Plugin } from '@milkdown/prose';\nimport { createPlugin } from '@milkdown/utils';\n\nimport { defaultUploader } from './default-uploader';\n\nexport type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;\ntype Spec = { id: symbol; pos: number };\n\nexport const uploadPlugin = createPlugin<string, { uploader: Uploader }>((_, options) => {\n    const uploader = options?.uploader ?? defaultUploader;\n\n    return {\n        prosePlugins: (_, ctx) => {\n            const schema = ctx.get(schemaCtx);\n\n            const placeholderPlugin = new Plugin({\n                state: {\n                    init() {\n                        return DecorationSet.empty;\n                    },\n                    apply(tr, set) {\n                        const _set = set.map(tr.mapping, tr.doc);\n                        const action = tr.getMeta(this);\n                        if (!action) {\n                            return _set;\n                        }\n                        if (action.add) {\n                            const widget = document.createElement('span');\n                            const { icon } = ctx.get(themeToolCtx).slots;\n                            widget.appendChild(icon('loading'));\n                            const decoration = Decoration.widget(action.add.pos, widget, { id: action.add.id });\n                            return _set.add(tr.doc, [decoration]);\n                        }\n                        if (action.remove) {\n                            return _set.remove(_set.find(null, null, (spec: Spec) => spec.id === action.remove.id));\n                        }\n                    },\n                },\n                props: {\n                    decorations(state) {\n                        return this.getState(state);\n                    },\n                },\n            });\n            const findPlaceholder = (state: EditorState, id: symbol): number => {\n                const decorations = placeholderPlugin.getState(state);\n                const found = decorations.find(null, null, (spec: Spec) => spec.id === id);\n                return found.length ? found[0].from : -1;\n            };\n            const uploadPlugin = new Plugin({\n                props: {\n                    handleDrop: (view, event) => {\n                        if (!(event instanceof DragEvent)) {\n                            return false;\n                        }\n                        const { files } = event.dataTransfer ?? {};\n                        if (!files || files.length <= 0) {\n                            return false;\n                        }\n                        const id = Symbol('upload symbol');\n                        const { tr } = view.state;\n                        const insertPos =\n                            view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? tr.selection.from;\n                        view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));\n\n                        uploader(files, schema)\n                            .then((fragment) => {\n                                const pos = findPlaceholder(view.state, id);\n                                if (pos < 0) return;\n\n                                view.dispatch(\n                                    view.state.tr\n                                        .replaceWith(pos, pos, fragment)\n                                        .setMeta(placeholderPlugin, { remove: { id } }),\n                                );\n                                return;\n                            })\n                            .catch((e) => {\n                                console.error(e);\n                            });\n                        return true;\n                    },\n                },\n            });\n            return [placeholderPlugin, uploadPlugin];\n        },\n    };\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList } from '@milkdown/utils';\n\nimport { uploadPlugin } from './upload';\n\nexport type { Uploader } from './upload';\nexport { uploadPlugin } from './upload';\n\nexport const upload = AtomList.create([uploadPlugin()]);\n"],"names":[],"mappings":";;;AAKA,MAAM,oBAAoB,CAAC,SAAsD;SACtE,IAAI,QAAQ,CAAC,YAAY;UACtB,SAAS,IAAI;WACZ,iBACH,QACA,MAAM;cACM;AAAA,QACJ,KAAK,KAAK;AAAA,QACV,KAAK,OAAO;AAAA;AAAA,OAGpB;WAEG,cAAc;AAAA;AAAA;MAIhB,kBAA4B,OAAO,OAAO,WAAW;QACxD,OAAe;WAEZ,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;UAC7B,OAAO,MAAM,KAAK;QACpB,CAAC,MAAM;;;QAIP,CAAC,KAAK,KAAK,SAAS,UAAU;;;SAI7B,KAAK;AAAA;QAGR,EAAE,UAAU,OAAO;QAEnB,OAAO,MAAM,QAAQ,IAAI,KAAK,IAAI,CAAC,QAAQ,kBAAkB;SAE5D,KAAK,IAAI,CAAC,EAAE,KAAK,UAAU,MAAM,cAAc,EAAE,KAAK;AAAA;MC/BpD,eAAe,aAA6C,CAAC,GAAG,YAAY;;QAC/E,WAAW,yCAAS,aAAT,YAAqB;SAE/B;AAAA,IACH,cAAc,CAAC,IAAG,QAAQ;YAChB,SAAS,IAAI,IAAI;YAEjB,oBAAoB,IAAI,OAAO;AAAA,QACjC,OAAO;AAAA,UACH,OAAO;mBACI,cAAc;AAAA;AAAA,UAEzB,MAAM,IAAI,KAAK;kBACL,OAAO,IAAI,IAAI,GAAG,SAAS,GAAG;kBAC9B,SAAS,GAAG,QAAQ;gBACtB,CAAC,QAAQ;qBACF;AAAA;gBAEP,OAAO,KAAK;oBACN,SAAS,SAAS,cAAc;oBAChC,EAAE,SAAS,IAAI,IAAI,cAAc;qBAChC,YAAY,KAAK;oBAClB,aAAa,WAAW,OAAO,OAAO,IAAI,KAAK,QAAQ,EAAE,IAAI,OAAO,IAAI;qBACvE,KAAK,IAAI,GAAG,KAAK,CAAC;AAAA;gBAEzB,OAAO,QAAQ;qBACR,KAAK,OAAO,KAAK,KAAK,MAAM,MAAM,CAAC,SAAe,KAAK,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,QAI/F,OAAO;AAAA,UACH,YAAY,OAAO;mBACR,KAAK,SAAS;AAAA;AAAA;AAAA;YAI3B,kBAAkB,CAAC,OAAoB,OAAuB;cAC1D,cAAc,kBAAkB,SAAS;cACzC,QAAQ,YAAY,KAAK,MAAM,MAAM,CAAC,SAAe,KAAK,OAAO;eAChE,MAAM,SAAS,MAAM,GAAG,OAAO;AAAA;YAEpC,gBAAe,IAAI,OAAO;AAAA,QAC5B,OAAO;AAAA,UACH,YAAY,CAAC,MAAM,UAAU;;gBACrB,mBAAmB,YAAY;qBACxB;AAAA;kBAEL,EAAE,UAAU,aAAM,iBAAN,aAAsB;gBACpC,CAAC,SAAS,MAAM,UAAU,GAAG;qBACtB;AAAA;kBAEL,KAAK,OAAO;kBACZ,EAAE,OAAO,KAAK;kBACd,YACF,iBAAK,YAAY,EAAE,MAAM,MAAM,SAAS,KAAK,MAAM,eAAnD,mBAA+D,QAA/D,YAAsE,GAAG,UAAU;iBAClF,SAAS,GAAG,QAAQ,mBAAmB,EAAE,KAAK,EAAE,IAAI,KAAK;qBAErD,OAAO,QACX,KAAK,CAAC,aAAa;oBACV,MAAM,gBAAgB,KAAK,OAAO;kBACpC,MAAM;;mBAEL,SACD,KAAK,MAAM,GACN,YAAY,KAAK,KAAK,UACtB,QAAQ,mBAAmB,EAAE,QAAQ,EAAE;;eAInD,MAAM,CAAC,MAAM;sBACF,MAAM;AAAA;mBAEf;AAAA;AAAA;AAAA;aAIZ,CAAC,mBAAmB;AAAA;AAAA;AAAA;MC/E1B,SAAS,SAAS,OAAO,CAAC;;"}
+{"version":3,"file":"index.es.js","sources":["../src/default-uploader.ts","../src/upload.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport type { Node } from '@milkdown/prose';\n\nimport type { Uploader } from './upload';\n\nconst readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> => {\n    return new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.addEventListener(\n            'load',\n            () => {\n                resolve({\n                    alt: file.name,\n                    src: reader.result as string,\n                });\n            },\n            false,\n        );\n        reader.readAsDataURL(file);\n    });\n};\n\nexport const defaultUploader: Uploader = async (files, schema) => {\n    const imgs: File[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (!file) {\n            continue;\n        }\n\n        if (!file.type.includes('image')) {\n            continue;\n        }\n\n        imgs.push(file);\n    }\n\n    const { image } = schema.nodes;\n\n    const data = await Promise.all(imgs.map((img) => readImageAsBase64(img)));\n\n    return data.map(({ alt, src }) => image.createAndFill({ src, alt }) as Node);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { schemaCtx, themeToolCtx } from '@milkdown/core';\nimport type { EditorView, Fragment, Node, Schema } from '@milkdown/prose';\nimport { Decoration, DecorationSet, EditorState, Plugin } from '@milkdown/prose';\nimport { createPlugin } from '@milkdown/utils';\n\nimport { defaultUploader } from './default-uploader';\n\nexport type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;\ntype Spec = { id: symbol; pos: number };\nexport type Options = {\n    uploader: Uploader;\n    enableHtmlFileUploader: boolean;\n};\n\nexport const uploadPlugin = createPlugin<string, Options>((_, options) => {\n    const uploader = options?.uploader ?? defaultUploader;\n\n    return {\n        prosePlugins: (_, ctx) => {\n            const schema = ctx.get(schemaCtx);\n\n            const placeholderPlugin = new Plugin({\n                state: {\n                    init() {\n                        return DecorationSet.empty;\n                    },\n                    apply(tr, set) {\n                        const _set = set.map(tr.mapping, tr.doc);\n                        const action = tr.getMeta(this);\n                        if (!action) {\n                            return _set;\n                        }\n                        if (action.add) {\n                            const widget = document.createElement('span');\n                            const { icon } = ctx.get(themeToolCtx).slots;\n                            widget.appendChild(icon('loading'));\n                            const decoration = Decoration.widget(action.add.pos, widget, { id: action.add.id });\n                            return _set.add(tr.doc, [decoration]);\n                        }\n                        if (action.remove) {\n                            return _set.remove(_set.find(null, null, (spec: Spec) => spec.id === action.remove.id));\n                        }\n                    },\n                },\n                props: {\n                    decorations(state) {\n                        return this.getState(state);\n                    },\n                },\n            });\n\n            const findPlaceholder = (state: EditorState, id: symbol): number => {\n                const decorations = placeholderPlugin.getState(state);\n                const found = decorations.find(null, null, (spec: Spec) => spec.id === id);\n                return found.length ? found[0].from : -1;\n            };\n\n            const handleUpload = (\n                view: EditorView<Schema>,\n                event: DragEvent | ClipboardEvent,\n                files: FileList | undefined,\n            ) => {\n                if (!files || files.length <= 0) {\n                    return false;\n                }\n                const id = Symbol('upload symbol');\n                const { tr } = view.state;\n                const insertPos =\n                    event instanceof DragEvent\n                        ? view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? tr.selection.from\n                        : tr.selection.from;\n                view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));\n\n                uploader(files, schema)\n                    .then((fragment) => {\n                        const pos = findPlaceholder(view.state, id);\n                        if (pos < 0) return;\n\n                        view.dispatch(\n                            view.state.tr\n                                .replaceWith(pos, pos, fragment)\n                                .setMeta(placeholderPlugin, { remove: { id } }),\n                        );\n                        return;\n                    })\n                    .catch((e) => {\n                        console.error(e);\n                    });\n                return true;\n            };\n\n            const uploadPlugin = new Plugin({\n                props: {\n                    handlePaste: (view, event) => {\n                        if (!(event instanceof ClipboardEvent)) {\n                            return false;\n                        }\n\n                        if (!options?.enableHtmlFileUploader && event.clipboardData?.getData('text/html')) {\n                            return false;\n                        }\n\n                        return handleUpload(view, event, event.clipboardData?.files);\n                    },\n                    handleDrop: (view, event) => {\n                        if (!(event instanceof DragEvent)) {\n                            return false;\n                        }\n\n                        return handleUpload(view, event, event.dataTransfer?.files);\n                    },\n                },\n            });\n            return [placeholderPlugin, uploadPlugin];\n        },\n    };\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList } from '@milkdown/utils';\n\nimport { uploadPlugin } from './upload';\n\nexport type { Uploader } from './upload';\nexport { uploadPlugin } from './upload';\n\nexport const upload = AtomList.create([uploadPlugin()]);\n"],"names":[],"mappings":"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"}

package/lib/src/default-uploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-uploader.d.ts","sourceRoot":"","sources":["default-uploader.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmBzC,eAAO,MAAM,eAAe,EAAE,QAqB7B,CAAC"}

package/lib/src/index.d.ts

@@ -0,0 +1,5 @@
+import { AtomList } from '@milkdown/utils';
+export type { Uploader } from './upload';
+export { uploadPlugin } from './upload';
+export declare const upload: AtomList<import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<string, import("./upload").Options>> & import("@milkdown/core").MilkdownPlugin>;
+//# sourceMappingURL=index.d.ts.map

package/lib/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,MAAM,6LAAoC,CAAC"}

package/lib/{upload.d.ts → src/upload.d.ts}

@@ -1,9 +1,10 @@
-/// <reference types="prosemirror-model" />
 import type { Fragment, Node, Schema } from '@milkdown/prose';
 export declare type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;
-export declare const uploadPlugin: import("@milkdown/utils/lib/types").WithExtend<string, {
+export declare type Options = {
     uploader: Uploader;
-}, {
+    enableHtmlFileUploader: boolean;
+};
+export declare const uploadPlugin: import("@milkdown/utils/lib/src/types").WithExtend<string, Options, {
     [x: string]: import("prosemirror-model").NodeType<any>;
 } & {
     [x: string]: import("prosemirror-model").MarkType<any>;

package/lib/src/upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["upload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAM1E,oBAAY,QAAQ,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC;AAE9F,oBAAY,OAAO,GAAG;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;EAsGvB,CAAC"}

package/package.json

@@ -1,15 +1,9 @@
 {
   "name": "@milkdown/plugin-upload",
-  "version": "5.2.1",
-  "main": "./lib/index.cjs.js",
-  "module": "./lib/index.es.js",
+  "version": "5.3.3",
+  "type": "module",
+  "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js"
-    }
-  },
   "sideEffects": false,
   "license": "MIT",
   "files": [
@@ -20,23 +14,17 @@
     "milkdown",
     "milkdown plugin"
   ],
-  "peerDependencies": {
-    "@milkdown/core": "*"
-  },
   "dependencies": {
-    "@milkdown/utils": "5.2.1",
+    "@milkdown/core": "5.3.3",
+    "@milkdown/prose": "5.3.3",
+    "@milkdown/utils": "5.3.3",
     "tslib": "^2.3.1"
   },
-  "devDependencies": {
-    "@milkdown/core": "5.2.1",
-    "@milkdown/prose": "5.2.1",
-    "@milkdown/utils": "5.2.1"
-  },
   "scripts": {
-    "start": "vite",
-    "watch": "vite build --watch",
-    "test": "jest",
+    "start": "vite build --watch",
+    "test": "vitest",
     "tsc": "tsc --noEmit",
-    "build": "vite build && tsc --emitDeclarationOnly"
-  }
+    "build": "vite build"
+  },
+  "readme": "# @milkdown/plugin-upload\n\nUpload image when drop for [milkdown](https://saul-mirone.github.io/milkdown/).\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { commonmark } from '@milkdown/preset-commonmark';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { upload } from '@milkdown/plugin-upload';\n\nEditor.make().use(commonmark).use(upload).create();\n```\n\n# Config\n\n## Setup Uploader\n\n> By default, this plugin will transfer image to base64 and ignore other file types.\n>\n> If you want to upload file and handle the generated blocks, you should setup the uploader.\n\n```typescript\n// ...\nimport { upload, uploadPlugin, Uploader } from '@milkdown/plugin-upload';\nimport type { Node } from 'prosemirror-model';\n\nconst uploader: Uploader = async (files, schema) => {\n    const images: File[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (!file) {\n            continue;\n        }\n\n        // You can handle whatever the file type you want, we handle image here.\n        if (!file.type.includes('image')) {\n            continue;\n        }\n\n        images.push(file);\n    }\n\n    const nodes: Node[] = await Promise.all(\n        images.map(async (image) => {\n            const src = await YourUploadAPI(image);\n            const alt = image.name;\n            return schema.nodes.image.createAndFill({\n                src,\n                alt,\n            }) as Node;\n        }),\n    );\n\n    return nodes;\n};\n\nEditor.make()\n    // .use(...)\n    .use(\n        upload.configure(uploadPlugin, {\n            uploader,\n        }),\n    )\n    .create();\n```\n\n## enableHtmlFileUploader\n\nWhen paste files from html (for example copy images by right click context menu), this option will make the plugin to upload the image copied instead of using the original link.\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
 }

package/src/upload.ts

@@ -1,6 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { schemaCtx, themeToolCtx } from '@milkdown/core';
-import type { Fragment, Node, Schema } from '@milkdown/prose';
+import type { EditorView, Fragment, Node, Schema } from '@milkdown/prose';
 import { Decoration, DecorationSet, EditorState, Plugin } from '@milkdown/prose';
 import { createPlugin } from '@milkdown/utils';
 
@@ -8,8 +8,12 @@ import { defaultUploader } from './default-uploader';
 
 export type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;
 type Spec = { id: symbol; pos: number };
+export type Options = {
+    uploader: Uploader;
+    enableHtmlFileUploader: boolean;
+};
 
-export const uploadPlugin = createPlugin<string, { uploader: Uploader }>((_, options) => {
+export const uploadPlugin = createPlugin<string, Options>((_, options) => {
     const uploader = options?.uploader ?? defaultUploader;
 
     return {
@@ -45,43 +49,66 @@ export const uploadPlugin = createPlugin<string, { uploader: Uploader }>((_, opt
                     },
                 },
             });
+
             const findPlaceholder = (state: EditorState, id: symbol): number => {
                 const decorations = placeholderPlugin.getState(state);
                 const found = decorations.find(null, null, (spec: Spec) => spec.id === id);
                 return found.length ? found[0].from : -1;
             };
+
+            const handleUpload = (
+                view: EditorView<Schema>,
+                event: DragEvent | ClipboardEvent,
+                files: FileList | undefined,
+            ) => {
+                if (!files || files.length <= 0) {
+                    return false;
+                }
+                const id = Symbol('upload symbol');
+                const { tr } = view.state;
+                const insertPos =
+                    event instanceof DragEvent
+                        ? view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? tr.selection.from
+                        : tr.selection.from;
+                view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));
+
+                uploader(files, schema)
+                    .then((fragment) => {
+                        const pos = findPlaceholder(view.state, id);
+                        if (pos < 0) return;
+
+                        view.dispatch(
+                            view.state.tr
+                                .replaceWith(pos, pos, fragment)
+                                .setMeta(placeholderPlugin, { remove: { id } }),
+                        );
+                        return;
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
+                return true;
+            };
+
             const uploadPlugin = new Plugin({
                 props: {
-                    handleDrop: (view, event) => {
-                        if (!(event instanceof DragEvent)) {
+                    handlePaste: (view, event) => {
+                        if (!(event instanceof ClipboardEvent)) {
                             return false;
                         }
-                        const { files } = event.dataTransfer ?? {};
-                        if (!files || files.length <= 0) {
+
+                        if (!options?.enableHtmlFileUploader && event.clipboardData?.getData('text/html')) {
                             return false;
                         }
-                        const id = Symbol('upload symbol');
-                        const { tr } = view.state;
-                        const insertPos =
-                            view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? tr.selection.from;
-                        view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));
 
-                        uploader(files, schema)
-                            .then((fragment) => {
-                                const pos = findPlaceholder(view.state, id);
-                                if (pos < 0) return;
+                        return handleUpload(view, event, event.clipboardData?.files);
+                    },
+                    handleDrop: (view, event) => {
+                        if (!(event instanceof DragEvent)) {
+                            return false;
+                        }
 
-                                view.dispatch(
-                                    view.state.tr
-                                        .replaceWith(pos, pos, fragment)
-                                        .setMeta(placeholderPlugin, { remove: { id } }),
-                                );
-                                return;
-                            })
-                            .catch((e) => {
-                                console.error(e);
-                            });
-                        return true;
+                        return handleUpload(view, event, event.dataTransfer?.files);
                     },
                 },
             });

package/lib/default-uploader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-uploader.d.ts","sourceRoot":"","sources":["../src/default-uploader.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAmBzC,eAAO,MAAM,eAAe,EAAE,QAqB7B,CAAC"}

package/lib/index.cjs.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var S=require("@milkdown/utils"),w=require("@milkdown/core"),m=require("@milkdown/prose");const b=i=>new Promise(l=>{const a=new FileReader;a.addEventListener("load",()=>{l({alt:i.name,src:a.result})},!1),a.readAsDataURL(i)}),C=async(i,l)=>{const a=[];for(let n=0;n<i.length;n++){const d=i.item(n);!d||!d.type.includes("image")||a.push(d)}const{image:c}=l.nodes;return(await Promise.all(a.map(n=>b(n)))).map(({alt:n,src:d})=>c.createAndFill({src:d,alt:n}))},A=S.createPlugin((i,l)=>{var c;const a=(c=l==null?void 0:l.uploader)!=null?c:C;return{prosePlugins:(D,n)=>{const d=n.get(w.schemaCtx),u=new m.Plugin({state:{init(){return m.DecorationSet.empty},apply(e,s){const o=s.map(e.mapping,e.doc),t=e.getMeta(this);if(!t)return o;if(t.add){const r=document.createElement("span"),{icon:g}=n.get(w.themeToolCtx).slots;r.appendChild(g("loading"));const p=m.Decoration.widget(t.add.pos,r,{id:t.add.id});return o.add(e.doc,[p])}if(t.remove)return o.remove(o.find(null,null,r=>r.id===t.remove.id))}},props:{decorations(e){return this.getState(e)}}}),M=(e,s)=>{const t=u.getState(e).find(null,null,r=>r.id===s);return t.length?t[0].from:-1},_=new m.Plugin({props:{handleDrop:(e,s)=>{var p,P,y;if(!(s instanceof DragEvent))return!1;const{files:o}=(p=s.dataTransfer)!=null?p:{};if(!o||o.length<=0)return!1;const t=Symbol("upload symbol"),{tr:r}=e.state,g=(y=(P=e.posAtCoords({left:s.clientX,top:s.clientY}))==null?void 0:P.pos)!=null?y:r.selection.from;return e.dispatch(r.setMeta(u,{add:{id:t,pos:g}})),a(o,d).then(f=>{const h=M(e.state,t);h<0||e.dispatch(e.state.tr.replaceWith(h,h,f).setMeta(u,{remove:{id:t}}))}).catch(f=>{console.error(f)}),!0}}});return[u,_]}}}),k=S.AtomList.create([A()]);exports.upload=k;exports.uploadPlugin=A;
-//# sourceMappingURL=index.cjs.js.map

package/lib/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/default-uploader.ts","../src/upload.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport type { Node } from '@milkdown/prose';\n\nimport type { Uploader } from './upload';\n\nconst readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> => {\n    return new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.addEventListener(\n            'load',\n            () => {\n                resolve({\n                    alt: file.name,\n                    src: reader.result as string,\n                });\n            },\n            false,\n        );\n        reader.readAsDataURL(file);\n    });\n};\n\nexport const defaultUploader: Uploader = async (files, schema) => {\n    const imgs: File[] = [];\n\n    for (let i = 0; i < files.length; i++) {\n        const file = files.item(i);\n        if (!file) {\n            continue;\n        }\n\n        if (!file.type.includes('image')) {\n            continue;\n        }\n\n        imgs.push(file);\n    }\n\n    const { image } = schema.nodes;\n\n    const data = await Promise.all(imgs.map((img) => readImageAsBase64(img)));\n\n    return data.map(({ alt, src }) => image.createAndFill({ src, alt }) as Node);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { schemaCtx, themeToolCtx } from '@milkdown/core';\nimport type { Fragment, Node, Schema } from '@milkdown/prose';\nimport { Decoration, DecorationSet, EditorState, Plugin } from '@milkdown/prose';\nimport { createPlugin } from '@milkdown/utils';\n\nimport { defaultUploader } from './default-uploader';\n\nexport type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;\ntype Spec = { id: symbol; pos: number };\n\nexport const uploadPlugin = createPlugin<string, { uploader: Uploader }>((_, options) => {\n    const uploader = options?.uploader ?? defaultUploader;\n\n    return {\n        prosePlugins: (_, ctx) => {\n            const schema = ctx.get(schemaCtx);\n\n            const placeholderPlugin = new Plugin({\n                state: {\n                    init() {\n                        return DecorationSet.empty;\n                    },\n                    apply(tr, set) {\n                        const _set = set.map(tr.mapping, tr.doc);\n                        const action = tr.getMeta(this);\n                        if (!action) {\n                            return _set;\n                        }\n                        if (action.add) {\n                            const widget = document.createElement('span');\n                            const { icon } = ctx.get(themeToolCtx).slots;\n                            widget.appendChild(icon('loading'));\n                            const decoration = Decoration.widget(action.add.pos, widget, { id: action.add.id });\n                            return _set.add(tr.doc, [decoration]);\n                        }\n                        if (action.remove) {\n                            return _set.remove(_set.find(null, null, (spec: Spec) => spec.id === action.remove.id));\n                        }\n                    },\n                },\n                props: {\n                    decorations(state) {\n                        return this.getState(state);\n                    },\n                },\n            });\n            const findPlaceholder = (state: EditorState, id: symbol): number => {\n                const decorations = placeholderPlugin.getState(state);\n                const found = decorations.find(null, null, (spec: Spec) => spec.id === id);\n                return found.length ? found[0].from : -1;\n            };\n            const uploadPlugin = new Plugin({\n                props: {\n                    handleDrop: (view, event) => {\n                        if (!(event instanceof DragEvent)) {\n                            return false;\n                        }\n                        const { files } = event.dataTransfer ?? {};\n                        if (!files || files.length <= 0) {\n                            return false;\n                        }\n                        const id = Symbol('upload symbol');\n                        const { tr } = view.state;\n                        const insertPos =\n                            view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? tr.selection.from;\n                        view.dispatch(tr.setMeta(placeholderPlugin, { add: { id, pos: insertPos } }));\n\n                        uploader(files, schema)\n                            .then((fragment) => {\n                                const pos = findPlaceholder(view.state, id);\n                                if (pos < 0) return;\n\n                                view.dispatch(\n                                    view.state.tr\n                                        .replaceWith(pos, pos, fragment)\n                                        .setMeta(placeholderPlugin, { remove: { id } }),\n                                );\n                                return;\n                            })\n                            .catch((e) => {\n                                console.error(e);\n                            });\n                        return true;\n                    },\n                },\n            });\n            return [placeholderPlugin, uploadPlugin];\n        },\n    };\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList } from '@milkdown/utils';\n\nimport { uploadPlugin } from './upload';\n\nexport type { Uploader } from './upload';\nexport { uploadPlugin } from './upload';\n\nexport const upload = AtomList.create([uploadPlugin()]);\n"],"names":["createPlugin","schemaCtx","Plugin","DecorationSet","themeToolCtx","Decoration","AtomList"],"mappings":"mMAKA,KAAM,GAAoB,AAAC,GAChB,GAAI,SAAQ,AAAC,GAAY,MACtB,GAAS,GAAI,cACZ,iBACH,OACA,IAAM,GACM,CACJ,IAAK,EAAK,KACV,IAAK,EAAO,UAGpB,MAEG,cAAc,KAIhB,EAA4B,MAAO,EAAO,IAAW,MACxD,GAAe,UAEZ,GAAI,EAAG,EAAI,EAAM,OAAQ,IAAK,MAC7B,GAAO,EAAM,KAAK,GACpB,CAAC,GAID,CAAC,EAAK,KAAK,SAAS,YAInB,KAAK,QAGR,CAAE,SAAU,EAAO,YAIlB,AAFM,MAAM,SAAQ,IAAI,EAAK,IAAI,AAAC,GAAQ,EAAkB,MAEvD,IAAI,CAAC,CAAE,MAAK,SAAU,EAAM,cAAc,CAAE,MAAK,UC/BpD,EAAeA,eAA6C,CAAC,EAAG,IAAY,YAC/E,GAAW,oBAAS,WAAT,OAAqB,QAE/B,CACH,aAAc,CAAC,EAAG,IAAQ,MAChB,GAAS,EAAI,IAAIC,aAEjB,EAAoB,GAAIC,UAAO,CACjC,MAAO,CACH,MAAO,OACIC,iBAAc,OAEzB,MAAM,EAAI,EAAK,MACL,GAAO,EAAI,IAAI,EAAG,QAAS,EAAG,KAC9B,EAAS,EAAG,QAAQ,SACtB,CAAC,QACM,MAEP,EAAO,IAAK,MACN,GAAS,SAAS,cAAc,QAChC,CAAE,QAAS,EAAI,IAAIC,gBAAc,QAChC,YAAY,EAAK,iBAClB,GAAaC,aAAW,OAAO,EAAO,IAAI,IAAK,EAAQ,CAAE,GAAI,EAAO,IAAI,WACvE,GAAK,IAAI,EAAG,IAAK,CAAC,OAEzB,EAAO,aACA,GAAK,OAAO,EAAK,KAAK,KAAM,KAAM,AAAC,GAAe,EAAK,KAAO,EAAO,OAAO,OAI/F,MAAO,CACH,YAAY,EAAO,OACR,MAAK,SAAS,OAI3B,EAAkB,CAAC,EAAoB,IAAuB,MAE1D,GAAQ,AADM,EAAkB,SAAS,GACrB,KAAK,KAAM,KAAM,AAAC,GAAe,EAAK,KAAO,SAChE,GAAM,OAAS,EAAM,GAAG,KAAO,IAEpC,EAAe,GAAIH,UAAO,CAC5B,MAAO,CACH,WAAY,CAAC,EAAM,IAAU,cACrB,cAAmB,kBACZ,QAEL,CAAE,SAAU,KAAM,eAAN,OAAsB,MACpC,CAAC,GAAS,EAAM,QAAU,QACnB,QAEL,GAAK,OAAO,iBACZ,CAAE,MAAO,EAAK,MACd,EACF,QAAK,YAAY,CAAE,KAAM,EAAM,QAAS,IAAK,EAAM,YAAnD,cAA+D,MAA/D,OAAsE,EAAG,UAAU,cAClF,SAAS,EAAG,QAAQ,EAAmB,CAAE,IAAK,CAAE,KAAI,IAAK,QAErD,EAAO,GACX,KAAK,AAAC,GAAa,MACV,GAAM,EAAgB,EAAK,MAAO,GACpC,EAAM,KAEL,SACD,EAAK,MAAM,GACN,YAAY,EAAK,EAAK,GACtB,QAAQ,EAAmB,CAAE,OAAQ,CAAE,WAInD,MAAM,AAAC,GAAM,SACF,MAAM,KAEf,aAIZ,CAAC,EAAmB,OC/E1B,EAASI,WAAS,OAAO,CAAC"}

package/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,MAAM;;8CAAoC,CAAC"}

package/lib/upload.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../src/upload.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAM9D,oBAAY,QAAQ,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC;AAG9F,eAAO,MAAM,YAAY;cAAoC,QAAQ;;;;;;;;;;;;;;;EA+EnE,CAAC"}