Rendering Different Characters in Place of Actual Transformation

1

Hello! I’m currently working on a special characters function in my rich text editor menubar that involves inserting characters like zero-width space, line separators, etc. The issue is that I need to render those characters using other characters for UI reasons, while still maintaining the correct JSON output. For example, this code below inserts a non-breaking space, but I would like to render “⎵” to display in the editor in its place:

dispatch(state.tr.insertText('\u00A0')),

Is there a way in prose-mirror to show one character but save another? (“⎵” vs an actual zero width space)

2

Maybe try using one decoration to hide the character the zero width, and another to show the underscore?

3

ProseMirror decorations currently don’t support replacing parts of the document. You could add display: none to the original characters and add widgets with the replacements, but that is likely to get messy and influence editing in awkward ways. So I don’t really have a good recommendation for how to approach this. In some cases it might be possible to CSS-kludge your way through (like adding an underline to a space), or an extra width + background to a zero-width space), but that’s not the most elegant or robust direction either.

4

How would I check to see if a specific transaction has been applied, such as checking if a zero-width space is present in the JSON?

5

I’m not sure transactions are the thing you want to target here—rather, you’d create decorations by finding the position of these characters in the current document, and then optionally optimize that by only recomputing the parts of the document that are near transactions’ step map ranges when the document is updated.