Merge branch 'feature/extension-floating-menu'

# Conflicts:
#	packages/react/package.json
#	packages/vue-2/package.json
#	packages/vue-3/package.json

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+    ],
+    content: `
+      <p>
+        This is an example of a medium-like editor. Enter a new line and some buttons will appear.
+      </p>
+    `,
+  })
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {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>
+        <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

@@ -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>
+          This is an example of a medium-like editor. Enter a new line and some buttons will appear.
+        </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>

docs/src/docPages/api/extensions/floating-menu.md

@@ -0,0 +1,41 @@
+# Floating Menu
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-floating-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-floating-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-floating-menu?minimal=true)
+
+This extension will make a contextual menu appear near a selection of text.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-floating-menu
+# with Yarn
+yarn add @tiptap/extension-floating-menu
+```
+
+## Settings
+| Option       | Type          | Default   | Description                   |
+| ------------ | ------------- | --------- | ----------------------------- |
+| element      | `HTMLElement` | `null`    | The DOM element of your menu. |
+
+## Source code
+[packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-floating-menu/)
+
+## Using Vanilla JavaScript
+```js
+import { Editor } from '@tiptap/core'
+import FloatingMenu from '@tiptap/extension-floating-menu'
+
+new Editor({
+  extensions: [
+    FloatingMenu.configure({
+      element: document.querySelector('.menu'),
+    }),
+  ],
+})
+```
+
+## Using a framework
+<demos :items="{
+  Vue: 'Extensions/FloatingMenu/Vue',
+  React: 'Extensions/FloatingMenu/React',
+}" />

docs/src/links.yaml

@@ -207,6 +207,8 @@
           # type: pro
         - title: Dropcursor
           link: /api/extensions/dropcursor
+        - title: FloatingMenu
+          link: /api/extensions/floating-menu
         - title: Focus
           link: /api/extensions/focus
         - title: FontFamily

packages/extension-floating-menu/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-floating-menu
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-floating-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-floating-menu.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-floating-menu.svg)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).

packages/extension-floating-menu/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/extension-floating-menu",
+  "description": "floating-menu extension for tiptap",
+  "version": "2.0.0-beta.0",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-floating-menu.cjs.js",
+  "umd": "dist/tiptap-extension-floating-menu.umd.js",
+  "module": "dist/tiptap-extension-floating-menu.esm.js",
+  "unpkg": "dist/tiptap-extension-floating-menu.bundle.umd.min.js",
+  "types": "dist/packages/extension-floating-menu/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1"
+  },
+  "dependencies": {
+    "prosemirror-state": "^1.3.4",
+    "prosemirror-view": "^1.18.2"
+  }
+}

packages/extension-floating-menu/src/floating-menu-plugin.ts

@@ -0,0 +1,133 @@
+import { Editor, isNodeEmpty } from '@tiptap/core'
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+
+export interface FloatingMenuPluginProps {
+  editor: Editor,
+  element: HTMLElement,
+}
+
+export type FloatingMenuViewProps = FloatingMenuPluginProps & {
+  view: EditorView,
+}
+
+export class FloatingMenuView {
+  public editor: Editor
+
+  public element: HTMLElement
+
+  public view: EditorView
+
+  public isActive = false
+
+  public top = 0
+
+  public left = 0
+
+  public preventHide = false
+
+  constructor({
+    editor,
+    element,
+    view,
+  }: FloatingMenuViewProps) {
+    this.editor = editor
+    this.element = element
+    this.view = view
+    this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
+    this.editor.on('focus', this.focusHandler)
+    this.editor.on('blur', this.blurHandler)
+    this.render()
+  }
+
+  mousedownHandler = () => {
+    this.preventHide = true
+  }
+
+  focusHandler = () => {
+    // we use `setTimeout` to make sure `selection` is already updated
+    setTimeout(() => this.update(this.editor.view))
+  }
+
+  blurHandler = ({ event }: { event: FocusEvent }) => {
+    if (this.preventHide) {
+      this.preventHide = false
+
+      return
+    }
+
+    if (
+      event?.relatedTarget
+      && this.element.parentNode?.contains(event.relatedTarget as Node)
+    ) {
+      return
+    }
+
+    this.hide()
+  }
+
+  update(view: EditorView, oldState?: EditorState) {
+    const { state, composing } = view
+    const { doc, selection } = state
+    const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection)
+
+    if (composing || isSame) {
+      return
+    }
+
+    const { $anchor, anchor, empty } = selection
+    const parent = this.element.offsetParent
+    const isRootDepth = $anchor.depth === 1
+    const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType
+    const isDefaultNodeEmpty = isNodeEmpty(selection.$anchor.parent)
+    const isActive = isRootDepth && isDefaultNodeType && isDefaultNodeEmpty
+
+    if (!empty || !parent || !isActive) {
+      this.hide()
+
+      return
+    }
+
+    const parentBox = parent.getBoundingClientRect()
+    const cursorCoords = view.coordsAtPos(anchor)
+    const top = cursorCoords.top - parentBox.top
+    const left = cursorCoords.left - parentBox.left
+
+    this.isActive = true
+    this.top = top
+    this.left = left
+
+    this.render()
+  }
+
+  render() {
+    Object.assign(this.element.style, {
+      position: 'absolute',
+      zIndex: 1,
+      visibility: this.isActive ? 'visible' : 'hidden',
+      opacity: this.isActive ? 1 : 0,
+      left: `${this.left}px`,
+      top: `${this.top}px`,
+    })
+  }
+
+  hide() {
+    this.isActive = false
+    this.render()
+  }
+
+  destroy() {
+    this.element.removeEventListener('mousedown', this.mousedownHandler)
+    this.editor.off('focus', this.focusHandler)
+    this.editor.off('blur', this.blurHandler)
+  }
+}
+
+export const FloatingMenuPluginKey = new PluginKey('menuFloating')
+
+export const FloatingMenuPlugin = (options: FloatingMenuPluginProps) => {
+  return new Plugin({
+    key: FloatingMenuPluginKey,
+    view: view => new FloatingMenuView({ view, ...options }),
+  })
+}

packages/extension-floating-menu/src/floating-menu.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core'
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from './floating-menu-plugin'
+
+export type FloatingMenuOptions = Omit<FloatingMenuPluginProps, 'editor' | 'element'> & {
+  element: HTMLElement | null,
+}
+
+export const FloatingMenu = Extension.create<FloatingMenuOptions>({
+  name: 'bubbleMenu',
+
+  defaultOptions: {
+    element: null,
+  },
+
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return []
+    }
+
+    return [
+      FloatingMenuPlugin({
+        editor: this.editor,
+        element: this.options.element,
+      }),
+    ]
+  },
+})

packages/extension-floating-menu/src/index.ts

@@ -0,0 +1,6 @@
+import { FloatingMenu } from './floating-menu'
+
+export * from './floating-menu'
+export * from './floating-menu-plugin'
+
+export default FloatingMenu

packages/react/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.4",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   },
   "devDependencies": {

packages/react/src/FloatingMenu.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react'
+import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+
+export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
+  className?: string,
+}
+
+export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
+  const element = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const { editor } = props
+
+    editor.registerPlugin(FloatingMenuPlugin({
+      editor,
+      element: element.current as HTMLElement,
+    }))
+
+    return () => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    }
+  }, [])
+
+  return (
+    <div ref={element} className={props.className}>
+      {props.children}
+    </div>
+  )
+}

packages/react/src/index.ts

@@ -1,6 +1,7 @@
 export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'

packages/vue-2/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.4",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   }
 }

packages/vue-2/src/FloatingMenu.ts

@@ -0,0 +1,39 @@
+import Vue, { PropType } from 'vue'
+import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+
+export const FloatingMenu = Vue.extend({
+  name: 'FloatingMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor: FloatingMenuPluginProps['editor']) {
+        if (!editor) {
+          return
+        }
+
+        this.$nextTick(() => {
+          editor.registerPlugin(FloatingMenuPlugin({
+            editor,
+            element: this.$el as HTMLElement,
+          }))
+        })
+      },
+    },
+  },
+
+  render(createElement) {
+    return createElement('div', {}, this.$slots.default)
+  },
+
+  beforeDestroy() {
+    this.editor.unregisterPlugin(FloatingMenuPluginKey)
+  },
+})

packages/vue-2/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
+export * from './FloatingMenu'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'
 export * from './NodeViewWrapper'

packages/vue-3/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.4",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-state": "^1.3.4",
     "prosemirror-view": "^1.18.2",
     "vue": "^3.0.0"

packages/vue-3/src/FloatingMenu.ts

@@ -0,0 +1,41 @@
+import {
+  h,
+  ref,
+  PropType,
+  onMounted,
+  onBeforeUnmount,
+  defineComponent,
+} from 'vue'
+import {
+  FloatingMenuPlugin,
+  FloatingMenuPluginKey,
+  FloatingMenuPluginProps,
+} from '@tiptap/extension-floating-menu'
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+  },
+
+  setup({ editor }, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      editor.registerPlugin(FloatingMenuPlugin({
+        editor,
+        element: root.value as HTMLElement,
+      }))
+    })
+
+    onBeforeUnmount(() => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    })
+
+    return () => h('div', { ref: root }, slots.default?.())
+  },
+})

packages/vue-3/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'