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>.
+          Wow, this editor instance exports its content as JSON.
-        </p>
-        <p>
-          You can hook into the <code>update</code> event to get the content after every single change. How cool is that?
         </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

@@ -1,6 +1,6 @@
-context('/examples/read-only', () => {
+context('/guide/store-content', () => {
   beforeEach(() => {
-    cy.visit('/examples/read-only')
+    cy.visit('/guide/store-content')
   })
 
   it.skip('should be read-only', () => {

docs/src/docPages/guide/store-content.md

@@ -5,10 +5,9 @@
 ## Introduction
 You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content. Here is an interactive example, that exports the content as HTML and JSON when the document is changed:
 
-## Example
+## Export
-<demo name="Guide/StoreContent" highlight="52-60"/>
 
-## Option 1: JSON
+### Option 1: JSON
 JSON is probably easier to loop through, for example to look for a mention and it’s more like what tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
 
 ```js
@@ -19,19 +18,10 @@ You can store that in your database (or send it to an API) and restore the docum
 
 ```js
 new Editor({
-  // …
   content: {
     "type": "document",
     "content": [
-      {
+      // …
-        "type": "paragraph",
-        "content": [
-          {
-            "type": "text",
-            "text": "Example Text"
-          }
-        ]
-      }
     ]
   },
 })
@@ -43,20 +33,16 @@ Or if you need to wait for something, you can do it later through the editor ins
 editor.setContent({
   "type": "document",
   "content": [
-    {
+    // …
-      "type": "paragraph",
-      "content": [
-        {
-          "type": "text",
-          "text": "Example Text"
-        }
-      ]
-    }
   ]
 })
 ```
 
-## Option 2: HTML
+Here is an interactive example where you can see that in action:
+
+<demo name="Guide/StoreContent/ExportJSON" :show-source="false"/>
+
+### Option 2: HTML
 HTML can be easily rendered in other places, for example in emails and it’s wildly used, so it’s probably easier to switch the editor at some point. Anyway, every editor instance provides a method to get HTML from the current document:
 
 ```js
@@ -67,7 +53,6 @@ This can then be used to restore the document initially:
 
 ```js
 new Editor({
-  // …
   content: `<p>Example Text</p>`,
 })
 ```
@@ -77,7 +62,11 @@ Or if you want to restore the content later (e. g. after an API call has finishe
 editor.commands.setContent(`<p>Example Text</p>`)
 ```
 
-## Not an option: Markdown
+Use this interactive example to fiddle around:
+
+<demo name="Guide/StoreContent/ExportHTML" :show-source="false"/>
+
+### Not an option: Markdown
 
 Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
 
@@ -91,10 +80,18 @@ If you still think you need Markdown, ProseMirror has an [example on how to deal
 
 That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content.
 
-## Generate HTML from ProseMirror JSON
+## Rendering
-If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want a way to do just that without an actual editor instance.
 
-That’s what the `generateHTML()` is for. It’s a utility function that renders HTML without an actual editor instance. As an alternative, you can also use tiptap in a [read-only mode](/examples/read-only).
+### Option 1: Read-only instance of tiptap
+
+To render the saved content, set the editor to read-only. That’s how you can achieve the exact same rendering as it’s in the editor, without duplicating your CSS and other code.
+
+<demo name="Guide/StoreContent/ReadOnly" highlight="3-6,22,28,41-47" />
+
+### Option 2: Generate HTML from ProseMirror JSON
+If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want to do just that without an actual editor instance.
+
+That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance.
 
 :::info Browser-only rendering
 Import a lightweight implementation of `generateHTML()` from `@tiptap/core` if you’re using the function in a browser context only.

docs/src/links.yaml

@@ -22,8 +22,9 @@
       pro: true
     - title: Markdown shortcuts
       link: /examples/markdown-shortcuts
-    # - title: Formatting
+    - title: Formatting
-    #   link: /examples/formatting
+      link: /examples/formatting
+      draft: true
     - title: Todo app
       link: /examples/todo-app
     - title: Write a book