add some extensions to collab demo

docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue

@@ -47,10 +47,10 @@ export default {
           isActive: () => this.editor.isActive('code'),
         },
         {
-          icon: 'paragraph',
+          icon: 'mark-pen-line',
-          title: 'Paragraph',
+          title: 'Highlight',
-          action: () => this.editor.chain().focus().setParagraph().run(),
+          action: () => this.editor.chain().focus().toggleHighlight().run(),
-          isActive: () => this.editor.isActive('paragraph'),
+          isActive: () => this.editor.isActive('highlight'),
         },
         {
           icon: 'h-1',
@@ -65,28 +65,10 @@ export default {
           isActive: () => this.editor.isActive('heading', { level: 2 }),
         },
         {
-          icon: 'h-3',
+          icon: 'paragraph',
-          title: 'Heading 3',
+          title: 'Paragraph',
-          action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          action: () => this.editor.chain().focus().setParagraph().run(),
-          isActive: () => this.editor.isActive('heading', { level: 3 }),
+          isActive: () => this.editor.isActive('paragraph'),
-        },
-        {
-          icon: 'h-4',
-          title: 'Heading 4',
-          action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 4 }),
-        },
-        {
-          icon: 'h-5',
-          title: 'Heading 5',
-          action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 5 }),
-        },
-        {
-          icon: 'h-6',
-          title: 'Heading 6',
-          action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 6 }),
         },
         {
           icon: 'list-unordered',
@@ -100,6 +82,12 @@ export default {
           action: () => this.editor.chain().focus().toggleOrderedList().run(),
           isActive: () => this.editor.isActive('orderedList'),
         },
+        {
+          icon: 'list-check-2',
+          title: 'Task List',
+          action: () => this.editor.chain().focus().toggleTaskList().run(),
+          isActive: () => this.editor.isActive('taskList'),
+        },
         {
           icon: 'code-box-line',
           title: 'Code Block',

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -41,6 +41,9 @@
 import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import Highlight from '@tiptap/extension-highlight'
 import * as Y from 'yjs'
 import { WebsocketProvider } from 'y-websocket'
 import { IndexeddbPersistence } from 'y-indexeddb'
@@ -81,6 +84,9 @@ export default {
     this.editor = new Editor({
       extensions: [
         ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+        Highlight,
+        TaskList,
+        TaskItem,
         Collaboration.configure({
           provider,
         }),