move examples around

docs/src/demos/Examples/Book/content.js

@@ -0,0 +1,4 @@
+export const content = `
+<h1>Example</h1>
+<p>TODO</p>
+`

docs/src/demos/Examples/Book/index.spec.js

@@ -0,0 +1,7 @@
+context('/examples/basic', () => {
+  before(() => {
+    cy.visit('/examples/basic')
+  })
+
+  // TODO: Write tests
+})

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>

docs/src/docPages/examples/basic.md

@@ -1,3 +1,3 @@
-# Basic
+# Basic text editor
 
 <demo name="Examples/Basic" />

docs/src/docPages/examples/book.md

@@ -0,0 +1,3 @@
+# A whole book
+
+<demo name="Examples/Book" highlight="" />

docs/src/docPages/examples/code-highlighting.md

@@ -1,3 +0,0 @@
-# Code Highlighting
-
-<demo name="Examples/CodeHighlighting" />

docs/src/docPages/examples/drag-handle.md

@@ -1,3 +0,0 @@
-# Drag Handle
-
-<demo name="Examples/DragHandle" />

docs/src/docPages/examples/embeds.md

@@ -1,3 +0,0 @@
-# Embeds
-
-<demo name="Examples/Embeds" />

docs/src/docPages/examples/floating-menu.md

@@ -1,3 +0,0 @@
-# Floating Menu
-
-<demo name="Examples/FloatingMenu" />

docs/src/docPages/examples/hiding-menu-bar.md

@@ -1,3 +0,0 @@
-# Hiding Menu Bar
-
-<demo name="Examples/HidingMenuBar" />

docs/src/docPages/examples/images.md

@@ -1,3 +0,0 @@
-# Images
-
-<demo name="Examples/Images" />

docs/src/docPages/examples/menu-bubble.md

@@ -1,3 +0,0 @@
-# Menu Bubble
-
-<demo name="Examples/MenuBubble" />

docs/src/docPages/examples/placeholder.md

@@ -1,3 +0,0 @@
-# Placeholder
-
-<demo name="Examples/Placeholder" />

docs/src/docPages/examples/search-and-replace.md

@@ -1,3 +0,0 @@
-# Search and Replace
-
-<demo name="Examples/SearchAndReplace" />

docs/src/docPages/examples/suggestions.md

@@ -1,3 +0,0 @@
-# Suggestions
-
-<demo name="Examples/Suggestions" />

docs/src/docPages/examples/tables.md

@@ -1,3 +0,0 @@
-# Tables
-
-<demo name="Examples/Tables" />

docs/src/docPages/examples/title.md

@@ -1,3 +0,0 @@
-# Title
-
-<demo name="Examples/Title" />

docs/src/docPages/examples/todo-list.md

@@ -1,3 +0,0 @@
-# Todo List
-
-<demo name="Examples/TodoList" />

docs/src/docPages/examples/trailing-paragraph.md

@@ -1,3 +0,0 @@
-# Trailing Paragraph
-
-<demo name="Examples/TrailingParagraph" />

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
- -->

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