@milkdown/plugin-upload 6.0.0 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/index.es.js +2 -1
- package/lib/index.es.js.map +1 -1
- package/lib/upload.d.ts +4 -4
- package/lib/upload.d.ts.map +1 -1
- package/package.json +9 -10
- package/src/default-uploader.ts +1 -1
- package/src/upload.ts +3 -11
package/README.md
CHANGED
package/lib/index.es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createPlugin, AtomList } from "@milkdown/utils";
|
|
2
2
|
import { schemaCtx, themeManagerCtx, ThemeIcon } from "@milkdown/core";
|
|
3
|
-
import { PluginKey, Plugin
|
|
3
|
+
import { PluginKey, Plugin } from "@milkdown/prose/state";
|
|
4
|
+
import { DecorationSet, Decoration } from "@milkdown/prose/view";
|
|
4
5
|
const readImageAsBase64 = (file) => {
|
|
5
6
|
return new Promise((resolve) => {
|
|
6
7
|
const reader = new FileReader();
|
package/lib/index.es.js.map
CHANGED
|
@@ -1 +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 if (!image) {\n throw new Error();\n }\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, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport {
|
|
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/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\n if (!file.type.includes('image')) {\n continue;\n }\n\n imgs.push(file);\n }\n\n const { image } = schema.nodes;\n if (!image) {\n throw new Error();\n }\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, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport { Fragment, Node, Schema } from '@milkdown/prose/model';\nimport { EditorState, Plugin, PluginKey } from '@milkdown/prose/state';\nimport { Decoration, DecorationSet, EditorView } 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[]>;\ntype Spec = { id: symbol; pos: number };\nexport type Options = {\n uploader: Uploader;\n enableHtmlFileUploader: boolean;\n};\nexport const key = new PluginKey('MILKDOWN_PLUGIN_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(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 new Error('Loading icon is not found');\n }\n widget.appendChild(loadingIcon.dom);\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 { key, uploadPlugin } from './upload';\n\nexport const upload = AtomList.create([uploadPlugin()]);\n"],"names":[],"mappings":"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"}
|
package/lib/upload.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
import { Fragment, Node, Schema } from '@milkdown/prose/model';
|
|
2
|
+
import { PluginKey } from '@milkdown/prose/state';
|
|
3
3
|
export declare type Uploader = (files: FileList, schema: Schema) => Promise<Fragment | Node | Node[]>;
|
|
4
4
|
export declare type Options = {
|
|
5
5
|
uploader: Uploader;
|
|
@@ -7,9 +7,9 @@ export declare type Options = {
|
|
|
7
7
|
};
|
|
8
8
|
export declare const key: PluginKey<any, any>;
|
|
9
9
|
export declare const uploadPlugin: import("@milkdown/utils/lib/types").WithExtend<string, Options, {
|
|
10
|
-
[x: string]: import("
|
|
10
|
+
[x: string]: import("@milkdown/prose/model").NodeType<any>;
|
|
11
11
|
} & {
|
|
12
|
-
[x: string]: import("
|
|
12
|
+
[x: string]: import("@milkdown/prose/model").MarkType<any>;
|
|
13
13
|
}, {
|
|
14
14
|
schema?: ((ctx: import("@milkdown/core").Ctx) => {
|
|
15
15
|
node?: Record<string, import("@milkdown/core").NodeSchema> | undefined;
|
package/lib/upload.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../src/upload.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../src/upload.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAuB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMvE,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;AACF,eAAO,MAAM,GAAG,qBAA0C,CAAC;AAE3D,eAAO,MAAM,YAAY;;;;;;;;;;;;;;EA0GvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/plugin-upload",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./lib/index.es.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
"milkdown plugin"
|
|
16
16
|
],
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@milkdown/core": "6.
|
|
19
|
-
"@milkdown/prose": "6.
|
|
18
|
+
"@milkdown/core": "6.1.0",
|
|
19
|
+
"@milkdown/prose": "6.1.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@milkdown/core": "^6.0.
|
|
23
|
-
"@milkdown/prose": "^6.0.
|
|
22
|
+
"@milkdown/core": "^6.0.1",
|
|
23
|
+
"@milkdown/prose": "^6.0.1"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@milkdown/utils": "6.
|
|
26
|
+
"@milkdown/utils": "6.1.0",
|
|
27
27
|
"tslib": "^2.3.1"
|
|
28
28
|
},
|
|
29
29
|
"nx": {
|
|
@@ -53,8 +53,7 @@
|
|
|
53
53
|
"scripts": {
|
|
54
54
|
"start": "concurrently -n es,dts \"vite build --watch\" \"tsc --emitDeclarationOnly --watch\"",
|
|
55
55
|
"test": "vitest",
|
|
56
|
-
"tsc": "tsc --noEmit",
|
|
57
|
-
"build": "
|
|
58
|
-
}
|
|
59
|
-
"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"
|
|
56
|
+
"tsc": "tsc --noEmit && echo",
|
|
57
|
+
"build": "tsc --emitDeclarationOnly && vite build"
|
|
58
|
+
}
|
|
60
59
|
}
|
package/src/default-uploader.ts
CHANGED
package/src/upload.ts
CHANGED
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
2
|
import { schemaCtx, ThemeIcon, themeManagerCtx } from '@milkdown/core';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
EditorState,
|
|
7
|
-
EditorView,
|
|
8
|
-
Fragment,
|
|
9
|
-
Node,
|
|
10
|
-
Plugin,
|
|
11
|
-
PluginKey,
|
|
12
|
-
Schema,
|
|
13
|
-
} from '@milkdown/prose';
|
|
3
|
+
import { Fragment, Node, Schema } from '@milkdown/prose/model';
|
|
4
|
+
import { EditorState, Plugin, PluginKey } from '@milkdown/prose/state';
|
|
5
|
+
import { Decoration, DecorationSet, EditorView } from '@milkdown/prose/view';
|
|
14
6
|
import { createPlugin } from '@milkdown/utils';
|
|
15
7
|
|
|
16
8
|
import { defaultUploader } from './default-uploader';
|