Make soft-hyphen and non-breaking space visible

[mariusGundersen]

We want to make it clear to editors where text contains soft-hyphens and non-breaking spaces. In many other editors this is done by rendering a vertical line where the invisible character is. I don't see any way that I can customize the rendering of the text in the editor, to make it visible. It would also be great if there was a way to add a button to the toolbar to insert this character, or else the editor would have to copy it from for example wikipedia.

See https://en.wikipedia.org/wiki/Soft_hyphen and https://en.wikipedia.org/wiki/Non-breaking_space

[christianhg]

Hi 👋

I like these ideas.

So basically:

1. A way to show invisible characters and
2. First-class support for building a symbol picker

Did I understand correctly?

[mariusGundersen]

yes, that would cover it. I guess a more generic solution would be a way to customize the way text is rendered, someway to map a string into a react component. That way I could replace   with <NBSP /> or something similar. But maybe that is difficult to do and keep the text input?

[Ortes]

I need this too. I didn't find a way to provide to writers a good editing experience with sanity.
In my case writers would also need symbol-picker and a find and replace feature.