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>