improve basic example

content/posts/test.md

@@ -3,16 +3,16 @@ title: Test
 slug: test
 ---
 
-# Super epic editor demo
+<!-- # Super epic editor demo
 
 - magic
-- epic
+- epic -->
 
-<!-- <demo name="Basic" key="basic" /> -->
+<demo name="Basic" key="basic" />
 
-# Super epic time demo
+<!-- # Super epic time demo
 
 - nice numbers
 - nice time
 
-<demo name="Time" key="time" />
+<demo name="Time" key="time" /> -->

src/demos/Basic/index.vue

@@ -1,18 +1,46 @@
 <template>
-  <Layout>
+  <div>
+    <div v-if="editor">
+      <button @click="editor.undo().focus()">
+        undo
+      </button>
+      <button @click="editor.redo().focus()">
+        redo
+      </button>
+    </div>
     <div ref="editor"></div>
-  </Layout>
+  </div>
 </template>
 
 <script>
 import Editor from '@tiptap/core'
+import Document from '@tiptap/document-extension'
+import Paragraph from '@tiptap/paragraph-extension'
+import Text from '@tiptap/text-extension'
+import History from '@tiptap/history-extension'
 
 export default {
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
   mounted() {
-    new Editor({
+    this.editor = new Editor({
       element: this.$refs.editor,
       content: '<p>foo</p>',
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+        new History(),
+      ],
     })
-  }
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
 }
 </script>