Markdown shortcuts for checkbox lists

frontend/components/Editor/components/TodoItem.js

@@ -22,28 +22,26 @@ export default class TodoItem extends Component {
     const { children, checked, readOnly } = this.props;
 
     return (
-      <StyledLi contentEditable={false}>
-        <input
+      <ListItem>
+        <Checkbox
           type="checkbox"
           checked={checked}
           onChange={this.handleChange}
           disabled={readOnly}
         />
-        {' '}
-        <span contentEditable={!readOnly} suppressContentEditableWarning>
-          {children}
-        </span>
-      </StyledLi>
+        {children}
+      </ListItem>
     );
   }
 }
 
-const StyledLi = styled.li`
-  input {
-    margin-right: 0.25em;
-  }
-
-  &:last-child:focus {
-    outline: none;
-  }
+const ListItem = styled.li`
+  padding-left: 1.4em;
+  position: relative;
+`;
+
+const Checkbox = styled.input`
+  position: absolute;
+  left: 0;
+  top: 0.4em;
 `;

frontend/components/Editor/plugins/MarkdownShortcuts.js

@@ -40,17 +40,24 @@ export default function MarkdownShortcuts() {
     onSpace(ev: SyntheticEvent, state: Object) {
       if (state.isExpanded) return;
       const { startBlock, startOffset } = state;
-      const chars = startBlock.text.slice(0, startOffset).replace(/\s*/g, '');
+      const chars = startBlock.text.slice(0, startOffset).trim();
       const type = this.getType(chars);
 
       if (type) {
         if (type === 'list-item' && startBlock.type === 'list-item') return;
         ev.preventDefault();
 
-        const transform = state.transform().setBlock(type);
+        let checked;
+        if (chars === '[x]') checked = true;
+        if (chars === '[ ]') checked = false;
+        const transform = state
+          .transform()
+          .setBlock({ type, data: { checked } });
 
         if (type === 'list-item') {
-          if (chars === '1.') {
+          if (checked !== undefined) {
+            transform.wrapBlock('todo-list');
+          } else if (chars === '1.') {
             transform.wrapBlock('ordered-list');
           } else {
             transform.wrapBlock('bulleted-list');
@@ -234,6 +241,8 @@ export default function MarkdownShortcuts() {
         case '-':
         case '+':
         case '1.':
+        case '[ ]':
+        case '[x]':
           return 'list-item';
         case '>':
           return 'block-quote';

frontend/components/Editor/schema.js

@@ -19,7 +19,7 @@ import type { Props, Node, Transform } from './types';
 
 const TodoList = styled.ul`
   list-style: none;
-  padding-left: 0;
+  padding: 0 !important;
 
   ul {
     padding-left: 1em;