From 0cd31d05aa40e9ebc8bd66579b1f39fc0246645d Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 14:56:18 +0100
Subject: [PATCH 1/7] docs: move content example to the guide

---
 .../ExportHtmlOrJson => Guide/StoreContent}/index.spec.js    | 4 ++--
 .../ExportHtmlOrJson => Guide/StoreContent}/index.vue        | 0
 docs/src/docPages/examples/export-html-or-json.md            | 3 ---
 docs/src/docPages/guide/store-content.md                     | 5 +++--
 4 files changed, 5 insertions(+), 7 deletions(-)
 rename docs/src/demos/{Examples/ExportHtmlOrJson => Guide/StoreContent}/index.spec.js (89%)
 rename docs/src/demos/{Examples/ExportHtmlOrJson => Guide/StoreContent}/index.vue (100%)
 delete mode 100644 docs/src/docPages/examples/export-html-or-json.md

diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js b/docs/src/demos/Guide/StoreContent/index.spec.js
similarity index 89%
rename from docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
rename to docs/src/demos/Guide/StoreContent/index.spec.js
index 4e96f2a4..188020e7 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
+++ b/docs/src/demos/Guide/StoreContent/index.spec.js
@@ -1,6 +1,6 @@
-context('/examples/export-html-or-json', () => {
+context('/guide/store-content', () => {
   before(() => {
-    cy.visit('/examples/export-html-or-json')
+    cy.visit('/guide/store-content')
   })
 
   beforeEach(() => {
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Guide/StoreContent/index.vue
similarity index 100%
rename from docs/src/demos/Examples/ExportHtmlOrJson/index.vue
rename to docs/src/demos/Guide/StoreContent/index.vue
diff --git a/docs/src/docPages/examples/export-html-or-json.md b/docs/src/docPages/examples/export-html-or-json.md
deleted file mode 100644
index 6a32ec1b..00000000
--- a/docs/src/docPages/examples/export-html-or-json.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Export HTML or JSON
-
-<demo name="Examples/ExportHtmlOrJson" highlight="52-60"/>
diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md
index 8d62fbbf..161b3017 100644
--- a/docs/src/docPages/guide/store-content.md
+++ b/docs/src/docPages/guide/store-content.md
@@ -3,9 +3,10 @@
 ## toc
 
 ## 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.
+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:
 
-You can store your content as JSON and restore the content from HTML, or the other way around. I don’t know why you would do that, but tiptap wouldn’t care.
+## Example
+<demo name="Guide/StoreContent" highlight="52-60"/>
 
 ## 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:

From a3e00340c7c6222af8757e8eedc3ad7f61959cc5 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 14:56:50 +0100
Subject: [PATCH 2/7] delete the link example

---
 docs/src/demos/Examples/Links/index.spec.js |  7 --
 docs/src/demos/Examples/Links/index.vue     | 80 ---------------------
 docs/src/docPages/examples/links.md         |  3 -
 3 files changed, 90 deletions(-)
 delete mode 100644 docs/src/demos/Examples/Links/index.spec.js
 delete mode 100644 docs/src/demos/Examples/Links/index.vue
 delete mode 100644 docs/src/docPages/examples/links.md

diff --git a/docs/src/demos/Examples/Links/index.spec.js b/docs/src/demos/Examples/Links/index.spec.js
deleted file mode 100644
index 6a8317b5..00000000
--- a/docs/src/demos/Examples/Links/index.spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-context('/examples/links', () => {
-  before(() => {
-    cy.visit('/examples/links')
-  })
-
-  // TODO: Write tests
-})
diff --git a/docs/src/demos/Examples/Links/index.vue b/docs/src/demos/Examples/Links/index.vue
deleted file mode 100644
index 690a5e79..00000000
--- a/docs/src/demos/Examples/Links/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div v-if="editor">
-    <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
-      link
-    </button>
-    <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
-      remove
-    </button>
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor } from '@tiptap/core'
-import { EditorContent } from '@tiptap/vue'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Link from '@tiptap/extension-link'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        Link,
-      ],
-      content: `
-        <p>
-          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
-        </p>
-        <p>
-          By default every link will get a [rel="noopener noreferrer nofollow"] attribute <a href="https://web.dev/external-anchors-use-rel-noopener/">for security reasons</a>. It’s configurable though.
-        </p>
-        <p>
-          Ah, and links open in a new tab by default, but that’s also - yes, you’ve guessed it - configurable.
-        </p>
-      `,
-    })
-  },
-
-  methods: {
-    setLink() {
-      const url = window.prompt('URL')
-
-      this.editor.chain().focus().setLink({ href: url }).run()
-    },
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>
-
-<style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  a {
-    text-decoration: underline;
-    color: blue;
-  }
-}
-</style>
diff --git a/docs/src/docPages/examples/links.md b/docs/src/docPages/examples/links.md
deleted file mode 100644
index afc47c41..00000000
--- a/docs/src/docPages/examples/links.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Links
-
-<demo name="Examples/Links" highlight="3-8,19,38,55-59" />

From 96db413117b1868f98b8571f8e0f0f2a09962341 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 15:32:39 +0100
Subject: [PATCH 3/7] add the collab demo to the introduction page

---
 docs/src/docPages/introduction.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/src/docPages/introduction.md b/docs/src/docPages/introduction.md
index 289134b4..cee956e6 100644
--- a/docs/src/docPages/introduction.md
+++ b/docs/src/docPages/introduction.md
@@ -18,6 +18,9 @@ tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a
 
 Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
 
+## Example
+<demo name="Examples/CollaborativeEditing" :show-source="false" />
+
 ## Features
 **Headless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
 

From 921bac70f920e423efc667a38e04500c8e6302e2 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 15:33:20 +0100
Subject: [PATCH 4/7] move examples around

---
 docs/src/demos/Examples/Book/content.js       |   4 +
 docs/src/demos/Examples/Book/index.spec.js    |   7 +
 docs/src/demos/Examples/Book/index.vue        | 145 ++++++++++++++++++
 .../NodeViews}/DragHandle/Component.vue       |   0
 .../NodeViews}/DragHandle/DraggableItem.js    |   0
 .../NodeViews}/DragHandle/index.vue           |   0
 docs/src/docPages/examples/basic.md           |   2 +-
 docs/src/docPages/examples/book.md            |   3 +
 .../docPages/examples/code-highlighting.md    |   3 -
 docs/src/docPages/examples/drag-handle.md     |   3 -
 docs/src/docPages/examples/embeds.md          |   3 -
 docs/src/docPages/examples/floating-menu.md   |   3 -
 docs/src/docPages/examples/hiding-menu-bar.md |   3 -
 docs/src/docPages/examples/images.md          |   3 -
 docs/src/docPages/examples/menu-bubble.md     |   3 -
 docs/src/docPages/examples/placeholder.md     |   3 -
 .../docPages/examples/search-and-replace.md   |   3 -
 docs/src/docPages/examples/suggestions.md     |   3 -
 docs/src/docPages/examples/tables.md          |   3 -
 docs/src/docPages/examples/title.md           |   3 -
 docs/src/docPages/examples/todo-list.md       |   3 -
 .../docPages/examples/trailing-paragraph.md   |   3 -
 .../{advanced-node-views.md => node-views.md} |  21 +--
 docs/src/links.yaml                           |  17 +-
 24 files changed, 173 insertions(+), 68 deletions(-)
 create mode 100644 docs/src/demos/Examples/Book/content.js
 create mode 100644 docs/src/demos/Examples/Book/index.spec.js
 create mode 100644 docs/src/demos/Examples/Book/index.vue
 rename docs/src/demos/{Examples => Guide/NodeViews}/DragHandle/Component.vue (100%)
 rename docs/src/demos/{Examples => Guide/NodeViews}/DragHandle/DraggableItem.js (100%)
 rename docs/src/demos/{Examples => Guide/NodeViews}/DragHandle/index.vue (100%)
 create mode 100644 docs/src/docPages/examples/book.md
 delete mode 100644 docs/src/docPages/examples/code-highlighting.md
 delete mode 100644 docs/src/docPages/examples/drag-handle.md
 delete mode 100644 docs/src/docPages/examples/embeds.md
 delete mode 100644 docs/src/docPages/examples/floating-menu.md
 delete mode 100644 docs/src/docPages/examples/hiding-menu-bar.md
 delete mode 100644 docs/src/docPages/examples/images.md
 delete mode 100644 docs/src/docPages/examples/menu-bubble.md
 delete mode 100644 docs/src/docPages/examples/placeholder.md
 delete mode 100644 docs/src/docPages/examples/search-and-replace.md
 delete mode 100644 docs/src/docPages/examples/suggestions.md
 delete mode 100644 docs/src/docPages/examples/tables.md
 delete mode 100644 docs/src/docPages/examples/title.md
 delete mode 100644 docs/src/docPages/examples/todo-list.md
 delete mode 100644 docs/src/docPages/examples/trailing-paragraph.md
 rename docs/src/docPages/guide/{advanced-node-views.md => node-views.md} (74%)

