From f1b147860bb5b8048d455011e34bbd3d76739ada Mon Sep 17 00:00:00 2001
From: AlbertHilb <alberthilbert@gmail.com>
Date: Thu, 30 Mar 2017 16:35:01 +0200
Subject: [PATCH] Rewrite `CheckListItem` component. Only the area we really
 want to be editable (#696)

must lie inside contenteditable elements.
---
 examples/check-lists/index.js | 12 +++++++++---
 examples/index.css            | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/examples/check-lists/index.js b/examples/check-lists/index.js
index 6d1effc07..7f4511eeb 100644
--- a/examples/check-lists/index.js
+++ b/examples/check-lists/index.js
@@ -40,15 +40,21 @@ class CheckListItem extends React.Component {
     const { attributes, children, node } = this.props
     const checked = node.data.get('checked')
     return (
-      <div {...attributes} className="check-list-item">
-        <span contentEditable={false}>
+      <div
+        className="check-list-item"
+        contentEditable={false}
+        {...attributes}
+      >
+        <span>
           <input
             type="checkbox"
             checked={checked}
             onChange={this.onChange}
           />
         </span>
-        {children}
+        <span contentEditable>
+          {children}
+        </span>
       </div>
     )
   }
diff --git a/examples/index.css b/examples/index.css
index 25679f582..803b08292 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -208,7 +208,19 @@ input:focus {
   margin-top: 0;
 }
 
-.check-list-item [contenteditable="false"] {
-  display: inline-block;
+.check-list-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.check-list-item > span:first-child {
   margin-right: 0.75em;
 }
+
+.check-list-item > span:last-child {
+  flex: 1;
+}
+
+.check-list-item > span:last-child:focus {
+  outline: none;
+}