add todo list example

examples/Components/Navigation/index.vue

@@ -23,6 +23,9 @@
 			<router-link class="navigation__link" to="/hiding-menu-bar">
 				Hiding Menu Bar
 			</router-link>
+			<router-link class="navigation__link" to="/todo-list">
+				Todo List
+			</router-link>
 		</div>
 
 	</div>

examples/Components/Routes/TodoList/index.vue

@@ -0,0 +1,58 @@
+<template>
+	<div>
+		<editor :editable="true" class="editor" @update="onUpdate">
+
+			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
+				<div v-if="nodes && marks">
+
+					<button
+            class="menubar__button"
+            :class="{ 'is-active': nodes.todo_list.active() }"
+            @click="nodes.todo_list.command"
+          >
+						<icon name="checklist" />
+					</button>
+
+				</div>
+			</div>
+
+			<div class="editor__content" slot="content" slot-scope="props">
+        <h1>
+          Todo Lists
+        </h1>
+        <ul data-type="todo_list">
+					<li data-type="todo_item" data-done="true">
+						Buy beer
+					</li>
+					<li data-type="todo_item" data-done="true">
+						Buy meat
+					</li>
+					<li data-type="todo_item" data-done="false">
+						Buy milk
+					</li>
+					<li data-type="todo_item" data-done="false">
+						Call mom
+					</li>
+				</ul>
+      </div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+
+export default {
+  components: {
+    Editor,
+    Icon,
+  },
+  methods: {
+    onUpdate(state) {
+      console.log(state.doc.toJSON())
+    },
+  },
+}
+</script>

examples/main.js

@@ -7,6 +7,7 @@ import RouteMenuBar from 'Components/Routes/MenuBar'
 import RouteMenuBubble from 'Components/Routes/MenuBubble'
 import RouteLinks from 'Components/Routes/Links'
 import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
+import RouteTodoList from 'Components/Routes/TodoList'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -32,6 +33,10 @@ const routes = [
     path: '/hiding-menu-bar',
     component: RouteHidingMenuBar,
   },
+  {
+    path: '/todo-list',
+    component: RouteTodoList,
+  },
 ]
 
 const router = new VueRouter({

src/nodes/TodoItem.js

@@ -30,6 +30,7 @@ export default class TodoItemNode extends Node {
 	}
 
 	get schema() {
+		console.log('schema')
 		return {
 			attrs: {
 				done: {