Custom "markdown-like" implementation

1

I have a problem with implementing a behavior that will allow me to have an editor with two views in which I can write (in both). One will contain literal text, and the other will detect certain regex patterns and apply a style to them and change the representation.

For example, I would like that if someone writes “raw” text in the editor:

“<tag>test</tag>”

then in the second editor should appear:

“test” with an underline in some color.

Could someone give me a general plan for implementing such behavior in Prosemirror?

Should I have 1 state and 2 views?

Should I write a parser that converts “raw” text into “pretty” text (displayed in second view)?

And should I write a serializer that converts “pretty” into “raw”?

Is Decoration suitable for highlighting text tags in “pretty”?

Thank you very much for all the tips

2

For a literal text editor, you probably want something like CodeMirror instead. If the second view needs to be editable, you could use ProseMirror for it, I suppose. These tags sound like they’d map well to ProseMirror marks.

2 Likes
3

Thanks!