The necessary image uploader for prosemirror based editors like (tiptap, remirror).
- โ Image drop handling
- โ Image paste handling
- โ
<img>
tag insertion handling - โ Typescript definitions
- โ Collaboration/undo history friendly
- โ No widgets/decorations
npm i prosemirror-image-uploader
In your code, register the image upload plugin with the required upload
function.
import { imageUploader } from 'prosemirror-image-uploader'
EditorState.create({
plugins: [
imageUploader({
async upload(fileOrUrl: File | string, view: EditorView) {
let url: string /// await uploadFileOrUrlToServerAndObtainUrl()
return url
}
})
]
})
Also adjust your image node to accept 2 attributes, a boolean error
, and a string uploadId
:
{
image: {
attrs: {
src: {},
alt: { default: null },
title: { default: null },
uploadId: { default: null }, /// added
error: { default: null } /// added
},
parseDOM: [{tag: 'img[src]', getAttrs(dom) {
return {
src: dom.getAttribute('src'),
title: dom.getAttribute('title'),
alt: dom.getAttribute('alt'),
uploadId: dom.getAttribute('uploadId'), /// added
error: dom.getAttribute('error') /// added
}
}}],
toDOM(node) {
let { src, alt, title, uploadId, error } = node.attrs; /// updated
return ['img', { src, alt, title, uploadId, error }] /// updated
}
},
}
Google Docs like approach is pursued. More coming soon...
Coming soon...
Coming soon...
Coming soon...
Hit the star button. It helps โค๏ธ
The MIT License (MIT). Please see License File for more information.