Can representation of displayed document be different from entered text?

Hello, I am new to CodeMirror 6.

I am working on a feature that is about building a code editor that converts sequences of characters input by the user into, in general, arbitrary symbols, or icons. A good example is emojis. I enter “:-)” and the editor renders an image, or some unicode character. Converting sequences of characters to symbols is, perhaps, easy, but my feature requires the user to be able to edit the entered text when this emoji is at the selection point. That is, as the selection changes and the cursor enters the emoji, I need to replace the emoji on the screen with the original sequence of characters that the user typed so that it can be edited. Basically, I need to be able to render a different representation of what the user enters but still be able to edit the original text by converting the representation at the insertion point to the original text. I hope this makes sense. My question is whether this can be achieved with CodeMirror 6. I mean without having to write a custom core module, etc. Thanks for any input.

You’ll definitely have to write custom extensions to do this, but it should be possible. Basically you’d scan the viewport for replaceable sequences of characters and create Decoration.replace decorations for them, except when the cursor is near them, and set things up so that these decorations are recomputed when necessary.