Creating a custom node with html inside


first I want to say that I have been trying to find the solution in this forum, on StackOverflow and in the examples posted by ProseMirror but so far I have been unable. I have tried some suggestions but non have helped me. If the answer is somewhere I have already looked (or not looked) I apologize.

I have a Kendo React RichText Editor ( and since this editor is based on ProseMirror and I think my problem is related to ProseMirror rather than Kendo, I ask here.

This editor can be pre-filled with a value from an API. This value can contain “custom tags” looking like this


or like this

<span style={{visibility: 'hidden'}}>$</span>some_tag_key<span style={{visibility: 'hidden'}}>$</span>

These tags are used by the API to parse a text for an email, and the editor is used to create difference standardized email templates. An example of a full text coming from the API would be:

<p>Hello ${receiver},</p>
<p>Welcome to this page!</p>
<p>Best regards<br>
    <span style={{visibility: 'hidden'}}>$</span>sender<span style={{visibility: 'hidden'}}>$</span>

I also have a list of “custom tags” the user should be able add to the email template using a dropdown. I can focus on either of the above “tag types”, and I don’t need to support both.

I have some prerequisites:

  • The extra characters “${”, “}” or “<span style={{…” should not be displayed in the editor, but must be present when getting the HTML from the editor when creating or updating a template.
  • The tags should have a different appearance than the rest of the text to distinguish them. They should have grey background and a darker grey border.
  • The tags should be draggable.

Therefore I am trying to create a custom node to put these tags in. My thought is that any tags coming from the API should be translated into this custom node, and any tags added using a dropdown should also be this custom node, and when exported to HTML have the code of a tag.

I have focused on the second solution ("<span style={{…") since it looked more straight forward to me, but I’m open to use the other one if it might be easier. This is what I have done so far:

But now I am stuck. I have three questions:

  1. How do I get text coming from API to be translated into my custom node? Right now I don’t see anything at all.
  2. How to I add a new node with the correct tag key to the editor? I understand that right now I’m adding a mark and not a noe, but I don’t understand how to add a node instead.
  3. How do I translate my custom nodes back to the correct “tag code”?

Thanks in advance!

Did you ever figure this out? I need something similar.

I want to wrap selected text with a span. I’ll keep looking :slight_smile: