add some examples

examples/Components/App/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="page" spellcheck="false">
+    <navigation />
+    <div class="page__content">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import Navigation from 'Components/Navigation'
+
+export default {
+  components: {
+    Navigation,
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

examples/Components/App/style.scss

@@ -1,17 +1,12 @@
-<template>
+@import "~variables";
-  <div id="app" spellcheck="false">
-    <router-view></router-view>
-  </div>
-</template>
 
-<script>
+.page {
-export default {
+
+	&__content {
+		padding: 2rem;
+	}
 
 }
-</script>
-
-<style lang="scss">
-@import "~variables";
 
 .editor {
   position: relative;
@@ -174,4 +169,3 @@ li[data-done="true"] .todo-checkbox {
 li[data-done="false"] {
   text-decoration: none;
 }
-</style>

examples/Components/Navigation/index.vue

@@ -0,0 +1,15 @@
+<template>
+	<div class="navigation">
+		<router-link class="navigation__link" to="/">
+			Default
+		</router-link>
+		<router-link class="navigation__link" to="/bubble-navigation">
+			Bubble Navigation
+		</router-link>
+		<router-link class="navigation__link" to="/links">
+			Links
+		</router-link>
+	</div>
+</template>
+
+<style lang="scss" src="./style.scss"></style>

examples/Components/Navigation/style.scss

@@ -0,0 +1,29 @@
+@import "~variables";
+
+.navigation {
+
+	background: $color-black;
+	text-align: center;
+	padding: 0.5rem;
+
+	&__link {
+		display: inline-block;
+		color: rgba($color-white, 0.5);
+		text-decoration: none;
+		font-weight: bold;
+		font-size: 0.9rem;
+		padding: 0.1rem 0.5rem;
+		border-radius: 3px;
+
+		&:hover {
+			color: $color-white;
+      background-color: rgba($color-white, 0.1);
+    }
+
+    &.is-exact-active {
+			color: $color-white;
+      background-color: rgba($color-white, 0.2);
+    }
+	}
+
+}

examples/Components/Routes/BubbleNavigation/index.vue

@@ -0,0 +1,50 @@
+<template>
+	<div>
+		<editor class="editor" @update="onUpdate">
+			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
+				<template v-if="marks">
+					<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>
+				</template>
+			</div>
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h1>
+					Bubble Navigation
+				</h1>
+				<p>
+					Hey, try to select some text.
+				</p>
+			</div>
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+
+export default {
+  components: {
+    Editor,
+    Icon,
+  },
+  data() {
+    return {
+      linkUrl: null,
+      linkMenuIsActive: false,
+    }
+  },
+  methods: {
+    onUpdate(state) {
+      console.log(state.doc.toJSON())
+    },
+  },
+}
+</script>

examples/Components/Routes/Links/index.vue

@@ -0,0 +1,72 @@
+<template>
+	<div>
+		<editor class="editor" @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="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
+							<span>Add Link</span>
+							<icon name="link" />
+						</button>
+					</template>
+
+				</template>
+			</div>
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h1>
+					Add links inside of a bubble menu
+				</h1>
+				<p>
+					Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>.
+				</p>
+			</div>
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+
+export default {
+  components: {
+    Editor,
+    Icon,
+	},
+	data() {
+    return {
+      linkUrl: null,
+			linkMenuIsActive: false,
+		}
+	},
+  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) {
+      console.log(state.doc.toJSON())
+    },
+  },
+}
+</script>

examples/assets/sass/main.scss

@@ -30,7 +30,6 @@ html {
 
 body {
 	margin: 0;
-	padding: 10% 20%;
 }
 
 

examples/main.js

@@ -2,7 +2,10 @@ import '@babel/polyfill'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import svgSpriteLoader from 'helpers/svg-sprite-loader'
-import App from './App.vue'
+import App from 'Components/App'
+import RouteDefault from 'Components/Routes/Default'
+import RouteBubbleNavigation from 'Components/Routes/BubbleNavigation'
+import RouteLinks from 'Components/Routes/Links'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -14,12 +17,22 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    component: () => import('Components/Routes/Default'),
+    component: RouteDefault,
+  },
+  {
+    path: '/bubble-navigation',
+    component: RouteBubbleNavigation,
+  },
+  {
+    path: '/links',
+    component: RouteLinks,
   },
 ]
 
 const router = new VueRouter({
   routes,
+  linkActiveClass: 'is-active',
+  linkExactActiveClass: 'is-exact-active',
 })
 
 new Vue({