From 243d809cda65a7b4e952c2ed96251c5ae5b31e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 22 Aug 2018 15:51:41 +0200
Subject: [PATCH] remove json from default demo

---
 examples/Components/Routes/Default/Mention.js |  30 --
 examples/Components/Routes/Default/index.vue  | 260 +++---------------
 2 files changed, 32 insertions(+), 258 deletions(-)
 delete mode 100644 examples/Components/Routes/Default/Mention.js

diff --git a/examples/Components/Routes/Default/Mention.js b/examples/Components/Routes/Default/Mention.js
deleted file mode 100644
index 28785ab0..00000000
--- a/examples/Components/Routes/Default/Mention.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Node } from 'tiptap/utils'
-
-export default class MentionNode extends Node {
-
-	get name() {
-		return 'mention'
-	}
-
-	get schema() {
-		return {
-			attrs: {
-				id: {
-					default: null,
-				},
-			},
-			group: 'inline',
-			inline: true,
-			draggable: true,
-			toDOM: node => [
-				'span',
-				{
-					dataId: node.attrs.id,
-					class: 'mention',
-				},
-				`@${node.attrs.id}`,
-			],
-		}
-	}
-
-}
diff --git a/examples/Components/Routes/Default/index.vue b/examples/Components/Routes/Default/index.vue
index 7fab149d..140d2460 100644
--- a/examples/Components/Routes/Default/index.vue
+++ b/examples/Components/Routes/Default/index.vue
@@ -1,32 +1,17 @@
 <template>
 	<div>
-		<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
-			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
-				<template v-if="marks">
-					<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
-						<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
-						<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
-							<icon name="remove" />
-						</button>
-					</form>
-					<template v-else>
-						<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
-							<icon name="bold" />
-						</button>
-						<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
-							<icon name="italic" />
-						</button>
-						<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
-							<icon name="code" />
-						</button>
-						<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
-							<icon name="link" />
-						</button>
-					</template>
-				</template>
-			</div>
-			<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
-				<div v-if="nodes">
+		<editor :editable="true" class="editor" @update="onUpdate">
+			<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
+				<div v-if="nodes && marks">
+          <button class="menubar__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
+            <icon name="bold" />
+          </button>
+          <button class="menubar__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
+            <icon name="italic" />
+          </button>
+          <button class="menubar__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
+            <icon name="code" />
+          </button>
 					<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
 						<icon name="paragraph" />
 					</button>
@@ -48,223 +33,42 @@
 					<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
 						<icon name="code" />
 					</button>
-					<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
-						<icon name="checklist" />
-					</button>
 				</div>
 			</div>
-			<div class="editor__content" slot="content" slot-scope="props"></div>
+			<div class="editor__content" slot="content" slot-scope="props">
+        <h1>
+          A renderless rich-text editor for Vue.js
+        </h1>
+        <p>
+          This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
+        </p>
+        <pre><code>body { display: none; }</code></pre>
+        <ul>
+          <li>
+            A regular list
+          </li>
+          <li>
+            With regular items
+          </li>
+        </ul>
+        <p>
+          It's amazing 👏
+        </p>
+      </div>
 		</editor>
-
-		<!-- <pre>{{ data }}</pre> -->
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
-import MentionPlugin from './Mention.js'
 
 export default {
   components: {
     Editor,
     Icon,
   },
-  data() {
-    return {
-      linkUrl: null,
-      linkMenuIsActive: false,
-      plugins: [
-        new MentionPlugin(),
-      ],
-      data: {
-        "type": "doc",
-        "content": [
-          {
-            "type": "heading",
-            "attrs": {
-              "level": 1,
-            },
-            "content": [
-              {
-                "type": "text",
-                "text": "A renderless rich-text editor for Vue.js "
-              },
-            ],
-          },
-          {
-            "type": "paragraph",
-            "content": [
-              {
-                "type": "text",
-                "text": "This editor is based on "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "link",
-                    "attrs": {
-                      "href": "https://prosemirror.net"
-                    }
-                  }
-                ],
-                "text": "Prosemirror"
-              },
-              {
-                "type": "text",
-                "text": ", "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "italic"
-                  }
-                ],
-                "text": "fully extendable "
-              },
-              {
-                "type": "text",
-                "text": "and renderless. There is a plugin system that lets you render each node as "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "bold"
-                  }
-                ],
-                "text": "a vue component. "
-              },
-              {
-                "type": "text",
-                "text": "Things like mentions "
-              },
-              {
-                "type": "mention",
-                "attrs": {
-                  "id": "Philipp"
-                }
-              },
-              {
-                "type": "text",
-                "text": " are also supported."
-              }
-            ]
-          },
-          {
-            "type": "code_block",
-            "content": [
-              {
-                "type": "text",
-                "text": "body {\n  display: none;\n}"
-              }
-            ]
-          },
-          {
-            "type": "todo_list",
-            "content": [
-              {
-                "type": "todo_item",
-                "attrs": {
-                  "done": true
-                },
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "There is always something to do"
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "todo_item",
-                "attrs": {
-                  "done": false
-                },
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "This list will never end"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bullet_list",
-            "content": [
-              {
-                "type": "list_item",
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "A regular list"
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "list_item",
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "With regular items"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "content": [
-              {
-                "type": "text",
-                "text": "It's amazing 👏"
-              },
-            ]
-          }
-        ]
-      },
-
-    }
-  },
   methods: {
-    showLinkMenu(type) {
-      this.linkUrl = type.attrs.href
-      this.linkMenuIsActive = true
-      this.$nextTick(() => {
-        this.$refs.linkInput.focus()
-      })
-    },
-    hideLinkMenu() {
-      this.linkUrl = null
-      this.linkMenuIsActive = false
-    },
-    setLinkUrl(url, type, focus) {
-      type.command({ href: url })
-      this.hideLinkMenu()
-      focus()
-    },
     onUpdate(state) {
       this.data = state.doc.toJSON()
     },