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,87 +1,87 @@
 <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">
 
-          <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': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
+						<icon name="bold" />
+					</button>
 
 					<button
-            class="menubar__button"
-            :class="{ 'is-active': nodes.paragraph.active() }"
-            @click="nodes.paragraph.command"
-          >
+						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 })"
-          >
+						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 })"
-          >
+						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 })"
-          >
+						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"
-          >
+						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"
-          >
+						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"
-          >
+						class="menubar__button"
+						:class="{ 'is-active': nodes.code_block.active() }"
+						@click="nodes.code_block.command"
+					>
 						<icon name="code" />
 					</button>
 
@@ -89,13 +89,13 @@
 			</div>
 
 			<div class="editor__content" slot="content" slot-scope="props">
-        <h1>
-          Hiding Menu Bar
-        </h1>
-        <p>
-          Try to focus the editor to see the menu. It's like magic. 🔮
-        </p>
-      </div>
+				<h1>
+					Hiding Menu Bar
+				</h1>
+				<p>
+					Try to focus the editor to see the menu. It's like magic. 🔮
+				</p>
+			</div>
 
 		</editor>
 	</div>
@@ -106,14 +106,14 @@ import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 
 export default {
-  components: {
-    Editor,
-    Icon,
-  },
-  methods: {
-    onUpdate(state) {
-      // console.log(state.doc.toJSON())
-    },
-  },
+	components: {
+		Editor,
+		Icon,
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
 }
 </script>

examples/Components/Routes/Links/index.vue

@@ -41,36 +41,36 @@ import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 
 export default {
-  components: {
-    Editor,
-    Icon,
+	components: {
+		Editor,
+		Icon,
 	},
 	data() {
-    return {
-      linkUrl: null,
+		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())
-    },
-  },
+	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/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,87 +1,87 @@
 <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">
 
-          <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': marks.bold.active() }"
+						@click="marks.bold.command"
+					>
+						<icon name="bold" />
+					</button>
 
 					<button
-            class="menubar__button"
-            :class="{ 'is-active': nodes.paragraph.active() }"
-            @click="nodes.paragraph.command"
-          >
+						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 })"
-          >
+						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 })"
-          >
+						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 })"
-          >
+						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"
-          >
+						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"
-          >
+						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"
-          >
+						class="menubar__button"
+						:class="{ 'is-active': nodes.code_block.active() }"
+						@click="nodes.code_block.command"
+					>
 						<icon name="code" />
 					</button>
 
@@ -89,27 +89,27 @@
 			</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>
-        <blockquote>
-          It's amazing 👏
-          <br />
-          – mom
-        </blockquote>
-      </div>
+				<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>
+				<blockquote>
+					It's amazing 👏
+					<br />
+					– mom
+				</blockquote>
+			</div>
 
 		</editor>
 	</div>
@@ -120,14 +120,14 @@ import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 
 export default {
-  components: {
-    Editor,
-    Icon,
-  },
-  methods: {
-    onUpdate(state) {
-      // console.log(state.doc.toJSON())
-    },
-  },
+	components: {
+		Editor,
+		Icon,
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
 }
 </script>

examples/Components/Routes/MenuBubble/index.vue

@@ -50,20 +50,20 @@ 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())
-    },
-  },
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			linkUrl: null,
+			linkMenuIsActive: false,
+		}
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
 }
 </script>

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/Components/Routes/TodoList/index.vue

@@ -6,34 +6,34 @@
 				<div v-if="nodes && marks">
 
 					<button
-            class="menubar__button"
-            :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-            @click="nodes.heading.command({ level: 1 })"
-          >
+						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 })"
-          >
+						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 })"
-          >
+						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.todo_list.active() }"
-            @click="nodes.todo_list.command"
-          >
+						class="menubar__button"
+						:class="{ 'is-active': nodes.todo_list.active() }"
+						@click="nodes.todo_list.command"
+					>
 						<icon name="checklist" />
 					</button>
 
@@ -41,10 +41,10 @@
 			</div>
 
 			<div class="editor__content" slot="content" slot-scope="props">
-        <h1>
-          Todo List
-        </h1>
-        <ul data-type="todo_list">
+				<h1>
+					Todo List
+				</h1>
+				<ul data-type="todo_list">
 					<li data-type="todo_item" data-done="true">
 						Buy beer
 					</li>
@@ -58,7 +58,7 @@
 						Call mom
 					</li>
 				</ul>
-      </div>
+			</div>
 
 		</editor>
 	</div>
@@ -69,14 +69,14 @@ import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
 
 export default {
-  components: {
-    Editor,
-    Icon,
-  },
-  methods: {
-    onUpdate(state) {
-      // console.log(state.doc.toJSON())
-    },
-  },
+	components: {
+		Editor,
+		Icon,
+	},
+	methods: {
+		onUpdate(state) {
+			// console.log(state.doc.toJSON())
+		},
+	},
 }
 </script>