From 0b256b211ee44b5deba584fa732bfd4040f8c13d Mon Sep 17 00:00:00 2001
From: Jim Fisher <jameshfisher@gmail.com>
Date: Wed, 27 Oct 2021 05:12:36 +0100
Subject: [PATCH] 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 | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/site/examples/inlines.tsx b/site/examples/inlines.tsx
index 424952e2c..617fe8645 100644
--- a/site/examples/inlines.tsx
+++ b/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>
   )
 }