diff --git a/docs/src/demos/Examples/Book/content.js b/docs/src/demos/Examples/Book/content.js
new file mode 100644
index 00000000..6371ff5c
--- /dev/null
+++ b/docs/src/demos/Examples/Book/content.js
@@ -0,0 +1,4 @@
+export const content = `
+<h1>Example</h1>
+<p>TODO</p>
+`
diff --git a/docs/src/demos/Examples/Book/index.spec.js b/docs/src/demos/Examples/Book/index.spec.js
new file mode 100644
index 00000000..8403e1ff
--- /dev/null
+++ b/docs/src/demos/Examples/Book/index.spec.js
@@ -0,0 +1,7 @@
+context('/examples/basic', () => {
+  before(() => {
+    cy.visit('/examples/basic')
+  })
+
+  // TODO: Write tests
+})
diff --git a/docs/src/demos/Examples/Book/index.vue b/docs/src/demos/Examples/Book/index.vue
new file mode 100644
index 00000000..44b31291
--- /dev/null
+++ b/docs/src/demos/Examples/Book/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <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>
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+        strike
+      </button>
+      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+        code
+      </button>
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
+        clear marks
+      </button>
+      <button @click="editor.chain().focus().clearNodes().run()">
+        clear nodes
+      </button>
+      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+        paragraph
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        h1
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        h2
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+        h3
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+        h4
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+        h5
+      </button>
+      <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+        h6
+      </button>
+      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+        bullet list
+      </button>
+      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+        ordered list
+      </button>
+      <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        code block
+      </button>
+      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+        blockquote
+      </button>
+      <button @click="editor.chain().focus().setHorizontalRule().run()">
+        horizontal rule
+      </button>
+      <button @click="editor.chain().focus().setHardBreak().run()">
+        hard break
+      </button>
+      <button @click="editor.chain().focus().undo().run()">
+        undo
+      </button>
+      <button @click="editor.chain().focus().redo().run()">
+        redo
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+import { content } from './content.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: defaultExtensions(),
+      content,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* 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>
diff --git a/docs/src/demos/Examples/DragHandle/Component.vue b/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
similarity index 100%
rename from docs/src/demos/Examples/DragHandle/Component.vue
rename to docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
diff --git a/docs/src/demos/Examples/DragHandle/DraggableItem.js b/docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
similarity index 100%
rename from docs/src/demos/Examples/DragHandle/DraggableItem.js
rename to docs/src/demos/Guide/NodeViews/DragHandle/DraggableItem.js
diff --git a/docs/src/demos/Examples/DragHandle/index.vue b/docs/src/demos/Guide/NodeViews/DragHandle/index.vue
similarity index 100%
rename from docs/src/demos/Examples/DragHandle/index.vue
rename to docs/src/demos/Guide/NodeViews/DragHandle/index.vue
diff --git a/docs/src/docPages/examples/basic.md b/docs/src/docPages/examples/basic.md
index c33b8158..00f923a6 100644
--- a/docs/src/docPages/examples/basic.md
+++ b/docs/src/docPages/examples/basic.md
@@ -1,3 +1,3 @@
-# Basic
+# Basic text editor
 
 <demo name="Examples/Basic" />
diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md
new file mode 100644
index 00000000..2712e841
--- /dev/null
+++ b/docs/src/docPages/examples/book.md
@@ -0,0 +1,3 @@
+# A whole book
+
+<demo name="Examples/Book" highlight="" />
diff --git a/docs/src/docPages/examples/code-highlighting.md b/docs/src/docPages/examples/code-highlighting.md
deleted file mode 100644
index 87f77d6f..00000000
--- a/docs/src/docPages/examples/code-highlighting.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Code Highlighting
-
-<demo name="Examples/CodeHighlighting" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/drag-handle.md b/docs/src/docPages/examples/drag-handle.md
deleted file mode 100644
index 858f193f..00000000
--- a/docs/src/docPages/examples/drag-handle.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Drag Handle
-
-<demo name="Examples/DragHandle" />
diff --git a/docs/src/docPages/examples/embeds.md b/docs/src/docPages/examples/embeds.md
deleted file mode 100644
index b6650b85..00000000
--- a/docs/src/docPages/examples/embeds.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Embeds
-
-<demo name="Examples/Embeds" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/floating-menu.md b/docs/src/docPages/examples/floating-menu.md
deleted file mode 100644
index ab15a33f..00000000
--- a/docs/src/docPages/examples/floating-menu.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Floating Menu
-
-<demo name="Examples/FloatingMenu" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/hiding-menu-bar.md b/docs/src/docPages/examples/hiding-menu-bar.md
deleted file mode 100644
index 8ee88ba0..00000000
--- a/docs/src/docPages/examples/hiding-menu-bar.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Hiding Menu Bar
-
-<demo name="Examples/HidingMenuBar" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/images.md b/docs/src/docPages/examples/images.md
deleted file mode 100644
index 704cd2b7..00000000
--- a/docs/src/docPages/examples/images.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Images
-
-<demo name="Examples/Images" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/menu-bubble.md b/docs/src/docPages/examples/menu-bubble.md
deleted file mode 100644
index af2786ec..00000000
--- a/docs/src/docPages/examples/menu-bubble.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Menu Bubble
-
-<demo name="Examples/MenuBubble" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/placeholder.md b/docs/src/docPages/examples/placeholder.md
deleted file mode 100644
index b89aeaa8..00000000
--- a/docs/src/docPages/examples/placeholder.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Placeholder
-
-<demo name="Examples/Placeholder" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/search-and-replace.md b/docs/src/docPages/examples/search-and-replace.md
deleted file mode 100644
index 8f091eb5..00000000
--- a/docs/src/docPages/examples/search-and-replace.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Search and Replace
-
-<demo name="Examples/SearchAndReplace" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/suggestions.md b/docs/src/docPages/examples/suggestions.md
deleted file mode 100644
index 875824a9..00000000
--- a/docs/src/docPages/examples/suggestions.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Suggestions
-
-<demo name="Examples/Suggestions" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/tables.md b/docs/src/docPages/examples/tables.md
deleted file mode 100644
index 066bf657..00000000
--- a/docs/src/docPages/examples/tables.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tables
-
-<demo name="Examples/Tables" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/title.md b/docs/src/docPages/examples/title.md
deleted file mode 100644
index 935d87f2..00000000
--- a/docs/src/docPages/examples/title.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Title
-
-<demo name="Examples/Title" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/todo-list.md b/docs/src/docPages/examples/todo-list.md
deleted file mode 100644
index f93919a3..00000000
--- a/docs/src/docPages/examples/todo-list.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Todo List
-
-<demo name="Examples/TodoList" />
\ No newline at end of file
diff --git a/docs/src/docPages/examples/trailing-paragraph.md b/docs/src/docPages/examples/trailing-paragraph.md
deleted file mode 100644
index bc942b02..00000000
--- a/docs/src/docPages/examples/trailing-paragraph.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Trailing Paragraph
-
-<demo name="Examples/TrailingParagraph" />
\ No newline at end of file
diff --git a/docs/src/docPages/guide/advanced-node-views.md b/docs/src/docPages/guide/node-views.md
similarity index 74%
rename from docs/src/docPages/guide/advanced-node-views.md
rename to docs/src/docPages/guide/node-views.md
index 207223e2..486b5d43 100644
--- a/docs/src/docPages/guide/advanced-node-views.md
+++ b/docs/src/docPages/guide/node-views.md
@@ -6,7 +6,9 @@
 
 TODO
 
-## Simple
+## Different types of node views
+
+### Simple
 
 ```html
 <div class="Prosemirror" contenteditable="true">
@@ -16,7 +18,7 @@ TODO
 </div>
 ```
 
-## Without content
+### Without content
 
 ```html
 <div class="Prosemirror" contenteditable="true">
@@ -26,7 +28,7 @@ TODO
 </div>
 ```
 
-## Advanced node views with content
+### Advanced node views with content
 
 ```html
 <div class="Prosemirror" contenteditable="true">
@@ -43,16 +45,7 @@ TODO
 </div>
 ```
 
-<!--
-## Node views with plain JavaScript
+<demo name="Guide/NodeViews/DragHandle" />
 
-### HTML
+## Render Vue components
 
-### Content
-
-### JavaScript
-
-### Events
-
-## Use Vue.js components
- -->
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 3ce72e60..32e15225 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -15,7 +15,7 @@
   link: /examples
   redirect: /examples/basic
   items:
-    - title: Basic
+    - title: Basic text editor
       link: /examples/basic
     - title: Collaborative editing
       link: /examples/collaborative-editing
@@ -24,21 +24,16 @@
       link: /examples/markdown-shortcuts
     # - title: Formatting
     #   link: /examples/formatting
-    # - title: Links
-    #   link: /examples/links
-    - title: Todo App
+    - title: Todo app
       link: /examples/todo-app
+    - title: A whole book
+      link: /examples/book
     # - title: Read-only
     #   link: /examples/read-only
     # - title: Minimalist
     #   link: /examples/minimalist
     # - title: Use with v-model
     #   link: /examples/v-model
-    # - title: Drag handle
-    #   link: /examples/drag-handle
-    #   draft: true
-    # - title: Export HTML or JSON
-    #   link: /examples/export-html-or-json
 
 - title: Guide
   items:
@@ -58,8 +53,8 @@
       link: /guide/store-content
     - title: Build custom extensions
       link: /guide/build-custom-extensions
-    - title: Advanced node views
-      link: /guide/advanced-node-views
+    - title: Define node views
+      link: /guide/node-views
       draft: true
     - title: Working with TypeScript
       link: /guide/working-with-typescript

From aeb3ba947d9c2ad7c2799f40c19f165446bf9990 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 15:44:52 +0100
Subject: [PATCH 5/7] docs: update content

---
 docs/src/docPages/examples/book.md | 2 +-
 docs/src/links.yaml                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md
index 2712e841..ca696161 100644
--- a/docs/src/docPages/examples/book.md
+++ b/docs/src/docPages/examples/book.md
@@ -1,3 +1,3 @@
-# A whole book
+# Write a book
 
 <demo name="Examples/Book" highlight="" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 32e15225..aad150cc 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -26,7 +26,7 @@
     #   link: /examples/formatting
     - title: Todo app
       link: /examples/todo-app
-    - title: A whole book
+    - title: Write a book
       link: /examples/book
     # - title: Read-only
     #   link: /examples/read-only

From df5d5a4f375cb485df0c71d180cb8b8bdd9632d6 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 15:58:05 +0100
Subject: [PATCH 6/7] docs: move examples around

---
 .../StoreContent/ExportHTML/index.spec.js     |  19 +++
 .../Guide/StoreContent/ExportHTML/index.vue   | 157 ++++++++++++++++++
 .../{ => ExportJSON}/index.spec.js            |   8 -
 .../StoreContent/{ => ExportJSON}/index.vue   |  15 +-
 .../StoreContent}/ReadOnly/index.spec.js      |   4 +-
 .../StoreContent}/ReadOnly/index.vue          |   0
 docs/src/docPages/guide/store-content.md      |  53 +++---
 docs/src/links.yaml                           |   5 +-
 8 files changed, 208 insertions(+), 53 deletions(-)
 create mode 100644 docs/src/demos/Guide/StoreContent/ExportHTML/index.spec.js
 create mode 100644 docs/src/demos/Guide/StoreContent/ExportHTML/index.vue
 rename docs/src/demos/Guide/StoreContent/{ => ExportJSON}/index.spec.js (78%)
 rename docs/src/demos/Guide/StoreContent/{ => ExportJSON}/index.vue (80%)
 rename docs/src/demos/{Examples => Guide/StoreContent}/ReadOnly/index.spec.js (87%)
 rename docs/src/demos/{Examples => Guide/StoreContent}/ReadOnly/index.vue (100%)

diff --git a/docs/src/demos/Guide/StoreContent/ExportHTML/index.spec.js b/docs/src/demos/Guide/StoreContent/ExportHTML/index.spec.js
new file mode 100644
index 00000000..09bd9fb2
--- /dev/null
+++ b/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>')
+    })
+  })
+})
diff --git a/docs/src/demos/Guide/StoreContent/ExportHTML/index.vue b/docs/src/demos/Guide/StoreContent/ExportHTML/index.vue
new file mode 100644
index 00000000..0509ac3b
--- /dev/null
+++ b/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>
diff --git a/docs/src/demos/Guide/StoreContent/index.spec.js b/docs/src/demos/Guide/StoreContent/ExportJSON/index.spec.js
similarity index 78%
rename from docs/src/demos/Guide/StoreContent/index.spec.js
rename to docs/src/demos/Guide/StoreContent/ExportJSON/index.spec.js
index 188020e7..e4cb490a 100644
--- a/docs/src/demos/Guide/StoreContent/index.spec.js
+++ b/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>')
-    })
-  })
 })
