From 6d7b9c5144fb16b5e31744f01a8f5d4113c1201a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 22 Aug 2018 16:34:04 +0200
Subject: [PATCH] add markdown shortcuts demo

---
 examples/Components/Navigation/index.vue      |  3 ++
 .../Routes/MarkdownShortcuts/index.vue        | 36 +++++++++++++++++++
 examples/main.js                              |  5 +++
 3 files changed, 44 insertions(+)
 create mode 100644 examples/Components/Routes/MarkdownShortcuts/index.vue

diff --git a/examples/Components/Navigation/index.vue b/examples/Components/Navigation/index.vue
index 1f6f35ab..91f326a1 100644
--- a/examples/Components/Navigation/index.vue
+++ b/examples/Components/Navigation/index.vue
@@ -26,6 +26,9 @@
 			<router-link class="navigation__link" to="/todo-list">
 				Todo List
 			</router-link>
+			<router-link class="navigation__link" to="/markdown-shortcuts">
+				Markdown Shortcuts
+			</router-link>
 		</div>
 
 	</div>
diff --git a/examples/Components/Routes/MarkdownShortcuts/index.vue b/examples/Components/Routes/MarkdownShortcuts/index.vue
new file mode 100644
index 00000000..0427f0fe
--- /dev/null
+++ b/examples/Components/Routes/MarkdownShortcuts/index.vue
@@ -0,0 +1,36 @@
+<template>
+	<div>
+		<editor :editable="true" class="editor" @update="onUpdate">
+
+			<div class="editor__content" slot="content" slot-scope="props">
+        <h1>
+          Markdown Shortcuts
+        </h1>
+        <p>
+					Start a new line and type <code>"#"</code> followed by a space and you will get an H1 headline. 🤯
+				</p>
+        <p>
+          This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes available by default. Try <code>"#, ##, ###, …"</code> for headlines, <code>">"</code> for blockquotes, <code>"- or +"</code> for bullet lists. And of course you can add your own input rules.
+        </p>
+      </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>
\ No newline at end of file
diff --git a/examples/main.js b/examples/main.js
index 3388cd76..8cc32349 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -8,6 +8,7 @@ import RouteMenuBubble from 'Components/Routes/MenuBubble'
 import RouteLinks from 'Components/Routes/Links'
 import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
 import RouteTodoList from 'Components/Routes/TodoList'
+import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -37,6 +38,10 @@ const routes = [
     path: '/todo-list',
     component: RouteTodoList,
   },
+  {
+    path: '/markdown-shortcuts',
+    component: RouteMarkdownShortcuts,
+  },
 ]
 
 const router = new VueRouter({