Editable button example: emulate button to work around browser bug

[jameshfisher]

Description
Unfortunately the "editable button" example I introduced has a bug on Chrome and Safari, where the cursor jumps around wrongly when using the "up" and "down" keys to navigate. This is due to a browser bug with display:inline-block elements, and there is no known workaround except to use display:inline.

I considered entirely replacing the "button" example with something else, but decided it's important for our examples to show real-world problems and solutions, regardless of whether they're ugly. Also, I leave this here in the hope that someone else comes along with a better workaround.

Video

The current bug at https://www.slatejs.org/examples/inlines in Chrome:

chrome-contenteditable-displayinlineblock-bug.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.)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7464b92

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