add read only example

examples/Components/Navigation/index.vue

@@ -34,6 +34,9 @@
 			<router-link class="navigation__link" to="/markdown-shortcuts">
 				Markdown Shortcuts
 			</router-link>
+			<router-link class="navigation__link" to="/read-only">
+				Read-Only
+			</router-link>
 		</div>
 
 	</div>

examples/Components/Routes/HidingMenuBar/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="true" class="editor" @update="onUpdate">
+		<editor class="editor" @update="onUpdate">
 
 			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
 				<div v-if="nodes && marks">

examples/Components/Routes/MarkdownShortcuts/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="true" class="editor" @update="onUpdate">
+		<editor class="editor" @update="onUpdate">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h1>

examples/Components/Routes/MenuBar/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="true" class="editor" @update="onUpdate">
+		<editor class="editor" @update="onUpdate">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">

examples/Components/Routes/ReadOnly/index.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<editor :editable="false" class="editor" @update="onUpdate">
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h1>
+					Read-Only
+				</h1>
+				<p>
+					This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
+				</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>

examples/main.js

@@ -9,6 +9,7 @@ import RouteLinks from 'Components/Routes/Links'
 import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
 import RouteTodoList from 'Components/Routes/TodoList'
 import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
+import RouteReadOnly from 'Components/Routes/ReadOnly'
 
 const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
 svgSpriteLoader(__svg__.filename)
@@ -60,6 +61,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/MarkdownShortcuts',
     },
   },
+  {
+    path: '/read-only',
+    component: RouteReadOnly,
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/ReadOnly',
+    },
+  },
 ]
 
 const router = new VueRouter({