add basic floating menu

docs/src/demos/Extensions/FloatingMenu/React/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+    ],
+    content: `
+      <p>
+        Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+      </p>
+    `,
+  })
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {editor && <BubbleMenu editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          code
+        </button>
+      </BubbleMenu>}
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}

docs/src/demos/Extensions/FloatingMenu/Vue/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div style="position: relative">
+    <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>
+      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+        blockquote
+      </button>
+    </floating-menu>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+    FloatingMenu,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+      ],
+      content: `
+        <p>
+          Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>