fix selecting mention element in android, can't evoke the keyboard

[YaoKaiLun]

Description
In android, once selecting an inline void element, the keyboard doesn't be evoked, unless we set it's contenteditable to be true, like below

But it will make the children (a zero width node) to be contenteditable. So we should disable it's inputting at the beforeinput event.

Issue
Fixes: #5183

Example

https://www.slatejs.org/examples/mentions

before:

before-void.mp4

after:

after-void.mp4

Checks

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 88b91e8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[YaoKaiLun]

@BitPhinix please review!

[BitPhinix]

Not a huge fan of this approach. Having the nodes contenteditable will likely mess with autocomplete and unexpected behaviour especially on more complex void nodes. There are other hacks to prevent the keyboard from closing when selecting inline void nodes, like adding pseudo elements with (zero-width) spaces around them via css.

[YaoKaiLun]

Allright, I'd try the pseudo elements method.

[clauderic]

@BitPhinix can you provide an example of the approach you had in mind? I played with a few different variations using ::before / ::after pseudo elements with zero-width space content on void inline nodes, to no avail.

[bryanph]

I use the following component for fixing this in general for inlines, not sure if this resolves your issue on android though. You use it by placing this before and after children in your inline component.

// Put this at the start and end of an inline component to work around this Chromium bug:
// https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
// Necessary when the component has no padding on the sides
export const InlineChromiumBugfix = () => (
  <span
    contentEditable={false}
    css={css`
      font-size: 0;
    `}
  >
    ${String.fromCodePoint(160) /* Non-breaking space */}
  </span>
)

[clauderic]

@bryanph I tried different variations of your suggestion on Android but haven't had any success so far.

The only solution I've found that works so far is the one described in this PR, but I would love if we could find a solution that doesn't involve consumers having to handle Android-specific edge cases in the markup of their inline void nodes.