From 799ba2f5e36dab9cb6ea932ada8bd239b5ed36fc Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 25 Sep 2017 20:55:13 -0700
Subject: [PATCH 1/3] Markdown shortcuts for checkbox lists

---
 .../components/Editor/components/TodoItem.js  | 28 +++++++++----------
 .../Editor/plugins/MarkdownShortcuts.js       | 15 ++++++++--
 frontend/components/Editor/schema.js          |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/components/Editor/components/TodoItem.js b/frontend/components/Editor/components/TodoItem.js
index 69988b7d7..53c38ef4d 100644
--- a/frontend/components/Editor/components/TodoItem.js
+++ b/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;
 `;
diff --git a/frontend/components/Editor/plugins/MarkdownShortcuts.js b/frontend/components/Editor/plugins/MarkdownShortcuts.js
index 1d4533c65..b63fec754 100644
--- a/frontend/components/Editor/plugins/MarkdownShortcuts.js
+++ b/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';
diff --git a/frontend/components/Editor/schema.js b/frontend/components/Editor/schema.js
index 6c95d36a9..279c3eb13 100644
--- a/frontend/components/Editor/schema.js
+++ b/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;

From fc98e96d9435f1c9b5c607827f66bed20baf6e75 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 25 Sep 2017 21:40:59 -0700
Subject: [PATCH 2/3] cleanup

---
 frontend/components/Editor/components/TodoItem.js |  4 ++--
 frontend/components/Editor/components/TodoList.js | 13 +++++++++++++
 frontend/components/Editor/schema.js              | 15 +++------------
 3 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 frontend/components/Editor/components/TodoList.js

diff --git a/frontend/components/Editor/components/TodoItem.js b/frontend/components/Editor/components/TodoItem.js
index 53c38ef4d..0fd1d6528 100644
--- a/frontend/components/Editor/components/TodoItem.js
+++ b/frontend/components/Editor/components/TodoItem.js
@@ -23,7 +23,7 @@ export default class TodoItem extends Component {
 
     return (
       <ListItem>
-        <Checkbox
+        <Input
           type="checkbox"
           checked={checked}
           onChange={this.handleChange}
@@ -40,7 +40,7 @@ const ListItem = styled.li`
   position: relative;
 `;
 
-const Checkbox = styled.input`
+const Input = styled.input`
   position: absolute;
   left: 0;
   top: 0.4em;
diff --git a/frontend/components/Editor/components/TodoList.js b/frontend/components/Editor/components/TodoList.js
new file mode 100644
index 000000000..9cf649a69
--- /dev/null
+++ b/frontend/components/Editor/components/TodoList.js
@@ -0,0 +1,13 @@
+// @flow
+import styled from 'styled-components';
+
+const TodoList = styled.ul`
+  list-style: none;
+  padding: 0 !important;
+
+  ul {
+    padding-left: 1em;
+  }
+`;
+
+export default TodoList;
diff --git a/frontend/components/Editor/schema.js b/frontend/components/Editor/schema.js
index 279c3eb13..e915b636c 100644
--- a/frontend/components/Editor/schema.js
+++ b/frontend/components/Editor/schema.js
@@ -1,11 +1,11 @@
 // @flow
 import React from 'react';
-import styled from 'styled-components';
 import Code from './components/Code';
 import InlineCode from './components/InlineCode';
 import Image from './components/Image';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
+import TodoList from './components/TodoList';
 import {
   Heading1,
   Heading2,
@@ -17,15 +17,6 @@ import {
 import Paragraph from './components/Paragraph';
 import type { Props, Node, Transform } from './types';
 
-const TodoList = styled.ul`
-  list-style: none;
-  padding: 0 !important;
-
-  ul {
-    padding-left: 1em;
-  }
-`;
-
 const createSchema = () => {
   return {
     marks: {
@@ -63,7 +54,7 @@ const createSchema = () => {
     },
 
     rules: [
-      // ensure first node is a heading
+      // ensure first node is always a heading
       {
         match: (node: Node) => {
           return node.kind === 'document';
@@ -77,7 +68,7 @@ const createSchema = () => {
         },
       },
 
-      // remove any marks in first heading
+      // automatically removes any marks in first heading
       {
         match: (node: Node) => {
           return node.kind === 'heading1';

From 6d4466b9943640ab65be420eeee26d3854051c21 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 25 Sep 2017 21:45:01 -0700
Subject: [PATCH 3/3] Fix up/down arrow navigation

---
 frontend/components/Editor/components/TodoItem.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/Editor/components/TodoItem.js b/frontend/components/Editor/components/TodoItem.js
index 0fd1d6528..47b75603f 100644
--- a/frontend/components/Editor/components/TodoItem.js
+++ b/frontend/components/Editor/components/TodoItem.js
@@ -28,6 +28,7 @@ export default class TodoItem extends Component {
           checked={checked}
           onChange={this.handleChange}
           disabled={readOnly}
+          contentEditable={false}
         />
         {children}
       </ListItem>