Rewrite CheckListItem component. Only the area we really want to be editable (#696)

must lie inside contenteditable elements.

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">
+      <div
-        <span contentEditable={false}>
+        className="check-list-item"
+        contentEditable={false}
+        {...attributes}
+      >
+        <span>
           <input
             type="checkbox"
             checked={checked}
             onChange={this.onChange}
           />
         </span>
+        <span contentEditable>
           {children}
+        </span>
       </div>
     )
   }

examples/index.css

@@ -208,7 +208,19 @@ input:focus {
   margin-top: 0;
 }
 
-.check-list-item [contenteditable="false"] {
+.check-list-item {
-  display: inline-block;
+  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;
+}