add more content to the configuration pge

docs/src/demos/ExtensionConfiguration/index.vue

@@ -1,17 +1,5 @@
 <template>
   <div class="editor">
-    <div class="menubar" v-if="editor">
-
-      <button
-        class="menubar__button"
-        :class="{ 'is-active': editor.isActive('bold') }"
-        @click="editor.commands.bold"
-      >
-        Bold
-      </button>
-
-    </div>
-
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -19,11 +7,12 @@
 <script>
 import { Editor } from '@tiptap/core'
 import { EditorContent, Renderer } from '@tiptap/vue'
-import extensions from '@tiptap/starter-kit'
+// <- Highlight --> //
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Bold from '@tiptap/extension-bold'
+// <- /Highlight --> //
 
 export default {
   components: {
@@ -40,10 +29,12 @@ export default {
     this.editor = new Editor({
       content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
       extensions: [
+        // <- Highlight --> //
         new Document(),
         new Paragraph(),
         new Text(),
         new Bold(),
+        // <- /Highlight --> //
       ],
       renderer: Renderer,
     })

docs/src/demos/SimpleMenuBar/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="editor">
+    <div class="menubar" v-if="editor">
+
+      <!-- Highlight -->
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': editor.isActive('bold') }"
+        @click="editor.commands.bold"
+      >
+        Bold
+      </button>
+      <!-- /Highlight -->
+
+    </div>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent, Renderer } from '@tiptap/vue'
+import extensions from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
+      extensions: extensions(),
+      renderer: Renderer,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/docPages/configuration.md

@@ -2,6 +2,28 @@
 
 In its basic version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you’d like to have.
 
-Let’s start to add a few basic things to the configuration.
+## Adding a menu
 
-<demo name="BasicConfiguration" />
+Let’s start to add your first button to the editor.
+
+<demo name="SimpleMenuBar" />
+
+Once initiated the editor has a powerful API. So called commands allow you to modify the text. In this example `this.editor.commands.bold` marks the selected text bold. There a ton of other commands (see the [list of available commands](/commands/)) and you can even chain them to do multiple things at once.
+
+For most use cases you want to
+
+## Configure extensions
+
+You are free to choose which parts of tiptap you want to use. Tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those.
+
+Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text.
+
+<demo name="ExtensionConfiguration" />
+
+That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
+
+## Related links
+
+* List of all available Commands
+* List of all available Extensions
+* Build custom Extensions

docs/src/links.yaml

@@ -17,7 +17,7 @@
       link: /custom-styling/
     - title: Get content ❌
       link: /get-content/
-    - title: Advanced nodes ❌
+    - title: Custom extensions ❌
       link: /advanced-notes/
 
 - title: Vue