Inserting an SVG in the editor

1

Hello,

How can I insert an SVG in the editor ?

Thanks.

2

There are lots of ways you could insert an SVG, depending on what you’re wanting to do.

If you just want to insert a specific image or one of a set of images, you could define some type of icon node with an attribute for specifying the icon type to display. It would behave like any other leaf node in your document without any text content. It could be inline or block or whatever you want.

If you want to embed a user-provided image, take a look at the ProseMirror image upload example.

If you want to embed an SVG editor within the text editor, things get a bit more complicated, but it’s still very doable. You would basically define a node which renders to the DOM via ProseMirror’s NodeView mechanism. That NodeView could be an entire editor with all sorts of actions that result in changes getting dispatched to the ProseMirror view, modifying the ProseMirror state. This would in some ways be simpler than the “embedded code editor” example.

Hopefully this gets you pointed in the right direction. If not, you’ll need to describe what you want in more detail so we can help.

1 Like
3

Hello, thank you for your response, I have been experimenting the different solutions and the solution that worked best for my case is to create a SVG node, then to store all the node markup (its children) on the node attribute and then spit out the markup inside (toDOM function) .

Everything worked correctly and I could see the SVG inserted in the browser DOM, but the problem is that it does not render correctly, for example, here I tried a really simple SVG (an ellipse), the DOM has the SVG of the ellipse but not rendering it correctly (blank).

Note: The SVG get’s displayed correctly outside prosemirror

This is my simple svg Node

33
Capture d’écran 2019-07-05 à 09.37.33.png1546×954 70.7 KB

This is how it gets rendered on the browser

59
Capture d’écran 2019-07-05 à 09.57.59.png1255×731 46.3 KB

Thanks

4

@jhnsnc @marijn Do you guys have an idea about how to fix the problem ? thanks

5

My guess is that under the hood ProseMirror is only using Document.createElement rather than Document.createElementNS (cf. https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS). Creating SVG elements without the correct namespace will result in DOM that looks plausible but does not actually work as an SVG.

I would argue that ProseMirror is doing the correct thing in not bothering with different namespaces. If you really want to be able to render a document like this, you should look into using a ProseMirror NodeView so that you get full control over how that node gets rendered to DOM.

However, also consider that using ProseMirror to directly manipulate SVG nodes might be the wrong solution. It’s technically possible, but it seems like a poor match for ProseMirror as a toolkit for creating web-based rich text editors. If you want to embed an SVG asset, consider a simple leaf node with well-defined attributes which can then render the SVGs via something simpler like an <img> tag. If you want to embed an SVG editor, again use a simple leaf node which uses a NodeView to render an editor, handle inputs, and dispatch changes as appropriate.

ProseMirror is robust/flexible enough to enable some crazy things, but if you can take the time to articulate exactly what behavior you are trying to support, you can save yourself a lot of unnecessary technical work.

1 Like
6

For future reference, it should be possible to create SVGs by using the namespace followed by a space as shown in ProseMirror’s renderSpec logic, here:

So, I think you would have to do: return ["http://www.w3.org/2000/svg svg", { ..

2 Likes