Editable button example: emulate button to work around browser bug (#4630)

It's important to have 100% working examples. Unfortunately this 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.

site/examples/inlines.tsx

@@ -249,18 +249,33 @@ const LinkComponent = ({ attributes, children, element }) => {
 
 const EditableButtonComponent = ({ attributes, children }) => {
   return (
-    <button
+    /*
+      Note that this is not a true button, but a span with button-like CSS.
+      True buttons are display:inline-block, but Chrome and Safari
+      have a bad bug with display:inline-block inside contenteditable:
+      - https://bugs.webkit.org/show_bug.cgi?id=105898
+      - https://bugs.chromium.org/p/chromium/issues/detail?id=1088403
+      Worse, one cannot override the display property: https://github.com/w3c/csswg-drafts/issues/3226
+      The only current workaround is to emulate the appearance of a display:inline button using CSS.
+    */
+    <span
       {...attributes}
       onClick={ev => ev.preventDefault()}
       // Margin is necessary to clearly show the cursor adjacent to the button
       className={css`
         margin: 0 0.1em;
+
+        background-color: #efefef;
+        padding: 2px 6px;
+        border: 1px solid #767676;
+        border-radius: 2px;
+        font-size: 0.9em;
       `}
     >
       <InlineChromiumBugfix />
       {children}
       <InlineChromiumBugfix />
-    </button>
+    </span>
   )
 }