A ProseMirror image plugin with a lot of features:
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
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});
You might also want to add
1display: flow-root;
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