From e90934aa963ccab8c96e93a87cabfb45298bccd1 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 5 Nov 2020 22:16:18 +0100
Subject: [PATCH] add more content

---
 docs/src/demos/Examples/TodoApp/index.spec.js |  5 ++
 docs/src/demos/Examples/TodoApp/index.vue     | 70 +++++++++++++++++++
 docs/src/demos/Nodes/TaskItem/index.spec.js   |  5 ++
 docs/src/demos/Nodes/TaskItem/index.vue       | 66 +++++++++++++++++
 docs/src/docPages/api/keyboard-shortcuts.md   |  7 +-
 docs/src/docPages/api/nodes/task-item.md      |  7 +-
 docs/src/docPages/examples/todo-app.md        |  3 +
 docs/src/links.yaml                           | 46 +-----------
 8 files changed, 163 insertions(+), 46 deletions(-)
 create mode 100644 docs/src/demos/Examples/TodoApp/index.spec.js
 create mode 100644 docs/src/demos/Examples/TodoApp/index.vue
 create mode 100644 docs/src/demos/Nodes/TaskItem/index.spec.js
 create mode 100644 docs/src/demos/Nodes/TaskItem/index.vue
 create mode 100644 docs/src/docPages/examples/todo-app.md

diff --git a/docs/src/demos/Examples/TodoApp/index.spec.js b/docs/src/demos/Examples/TodoApp/index.spec.js
new file mode 100644
index 00000000..ee7cbc0b
--- /dev/null
+++ b/docs/src/demos/Examples/TodoApp/index.spec.js
@@ -0,0 +1,5 @@
+context('/examples/todo-app', () => {
+  before(() => {
+    cy.visit('/examples/todo-app')
+  })
+})
diff --git a/docs/src/demos/Examples/TodoApp/index.vue b/docs/src/demos/Examples/TodoApp/index.vue
new file mode 100644
index 00000000..9ebd584a
--- /dev/null
+++ b/docs/src/demos/Examples/TodoApp/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+const CustomDocument = Document.extend({
+  content: 'taskList',
+})
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        CustomDocument(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>
diff --git a/docs/src/demos/Nodes/TaskItem/index.spec.js b/docs/src/demos/Nodes/TaskItem/index.spec.js
new file mode 100644
index 00000000..eed0a538
--- /dev/null
+++ b/docs/src/demos/Nodes/TaskItem/index.spec.js
@@ -0,0 +1,5 @@
+context('/api/nodes/task-item', () => {
+  before(() => {
+    cy.visit('/api/nodes/task-item')
+  })
+})
diff --git a/docs/src/demos/Nodes/TaskItem/index.vue b/docs/src/demos/Nodes/TaskItem/index.vue
new file mode 100644
index 00000000..db0385f3
--- /dev/null
+++ b/docs/src/demos/Nodes/TaskItem/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>
diff --git a/docs/src/docPages/api/keyboard-shortcuts.md b/docs/src/docPages/api/keyboard-shortcuts.md
index d4db84bf..923e509c 100644
--- a/docs/src/docPages/api/keyboard-shortcuts.md
+++ b/docs/src/docPages/api/keyboard-shortcuts.md
@@ -5,11 +5,16 @@
 ## Introduction
 tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
 
-Funfact: A while ago, we built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
+Funfact: We built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
 
 ## Predefined keyboard shortcuts
 Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
 
+### Ideas
+* Task List ⌥⌘L (iaWriter)
+* Mark Task Complete ⌘. (iaWriter)
+* Text Highlight ⌘E (Paper)
+
 ### Essentials
 ❌ = untested
 
diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md
index be6e772c..97aab620 100644
--- a/docs/src/docPages/api/nodes/task-item.md
+++ b/docs/src/docPages/api/nodes/task-item.md
@@ -1,4 +1,7 @@
 # TaskItem
+This extension renders a task item list element, which is a `<li>` tag with a `data-type` attribute set to `taskItem`. It also renders a checkbox inside the list element, which updates a `checked` attribute.
+
+This extension doesn’t require any JavaScript framework, it’s based on plain JavaScript.
 
 ## Installation
 ::: warning Use with TaskList
@@ -18,8 +21,8 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
 | ------ | ------ | ------- | -------------------------------------------- |
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
-## Commands
-*None*
+## Keyboard shortcuts
+* New list item: `Enter`
 
 ## Source code
 [packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)
diff --git a/docs/src/docPages/examples/todo-app.md b/docs/src/docPages/examples/todo-app.md
new file mode 100644
index 00000000..ef46ec77
--- /dev/null
+++ b/docs/src/docPages/examples/todo-app.md
@@ -0,0 +1,3 @@
+# Todo App
+
+<demo name="Examples/TodoApp" highlight="" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 4d18b0b5..f4fe86da 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -18,59 +18,20 @@
           link: /examples/collaborative-editing
         - title: Markdown shortcuts
           link: /examples/markdown-shortcuts
-        # - title: Menu Bubble
-        #   link: /examples/menu-bubble
-        #   draft: true
-        # - title: Floating Menu
-        #   link: /examples/floating-menu
-        #   draft: true
         - title: Formatting
           link: /examples/formatting
         - title: Links
           link: /examples/links
           draft: true
-        # - title: Images
-        #   link: /examples/images
-        #   draft: true
-        # - title: Hiding Menu Bar
-        #   link: /examples/hiding-menu-bar
-        #   draft: true
-        # - title: Todo List
-        #   link: /examples/todo-list
-        #   draft: true
-        # - title: Tables
-        #   link: /examples/tables
-        #   draft: true
-        # - title: Search and Replace
-        #   link: /examples/search-and-replace
-        #   draft: true
-        # - title: Suggestions
-        #   link: /examples/suggestions
-        #   draft: true
-        # - title: Code Highlighting
-        #   link: /examples/code-highlighting
-        #   draft: true
+        - title: Todo App
+          link: /examples/todo-app
+          draft: true
         - title: History
           link: /examples/history
         - title: Read-only
           link: /examples/read-only
-        # - title: Embeds
-        #   link: /examples/embeds
-        #   draft: true
-        # - title: Placeholder
-        #   link: /examples/placeholder
-        #   draft: true
         - title: Focus
           link: /examples/focus
-        # - title: Title
-        #   link: /examples/title
-        #   draft: true
-        # - title: Trailing Paragraph
-        #   link: /examples/trailing-paragraph
-        #   draft: true
-        # - title: Drag Handle
-        #   link: /examples/drag-handle
-        #   draft: true
         - title: Minimalist
           link: /examples/minimalist
         - title: Export HTML or JSON
@@ -136,7 +97,6 @@
           link: /api/nodes/task-list
         - title: TaskItem
           link: /api/nodes/task-item
-          draft: true
         - title: Text
           link: /api/nodes/text
     - title: Marks