docs: move examples around

docs/src/demos/Guide/StoreContent/ExportHTML/index.spec.js

@@ -0,0 +1,19 @@
+context('/guide/store-content', () => {
+  before(() => {
+    cy.visit('/guide/store-content')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+    })
+  })
+
+  it('should return html', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      const html = editor.getHTML()
+
+      expect(html).to.equal('<p>Example Text</p>')
+    })
+  })
+})

docs/src/demos/Guide/StoreContent/ExportHTML/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <div class="actions" v-if="editor">
+      <button class="button" @click="setContent">
+        Set Content
+      </button>
+      <button class="button" @click="clearContent">
+        Clear Content
+      </button>
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        Bold
+      </button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        Italic
+      </button>
+    </div>
+
+    <editor-content :editor="editor" />
+
+    <div class="export">
+      <h3>HTML</h3>
+      <pre><code>{{ html }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      html: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: `
+        <p>
+          Wow, this editor instance exports its content as HTML.
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+
+    // Get the initial content …
+    this.html = this.editor.getHTML()
+
+    // … and get the content after every change.
+    this.editor.on('update', () => {
+      this.html = this.editor.getHTML()
+    })
+  },
+
+  methods: {
+    setContent() {
+      // You can pass a HTML document to the editor.
+      this.editor.commands.setContent(`
+        <p>
+          It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.
+        </p>
+      `, true)
+
+      // It’s likely that you’d like to focus the Editor after most commands.
+      this.editor.commands.focus()
+    },
+
+    clearContent() {
+      this.editor
+        .chain()
+        .clearContent(true)
+        .focus()
+        .run()
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Style the export */
+.export {
+  padding: 1rem 0 0;
+
+  h3 {
+    margin: 1rem 0 0.5rem;
+  }
+
+  pre {
+    border-radius: 5px;
+    color: #333;
+  }
+
+  code {
+    display: block;
+    white-space: pre-wrap;
+    font-size: 0.8rem;
+    padding: 0.75rem 1rem;
+    background-color:#e9ecef;
+    color: #495057;
+  }
+}
+
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>

docs/src/demos/Guide/StoreContent/ExportJSON/index.spec.js

@@ -29,12 +29,4 @@ context('/guide/store-content', () => {
       })
     })
   })
-
-  it('should return html', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      const html = editor.getHTML()
-
-      expect(html).to.equal('<p>Example Text</p>')
-    })
-  })
 })

docs/src/demos/Guide/StoreContent/ExportJSON/index.vue

@@ -18,8 +18,6 @@
     <editor-content :editor="editor" />
 
     <div class="export">
-      <h3>HTML</h3>
-      <pre><code>{{ html }}</code></pre>
       <h3>JSON</h3>
       <pre><code v-html="json" /></pre>
     </div>
@@ -38,7 +36,6 @@ export default {
     return {
       editor: null,
       json: null,
-      html: null,
     }
   },
 
@@ -46,10 +43,7 @@ export default {
     this.editor = new Editor({
       content: `
         <p>
-          What would be a text editor without content. At some point you want to get the content out of the editor and yes, we got you covered. There are two methods to export the current document as <code>HTML</code> or <code>JSON</code>.
-        </p>
-        <p>
-          You can hook into the <code>update</code> event to get the content after every single change. How cool is that?
+          Wow, this editor instance exports its content as JSON.
         </p>
       `,
       extensions: defaultExtensions(),
@@ -57,18 +51,16 @@ export default {
 
     // Get the initial content …
     this.json = this.editor.getJSON()
-    this.html = this.editor.getHTML()
 
     // … and get the content after every change.
     this.editor.on('update', () => {
       this.json = this.editor.getJSON()
-      this.html = this.editor.getHTML()
     })
   },
 
   methods: {
     setContent() {
-      // You can pass a JSON document …
+      // You can pass a JSON document to the editor.
       this.editor.commands.setContent({
         type: 'document',
         content: [{
@@ -82,9 +74,6 @@ export default {
         }],
       }, true)
 
-      // … but HTML strings are also supported.
-      // this.editor.setContent('<p>This is some inserted text. 👋</p>')
-
       // It’s likely that you’d like to focus the Editor after most commands.
       this.editor.commands.focus()
     },

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

@@ -0,0 +1,25 @@
+context('/guide/store-content', () => {
+  beforeEach(() => {
+    cy.visit('/guide/store-content')
+  })
+
+  it.skip('should be read-only', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      cy.get('#editable').uncheck()
+
+      editor.commands.insertText('Edited: ')
+
+      cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
+    })
+  })
+
+  it.skip('should be editable', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      cy.get('#editable').check()
+
+      editor.commands.insertText('Edited: ')
+
+      cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
+    })
+  })
+})

docs/src/demos/Guide/StoreContent/ReadOnly/index.vue

@@ -0,0 +1,75 @@
+<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: this.editable,
+      content: `
+        <p>
+          This text is <strong>read-only</strong>. No matter what you try, you are not able to edit something. Okay, if you toggle the checkbox above you’ll be able to edit the text.
+        </p>
+        <p>
+          If you want to check the state, you can call <code>editor.isEditable()</code>.
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+  },
+
+  watch: {
+    editable() {
+      this.editor.setOptions({
+        editable: this.editable,
+      })
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.checkbox {
+  margin-bottom: 1rem;
+
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+}
+
+[contenteditable=false] {
+  color: #999;
+  cursor: not-allowed;
+}
+</style>