@milkdown/plugin-upload 6.5.4 → 7.0.0-next.1

package/lib/default-uploader.d.ts

@@ -1,3 +1,7 @@
 import type { Uploader } from './upload';
+export declare const readImageAsBase64: (file: File) => Promise<{
+    alt: string;
+    src: string;
+}>;
 export declare const defaultUploader: Uploader;
 //# sourceMappingURL=default-uploader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"default-uploader.d.ts","sourceRoot":"","sources":["../src/default-uploader.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAmBxC,eAAO,MAAM,eAAe,EAAE,QAqB7B,CAAA"}
+{"version":3,"file":"default-uploader.d.ts","sourceRoot":"","sources":["../src/default-uploader.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGxC,eAAO,MAAM,iBAAiB,SAAU,IAAI,KAAG,QAAQ;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAelF,CAAA;AAID,eAAO,MAAM,eAAe,EAAE,QAqB7B,CAAA"}

package/lib/index.d.ts

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

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAI1C,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,eAAO,MAAM,MAAM,iKAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAGnD,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAGlC,eAAO,MAAM,MAAM,EAAE,cAAc,EAAiC,CAAA"}

package/lib/index.es.js

@@ -1,102 +1,103 @@
-import { createPlugin as I, AtomList as w } from "@milkdown/utils";
-import { schemaCtx as C, themeManagerCtx as E, ThemeIcon as L } from "@milkdown/core";
-import { missingNodeInSchema as M, missingIcon as S } from "@milkdown/exception";
-import { PluginKey as U, Plugin as D } from "@milkdown/prose/state";
-import { DecorationSet as _, Decoration as x } from "@milkdown/prose/view";
-const F = (l) => new Promise((o) => {
-  const i = new FileReader();
-  i.addEventListener(
+import { schemaCtx as h } from "@milkdown/core";
+import { PluginKey as y, Plugin as D } from "@milkdown/prose/state";
+import { Decoration as P, DecorationSet as b } from "@milkdown/prose/view";
+import { $ctx as U, $prose as C } from "@milkdown/utils";
+import { missingNodeInSchema as F } from "@milkdown/exception";
+const A = (a) => new Promise((i) => {
+  const r = new FileReader();
+  r.addEventListener(
     "load",
     () => {
-      o({
-        alt: l.name,
-        src: i.result
+      i({
+        alt: a.name,
+        src: r.result
       });
     },
     !1
-  ), i.readAsDataURL(l);
-}), K = async (l, o) => {
-  const i = [];
-  for (let s = 0; s < l.length; s++) {
-    const d = l.item(s);
-    !d || !d.type.includes("image") || i.push(d);
+  ), r.readAsDataURL(a);
+}), E = async (a, i) => {
+  const r = [];
+  for (let t = 0; t < a.length; t++) {
+    const e = a.item(t);
+    !e || !e.type.includes("image") || r.push(e);
   }
-  const { image: u } = o.nodes;
-  if (!u)
-    throw M("image");
-  return (await Promise.all(i.map((s) => F(s)))).map(({ alt: s, src: d }) => u.createAndFill({ src: d, alt: s }));
-}, N = new U("MILKDOWN_UPLOAD"), O = I((l, o) => {
-  var u;
-  const i = (u = o == null ? void 0 : o.uploader) != null ? u : K;
-  return {
-    prosePlugins: (y, s) => {
-      const d = s.get(C), p = new D({
-        key: N,
-        state: {
-          init() {
-            return _.empty;
-          },
-          apply(e, r) {
-            const t = r.map(e.mapping, e.doc), a = e.getMeta(this);
-            if (!a)
-              return t;
-            if (a.add) {
-              const n = document.createElement("span"), c = s.get(E).get(L, "loading");
-              if (!c)
-                throw S("loading");
-              n.appendChild(c.dom);
-              const m = x.widget(a.add.pos, n, { id: a.add.id });
-              return t.add(e.doc, [m]);
-            }
-            return a.remove ? t.remove(
-              t.find(void 0, void 0, (n) => n.id === a.remove.id)
-            ) : t;
-          }
-        },
-        props: {
-          decorations(e) {
-            return this.getState(e);
-          }
+  const { image: c } = i.nodes;
+  if (!c)
+    throw F("image");
+  return (await Promise.all(r.map((t) => A(t)))).map(({ alt: t, src: e }) => c.createAndFill({ src: e, alt: t }));
+}, l = U({
+  uploader: E,
+  enableHtmlFileUploader: !1,
+  uploadWidgetFactory: (a, i) => {
+    const r = document.createElement("span");
+    return r.textContent = "Upload in progress...", P.widget(a, r, i);
+  }
+}, "uploadConfig"), M = C((a) => {
+  const i = new y("MILKDOWN_UPLOAD"), r = (o, t) => {
+    var s;
+    const e = i.getState(o);
+    if (!e)
+      return -1;
+    const n = e.find(void 0, void 0, (d) => d.id === t);
+    return n.length ? ((s = n[0]) == null ? void 0 : s.from) ?? -1 : -1;
+  }, c = (o, t, e) => {
+    var m;
+    if (!e || e.length <= 0)
+      return !1;
+    const n = Symbol("upload symbol"), s = a.get(h), { tr: d } = o.state, f = t instanceof DragEvent ? ((m = o.posAtCoords({ left: t.clientX, top: t.clientY })) == null ? void 0 : m.pos) ?? d.selection.from : d.selection.from;
+    o.dispatch(d.setMeta(i, { add: { id: n, pos: f } }));
+    const { uploader: g } = a.get(l.key);
+    return g(e, s).then((p) => {
+      const u = r(o.state, n);
+      u < 0 || o.dispatch(
+        o.state.tr.replaceWith(u, u, p).setMeta(i, { remove: { id: n } })
+      );
+    }).catch((p) => {
+      console.error(p);
+    }), !0;
+  };
+  return new D({
+    key: i,
+    state: {
+      init() {
+        return b.empty;
+      },
+      apply(o, t) {
+        const e = t.map(o.mapping, o.doc), n = o.getMeta(this);
+        if (!n)
+          return e;
+        if (n.add) {
+          const { uploadWidgetFactory: s } = a.get(l.key), d = s(n.add.pos, { id: n.add.id });
+          return e.add(o.doc, [d]);
         }
-      }), b = (e, r) => {
-        var n, c;
-        const t = p.getState(e);
-        if (!t)
-          return -1;
-        const a = t.find(void 0, void 0, (m) => m.id === r);
-        return a.length && (c = (n = a[0]) == null ? void 0 : n.from) != null ? c : -1;
-      }, h = (e, r, t) => {
-        var m, P;
-        if (!t || t.length <= 0)
-          return !1;
-        const a = Symbol("upload symbol"), { tr: n } = e.state, c = r instanceof DragEvent && (P = (m = e.posAtCoords({ left: r.clientX, top: r.clientY })) == null ? void 0 : m.pos) != null ? P : n.selection.from;
-        return e.dispatch(n.setMeta(p, { add: { id: a, pos: c } })), i(t, d).then((f) => {
-          const g = b(e.state, a);
-          g < 0 || e.dispatch(
-            e.state.tr.replaceWith(g, g, f).setMeta(p, { remove: { id: a } })
-          );
-        }).catch((f) => {
-          console.error(f);
-        }), !0;
-      }, A = new D({
-        props: {
-          handlePaste: (e, r) => {
-            var t, a;
-            return !(r instanceof ClipboardEvent) || !(o != null && o.enableHtmlFileUploader) && ((t = r.clipboardData) == null ? void 0 : t.getData("text/html")) ? !1 : h(e, r, (a = r.clipboardData) == null ? void 0 : a.files);
-          },
-          handleDrop: (e, r) => {
-            var t;
-            return r instanceof DragEvent ? h(e, r, (t = r.dataTransfer) == null ? void 0 : t.files) : !1;
-          }
+        if (n.remove) {
+          const s = e.find(void 0, void 0, (d) => d.id === n.remove.id);
+          return e.remove(s);
         }
-      });
-      return [p, A];
+        return e;
+      }
+    },
+    props: {
+      decorations(o) {
+        return this.getState(o);
+      },
+      handlePaste: (o, t) => {
+        var n, s;
+        const { enableHtmlFileUploader: e } = a.get(l.key);
+        return !(t instanceof ClipboardEvent) || !e && ((n = t.clipboardData) == null ? void 0 : n.getData("text/html")) ? !1 : c(o, t, (s = t.clipboardData) == null ? void 0 : s.files);
+      },
+      handleDrop: (o, t) => {
+        var e;
+        return t instanceof DragEvent ? c(o, t, (e = t.dataTransfer) == null ? void 0 : e.files) : !1;
+      }
     }
-  };
-}), H = w.create([O()]);
+  });
+}), I = [l, M];
 export {
-  N as key,
-  H as upload,
-  O as uploadPlugin
+  E as defaultUploader,
+  A as readImageAsBase64,
+  I as upload,
+  l as uploadConfig,
+  M as uploadPlugin
 };
 //# sourceMappingURL=index.es.js.map

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 { missingNodeInSchema } from '@milkdown/exception'\nimport type { Node } from '@milkdown/prose/model'\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    if (!file.type.includes('image'))\n      continue\n\n    imgs.push(file)\n  }\n\n  const { image } = schema.nodes\n  if (!image)\n    throw missingNodeInSchema('image')\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 { ThemeIcon, schemaCtx, themeManagerCtx } from '@milkdown/core'\nimport { missingIcon } from '@milkdown/exception'\nimport type { Fragment, Node, Schema } from '@milkdown/prose/model'\nimport type { EditorState } from '@milkdown/prose/state'\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport { Decoration, DecorationSet } from '@milkdown/prose/view'\nimport { createPlugin } from '@milkdown/utils'\n\nimport { defaultUploader } from './default-uploader'\n\nexport type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>\ninterface Spec { id: symbol; pos: number }\nexport interface Options {\n  uploader: Uploader\n  enableHtmlFileUploader: boolean\n}\nexport const key = new PluginKey('MILKDOWN_UPLOAD')\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        key,\n        state: {\n          init() {\n            return DecorationSet.empty\n          },\n          apply(this: Plugin, 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 loadingIcon = ctx.get(themeManagerCtx).get(ThemeIcon, 'loading')\n              if (!loadingIcon)\n                throw missingIcon('loading')\n\n              widget.appendChild(loadingIcon.dom)\n\n              const decoration = Decoration.widget(action.add.pos, widget, { id: action.add.id } as any)\n              return _set.add(tr.doc, [decoration])\n            }\n            if (action.remove) {\n              return _set.remove(\n                _set.find(undefined, undefined, (spec: Spec) => spec.id === action.remove.id),\n              )\n            }\n\n            return _set\n          },\n        },\n        props: {\n          decorations(this: Plugin, 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        if (!decorations)\n          return -1\n        const found = decorations.find(undefined, undefined, (spec: Spec) => spec.id === id)\n        if (!found.length)\n          return -1\n        return found[0]?.from ?? -1\n      }\n\n      const handleUpload = (view: EditorView, event: DragEvent | ClipboardEvent, files: FileList | undefined) => {\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)\n              return\n\n            view.dispatch(\n              view.state.tr\n                .replaceWith(pos, pos, fragment)\n                .setMeta(placeholderPlugin, { remove: { id } }),\n            )\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            if (!options?.enableHtmlFileUploader && event.clipboardData?.getData('text/html'))\n              return false\n\n            return handleUpload(view, event, event.clipboardData?.files)\n          },\n          handleDrop: (view, event) => {\n            if (!(event instanceof DragEvent))\n              return false\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 { key, uploadPlugin } from './upload'\n\nexport const upload = AtomList.create([uploadPlugin()])\n"],"names":["readImageAsBase64","file","resolve","reader","defaultUploader","files","schema","imgs","i","image","missingNodeInSchema","img","alt","src","key","PluginKey","uploadPlugin","createPlugin","_","options","uploader","_a","ctx","schemaCtx","placeholderPlugin","Plugin","DecorationSet","tr","set","_set","action","widget","loadingIcon","themeManagerCtx","ThemeIcon","missingIcon","decoration","Decoration","spec","state","findPlaceholder","id","decorations","found","_b","handleUpload","view","event","insertPos","fragment","pos","e","upload","AtomList"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/default-uploader.ts","../src/upload.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { missingNodeInSchema } from '@milkdown/exception'\nimport type { Node } from '@milkdown/prose/model'\n\nimport type { Uploader } from './upload'\n\n/// Read the image file as base64.\nexport const 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\n/// The default uploader.\n/// It will upload transform images to base64.\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    if (!file.type.includes('image'))\n      continue\n\n    imgs.push(file)\n  }\n\n  const { image } = schema.nodes\n  if (!image)\n    throw missingNodeInSchema('image')\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 } from '@milkdown/core'\nimport type { Fragment, Node, Schema } from '@milkdown/prose/model'\nimport type { EditorState } from '@milkdown/prose/state'\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport { Decoration, DecorationSet } from '@milkdown/prose/view'\nimport { $ctx, $prose } from '@milkdown/utils'\n\nimport { defaultUploader } from './default-uploader'\n\n/// @internal\nexport type Uploader = UploadOptions['uploader']\ninterface Spec { id: symbol; pos: number }\n\n/// The configuration for upload.\nexport interface UploadOptions {\n  /// The uploader for upload plugin.\n  /// It takes the files and schema as parameters.\n  /// It should return a `Promise` of Prosemirror `Fragment` or `Node` or `Node[]`.\n  uploader: (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>\n  /// Whether to enable the html file uploader.\n  /// When paste files from html (for example copy images by right click context menu),\n  /// this option will make the plugin to upload the image copied instead of using the original link.\n  enableHtmlFileUploader: boolean\n  /// The factory for upload widget.\n  /// The widget will be displayed when the file is uploading.\n  /// It takes the position and spec as parameters.\n  /// It should return a `Decoration` of Prosemirror.\n  /// By default, it will return `<span>Upload in progress...</span>`.\n  uploadWidgetFactory: (pos: number, spec: Parameters<typeof Decoration.widget>[2]) => Decoration\n}\n\n/// A slice that contains the configuration for upload.\n/// It should be type of `UploadConfig`.\nexport const uploadConfig = $ctx<UploadOptions, 'uploadConfig'>({\n  uploader: defaultUploader,\n  enableHtmlFileUploader: false,\n  uploadWidgetFactory: (pos, spec) => {\n    const widgetDOM = document.createElement('span')\n    widgetDOM.textContent = 'Upload in progress...'\n    return Decoration.widget(pos, widgetDOM, spec)\n  },\n}, 'uploadConfig')\n\n/// The prosemirror plugin for upload.\nexport const uploadPlugin = $prose((ctx) => {\n  const pluginKey = new PluginKey('MILKDOWN_UPLOAD')\n\n  const findPlaceholder = (state: EditorState, id: symbol): number => {\n    const decorations = pluginKey.getState(state)\n    if (!decorations)\n      return -1\n    const found = decorations.find(undefined, undefined, (spec: Spec) => spec.id === id)\n    if (!found.length)\n      return -1\n    return found[0]?.from ?? -1\n  }\n\n  const handleUpload = (view: EditorView, event: DragEvent | ClipboardEvent, files: FileList | undefined) => {\n    if (!files || files.length <= 0)\n      return false\n\n    const id = Symbol('upload symbol')\n    const schema = ctx.get(schemaCtx)\n    const { tr } = view.state\n    const insertPos = 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(pluginKey, { add: { id, pos: insertPos } }))\n\n    const { uploader } = ctx.get(uploadConfig.key)\n    uploader(files, schema)\n      .then((fragment) => {\n        const pos = findPlaceholder(view.state, id)\n        if (pos < 0)\n          return\n\n        view.dispatch(\n          view.state.tr\n            .replaceWith(pos, pos, fragment)\n            .setMeta(pluginKey, { remove: { id } }),\n        )\n      })\n      .catch((e) => {\n        console.error(e)\n      })\n    return true\n  }\n\n  return new Plugin({\n    key: pluginKey,\n    state: {\n      init() {\n        return DecorationSet.empty\n      },\n      apply(this: Plugin, 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 { uploadWidgetFactory } = ctx.get(uploadConfig.key)\n\n          const decoration = uploadWidgetFactory(action.add.pos, { id: action.add.id })\n          return _set.add(tr.doc, [decoration])\n        }\n        if (action.remove) {\n          const target = _set.find(undefined, undefined, (spec: Spec) => spec.id === action.remove.id)\n          return _set.remove(target)\n        }\n\n        return _set\n      },\n    },\n    props: {\n      decorations(this: Plugin, state) {\n        return this.getState(state)\n      },\n      handlePaste: (view, event) => {\n        const { enableHtmlFileUploader } = ctx.get(uploadConfig.key)\n        if (!(event instanceof ClipboardEvent))\n          return false\n\n        if (!enableHtmlFileUploader && event.clipboardData?.getData('text/html'))\n          return false\n\n        return handleUpload(view, event, event.clipboardData?.files)\n      },\n      handleDrop: (view, event) => {\n        if (!(event instanceof DragEvent))\n          return false\n\n        return handleUpload(view, event, event.dataTransfer?.files)\n      },\n    },\n  })\n})\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { MilkdownPlugin } from '@milkdown/ctx'\nimport { uploadConfig, uploadPlugin } from './upload'\n\nexport * from './upload'\nexport * from './default-uploader'\n\n/// All plugins exported by this package.\nexport const upload: MilkdownPlugin[] = [uploadConfig, uploadPlugin]\n"],"names":["readImageAsBase64","file","resolve","reader","defaultUploader","files","schema","imgs","i","image","missingNodeInSchema","img","alt","src","uploadConfig","$ctx","pos","spec","widgetDOM","Decoration","uploadPlugin","$prose","ctx","pluginKey","PluginKey","findPlaceholder","state","id","decorations","found","_a","handleUpload","view","event","schemaCtx","tr","insertPos","uploader","fragment","e","Plugin","DecorationSet","set","_set","action","uploadWidgetFactory","decoration","target","enableHtmlFileUploader","_b","upload"],"mappings":"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"}

package/lib/upload.d.ts

@@ -1,10 +1,11 @@
 import type { Fragment, Node, Schema } from '@milkdown/prose/model';
-import { PluginKey } from '@milkdown/prose/state';
-export type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;
-export interface Options {
-    uploader: Uploader;
+import { Decoration } from '@milkdown/prose/view';
+export type Uploader = UploadOptions['uploader'];
+export interface UploadOptions {
+    uploader: (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;
     enableHtmlFileUploader: boolean;
+    uploadWidgetFactory: (pos: number, spec: Parameters<typeof Decoration.widget>[2]) => Decoration;
 }
-export declare const key: PluginKey<any>;
-export declare const uploadPlugin: import("@milkdown/utils").WithExtend<string, Options, import("@milkdown/utils").TypeMapping<string, string>, import("@milkdown/utils").PluginRest<string, string>>;
+export declare const uploadConfig: import("@milkdown/utils").$Ctx<UploadOptions, "uploadConfig">;
+export declare const uploadPlugin: import("@milkdown/utils").$Prose;
 //# sourceMappingURL=upload.d.ts.map

package/lib/upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../src/upload.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAU,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAOzD,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,CAAA;AAE7F,MAAM,WAAW,OAAO;IACtB,QAAQ,EAAE,QAAQ,CAAA;IAClB,sBAAsB,EAAE,OAAO,CAAA;CAChC;AACD,eAAO,MAAM,GAAG,gBAAmC,CAAA;AAEnD,eAAO,MAAM,YAAY,oKA4GvB,CAAA"}
+{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../src/upload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAInE,OAAO,EAAE,UAAU,EAAiB,MAAM,sBAAsB,CAAA;AAMhE,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,UAAU,CAAC,CAAA;AAIhD,MAAM,WAAW,aAAa;IAI5B,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,CAAA;IAIhF,sBAAsB,EAAE,OAAO,CAAA;IAM/B,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,UAAU,CAAA;CAChG;AAID,eAAO,MAAM,YAAY,+DAQP,CAAA;AAGlB,eAAO,MAAM,YAAY,kCA4FvB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/plugin-upload",
   "type": "module",
-  "version": "6.5.4",
+  "version": "7.0.0-next.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,17 +20,19 @@
     "src"
   ],
   "peerDependencies": {
-    "@milkdown/core": "^6.0.1",
-    "@milkdown/prose": "^6.0.1"
+    "@milkdown/core": "^7.0.0-next.0",
+    "@milkdown/ctx": "^7.0.0-next.0",
+    "@milkdown/prose": "^7.0.0-next.0"
   },
   "dependencies": {
     "tslib": "^2.4.0",
-    "@milkdown/exception": "6.5.4",
-    "@milkdown/utils": "6.5.4"
+    "@milkdown/exception": "7.0.0-next.1",
+    "@milkdown/utils": "7.0.0-next.1"
   },
   "devDependencies": {
-    "@milkdown/core": "6.5.4",
-    "@milkdown/prose": "6.5.4"
+    "@milkdown/core": "7.0.0-next.1",
+    "@milkdown/ctx": "7.0.0-next.1",
+    "@milkdown/prose": "7.0.0-next.1"
   },
   "nx": {
     "targets": {

package/src/default-uploader.ts

@@ -4,7 +4,8 @@ import type { Node } from '@milkdown/prose/model'
 
 import type { Uploader } from './upload'
 
-const readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> => {
+/// Read the image file as base64.
+export const readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> => {
   return new Promise((resolve) => {
     const reader = new FileReader()
     reader.addEventListener(
@@ -21,6 +22,8 @@ const readImageAsBase64 = (file: File): Promise<{ alt: string; src: string }> =>
   })
 }
 
+/// The default uploader.
+/// It will upload transform images to base64.
 export const defaultUploader: Uploader = async (files, schema) => {
   const imgs: File[] = []
 

package/src/index.ts

@@ -1,9 +1,9 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { AtomList } from '@milkdown/utils'
+import type { MilkdownPlugin } from '@milkdown/ctx'
+import { uploadConfig, uploadPlugin } from './upload'
 
-import { uploadPlugin } from './upload'
+export * from './upload'
+export * from './default-uploader'
 
-export type { Uploader } from './upload'
-export { key, uploadPlugin } from './upload'
-
-export const upload = AtomList.create([uploadPlugin()])
+/// All plugins exported by this package.
+export const upload: MilkdownPlugin[] = [uploadConfig, uploadPlugin]

package/src/upload.ts

@@ -1,129 +1,139 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { ThemeIcon, schemaCtx, themeManagerCtx } from '@milkdown/core'
-import { missingIcon } from '@milkdown/exception'
+import { schemaCtx } from '@milkdown/core'
 import type { Fragment, Node, Schema } from '@milkdown/prose/model'
 import type { EditorState } from '@milkdown/prose/state'
 import { Plugin, PluginKey } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 import { Decoration, DecorationSet } from '@milkdown/prose/view'
-import { createPlugin } from '@milkdown/utils'
+import { $ctx, $prose } from '@milkdown/utils'
 
 import { defaultUploader } from './default-uploader'
 
-export type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>
+/// @internal
+export type Uploader = UploadOptions['uploader']
 interface Spec { id: symbol; pos: number }
-export interface Options {
-  uploader: Uploader
+
+/// The configuration for upload.
+export interface UploadOptions {
+  /// The uploader for upload plugin.
+  /// It takes the files and schema as parameters.
+  /// It should return a `Promise` of Prosemirror `Fragment` or `Node` or `Node[]`.
+  uploader: (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>
+  /// Whether to enable the html file uploader.
+  /// 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.
   enableHtmlFileUploader: boolean
+  /// The factory for upload widget.
+  /// The widget will be displayed when the file is uploading.
+  /// It takes the position and spec as parameters.
+  /// It should return a `Decoration` of Prosemirror.
+  /// By default, it will return `<span>Upload in progress...</span>`.
+  uploadWidgetFactory: (pos: number, spec: Parameters<typeof Decoration.widget>[2]) => Decoration
 }
-export const key = new PluginKey('MILKDOWN_UPLOAD')
-
-export const uploadPlugin = createPlugin<string, Options>((_, options) => {
-  const uploader = options?.uploader ?? defaultUploader
-
-  return {
-    prosePlugins: (_, ctx) => {
-      const schema = ctx.get(schemaCtx)
-
-      const placeholderPlugin = new Plugin({
-        key,
-        state: {
-          init() {
-            return DecorationSet.empty
-          },
-          apply(this: Plugin, tr, set) {
-            const _set = set.map(tr.mapping, tr.doc)
-            const action = tr.getMeta(this)
-            if (!action)
-              return _set
-
-            if (action.add) {
-              const widget = document.createElement('span')
-              const loadingIcon = ctx.get(themeManagerCtx).get(ThemeIcon, 'loading')
-              if (!loadingIcon)
-                throw missingIcon('loading')
-
-              widget.appendChild(loadingIcon.dom)
-
-              const decoration = Decoration.widget(action.add.pos, widget, { id: action.add.id } as any)
-              return _set.add(tr.doc, [decoration])
-            }
-            if (action.remove) {
-              return _set.remove(
-                _set.find(undefined, undefined, (spec: Spec) => spec.id === action.remove.id),
-              )
-            }
-
-            return _set
-          },
-        },
-        props: {
-          decorations(this: Plugin, state) {
-            return this.getState(state)
-          },
-        },
+
+/// A slice that contains the configuration for upload.
+/// It should be type of `UploadConfig`.
+export const uploadConfig = $ctx<UploadOptions, 'uploadConfig'>({
+  uploader: defaultUploader,
+  enableHtmlFileUploader: false,
+  uploadWidgetFactory: (pos, spec) => {
+    const widgetDOM = document.createElement('span')
+    widgetDOM.textContent = 'Upload in progress...'
+    return Decoration.widget(pos, widgetDOM, spec)
+  },
+}, 'uploadConfig')
+
+/// The prosemirror plugin for upload.
+export const uploadPlugin = $prose((ctx) => {
+  const pluginKey = new PluginKey('MILKDOWN_UPLOAD')
+
+  const findPlaceholder = (state: EditorState, id: symbol): number => {
+    const decorations = pluginKey.getState(state)
+    if (!decorations)
+      return -1
+    const found = decorations.find(undefined, undefined, (spec: Spec) => spec.id === id)
+    if (!found.length)
+      return -1
+    return found[0]?.from ?? -1
+  }
+
+  const handleUpload = (view: EditorView, event: DragEvent | ClipboardEvent, files: FileList | undefined) => {
+    if (!files || files.length <= 0)
+      return false
+
+    const id = Symbol('upload symbol')
+    const schema = ctx.get(schemaCtx)
+    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(pluginKey, { add: { id, pos: insertPos } }))
+
+    const { uploader } = ctx.get(uploadConfig.key)
+    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(pluginKey, { remove: { id } }),
+        )
       })
+      .catch((e) => {
+        console.error(e)
+      })
+    return true
+  }
 
-      const findPlaceholder = (state: EditorState, id: symbol): number => {
-        const decorations = placeholderPlugin.getState(state)
-        if (!decorations)
-          return -1
-        const found = decorations.find(undefined, undefined, (spec: Spec) => spec.id === id)
-        if (!found.length)
-          return -1
-        return found[0]?.from ?? -1
-      }
-
-      const handleUpload = (view: EditorView, event: DragEvent | ClipboardEvent, files: FileList | undefined) => {
-        if (!files || files.length <= 0)
+  return new Plugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return DecorationSet.empty
+      },
+      apply(this: Plugin, tr, set) {
+        const _set = set.map(tr.mapping, tr.doc)
+        const action = tr.getMeta(this)
+        if (!action)
+          return _set
+
+        if (action.add) {
+          const { uploadWidgetFactory } = ctx.get(uploadConfig.key)
+
+          const decoration = uploadWidgetFactory(action.add.pos, { id: action.add.id })
+          return _set.add(tr.doc, [decoration])
+        }
+        if (action.remove) {
+          const target = _set.find(undefined, undefined, (spec: Spec) => spec.id === action.remove.id)
+          return _set.remove(target)
+        }
+
+        return _set
+      },
+    },
+    props: {
+      decorations(this: Plugin, state) {
+        return this.getState(state)
+      },
+      handlePaste: (view, event) => {
+        const { enableHtmlFileUploader } = ctx.get(uploadConfig.key)
+        if (!(event instanceof ClipboardEvent))
           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 } }),
-            )
-          })
-          .catch((e) => {
-            console.error(e)
-          })
-        return true
-      }
-
-      const uploadPlugin = new Plugin({
-        props: {
-          handlePaste: (view, event) => {
-            if (!(event instanceof ClipboardEvent))
-              return false
-
-            if (!options?.enableHtmlFileUploader && event.clipboardData?.getData('text/html'))
-              return false
-
-            return handleUpload(view, event, event.clipboardData?.files)
-          },
-          handleDrop: (view, event) => {
-            if (!(event instanceof DragEvent))
-              return false
-
-            return handleUpload(view, event, event.dataTransfer?.files)
-          },
-        },
-      })
-      return [placeholderPlugin, uploadPlugin]
+        if (!enableHtmlFileUploader && event.clipboardData?.getData('text/html'))
+          return false
+
+        return handleUpload(view, event, event.clipboardData?.files)
+      },
+      handleDrop: (view, event) => {
+        if (!(event instanceof DragEvent))
+          return false
+
+        return handleUpload(view, event, event.dataTransfer?.files)
+      },
     },
-  }
+  })
 })