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, updateImageNode, imagePlugin } 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});

You might also want to add

1display: flow-root;

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