From 3e00fadcaa3f70eb4f881a2b34aa4d645c4e3fd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 30 Oct 2020 13:19:06 +0100
Subject: [PATCH] add basic task list and task item extension

---
 docs/src/demos/Extensions/TaskList/index.vue  | 53 +++++++++++++++++
 docs/src/docPages/api/extensions/task-list.md | 31 ++++++++++
 docs/src/links.yaml                           |  3 +
 packages/extension-bullet-list/index.ts       |  4 +-
 packages/extension-list-item/index.ts         |  4 +-
 packages/extension-ordered-list/index.ts      |  4 +-
 packages/extension-task-item/index.ts         | 59 +++++++++++++++++++
 packages/extension-task-item/package.json     | 17 ++++++
 packages/extension-task-list/index.ts         | 45 ++++++++++++++
 packages/extension-task-list/package.json     | 17 ++++++
 10 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 docs/src/demos/Extensions/TaskList/index.vue
 create mode 100644 docs/src/docPages/api/extensions/task-list.md
 create mode 100644 packages/extension-task-item/index.ts
 create mode 100644 packages/extension-task-item/package.json
 create mode 100644 packages/extension-task-list/index.ts
 create mode 100644 packages/extension-task-list/package.json

diff --git a/docs/src/demos/Extensions/TaskList/index.vue b/docs/src/demos/Extensions/TaskList/index.vue
new file mode 100644
index 00000000..bae41d95
--- /dev/null
+++ b/docs/src/demos/Extensions/TaskList/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().taskList().run()" :class="{ 'is-active': editor.isActive('task_list') }">
+      task list
+    </button>
+
+    <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>A list item</li>
+          <li>And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/docs/src/docPages/api/extensions/task-list.md b/docs/src/docPages/api/extensions/task-list.md
new file mode 100644
index 00000000..3cc62c65
--- /dev/null
+++ b/docs/src/docPages/api/extensions/task-list.md
@@ -0,0 +1,31 @@
+# TaskList
+This extension enables you to use task lists in the editor. They are rendered as `<ul>` HTML tags.
+
+## Installation
+::: warning Use with TaskItem
+The `TaskList` extension is intended to be used with the [`TaskItem`](/api/extensions/task-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+:::
+
+```bash
+# With npm
+npm install @tiptap/extension-task-list @tiptap/extension-task-item
+
+# Or: With Yarn
+yarn add @tiptap/extension-task-list @tiptap/extension-task-item
+```
+
+## Settings
+| Option | Type   | Default | Description                                  |
+| ------ | ------ | ------- | -------------------------------------------- |
+| class  | string | –       | Add a custom class to the rendered HTML tag. |
+
+## Commands
+| Command     | Options | Description           |
+| ----------- | ------- | --------------------- |
+| task_list | —       | Toggle a task list. |
+
+## Source code
+[packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)
+
+## Usage
+<demo name="Extensions/TaskList" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index f5a3d913..4c7cd515 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -156,6 +156,9 @@
         #   draft: true
         - title: Strike
           link: /api/extensions/strike
+        - title: TaskList
+          link: /api/extensions/task-list
+          draft: true
         # - title: TableCell
         #   link: /api/extensions/table-cell
         #   draft: true
diff --git a/packages/extension-bullet-list/index.ts b/packages/extension-bullet-list/index.ts
index 45e6bc18..cb949d70 100644
--- a/packages/extension-bullet-list/index.ts
+++ b/packages/extension-bullet-list/index.ts
@@ -4,10 +4,10 @@ import { wrappingInputRule } from 'prosemirror-inputrules'
 const BulletList = createNode({
   name: 'bullet_list',
 
-  content: 'list_item+',
-
   group: 'block',
 
+  content: 'list_item+',
+
   parseHTML() {
     return [
       { tag: 'ul' },
diff --git a/packages/extension-list-item/index.ts b/packages/extension-list-item/index.ts
index 3bfa852a..88cfca70 100644
--- a/packages/extension-list-item/index.ts
+++ b/packages/extension-list-item/index.ts
@@ -9,7 +9,9 @@ const ListItem = createNode({
 
   parseHTML() {
     return [
-      { tag: 'li' },
+      {
+        tag: 'li',
+      },
     ]
   },
 
diff --git a/packages/extension-ordered-list/index.ts b/packages/extension-ordered-list/index.ts
index 0b678728..6c0aef3b 100644
--- a/packages/extension-ordered-list/index.ts
+++ b/packages/extension-ordered-list/index.ts
@@ -4,10 +4,10 @@ import { wrappingInputRule } from 'prosemirror-inputrules'
 const OrderedList = createNode({
   name: 'ordered_list',
 
-  content: 'list_item+',
-
   group: 'block',
 
+  content: 'list_item+',
+
   addAttributes() {
     return {
       start: {
diff --git a/packages/extension-task-item/index.ts b/packages/extension-task-item/index.ts
new file mode 100644
index 00000000..6ac32943
--- /dev/null
+++ b/packages/extension-task-item/index.ts
@@ -0,0 +1,59 @@
+import { createNode, mergeAttributes } from '@tiptap/core'
+
+export interface TaskItemOptions {
+  nested: boolean,
+}
+
+const TaskItem = createNode({
+  name: 'task_item',
+
+  content: 'paragraph+',
+
+  // TODO: allow content to be a callback function
+  // content() {
+  //   return this.options.nested ? '(paragraph|todo_list)+' : 'paragraph+',
+  // },
+
+  defining: true,
+
+  defaultOptions: <TaskItemOptions>{
+    nested: false,
+  },
+
+  addAttributes() {
+    return {
+      done: {
+        default: false,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'li[data-type="task_item"]',
+        priority: 51,
+      },
+    ]
+  },
+
+  renderHTML({ attributes }) {
+    return ['li', mergeAttributes(attributes, { 'data-type': 'task_item' }), 0]
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.splitListItem('task_item'),
+      Tab: () => this.editor.sinkListItem('task_item'),
+      'Shift-Tab': () => this.editor.liftListItem('task_item'),
+    }
+  },
+})
+
+export default TaskItem
+
+declare module '@tiptap/core/src/Editor' {
+  interface AllExtensions {
+    TaskItem: typeof TaskItem,
+  }
+}
diff --git a/packages/extension-task-item/package.json b/packages/extension-task-item/package.json
new file mode 100644
index 00000000..cb3e4b38
--- /dev/null
+++ b/packages/extension-task-item/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@tiptap/extension-task-item",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-task-item.js",
+  "umd:main": "dist/tiptap-extension-task-item.umd.js",
+  "module": "dist/tiptap-extension-task-item.mjs",
+  "unpkg": "dist/tiptap-extension-task-item.js",
+  "jsdelivr": "dist/tiptap-extension-task-item.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  }
+}
diff --git a/packages/extension-task-list/index.ts b/packages/extension-task-list/index.ts
new file mode 100644
index 00000000..76a61da6
--- /dev/null
+++ b/packages/extension-task-list/index.ts
@@ -0,0 +1,45 @@
+import { Command, createNode, mergeAttributes } from '@tiptap/core'
+import { wrappingInputRule } from 'prosemirror-inputrules'
+
+const TaskList = createNode({
+  name: 'task_list',
+
+  group: 'block',
+
+  content: 'task_item+',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'ul[data-type="task_list"]',
+        priority: 51,
+      },
+    ]
+  },
+
+  renderHTML({ attributes }) {
+    return ['ul', mergeAttributes(attributes, { 'data-type': 'task_list' }), 0]
+  },
+
+  addCommands() {
+    return {
+      taskList: (): Command => ({ commands }) => {
+        return commands.toggleList('task_list', 'task_item')
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      wrappingInputRule(/^\s*(\[ \])\s$/, this.type),
+    ]
+  },
+})
+
+export default TaskList
+
+declare module '@tiptap/core/src/Editor' {
+  interface AllExtensions {
+    TaskList: typeof TaskList,
+  }
+}
diff --git a/packages/extension-task-list/package.json b/packages/extension-task-list/package.json
new file mode 100644
index 00000000..50add09a
--- /dev/null
+++ b/packages/extension-task-list/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@tiptap/extension-task-list",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-task-list.js",
+  "umd:main": "dist/tiptap-extension-task-list.umd.js",
+  "module": "dist/tiptap-extension-task-list.mjs",
+  "unpkg": "dist/tiptap-extension-task-list.js",
+  "jsdelivr": "dist/tiptap-extension-task-list.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  }
+}