How to prevent marks from applying to placeholder?

[OliverWales]

For some reason some marks (bold, italic and code) but not others (super/subscript, underline) are being applied to the editor placeholder. The Plate playground does not have this issue so it's more likely a setup issue than a bug. Can anyone help me figure out why this is happening?

Screen.Recording.2023-09-28.at.14.36.46.mov

See code below, happy to provide other snippets is relevant.

[12joan]

By default, the placeholder option on PlateContent gets passed directly to Slate's Editable; Plate doesn't do anything custom with placeholder rendering by default.

The playground is using a custom placeholder solution, which is unrelated to Slate's placeholder. See how it's being used in createPlateUI.

[OliverWales]

Cheers Joe, I'll give this a go and report back :)

[OliverWales]

@12joan I gave this a go and it creates a placeholder unaffected by the node style. However, having every single paragraph node listening on editor state to decide whether to render the placeholder absolutely decimates performance for long pages.

Unless you have any other suggestions, I'm going to look at whether I can add it to all paragraph nodes and then show / hide it using CSS based on some state at the top level of the editor.

[12joan]

You could use the native Slate placeholder (the one that is affected by node style) and use the suggestion I made in the Slack?

One solution might be to bypass all formatting in your renderLeaf if the leaf contains no text except for the placeholder, which you might be able to determine using the leaf prop of renderLeaf.

See useEditableProps, pipeRenderLeaf and pluginRenderLeaf to see how Plate constructs the renderLeaf function it passes to Slate. If you provide your own renderLeaf function to Plate, this will be applied last of all. You might be able to handle the placeholder case as a special case.

[zbeyens]

I've discarded native Slate placeholder just because it takes a few ms to render when the editor gets empty. It also has weird styling. Definitely needs some work.

2023-10-03.at.12.18.32.mp4

[zbeyens]

We also have a performance issue using withPlaceholders. If you have a performant suggestion to plate core, I'd be open to it.