data-slate-spacer span is visible when void inline-elements are selected

[stefanli]

Description When a void inline-element is included in a selection, the data-slate-spacer span becomes visible, causing a slightly glitchy-looking selection. This is trivially re-produced in the official "Mentions" example here: https://www.slatejs.org/examples/mentions

Screenshots See the slightly darker colored selection color on the left side of the @character:

Steps To reproduce the behavior:

1. Go to https://www.slatejs.org/examples/mentions
2. Select one of the @mention void elements.
3. Observe the highlighted data-slate-space span element.

Expectation For the span not to be visible when selected like this:

Environment

• Slate Version: [e.g. 0.82.0]
• Operating System: [e.g. MacOS]
• Browser: [e.g. Chrome]

Context This can be fixed by using the following css:

[data-slate-spacer="true"] {
  visibility: hidden;
}

or alternatively:

[data-slate-spacer="true"] {
  user-select: none;
}

I haven't noticed any side-effects from testing these but I'm unsure if it is safe. Happy to submit a pull request if someone can chime in on the safety and which approach (if any) is preferred.

[stefanli]

Update: visibility: hidden is definitely not safe as it break keyboard navigation.

[sensible-s]

+1 would like to see this fix implemented.

Also, looks like it's an issue with Chrome:

But not firefox: