add read only example

docs/src/demos/ReadOnly/index.spec.js

@@ -0,0 +1,5 @@
+context('read-only', () => {
+  beforeEach(() => {
+    cy.visit('/examples/read-only')
+  })
+})

docs/src/demos/ReadOnly/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="editor">
+    <div class="checkbox">
+      <input type="checkbox" id="editable" v-model="editable" />
+      <label for="editable">editable</label>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      editable: false,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      editable: false,
+      content: `
+        <h2>
+          Read-Only
+        </h2>
+        <p>
+          This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://ueber.io/">Links to fancy websites</a> are still working.
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+
+    window.editor = this.editor
+  },
+
+  watch: {
+    editable() {
+      this.editor.setOptions({
+        editable: this.editable,
+      })
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/ReadOnly/style.scss

@@ -0,0 +1,3 @@
+.checkbox {
+  margin-bottom: 1rem;
+}

docs/src/docPages/examples/read-only.md

@@ -0,0 +1,3 @@
+# Read-Only
+
+<demo name="ReadOnly" highlight="3-6,22,28,43-49" />

docs/src/links.yaml

@@ -29,47 +29,47 @@
     - title: Basic
       link: /examples/basic
     - title: Menu Bubble
-      link: /Menu Bubble/
+      link: /examples/menu-bubble
     - title: Floating Menu
-      link: /Floating Menu/
+      link: /examples/floating-menu
     - title: Links
-      link: /Links/
+      link: /examples/links
     - title: Images
-      link: /Images/
+      link: /examples/images
     - title: Hiding Menu Bar
-      link: /Menu Bar/
+      link: /examples/hiding-menu-bar
     - title: Todo List
-      link: /Todo List/
+      link: /examples/todo-list
     - title: Tables
-      link: /Tables/
+      link: /examples/tables
     - title: Search and Replace
-      link: /and Replace/
+      link: /examples/search-and-replace
     - title: Suggestions
-      link: /Suggestions/
+      link: /examples/suggestions
     - title: Markdown Shortcuts
-      link: /Markdown Shortcuts/
+      link: /examples/markdown-shortcuts
     - title: Code Highlighting
-      link: /Code Highlighting/
+      link: /examples/code-highlighting
     - title: History
-      link: /History/
+      link: /examples/history
     - title: Read-Only
-      link: /-Only/
+      link: /examples/read-only
     - title: Embeds
-      link: /Embeds/
+      link: /examples/embeds
     - title: Placeholder
-      link: /Placeholder/
+      link: /examples/placeholder
     - title: Focus
-      link: /Focus/
+      link: /examples/focus
     - title: Collaboration
-      link: /Collaboration/
+      link: /examples/collaboration
     - title: Title
-      link: /Title/
+      link: /examples/title
     - title: Trailing Paragraph
-      link: /Trailing Paragraph/
+      link: /examples/trailing-paragraph
     - title: Drag Handle
-      link: /Drag Handle/
+      link: /examples/drag-handle
     - title: Export HTML or JSON
-      link: /export-html-or-json/
+      link: /examples/export-html-or-json
 
 - title: API
   items: