rename default route

examples/Components/Routes/Basic/index.vue

@@ -0,0 +1,167 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
+
+			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
+				<div v-if="nodes && marks">
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
+						<icon name="bold" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.italic.active() }"
+						@click="marks.italic.command"
+					>
+						<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"
+						:class="{ 'is-active': nodes.paragraph.active() }"
+						@click="nodes.paragraph.command"
+					>
+						<icon name="paragraph" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+						@click="nodes.heading.command({ level: 1 })"
+					>
+						H1
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+						@click="nodes.heading.command({ level: 2 })"
+					>
+						H2
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+						@click="nodes.heading.command({ level: 3 })"
+					>
+						H3
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.bullet_list.active() }"
+						@click="nodes.bullet_list.command"
+					>
+						<icon name="ul" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.ordered_list.active() }"
+						@click="nodes.ordered_list.command"
+					>
+						<icon name="ol" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.code_block.active() }"
+						@click="nodes.code_block.command"
+					>
+						<icon name="code" />
+					</button>
+
+				</div>
+			</div>
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h2>
+					Menu Bar
+				</h2>
+				<p>
+					This is a very <em>basic</em> example of tiptap.
+				</p>
+				<pre><code>body { display: none; }</code></pre>
+				<ul>
+					<li>
+						A regular list
+					</li>
+					<li>
+						With regular items
+					</li>
+				</ul>
+				<blockquote>
+					It's amazing 👏
+					<br />
+					– mom
+				</blockquote>
+			</div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
+}
+</script>