From 136f6e47a9a9d945502394fcb66498870e5080cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 16:56:56 +0200
Subject: [PATCH] add menus example

---
 .../{BubbleMenu => Menus}/React/index.jsx     | 29 ++++++++++++++++-
 .../{BubbleMenu => Menus}/React/index.spec.js |  0
 .../{BubbleMenu => Menus}/React/styles.scss   |  5 +++
 .../{BubbleMenu => Menus}/Vue/index.spec.js   |  0
 .../{BubbleMenu => Menus}/Vue/index.vue       | 31 ++++++++++++++++++-
 .../Extensions/FloatingMenu/React/index.jsx   |  6 ----
 .../Extensions/FloatingMenu/React/styles.scss |  5 +++
 .../Extensions/FloatingMenu/Vue/index.vue     |  8 -----
 docs/src/docPages/examples/bubble-menu.md     |  6 ----
 docs/src/docPages/examples/menus.md           |  6 ++++
 docs/src/links.yaml                           |  5 +--
 11 files changed, 77 insertions(+), 24 deletions(-)
 rename docs/src/demos/Examples/{BubbleMenu => Menus}/React/index.jsx (59%)
 rename docs/src/demos/Examples/{BubbleMenu => Menus}/React/index.spec.js (100%)
 rename docs/src/demos/Examples/{BubbleMenu => Menus}/React/styles.scss (59%)
 rename docs/src/demos/Examples/{BubbleMenu => Menus}/Vue/index.spec.js (100%)
 rename docs/src/demos/Examples/{BubbleMenu => Menus}/Vue/index.vue (61%)
 delete mode 100644 docs/src/docPages/examples/bubble-menu.md
 create mode 100644 docs/src/docPages/examples/menus.md

diff --git a/docs/src/demos/Examples/BubbleMenu/React/index.jsx b/docs/src/demos/Examples/Menus/React/index.jsx
similarity index 59%
rename from docs/src/demos/Examples/BubbleMenu/React/index.jsx
rename to docs/src/demos/Examples/Menus/React/index.jsx
index 01787e1f..dd6ca274 100644
--- a/docs/src/demos/Examples/BubbleMenu/React/index.jsx
+++ b/docs/src/demos/Examples/Menus/React/index.jsx
@@ -1,5 +1,10 @@
 import React from 'react'
-import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
+import {
+  useEditor,
+  EditorContent,
+  BubbleMenu,
+  FloatingMenu,
+} from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 import './styles.scss'
 
@@ -37,6 +42,28 @@ export default () => {
           code
         </button>
       </BubbleMenu>}
+
+      {editor && <FloatingMenu editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+          h1
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        >
+          h2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
+        >
+          bullet list
+        </button>
+      </FloatingMenu>}
+
       <EditorContent editor={editor} />
     </div>
   )
diff --git a/docs/src/demos/Examples/BubbleMenu/React/index.spec.js b/docs/src/demos/Examples/Menus/React/index.spec.js
similarity index 100%
rename from docs/src/demos/Examples/BubbleMenu/React/index.spec.js
rename to docs/src/demos/Examples/Menus/React/index.spec.js
diff --git a/docs/src/demos/Examples/BubbleMenu/React/styles.scss b/docs/src/demos/Examples/Menus/React/styles.scss
similarity index 59%
rename from docs/src/demos/Examples/BubbleMenu/React/styles.scss
rename to docs/src/demos/Examples/Menus/React/styles.scss
index 12c87298..9489311c 100644
--- a/docs/src/demos/Examples/BubbleMenu/React/styles.scss
+++ b/docs/src/demos/Examples/Menus/React/styles.scss
@@ -2,4 +2,9 @@
   > * + * {
     margin-top: 0.75em;
   }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
 }
