add react demo for tasks

docs/src/demos/Examples/Tasks/React/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+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'
+import './styles.scss'
+
+const CustomDocument = Document.extend({
+  content: 'taskList',
+})
+
+const CustomTaskItem = TaskItem.extend({
+  content: 'inline*',
+})
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      CustomDocument,
+      Paragraph,
+      Text,
+      TaskList,
+      CustomTaskItem,
+    ],
+    content: `
+      <ul data-type="taskList">
+        <li data-type="taskItem" data-checked="true">flour</li>
+        <li data-type="taskItem" data-checked="true">baking powder</li>
+        <li data-type="taskItem" data-checked="true">salt</li>
+        <li data-type="taskItem" data-checked="false">sugar</li>
+        <li data-type="taskItem" data-checked="false">milk</li>
+        <li data-type="taskItem" data-checked="false">eggs</li>
+        <li data-type="taskItem" data-checked="false">butter</li>
+      </ul>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

docs/src/demos/Examples/Tasks/React/styles.scss

@@ -0,0 +1,18 @@
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > label {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+}

docs/src/demos/Examples/Tasks/Vue/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Examples/Tasks/Vue', () => {
+  before(() => {
+    cy.visit('/demos/Examples/Tasks/Vue')
+  })
+
+  // TODO: Write tests
+})

docs/src/demos/Examples/Tasks/Vue/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="editor">
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>

docs/src/demos/Examples/Tasks/index.spec.js

@@ -1,7 +0,0 @@
-context('/demos/Examples/Tasks', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Tasks')
-  })
-
-  // TODO: Write tests
-})

docs/src/docPages/examples/tasks.md

@@ -1,3 +1,6 @@
 # Tasks
 
-<demo name="Examples/Tasks" />
+<demos :items="{
+  Vue: 'Examples/Tasks/Vue',
+  React: 'Examples/Tasks/React',
+}" />