From 05f00e2aee2088de9e186ffc66c503d039d9adb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 8 Nov 2018 22:54:37 +0100
Subject: [PATCH] add history example

---
 examples/Components/Routes/History/index.vue | 71 ++++++++++++++++++++
 examples/Components/Subnavigation/index.vue  |  3 +
 examples/main.js                             |  7 ++
 3 files changed, 81 insertions(+)
 create mode 100644 examples/Components/Routes/History/index.vue

diff --git a/examples/Components/Routes/History/index.vue b/examples/Components/Routes/History/index.vue
new file mode 100644
index 00000000..0bcd5fdc
--- /dev/null
+++ b/examples/Components/Routes/History/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="editor">
+    <editor-menu-bar :editor="editor">
+      <div class="menubar" slot-scope="{ commands, isActive }">
+
+        <button
+          class="menubar__button"
+          @click="commands.undo"
+        >
+          <icon name="undo" />
+        </button>
+
+        <button
+          class="menubar__button"
+          @click="commands.redo"
+        >
+          <icon name="redo" />
+        </button>
+
+      </div>
+    </editor-menu-bar>
+
+    <editor-content class="editor__content" :editor="editor" />
+  </div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import {
+  HardBreak,
+  Heading,
+  Bold,
+  Code,
+  Italic,
+  History,
+} from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorContent,
+    EditorMenuBar,
+    Icon,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new HardBreak(),
+          new Heading({ levels: [1, 2, 3] }),
+          new Bold(),
+          new Code(),
+          new Italic(),
+          new History(),
+        ],
+        content: `
+          <h2>
+            History
+          </h2>
+          <p>
+            Try to change some content here. With the <code>History</code> extension you are able to undo and redo your changes. You can also use keyboard shortcuts for this (<code>cmd+z</code> and <code>cmd+shift+z</code>).
+          </p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index 97d15b57..aad69c2e 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/examples/Components/Subnavigation/index.vue
@@ -30,6 +30,9 @@
     <router-link class="subnavigation__link" to="/code-highlighting">
       Code Highlighting
     </router-link>
+    <router-link class="subnavigation__link" to="/history">
+      History
+    </router-link>
     <router-link class="subnavigation__link" to="/read-only">
       Read-Only
     </router-link>
diff --git a/examples/main.js b/examples/main.js
index 47933f78..fae30d10 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -82,6 +82,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/CodeHighlighting',
     },
   },
+  {
+    path: '/history',
+    component: () => import('Components/Routes/History'),
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/History',
+    },
+  },
   {
     path: '/read-only',
     component: () => import('Components/Routes/ReadOnly'),