diff --git a/docs/src/demos/Guide/StoreContent/index.vue b/docs/src/demos/Guide/StoreContent/ExportJSON/index.vue
similarity index 80%
rename from docs/src/demos/Guide/StoreContent/index.vue
rename to docs/src/demos/Guide/StoreContent/ExportJSON/index.vue
index cc17b2d2..63ccecb5 100644
--- a/docs/src/demos/Guide/StoreContent/index.vue
+++ b/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()
     },
diff --git a/docs/src/demos/Examples/ReadOnly/index.spec.js b/docs/src/demos/Guide/StoreContent/ReadOnly/index.spec.js
similarity index 87%
rename from docs/src/demos/Examples/ReadOnly/index.spec.js
rename to docs/src/demos/Guide/StoreContent/ReadOnly/index.spec.js
index 2b1e4789..4b2d4b36 100644
--- a/docs/src/demos/Examples/ReadOnly/index.spec.js
+++ b/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', () => {
diff --git a/docs/src/demos/Examples/ReadOnly/index.vue b/docs/src/demos/Guide/StoreContent/ReadOnly/index.vue
similarity index 100%
rename from docs/src/demos/Examples/ReadOnly/index.vue
rename to docs/src/demos/Guide/StoreContent/ReadOnly/index.vue
diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md
index 161b3017..c7a615bf 100644
--- a/docs/src/docPages/guide/store-content.md
+++ b/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
-<demo name="Guide/StoreContent" highlight="52-60"/>
+## Export
 
-## 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
-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.
+## Rendering
 
-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.
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index aad150cc..98ea9ff4 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -22,8 +22,9 @@
       pro: true
     - title: Markdown shortcuts
       link: /examples/markdown-shortcuts
-    # - title: Formatting
-    #   link: /examples/formatting
+    - title: Formatting
+      link: /examples/formatting
+      draft: true
     - title: Todo app
       link: /examples/todo-app
     - title: Write a book

From 85a983cd116eea428392f1022a45085c5b24dad8 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 30 Nov 2020 16:14:27 +0100
Subject: [PATCH 7/7] docs: move around examples

---
 docs/src/demos/Examples/MarkdownShortcuts/index.vue | 7 ++++++-
 docs/src/docPages/examples/read-only.md             | 3 ---
 docs/src/links.yaml                                 | 7 ++-----
 3 files changed, 8 insertions(+), 9 deletions(-)
 delete mode 100644 docs/src/docPages/examples/read-only.md

diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
index c5f69fb3..59062178 100644
--- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue
+++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
@@ -7,6 +7,7 @@
 <script>
 import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
 import Highlight from '@tiptap/extension-highlight'
+import Typography from '@tiptap/extension-typography'
 
 export default {
   components: {
@@ -32,12 +33,16 @@ export default {
           Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
         </p>
         <p>
-          You can overwrite existing input rules or add your own to new nodes and marks.
+          You can overwrite existing input rules or add your own to nodes, marks and extensions.
+        </p>
+        <p>
+          For example, we added the <code>Typography</code> extensions here. Try typing <code>(c)</code> to see how it’s converted to a proper © character. You can also try <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, or <code>--</code>.
         </p>
       `,
       extensions: [
         ...defaultExtensions(),
         Highlight,
+        Typography,
       ],
     })
   },
diff --git a/docs/src/docPages/examples/read-only.md b/docs/src/docPages/examples/read-only.md
deleted file mode 100644
index 048465a7..00000000
--- a/docs/src/docPages/examples/read-only.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Read-only
-
-<demo name="Examples/ReadOnly" highlight="3-6,22,28,41-47" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 98ea9ff4..189f2dc5 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -24,15 +24,12 @@
       link: /examples/markdown-shortcuts
     - title: Formatting
       link: /examples/formatting
-      draft: true
     - title: Todo app
       link: /examples/todo-app
     - title: Write a book
       link: /examples/book
-    # - title: Read-only
-    #   link: /examples/read-only
-    # - title: Minimalist
-    #   link: /examples/minimalist
+    - title: For minimalists
+      link: /examples/minimalist
     # - title: Use with v-model
     #   link: /examples/v-model