add read only example

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>