diff --git a/docs/src/demos/Examples/BubbleMenu/Vue/index.spec.js b/docs/src/demos/Examples/Menus/Vue/index.spec.js
similarity index 100%
rename from docs/src/demos/Examples/BubbleMenu/Vue/index.spec.js
rename to docs/src/demos/Examples/Menus/Vue/index.spec.js
diff --git a/docs/src/demos/Examples/BubbleMenu/Vue/index.vue b/docs/src/demos/Examples/Menus/Vue/index.vue
similarity index 61%
rename from docs/src/demos/Examples/BubbleMenu/Vue/index.vue
rename to docs/src/demos/Examples/Menus/Vue/index.vue
index d803dc94..7aa15d5e 100644
--- a/docs/src/demos/Examples/BubbleMenu/Vue/index.vue
+++ b/docs/src/demos/Examples/Menus/Vue/index.vue
@@ -11,18 +11,37 @@
         code
       </button>
     </bubble-menu>
+
+    <floating-menu :editor="editor" v-if="editor">
+      <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().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+        bullet list
+      </button>
+    </floating-menu>
+
     <editor-content :editor="editor" />
   </div>
 </template>
 
 <script>
-import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
+import {
+  Editor,
+  EditorContent,
+  BubbleMenu,
+  FloatingMenu,
+} from '@tiptap/vue-2'
 import { defaultExtensions } from '@tiptap/starter-kit'
 
 export default {
   components: {
     EditorContent,
     BubbleMenu,
+    FloatingMenu,
   },
 
   data() {
@@ -56,5 +75,15 @@ export default {
   > * + * {
     margin-top: 0.75em;
   }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
 }
 </style>
diff --git a/docs/src/demos/Extensions/FloatingMenu/React/index.jsx b/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
index d01f0b0e..680bdd77 100644
--- a/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
+++ b/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
@@ -36,12 +36,6 @@ export default () => {
         >
           bullet list
         </button>
-        <button
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          className={editor.isActive('blockquote') ? 'is-active' : ''}
-        >
-          blockquote
-        </button>
       </FloatingMenu>}
       <EditorContent editor={editor} />
     </div>
diff --git a/docs/src/demos/Extensions/FloatingMenu/React/styles.scss b/docs/src/demos/Extensions/FloatingMenu/React/styles.scss
index 12c87298..9489311c 100644
--- a/docs/src/demos/Extensions/FloatingMenu/React/styles.scss
+++ b/docs/src/demos/Extensions/FloatingMenu/React/styles.scss
@@ -2,4 +2,9 @@
   > * + * {
     margin-top: 0.75em;
   }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
 }
diff --git a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
index 8d249bf4..48f813a3 100644
--- a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
+++ b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
@@ -10,9 +10,6 @@
       <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
         bullet list
       </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-        blockquote
-      </button>
     </floating-menu>
     <editor-content :editor="editor" />
   </div>
@@ -64,10 +61,5 @@ export default {
   ol {
     padding: 0 1rem;
   }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
 }
 </style>
diff --git a/docs/src/docPages/examples/bubble-menu.md b/docs/src/docPages/examples/bubble-menu.md
deleted file mode 100644
index ec28d8ce..00000000
--- a/docs/src/docPages/examples/bubble-menu.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Bubble menu
-
-<demos :items="{
-  Vue: 'Examples/BubbleMenu/Vue',
-  React: 'Examples/BubbleMenu/React',
-}" />
diff --git a/docs/src/docPages/examples/menus.md b/docs/src/docPages/examples/menus.md
new file mode 100644
index 00000000..0ab41952
--- /dev/null
+++ b/docs/src/docPages/examples/menus.md
@@ -0,0 +1,6 @@
+# Menus
+
+<demos :items="{
+  Vue: 'Examples/Menus/Vue',
+  React: 'Examples/Menus/React',
+}" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 3d27c13c..7950055b 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -53,8 +53,8 @@
       # type: pro
     - title: Markdown shortcuts
       link: /examples/markdown-shortcuts
-    - title: Bubble menu
-      link: /examples/bubble-menu
+    - title: Menus
+      link: /examples/menus
       type: new
     - title: Tables
       link: /examples/tables
@@ -213,6 +213,7 @@
           link: /api/extensions/dropcursor
         - title: FloatingMenu
           link: /api/extensions/floating-menu
+          type: new
         - title: Focus
           link: /api/extensions/focus
         - title: FontFamily