What's this about?

A ProseMirror image plugin with a lot of features:

  • Optional image title
  • Customizable image overlay
  • Image alignment ( center, full width, left and right are default )
  • Easy image uploading trough a HTTP endpoint
  • Optionally removing deleted images
  • Image drop & data URL paste handling

Check it out! The editor below does not upload the images anywhere, just inserts the dataURI into the ProseMirror document, which can freeze the browser up, it works fine if you host the images.

Try out with this image, drag it in or save it and pick it with the file selector.

The code for this post is here

How to use?

  1. Install the plugin: npm i -S prosemirror-image-plugin
  2. Import defaultSettings from the plugin ( and modify it if you want )
  3. Update the image node in the ProseMirror schema to have all the necessary properties
  4. Initialize the editor with the plugin

In codespeak:

1import { schema } from "prosemirror-schema-basic";
2import { EditorState } from "prosemirror-state";
3import { EditorView } from "prosemirror-view";
4import { defaultSettings } from "prosemirror-image-plugin";
5
6// Update your settings here!
7const imageSettings = {...defaultSettings};
8
9const imageSchema = new Schema({
10  nodes: updateImageNode(schema.spec.nodes, {
11    ...imageSettings,
12  }),
13  marks: schema.spec.marks,
14});
15
16const initialDoc = {
17  content: [
18    {
19      content: [
20        {
21          text: "Start typing!",
22          type: "text",
23        },
24      ],
25      type: "paragraph",
26    },
27  ],
28  type: "doc",
29};
30
31const state = EditorState.create({
32  doc: imageSchema.nodeFromJSON(initialDoc),
33  plugins: [
34    ...exampleSetup({
35      schema: imageSchema,
36      menuContent: menu,
37    }),
38    imagePlugin(imageSchema, { ...imageSettings }),
39  ],
40});
41
42const view: EditorView = new EditorView(document.getElementById("editor"), {
43  state,
44});
45

You might also want to add

1display: flow-root;
2

to the editor style in order to have correct floating images.

After that you need to add some CSS from here and voila! You have better images now, and the world just got a bit better.

You can check out the docs at https://gitlab.com/emergence-engineering/prosemirror-image-plugin

Need more assistance?
We can help you in finding the most adequate solution for your issue!
Video consultation
Book an interactive video consultation with us. Get an interactive one on one or team session with our experienced developers.
Educate your team
We can hold on-site (in the EU) or online trainings. We can help your team to learn new technologies or master certain "grey area" aspects of already used tools.
Hire us to build the product you desire
Hire an individual or a team of developers to solve build your product. We can integrate into an ongoing project, or kick off and layout the foundations of an entirely new solution.