consider introducing an `<Island>` component

[ianstormtaylor]

Do you want to request a feature or report a bug?

Feature.

What's the current behavior?

Right now there are a few different situations where you want to include components directly inside the contenteditable editor element—menus, placeholders, etc. Sometimes you can get away with putting them in portals, but

But there are some issues when the components are inside the contenteditable:

• The components's HTML will be copied in text/html data, which isn't good because it messes up users copying HTML content out of your editor.
• Clicking on the component won't actually select the nearest spot in the editor, which isn't great for placeholders which should be click-through.

What's the expected behavior?

I wonder if it might be good to introduce an <Island> component that allows you to embed these small islands of potentially-ineditable, potentially-uncopyable, etc. content into the editor.

It might look like:

<Island
  editable={Boolean}
  copyable={Boolean}
  clickable={Boolean}
>
  ...
</Island>

Where they all default to false, but could be toggled to true if needed...

• editable === false would make it contenteditable="false".
• copyable === false would remove its HTML content from the editor on copies and cuts.
• clickable === false would make it so that clicking on it focuses the nearest editable element in the editor, like a placeholder behaves. Whereas clickable === true makes it so that it prevents the click event after you've handled it, so that it doesn't end up stealing the focus from the editor?

Related: https://github.com/ianstormtaylor/slate/issues/2034 Related: https://github.com/ianstormtaylor/slate/issues/1397 Related: https://github.com/ianstormtaylor/slate/issues/1344 Related: https://github.com/ianstormtaylor/slate/issues/1769