Hello,
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 (https://www.telerik.com/kendo-react-ui/components/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
${some_tag_key}
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>
</p>
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: https://stackblitz.com/edit/react-ts-1hlrqt.
But now I am stuck. I have three questions:
- How do I get text coming from API to be translated into my custom node? Right now I don’t see anything at all.
- 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.
- How do I translate my custom nodes back to the correct “tag code”?
Thanks in advance!
