snapshot of https://github.com/ueberdosis/tiptap.git (main, 2026-09-15; blobs > 131072B omitted)

packages/extension-floating-menu/README.md

@@ -0,0 +1,18 @@
+# @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_.
+
+## Official 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/blob/main/LICENSE.md).

packages/extension-floating-menu/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tiptap/extension-floating-menu",
+  "version": "3.30.3",
+  "description": "floating-menu extension for tiptap",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "homepage": "https://tiptap.dev",
+  "bugs": {
+    "url": "https://github.com/ueberdosis/tiptap/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-floating-menu"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vp pack"
+  },
+  "devDependencies": {
+    "@floating-ui/dom": "^1.6.12",
+    "@tiptap/core": "workspace:^",
+    "@tiptap/pm": "workspace:^"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.0.0",
+    "@tiptap/core": "workspace:*",
+    "@tiptap/pm": "workspace:*"
+  }
+}

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

@@ -0,0 +1,250 @@
+import { Editor } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { PluginKey } from '@tiptap/pm/state'
+import { describe, expect, it, vi } from 'vite-plus/test'
+
+import { FloatingMenu } from './floating-menu.js'
+import { FloatingMenuView } from './floating-menu-plugin.js'
+
+function createEditor(content = '<p>Hello world</p>') {
+  return new Editor({
+    extensions: [Document, Paragraph, Text],
+    content,
+  })
+}
+
+function createFloatingMenuView(
+  editor: Editor,
+  overrides: Partial<ConstructorParameters<typeof FloatingMenuView>[0]> = {},
+) {
+  return new FloatingMenuView({
+    editor,
+    element: document.createElement('div'),
+    view: editor.view,
+    shouldShow: () => false,
+    ...overrides,
+  })
+}
+
+describe('FloatingMenuView cross-contamination', () => {
+  it('should only process updateOptions for its own pluginKey (string)', () => {
+    const editor = createEditor()
+
+    const view1 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu1' })
+    const view2 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu2' })
+
+    const spy1 = vi.spyOn(view1, 'updateOptions')
+    const spy2 = vi.spyOn(view2, 'updateOptions')
+
+    const newOptions = { updateDelay: 999 }
+
+    editor.view.dispatch(
+      editor.state.tr.setMeta('floatingMenu1', {
+        type: 'updateOptions',
+        options: newOptions,
+      }),
+    )
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy1).toHaveBeenCalledWith(newOptions)
+    expect(spy2).not.toHaveBeenCalled()
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+  it('should only process updateOptions for its own pluginKey (PluginKey instance)', () => {
+    const editor = createEditor()
+
+    const key1 = new PluginKey('customFloatingA')
+    const key2 = new PluginKey('customFloatingB')
+
+    const view1 = createFloatingMenuView(editor, { pluginKey: key1 })
+    const view2 = createFloatingMenuView(editor, { pluginKey: key2 })
+
+    const spy1 = vi.spyOn(view1, 'updateOptions')
+    const spy2 = vi.spyOn(view2, 'updateOptions')
+
+    const newOptions = { updateDelay: 500 }
+
+    editor.view.dispatch(
+      editor.state.tr.setMeta('customFloatingA$', {
+        type: 'updateOptions',
+        options: newOptions,
+      }),
+    )
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy1).toHaveBeenCalledWith(newOptions)
+    expect(spy2).not.toHaveBeenCalled()
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+  it('should only process updatePosition for its own pluginKey', () => {
+    const editor = createEditor()
+
+    const view1 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu1' })
+    const view2 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu2' })
+
+    const spy1 = vi.spyOn(view1, 'updatePosition')
+    const spy2 = vi.spyOn(view2, 'updatePosition')
+
+    editor.view.dispatch(editor.state.tr.setMeta('floatingMenu1', 'updatePosition'))
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).not.toHaveBeenCalled()
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+  it('should not cross-contaminate options between two instances', () => {
+    const editor = createEditor()
+
+    const view1 = createFloatingMenuView(editor, {
+      pluginKey: 'floatingMenu1',
+      updateDelay: 100,
+    })
+    const view2 = createFloatingMenuView(editor, {
+      pluginKey: 'floatingMenu2',
+      updateDelay: 200,
+    })
+
+    editor.view.dispatch(
+      editor.state.tr.setMeta('floatingMenu1', {
+        type: 'updateOptions',
+        options: { updateDelay: 999 },
+      }),
+    )
+
+    expect(view1.updateDelay).toBe(999)
+    expect(view2.updateDelay).toBe(200)
+
+    editor.view.dispatch(
+      editor.state.tr.setMeta('floatingMenu2', {
+        type: 'updateOptions',
+        options: { updateDelay: 777 },
+      }),
+    )
+
+    expect(view1.updateDelay).toBe(999)
+    expect(view2.updateDelay).toBe(777)
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+  it('should use pluginKey in updateFloatingMenuPosition command', () => {
+    const customPluginKey = 'myFloatingMenu'
+    const menuElement = document.createElement('div')
+
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        FloatingMenu.configure({
+          element: menuElement,
+          pluginKey: customPluginKey,
+          shouldShow: () => false,
+        }),
+      ],
+      content: '<p>Hello world</p>',
+    })
+
+    const dispatchSpy = vi.spyOn(editor.view, 'dispatch')
+
+    editor.commands.updateFloatingMenuPosition()
+
+    const dispatchedTr = dispatchSpy.mock.calls[0][0]
+
+    expect(dispatchedTr.getMeta(customPluginKey)).toBe('updatePosition')
+    expect(dispatchedTr.getMeta('floatingMenu')).toBeUndefined()
+
+    editor.destroy()
+  })
+  it('should maintain backward compatibility with default "floatingMenu" pluginKey', () => {
+    const editor = createEditor()
+
+    const view = createFloatingMenuView(editor)
+
+    const spy = vi.spyOn(view, 'updateOptions')
+    const newOptions = { updateDelay: 500 }
+
+    editor.view.dispatch(
+      editor.state.tr.setMeta('floatingMenu', {
+        type: 'updateOptions',
+        options: newOptions,
+      }),
+    )
+
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith(newOptions)
+
+    view.destroy()
+    editor.destroy()
+  })
+  it('should only process show for its own pluginKey', () => {
+    const editor = createEditor()
+
+    const view1 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu1' })
+    const view2 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu2' })
+
+    const spy1 = vi.spyOn(view1, 'show')
+    const spy2 = vi.spyOn(view2, 'show')
+
+    editor.view.dispatch(editor.state.tr.setMeta('floatingMenu1', 'show'))
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).not.toHaveBeenCalled()
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+  it('should only process hide for its own pluginKey', () => {
+    const editor = createEditor()
+
+    const view1 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu1' })
+    const view2 = createFloatingMenuView(editor, { pluginKey: 'floatingMenu2' })
+
+    const spy1 = vi.spyOn(view1, 'hide')
+    const spy2 = vi.spyOn(view2, 'hide')
+
+    editor.view.dispatch(editor.state.tr.setMeta('floatingMenu1', 'hide'))
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).not.toHaveBeenCalled()
+
+    view1.destroy()
+    view2.destroy()
+    editor.destroy()
+  })
+})
+
+describe('FloatingMenuView destroy safety', () => {
+  it('updatePosition should not call coordsAtPos when the editor view is detached from the DOM', () => {
+    const editor = createEditor()
+    const view = createFloatingMenuView(editor)
+    const coordsSpy = vi.spyOn(editor.view, 'coordsAtPos')
+
+    try {
+      // Simulate the real-world teardown race: the editor is destroyed while a
+      // pending updatePosition call (debounced resize/scroll) is still in flight.
+      // ProseMirror's destroy removes view.dom from its parent and nulls docView;
+      // without a guard, posToDOMRect -> coordsAtPos throws on the null docView.
+      editor.destroy()
+
+      expect(() => view.updatePosition()).not.toThrow(
+        /Cannot read properties of null \(reading 'domFromPos'\)/,
+      )
+      expect(coordsSpy).not.toHaveBeenCalled()
+    } finally {
+      view.destroy()
+    }
+  })
+})

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

@@ -0,0 +1,580 @@
+import {
+  type Middleware,
+  arrow,
+  autoPlacement,
+  computePosition,
+  flip,
+  hide,
+  inline,
+  offset,
+  shift,
+  size,
+} from '@floating-ui/dom'
+import type { Editor } from '@tiptap/core'
+import { getText, getTextSerializersFromSchema, posToDOMRect } from '@tiptap/core'
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+
+export interface FloatingMenuPluginProps {
+  /**
+   * The plugin key for the floating menu.
+   * @default 'floatingMenu'
+   */
+  pluginKey: PluginKey | string
+
+  /**
+   * The editor instance.
+   * @default null
+   */
+  editor: Editor
+
+  /**
+   * The DOM element that contains your menu.
+   * @default null
+   */
+  element: HTMLElement
+
+  /**
+   * The delay in milliseconds before the menu should be updated.
+   * This can be useful to prevent performance issues.
+   * @type {number}
+   * @default 250
+   */
+  updateDelay?: number
+
+  /**
+   * The delay in milliseconds before the menu position should be updated on window resize.
+   * This can be useful to prevent performance issues.
+   * @type {number}
+   * @default 60
+   */
+  resizeDelay?: number
+
+  /**
+   * The DOM element to append your menu to. Default is the editor's parent element.
+   *
+   * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+   *
+   * @type {HTMLElement}
+   * @default null
+   */
+  appendTo?: HTMLElement | (() => HTMLElement)
+
+  /**
+   * A function that determines whether the menu should be shown or not.
+   * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
+   */
+  shouldShow?:
+    | ((props: {
+        editor: Editor
+        view: EditorView
+        state: EditorState
+        oldState?: EditorState
+        from: number
+        to: number
+      }) => boolean)
+    | null
+
+  /**
+   * The options for the floating menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
+   * hide, and inline middlewares.
+   * @default {}
+   * @see https://floating-ui.com/docs/computePosition#options
+   */
+  options?: {
+    strategy?: 'absolute' | 'fixed'
+    placement?:
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'left'
+      | 'top-start'
+      | 'top-end'
+      | 'right-start'
+      | 'right-end'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left-start'
+      | 'left-end'
+    offset?: Parameters<typeof offset>[0] | boolean
+    flip?: Parameters<typeof flip>[0] | boolean
+    shift?: Parameters<typeof shift>[0] | boolean
+    arrow?: Parameters<typeof arrow>[0] | false
+    size?: Parameters<typeof size>[0] | boolean
+    autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean
+    hide?: Parameters<typeof hide>[0] | boolean
+    inline?: Parameters<typeof inline>[0] | boolean
+
+    onShow?: () => void
+    onHide?: () => void
+    onUpdate?: () => void
+    onDestroy?: () => void
+
+    /**
+     * The scrollable element that should be listened to when updating the position of the floating menu.
+     * If not provided, the window will be used.
+     * @type {HTMLElement | Window}
+     */
+    scrollTarget?: HTMLElement | Window
+  }
+}
+
+export type FloatingMenuViewProps = FloatingMenuPluginProps & {
+  /**
+   * The editor view.
+   */
+  view: EditorView
+}
+
+export class FloatingMenuView {
+  public editor: Editor
+
+  public element: HTMLElement
+
+  public view: EditorView
+
+  public preventHide = false
+
+  public pluginKey: PluginKey | string
+
+  /**
+   * The delay in milliseconds before the menu should be updated.
+   * @default 250
+   */
+  public updateDelay: number
+
+  /**
+   * The delay in milliseconds before the menu position should be updated on window resize.
+   * @default 60
+   */
+  public resizeDelay: number
+
+  public appendTo: HTMLElement | (() => HTMLElement) | undefined
+
+  private updateDebounceTimer: number | undefined
+
+  private resizeDebounceTimer: number | undefined
+
+  private isVisible = false
+
+  private scrollTarget: HTMLElement | Window = window
+
+  private getTextContent(node: ProsemirrorNode) {
+    return getText(node, { textSerializers: getTextSerializersFromSchema(this.editor.schema) })
+  }
+
+  public shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null> = ({ view, state }) => {
+    const { selection } = state
+    const { $anchor, empty } = selection
+    const isRootDepth = $anchor.depth === 1
+
+    const isEmptyTextBlock =
+      $anchor.parent.isTextblock &&
+      !$anchor.parent.type.spec.code &&
+      !$anchor.parent.textContent &&
+      $anchor.parent.childCount === 0 &&
+      !this.getTextContent($anchor.parent)
+
+    if (
+      !view.hasFocus() ||
+      !empty ||
+      !isRootDepth ||
+      !isEmptyTextBlock ||
+      !this.editor.isEditable
+    ) {
+      return false
+    }
+
+    return true
+  }
+
+  private floatingUIOptions: NonNullable<FloatingMenuPluginProps['options']> = {
+    strategy: 'absolute',
+    placement: 'right',
+    offset: 8,
+    flip: {},
+    shift: {},
+    arrow: false,
+    size: false,
+    autoPlacement: false,
+    hide: false,
+    inline: false,
+  }
+
+  get middlewares() {
+    const middlewares: Middleware[] = []
+
+    if (this.floatingUIOptions.flip) {
+      middlewares.push(
+        flip(
+          typeof this.floatingUIOptions.flip !== 'boolean'
+            ? this.floatingUIOptions.flip
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.shift) {
+      middlewares.push(
+        shift(
+          typeof this.floatingUIOptions.shift !== 'boolean'
+            ? this.floatingUIOptions.shift
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.offset) {
+      middlewares.push(
+        offset(
+          typeof this.floatingUIOptions.offset !== 'boolean'
+            ? this.floatingUIOptions.offset
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.arrow) {
+      middlewares.push(arrow(this.floatingUIOptions.arrow))
+    }
+
+    if (this.floatingUIOptions.size) {
+      middlewares.push(
+        size(
+          typeof this.floatingUIOptions.size !== 'boolean'
+            ? this.floatingUIOptions.size
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.autoPlacement) {
+      middlewares.push(
+        autoPlacement(
+          typeof this.floatingUIOptions.autoPlacement !== 'boolean'
+            ? this.floatingUIOptions.autoPlacement
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.hide) {
+      middlewares.push(
+        hide(
+          typeof this.floatingUIOptions.hide !== 'boolean'
+            ? this.floatingUIOptions.hide
+            : undefined,
+        ),
+      )
+    }
+
+    if (this.floatingUIOptions.inline) {
+      middlewares.push(
+        inline(
+          typeof this.floatingUIOptions.inline !== 'boolean'
+            ? this.floatingUIOptions.inline
+            : undefined,
+        ),
+      )
+    }
+
+    return middlewares
+  }
+
+  constructor({
+    editor,
+    element,
+    view,
+    pluginKey = 'floatingMenu',
+    updateDelay = 250,
+    resizeDelay = 60,
+    options,
+    appendTo,
+    shouldShow,
+  }: FloatingMenuViewProps) {
+    this.editor = editor
+    this.element = element
+    this.view = view
+    this.pluginKey = pluginKey
+    this.updateDelay = updateDelay
+    this.resizeDelay = resizeDelay
+    this.appendTo = appendTo
+    this.scrollTarget = options?.scrollTarget ?? window
+
+    this.floatingUIOptions = {
+      ...this.floatingUIOptions,
+      ...options,
+    }
+
+    this.element.tabIndex = 0
+
+    if (shouldShow) {
+      this.shouldShow = shouldShow
+    }
+
+    this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
+    this.editor.on('focus', this.focusHandler)
+    this.editor.on('blur', this.blurHandler)
+    this.editor.on('transaction', this.transactionHandler)
+    window.addEventListener('resize', this.resizeHandler)
+    this.scrollTarget.addEventListener('scroll', this.resizeHandler)
+
+    this.update(view, view.state)
+
+    if (this.getShouldShow()) {
+      this.show()
+      this.updatePosition()
+    }
+  }
+
+  getShouldShow(oldState?: EditorState) {
+    const { state } = this.view
+    const { selection } = state
+
+    const { ranges } = selection
+    const from = Math.min(...ranges.map(range => range.$from.pos))
+    const to = Math.max(...ranges.map(range => range.$to.pos))
+
+    const shouldShow = this.shouldShow?.({
+      editor: this.editor,
+      view: this.view,
+      state,
+      oldState,
+      from,
+      to,
+    })
+
+    return shouldShow
+  }
+
+  updateHandler = (
+    view: EditorView,
+    selectionChanged: boolean,
+    docChanged: boolean,
+    oldState?: EditorState,
+  ) => {
+    const { composing } = view
+
+    const isSame = !selectionChanged && !docChanged
+
+    if (composing || isSame) {
+      return
+    }
+
+    const shouldShow = this.getShouldShow(oldState)
+
+    if (!shouldShow) {
+      this.hide()
+
+      return
+    }
+
+    this.updatePosition()
+    this.show()
+  }
+
+  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
+    }
+
+    if (event?.relatedTarget === this.editor.view.dom) {
+      return
+    }
+
+    this.hide()
+  }
+
+  /**
+   * Handles the transaction event to update the position of the floating menu.
+   * This allows external code to trigger a position update via:
+   * `editor.view.dispatch(editor.state.tr.setMeta(pluginKey, 'updatePosition'))`
+   * The `pluginKey` defaults to `floatingMenu`
+   */
+  transactionHandler = ({ transaction: tr }: { transaction: Transaction }) => {
+    const meta = tr.getMeta(this.pluginKey)
+    if (meta === 'updatePosition') {
+      this.updatePosition()
+    } else if (meta && typeof meta === 'object' && meta.type === 'updateOptions') {
+      this.updateOptions(meta.options)
+    } else if (meta === 'hide') {
+      this.hide()
+    } else if (meta === 'show') {
+      this.updatePosition()
+      this.show()
+    }
+  }
+
+  updateOptions(
+    newProps: Partial<Omit<FloatingMenuPluginProps, 'editor' | 'element' | 'pluginKey'>>,
+  ) {
+    if (newProps.updateDelay !== undefined) {
+      this.updateDelay = newProps.updateDelay
+    }
+
+    if (newProps.resizeDelay !== undefined) {
+      this.resizeDelay = newProps.resizeDelay
+    }
+
+    if (newProps.appendTo !== undefined) {
+      this.appendTo = newProps.appendTo
+    }
+
+    if (newProps.shouldShow !== undefined) {
+      if (newProps.shouldShow) {
+        this.shouldShow = newProps.shouldShow
+      }
+    }
+
+    if (newProps.options !== undefined) {
+      // Handle scrollTarget change - need to remove old listener and add new one
+      // Use nullish coalescing to default to window when scrollTarget is undefined/null
+      const newScrollTarget = newProps.options.scrollTarget ?? window
+
+      if (newScrollTarget !== this.scrollTarget) {
+        this.scrollTarget.removeEventListener('scroll', this.resizeHandler)
+        this.scrollTarget = newScrollTarget
+        this.scrollTarget.addEventListener('scroll', this.resizeHandler)
+      }
+
+      this.floatingUIOptions = {
+        ...this.floatingUIOptions,
+        ...newProps.options,
+      }
+    }
+  }
+
+  /**
+   * Handles the window resize event to update the position of the floating menu.
+   * It uses a debounce mechanism to prevent excessive updates.
+   * The delay is defined by the `resizeDelay` property.
+   */
+  resizeHandler = () => {
+    if (this.resizeDebounceTimer) {
+      clearTimeout(this.resizeDebounceTimer)
+    }
+
+    this.resizeDebounceTimer = window.setTimeout(() => {
+      this.updatePosition()
+    }, this.resizeDelay)
+  }
+
+  updatePosition() {
+    if (!this.view?.dom?.parentNode) {
+      return
+    }
+
+    const { selection } = this.editor.state
+
+    const domRect = posToDOMRect(this.view, selection.from, selection.to)
+
+    const virtualElement = {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    }
+
+    computePosition(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares,
+    }).then(({ x, y, strategy, middlewareData }) => {
+      // Handle hide middleware - hide element if reference is hidden or element has escaped
+      if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
+        this.element.style.visibility = 'hidden'
+        return
+      }
+
+      this.element.style.visibility = 'visible'
+      this.element.style.width = 'max-content'
+      this.element.style.position = strategy
+      this.element.style.left = `${x}px`
+      this.element.style.top = `${y}px`
+
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate()
+      }
+    })
+  }
+
+  update(view: EditorView, oldState?: EditorState) {
+    const selectionChanged = !oldState?.selection.eq(view.state.selection)
+    const docChanged = !oldState?.doc.eq(view.state.doc)
+
+    this.updateHandler(view, selectionChanged, docChanged, oldState)
+  }
+
+  show() {
+    if (this.isVisible) {
+      return
+    }
+
+    this.element.style.visibility = 'visible'
+    this.element.style.opacity = '1'
+
+    // attach to appendTo or editor's parent element
+    const appendToElement = typeof this.appendTo === 'function' ? this.appendTo() : this.appendTo
+    ;(appendToElement ?? this.view.dom.parentElement)?.appendChild(this.element)
+
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow()
+    }
+
+    this.isVisible = true
+  }
+
+  hide() {
+    if (!this.isVisible) {
+      return
+    }
+
+    this.element.style.visibility = 'hidden'
+    this.element.style.opacity = '0'
+    // remove from the parent element
+    this.element.remove()
+
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide()
+    }
+
+    this.isVisible = false
+  }
+
+  destroy() {
+    this.hide()
+    this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true })
+    window.removeEventListener('resize', this.resizeHandler)
+    this.scrollTarget.removeEventListener('scroll', this.resizeHandler)
+    this.editor.off('focus', this.focusHandler)
+    this.editor.off('blur', this.blurHandler)
+    this.editor.off('transaction', this.transactionHandler)
+
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy()
+    }
+  }
+}
+
+export const FloatingMenuPlugin = (options: FloatingMenuPluginProps) => {
+  return new Plugin({
+    key:
+      typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey,
+    view: view => new FloatingMenuView({ view, ...options }),
+  })
+}

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

@@ -0,0 +1,77 @@
+import { Extension } from '@tiptap/core'
+
+import type { FloatingMenuPluginProps } from './floating-menu-plugin.js'
+import { FloatingMenuPlugin } from './floating-menu-plugin.js'
+
+export type FloatingMenuOptions = Omit<FloatingMenuPluginProps, 'editor' | 'element'> & {
+  /**
+   * The DOM element that contains your menu.
+   * @type {HTMLElement}
+   * @default null
+   */
+  element: HTMLElement | null
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    floatingMenu: {
+      /**
+       * Update the position of the floating menu.
+       * @example editor.commands.updateFloatingMenuPosition()
+       */
+      updateFloatingMenuPosition: () => ReturnType
+    }
+  }
+}
+
+/**
+ * This extension allows you to create a floating menu.
+ * @see https://tiptap.dev/api/extensions/floating-menu
+ */
+export const FloatingMenu = Extension.create<FloatingMenuOptions>({
+  name: 'floatingMenu',
+
+  addOptions() {
+    return {
+      element: null,
+      options: {},
+      pluginKey: 'floatingMenu',
+      updateDelay: undefined,
+      resizeDelay: undefined,
+      appendTo: undefined,
+      shouldShow: null,
+    }
+  },
+
+  addCommands() {
+    return {
+      updateFloatingMenuPosition:
+        () =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            tr.setMeta(this.options.pluginKey, 'updatePosition')
+          }
+          return true
+        },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return []
+    }
+
+    return [
+      FloatingMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        updateDelay: this.options.updateDelay,
+        resizeDelay: this.options.resizeDelay,
+        options: this.options.options,
+        appendTo: this.options.appendTo,
+        shouldShow: this.options.shouldShow,
+      }),
+    ]
+  },
+})

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

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

packages/extension-floating-menu/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite-plus'
+import { basePackConfig } from '../../pack.config.mjs'
+
+export default defineConfig({
+  pack: {
+    entry: ['src/index.ts'],
+    ...basePackConfig(),
+  },
+})