What's this about?

A 2.0 update for ProseMirror image plugin with resizable images!

It already had 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

And now resizable images are added with:

  • switchable scaling ( resized images scale with editor width )
  • an updated overlay if resize is enabled ( removed the fullWidth option )
  • css files distributed with the module for different resize styles
  • body resize listener so your images won't be to big even if the browser is resized
  • settable max/min image size and image margins
  • support for inline image nodes ( not compatible with titles! )

Check it out! You can try different styles with the selects below:

The code for this post is here

How to use?

  1. Install the plugin: npm i -S prosemirror-image-plugin
  2. Import the CSS files for your setup
  3. Import defaultSettings from the plugin ( and modify it if you want )
  4. Update the image node in the ProseMirror schema to have all the necessary properties with updateImageNode
  5. 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
6import "prosemirror-image-plugin/dist/styles/common.css";
7import "prosemirror-image-plugin/dist/styles/withResize.css";
8import "prosemirror-image-plugin/dist/styles/sideResize.css";
9
10// Update your settings here!
11const imageSettings = {...defaultSettings};
12
13const imageSchema = new Schema({
14  nodes: updateImageNode(schema.spec.nodes, {
15    ...imageSettings,
16  }),
17  marks: schema.spec.marks,
18});
19
20const initialDoc = {
21  content: [
22    {
23      content: [
24        {
25          text: "Start typing!",
26          type: "text",
27        },
28      ],
29      type: "paragraph",
30    },
31  ],
32  type: "doc",
33};
34
35const state = EditorState.create({
36  doc: imageSchema.nodeFromJSON(initialDoc),
37  plugins: [
38    ...exampleSetup({
39      schema: imageSchema,
40      menuContent: menu,
41    }),
42    imagePlugin(imageSchema, { ...imageSettings }),
43  ],
44});
45
46const view: EditorView = new EditorView(document.getElementById("editor"), {
47  state,
48});
49

You might also want to add

1display: flow-root;
2

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

Now....You have better images, 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.