docs: update nodes examples

demos/src/Nodes/Blockquote/Vue/index.vue

@@ -3,10 +3,10 @@
     <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
       toggleBlockquote
     </button>
-    <button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
+    <button @click="editor.chain().focus().setBlockquote().run()" :disabled="editor.isActive('blockquote')">
       setBlockquote
     </button>
-    <button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
+    <button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.isActive('blockquote')">
       unsetBlockquote
     </button>
 

demos/src/Nodes/BulletList/Vue/index.vue

@@ -1,7 +1,16 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      bullet list
+      toggleBulletList
+    </button>
+    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+      splitListItem
+    </button>
+    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+      sinkListItem
+    </button>
+    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+      liftListItem
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/CodeBlock/Vue/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
+      toggleCodeBlock
+    </button>
+    <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
+      setCodeBlock
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/CodeBlockLowlight/Vue/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-      code block
+      toggleCodeBlock
+    </button>
+    <button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
+      setCodeBlock
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/HardBreak/Vue/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().setHardBreak().run()">
-      hardBreak
+      setHardBreak
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/Heading/Vue/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-      h1
+      H1
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-      h2
+      H2
     </button>
     <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-      h3
+      H3
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/HorizontalRule/Vue/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().setHorizontalRule().run()">
-      horizontalRule
+      setHorizontalRule
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/Image/Vue/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="editor">
     <button @click="addImage">
-      image
+      setImage
     </button>
     <editor-content :editor="editor" />
   </div>

demos/src/Nodes/ListItem/Vue/index.vue

@@ -1,10 +1,19 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-      bullet list
+      toggleBulletList
     </button>
     <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      ordered list
+      toggleOrderedList
+    </button>
+    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+      splitListItem
+    </button>
+    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+      sinkListItem
+    </button>
+    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+      liftListItem
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/OrderedList/Vue/index.vue

@@ -1,7 +1,16 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-      ordered list
+      toggleOrderedList
+    </button>
+    <button @click="editor.chain().focus().splitListItem('listItem').run()" :disabled="!editor.can().splitListItem('listItem')">
+      splitListItem
+    </button>
+    <button @click="editor.chain().focus().sinkListItem('listItem').run()" :disabled="!editor.can().sinkListItem('listItem')">
+      sinkListItem
+    </button>
+    <button @click="editor.chain().focus().liftListItem('listItem').run()" :disabled="!editor.can().liftListItem('listItem')">
+      liftListItem
     </button>
 
     <editor-content :editor="editor" />

demos/src/Nodes/TaskItem/Vue/index.vue

@@ -1,5 +1,18 @@
 <template>
   <div v-if="editor">
+    <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
+      toggleTaskList
+    </button>
+    <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
+      splitListItem
+    </button>
+    <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
+      sinkListItem
+    </button>
+    <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
+      liftListItem
+    </button>
+
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -30,7 +43,9 @@ export default {
         Paragraph,
         Text,
         TaskList,
-        TaskItem,
+        TaskItem.configure({
+          nested: true,
+        }),
       ],
       content: `
         <ul data-type="taskList">
@@ -52,9 +67,12 @@ ul[data-type="taskList"] {
   list-style: none;
   padding: 0;
 
+  p {
+    margin: 0;
+  }
+
   li {
     display: flex;
-    align-items: center;
 
     > label {
       flex: 0 0 auto;

demos/src/Nodes/TaskList/Vue/index.vue

@@ -1,7 +1,16 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }">
-      task list
+      toggleTaskList
+    </button>
+    <button @click="editor.chain().focus().splitListItem('taskItem').run()" :disabled="!editor.can().splitListItem('taskItem')">
+      splitListItem
+    </button>
+    <button @click="editor.chain().focus().sinkListItem('taskItem').run()" :disabled="!editor.can().sinkListItem('taskItem')">
+      sinkListItem
+    </button>
+    <button @click="editor.chain().focus().liftListItem('taskItem').run()" :disabled="!editor.can().liftListItem('taskItem')">
+      liftListItem
     </button>
 
     <editor-content :editor="editor" />
@@ -34,7 +43,9 @@ export default {
         Paragraph,
         Text,
         TaskList,
-        TaskItem,
+        TaskItem.configure({
+          nested: true,
+        }),
       ],
       content: `
         <ul data-type="taskList">
@@ -56,9 +67,12 @@ ul[data-type="taskList"] {
   list-style: none;
   padding: 0;
 
+  p {
+    margin: 0;
+  }
+
   li {
     display: flex;
-    align-items: center;
 
     > label {
       flex: 0 0 auto;