From c6e003de85024ecea7c88b6fe4870c44dce8d3ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 6 Mar 2020 11:46:46 +0100
Subject: [PATCH] improve basic example

---
 content/posts/test.md     | 10 +++++-----
 src/demos/Basic/index.vue | 36 ++++++++++++++++++++++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/content/posts/test.md b/content/posts/test.md
index 2f81de1e..22aa767d 100644
--- a/content/posts/test.md
+++ b/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" />
\ No newline at end of file
+<demo name="Time" key="time" /> -->
\ No newline at end of file
diff --git a/src/demos/Basic/index.vue b/src/demos/Basic/index.vue
index cdb9d360..7fadb566 100644
--- a/src/demos/Basic/index.vue
+++ b/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>
\ No newline at end of file