prosemirror-image-uploader
v1.0.0
Published
The necessary image uploader for prosemirror based editors like (tiptap, remirror)
Downloads
181
Maintainers
Readme
prosemirror-image-uploader
The necessary image uploader for prosemirror based editors like (tiptap, remirror).
Features 🎉
- ✅ Image drop handling
- ✅ Image paste handling
- ✅
<img>
tag insertion handling - ✅ Typescript definitions
- ✅ Collaboration/undo history friendly
- ✅ No widgets/decorations
Installation 📦
npm i prosemirror-image-uploader
Basic Usage 📌
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
}
},
}
Approach 📚
Google Docs like approach is pursued. More coming soon...
Guide 🔭
Coming soon...
Caveats
Coming soon...
Examples
Coming soon...
Credits
Love our work?
Hit the star button. It helps ❤️
License
The MIT License (MIT). Please see License File for more information.