Change rendering of text based on cursor position

[hayer]

Hi!

This seems like a great editor-baseline.

I am currently trying to make a markdown editor. I am using PrismJS to tokenize the text.
Now, my wanted behavior is to render headings, links etc without the markdown parts when the cursor is outside the element.

Coursor is outside This is a heading, but when the cursor is moved inside # This is a heading.
Same goes for links, To read more click this link., when cursor moves inside To read more click [this](https://example.com) link.

(Cursor as in editor cursor, not mouse cursor).

Currently I am trying to use the decorate-callback to tokenize.
I do a if cursor is inside: text = text with markdown. Else: text = plain text

I can see that I push the leaf correctly, and inside the renderLeaf I can see that the leaf is as expected..
but it still renders the whole text with markdown and all.

I feel like I am attacking this from the wrong angle; should I use something else than decorate and renderLeaf callback?

Not looking for a complete answer, just some pointers.

[WindRunnerMax]

I don't think this is an easy task. The main conflict is that you need to handle two different display contents for the same node. Deciding the selection area, on the other hand, isn't that complicated.

My suggestion is to use decorators or renderLeaf to modify only the style when the cursor moves. For example, when the cursor is on the current line, it still shows "# This is a heading" but without the heading style. When the cursor leaves the line, the style is applied.

[WindRunnerMax]

Alternatively, you could consider using React to render the content when the selection leaves the line, and use an input field for editing. This doesn't necessarily require slate. You can achieve a block-based Markdown editor using input fields.