add menus example

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>
   )

docs/src/demos/Examples/Menus/React/styles.scss

@@ -2,4 +2,9 @@
   > * + * {
     margin-top: 0.75em;
   }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
 }

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>

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>

docs/src/demos/Extensions/FloatingMenu/React/styles.scss

@@ -2,4 +2,9 @@
   > * + * {
     margin-top: 0.75em;
   }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
 }

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>

docs/src/docPages/examples/bubble-menu.md

@@ -1,6 +0,0 @@
-# Bubble menu
-
-<demos :items="{
-  Vue: 'Examples/BubbleMenu/Vue',
-  React: 'Examples/BubbleMenu/React',
-}" />

docs/src/docPages/examples/menus.md

@@ -0,0 +1,6 @@
+# Menus
+
+<demos :items="{
+  Vue: 'Examples/Menus/Vue',
+  React: 'Examples/Menus/React',
+}" />

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