From 674d66d82f7e874793209aa7f3ae7e3d4b061b0e Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 31 Aug 2020 14:56:28 +0200
Subject: [PATCH] add buttons for all default extensions to the basic example

---
 docs/src/demos/Examples/Basic/index.vue | 52 +++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index 05ee0fb9..d17a3b74 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -1,5 +1,48 @@
 <template>
-  <editor-content :editor="editor" />
+  <div>
+    <div v-if="editor">
+      <button @click="editor.focus().removeMarks()">
+        clear formatting
+      </button>
+      <button @click="editor.focus().undo()">
+        undo
+      </button>
+      <button @click="editor.focus().redo()">
+        redo
+      </button>
+      <button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+      <button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
+        code
+      </button>
+      <button @click="editor.focus().code_block()" :class="{ 'is-active': editor.isActive('code_block') }">
+        code_block
+      </button>
+      <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        h1
+      </button>
+      <button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        h2
+      </button>
+      <button @click="editor.focus().heading({ level: 3 })" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+        h3
+      </button>
+      <button @click="editor.focus().heading({ level: 4 })" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+        h4
+      </button>
+      <button @click="editor.focus().heading({ level: 5 })" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+        h5
+      </button>
+      <button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+        h6
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
 </template>
 
 <script>
@@ -18,11 +61,12 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      content: '<p>foo</p>',
+      content: `
+        <h2>Hey there!</h2>
+        <p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>
+      `,
       extensions: defaultExtensions(),
     })
-
-    window.editor = this.editor
   },
 
   beforeDestroy() {