From a00bb32cc40a9370149845f22469cca6ce2e7f40 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 24 Sep 2020 21:50:27 +0200
Subject: [PATCH] improve basic example, add task

---
 docs/src/demos/Examples/Basic/index.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index e4c7e0d5..d61caab6 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
+    BUG: Headings can’t be transformed to a bullet or ordered list.
     <div v-if="editor">
-      <button @click="editor.chain().focus().removeMarks().run()">
-        clear format
-      </button>
       <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
@@ -19,14 +17,8 @@
       <button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
-        bullet list
-      </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
+      <button @click="editor.chain().focus().removeMarks().run()">
+        clear format
       </button>
       <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
         paragraph
@@ -49,6 +41,15 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
+      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+        bullet list
+      </button>
+      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+        ordered list
+      </button>
+      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        code block
+      </button>
       <button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
         blockquote
       </button>