Skip to content

The necessary image uploader for prosemirror based editors like (tiptap, remirror)

License

Notifications You must be signed in to change notification settings

OrkhanAlikhanov/prosemirror-image-uploader

Repository files navigation

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.

About

The necessary image uploader for prosemirror based editors like (tiptap, remirror)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published