Merge branch 'develop' of github.com:ueberdosis/tiptap

bdbch · bdbch · commit b01a3c12775c · 2025-10-28T09:23:47.000+01:00
diff --git a/.changeset/bubble-floating-menu-attrs.md b/.changeset/bubble-floating-menu-attrs.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/vue-3": patch
+---
+
+Fix attribute forwarding for BubbleMenu and FloatingMenu Vue 3 components to allow setting z-index and other HTML attributes
diff --git a/.changeset/fix-hard-break-markdown-br.md b/.changeset/fix-hard-break-markdown-br.md
@@ -0,0 +1,9 @@
+---
+'@tiptap/extension-hard-break': patch
+---
+
+Ensure that markdown hard breaks (two spaces followed by a newline) are parsed so they render as line breaks (`<br>`) in the editor when using `contentType: 'markdown'`.
+
+Fixes #7107
+
+
diff --git a/.changeset/nine-eyes-call.md b/.changeset/nine-eyes-call.md
@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-unique-id': minor
+---
+
+Add `updateDocument` option to disable document updates caused by the Unique ID extension.
diff --git a/.changeset/rare-pumpkins-shave.md b/.changeset/rare-pumpkins-shave.md
@@ -0,0 +1,5 @@
+---
+'@tiptap/core': patch
+---
+
+Only remove injected CSS on unmount if no other editors are in the document (fixes #6836)
diff --git a/.changeset/ready-rings-fall.md b/.changeset/ready-rings-fall.md
@@ -0,0 +1,10 @@
+---
+'@tiptap/extension-drag-handle': patch
+---
+
+Replace DOM traversal with browser's native elementsFromPoint for better performance.
+
+- Use elementsFromPoint instead of querySelectorAll
+- Add clampToContent helper for coordinate boundary validation
+- Add findClosestTopLevelBlock helper for efficient block lookup
+- Future-proof for root-level mousemove listeners
diff --git a/.changeset/two-moles-learn.md b/.changeset/two-moles-learn.md
@@ -0,0 +1,5 @@
+---
+'@tiptap/react': patch
+---
+
+Prevent Bubble Menu plugin from re-loading every time the BubbleMenu component re-renders. Reverts a regression introduced in v3.6.3, in PR #7028.
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
@@ -57,6 +57,8 @@ export class Editor extends EventEmitter<EditorEvents> {
 
   private css: HTMLStyleElement | null = null
 
+  private className = 'tiptap'
+
   public schema!: Schema
 
   private editorView: EditorView | null = null
@@ -193,7 +195,8 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.isInitialized = false
 
     // Safely remove CSS element with fallback for test environments
-    if (this.css) {
+    // Only remove CSS if no other editors exist in the document after unmount
+    if (this.css && !document.querySelectorAll(`.${this.className}`).length) {
       try {
         if (typeof this.css.remove === 'function') {
           this.css.remove()
@@ -556,7 +559,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Prepend class name to element.
    */
   public prependClass(): void {
-    this.view.dom.className = `tiptap ${this.view.dom.className}`
+    this.view.dom.className = `${this.className} ${this.view.dom.className}`
   }
 
   public isCapturingTransaction = false
diff --git a/packages/extension-drag-handle-vue-2/src/DragHandle.ts b/packages/extension-drag-handle-vue-2/src/DragHandle.ts
@@ -38,14 +38,24 @@ export const DragHandle = Vue.extend({
       default: null,
     },
 
+    onElementDragStart: {
+      type: Function as PropType<DragHandleProps['onElementDragStart']>,
+      default: null,
+    },
+
+    onElementDragEnd: {
+      type: Function as PropType<DragHandleProps['onElementDragEnd']>,
+      default: null,
+    },
+
     class: {
       type: String as PropType<DragHandleProps['class']>,
       default: 'drag-handle',
     },
   },
 
   mounted() {
-    const { editor, pluginKey, onNodeChange } = this.$props
+    const { editor, pluginKey, onNodeChange, onElementDragStart, onElementDragEnd } = this.$props
 
     editor.registerPlugin(
       DragHandlePlugin({
@@ -54,6 +64,8 @@ export const DragHandle = Vue.extend({
         pluginKey,
         computePositionConfig: { ...defaultComputePositionConfig, ...this.computePositionConfig },
         onNodeChange,
+        onElementDragStart,
+        onElementDragEnd,
       }).plugin,
     )
   },
diff --git a/packages/extension-drag-handle-vue-3/src/DragHandle.ts b/packages/extension-drag-handle-vue-3/src/DragHandle.ts
@@ -4,9 +4,11 @@ import {
   DragHandlePlugin,
   dragHandlePluginDefaultKey,
 } from '@tiptap/extension-drag-handle'
+import type { Node } from '@tiptap/pm/model'
+import type { Plugin, PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/vue-3'
 import type { PropType } from 'vue'
-import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
@@ -20,7 +22,7 @@ export const DragHandle = defineComponent({
 
   props: {
     pluginKey: {
-      type: [String, Object] as PropType<DragHandleProps['pluginKey']>,
+      type: [String, Object] as PropType<PluginKey | string>,
       default: dragHandlePluginDefaultKey,
     },
 
@@ -39,6 +41,16 @@ export const DragHandle = defineComponent({
       default: null,
     },
 
+    onElementDragStart: {
+      type: Function as PropType<DragHandleProps['onElementDragStart']>,
+      default: null,
+    },
+
+    onElementDragEnd: {
+      type: Function as PropType<DragHandleProps['onElementDragEnd']>,
+      default: null,
+    },
+
     class: {
       type: String as PropType<DragHandleProps['class']>,
       default: 'drag-handle',
@@ -47,25 +59,45 @@ export const DragHandle = defineComponent({
 
   setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
+    const pluginHandle = shallowRef<{ plugin: Plugin; unbind: () => void } | null>(null)
 
-    onMounted(() => {
-      const { editor, pluginKey, onNodeChange, computePositionConfig } = props
-
-      editor.registerPlugin(
-        DragHandlePlugin({
-          editor,
-          element: root.value as HTMLElement,
-          pluginKey,
-          computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
-          onNodeChange,
-        }).plugin,
-      )
+    onMounted(async () => {
+      await nextTick()
+
+      const { editor, pluginKey, onNodeChange, onElementDragEnd, onElementDragStart, computePositionConfig } = props
+
+      if (!root.value) {
+        return
+      }
+      if (!props.editor || props.editor.isDestroyed) {
+        return
+      }
+
+      const init = DragHandlePlugin({
+        editor,
+        element: root.value,
+        pluginKey,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange,
+        onElementDragStart,
+        onElementDragEnd,
+      })
+
+      pluginHandle.value = init
+      props.editor.registerPlugin(init.plugin)
     })
 
     onBeforeUnmount(() => {
-      const { pluginKey, editor } = props
+      if (!pluginHandle.value) {
+        return
+      }
+
+      if (props.editor && !props.editor.isDestroyed) {
+        props.editor.unregisterPlugin(props.pluginKey)
+      }
 
-      editor.unregisterPlugin(pluginKey as string)
+      pluginHandle.value.unbind?.()
+      pluginHandle.value = null
     })
 
     return () =>
diff --git a/packages/extension-drag-handle/src/drag-handle.ts b/packages/extension-drag-handle/src/drag-handle.ts
@@ -32,6 +32,14 @@ export interface DragHandleOptions {
    * Returns a node or null when a node is hovered over
    */
   onNodeChange?: (options: { node: Node | null; editor: Editor }) => void
+  /**
+   * The callback function that will be called when drag start.
+   */
+  onElementDragStart?: (e: DragEvent) => void
+  /**
+   * The callback function that will be called when drag end.
+   */
+  onElementDragEnd?: (e: DragEvent) => void
 }
 
 declare module '@tiptap/core' {
@@ -70,6 +78,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
       onNodeChange: () => {
         return null
       },
+      onElementDragStart: undefined,
+      onElementDragEnd: undefined,
     }
   },
 
@@ -106,6 +116,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
         element,
         editor: this.editor,
         onNodeChange: this.options.onNodeChange,
+        onElementDragStart: this.options.onElementDragStart,
+        onElementDragEnd: this.options.onElementDragEnd,
       }).plugin,
     ]
   },
diff --git a/packages/extension-drag-handle/src/helpers/findNextElementFromCursor.ts b/packages/extension-drag-handle/src/helpers/findNextElementFromCursor.ts
@@ -1,66 +1,110 @@
 import type { Editor } from '@tiptap/core'
+import type { Node } from '@tiptap/pm/model'
+import type { EditorView } from '@tiptap/pm/view'
 
 export type FindElementNextToCoords = {
   x: number
   y: number
   direction?: 'left' | 'right'
   editor: Editor
-  bandHeight?: number
 }
 
-export const findElementNextToCoords = (options: FindElementNextToCoords) => {
-  const { x, y, direction = 'right', editor, bandHeight = 5 } = options
+/**
+ * Finds the draggable block element that is a direct child of view.dom
+ */
+export function findClosestTopLevelBlock(element: Element, view: EditorView): HTMLElement | undefined {
+  let current: Element | null = element
 
-  const rect = {
-    top: y - bandHeight,
-    bottom: y + bandHeight,
-    left: direction === 'right' ? x : 0,
-    right: direction === 'right' ? window.innerWidth - x : x,
+  while (current?.parentElement && current.parentElement !== view.dom) {
+    current = current.parentElement
   }
 
-  const root = editor.view.dom as HTMLElement
-
-  // Get potential candidates from prosemirror child elements and filter
-  // by removing decorations and non prosemirror-elements
-  const candidates = [...root.querySelectorAll<HTMLElement>('*')]
-    .filter(candidate => {
-      return editor.view.posAtDOM(candidate, 0) >= 0
-    })
-    .filter(candidate => {
-      const candidateRect = candidate.getBoundingClientRect()
-      return !(
-        candidateRect.bottom < rect.top ||
-        candidateRect.top > rect.bottom ||
-        candidateRect.right < rect.left ||
-        candidateRect.left > rect.right
-      )
-    })
-
-  if (!candidates || candidates.length === 0) {
-    return { resultElement: null, resultNode: null, pos: null }
+  return current?.parentElement === view.dom ? (current as HTMLElement) : undefined
+}
+
+/**
+ * Clamps coordinates to content bounds with O(1) layout reads
+ */
+function clampToContent(view: EditorView, x: number, y: number, inset = 5): { x: number; y: number } {
+  const container = view.dom
+  const firstBlock = container.firstElementChild
+  const lastBlock = container.lastElementChild
+
+  if (!firstBlock || !lastBlock) {
+    // this condition will never be met, as the first child element will be treated as last child element too
+    return { x, y }
   }
 
-  const finalCandidate = candidates[0]
-  const candidatePos = editor.view.posAtDOM(finalCandidate, 0)
-  if (candidatePos === -1) {
-    return { resultElement: finalCandidate, resultNode: null, pos: null }
+  // Clamp Y between first and last block
+  const topRect = firstBlock.getBoundingClientRect()
+  const botRect = lastBlock.getBoundingClientRect()
+  const clampedY = Math.min(Math.max(topRect.top + inset, y), botRect.bottom - inset)
+
+  const epsilon = 0.5
+  const sameLeft = Math.abs(topRect.left - botRect.left) < epsilon
+  const sameRight = Math.abs(topRect.right - botRect.right) < epsilon
+
+  let rowRect: DOMRect = topRect
+
+  if (sameLeft && sameRight) {
+    // Most of the time, every block has the same width
+    rowRect = topRect
+  } else {
+    // TODO
+    // find the actual block at the clamped Y
+    // This case is rare, avoid for now
   }
 
-  const $pos = editor.state.doc.resolve(candidatePos)
+  // Clamp X to the chosen block’s bounds
+  const clampedX = Math.min(Math.max(rowRect.left + inset, x), rowRect.right - inset)
+
+  return { x: clampedX, y: clampedY }
+}
+
+export const findElementNextToCoords = (
+  options: FindElementNextToCoords,
+): {
+  resultElement: HTMLElement | null
+  resultNode: Node | null
+  pos: number | null
+} => {
+  const { x, y, editor } = options
+  const { view, state } = editor
 
-  if ($pos.nodeAfter) {
-    const nodeAfterDom = editor.view.nodeDOM($pos.pos)
+  const { x: clampedX, y: clampedY } = clampToContent(view, x, y, 5)
 
-    if (nodeAfterDom && nodeAfterDom === finalCandidate) {
-      return {
-        resultElement: finalCandidate,
-        resultNode: $pos.nodeAfter,
-        pos: candidatePos,
-      }
+  const elements = view.root.elementsFromPoint(clampedX, clampedY)
+
+  let block: HTMLElement | undefined
+
+  Array.prototype.some.call(elements, (el: Element) => {
+    if (!view.dom.contains(el)) {
+      return false
+    }
+    const candidate = findClosestTopLevelBlock(el, view)
+    if (candidate) {
+      block = candidate
+      return true
     }
+    return false
+  })
+
+  if (!block) {
+    return { resultElement: null, resultNode: null, pos: null }
   }
 
-  const candidateNode = editor.state.doc.nodeAt(candidatePos - 1)
+  let pos: number
+  try {
+    pos = view.posAtDOM(block, 0)
+  } catch {
+    return { resultElement: null, resultNode: null, pos: null }
+  }
 
-  return { resultElement: finalCandidate, resultNode: candidateNode, pos: candidatePos }
+  const node = state.doc.nodeAt(pos)
+
+  return {
+    resultElement: block,
+    resultNode: node,
+    pos,
+  }
 }
diff --git a/packages/extension-hard-break/src/hard-break.ts b/packages/extension-hard-break/src/hard-break.ts
diff --git a/packages/vue-3/src/menus/BubbleMenu.ts b/packages/vue-3/src/menus/BubbleMenu.ts
diff --git a/packages/vue-3/src/menus/FloatingMenu.ts b/packages/vue-3/src/menus/FloatingMenu.ts
diff --git a/tests/cypress/integration/core/unmounted.spec.ts b/tests/cypress/integration/core/unmounted.spec.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@tiptap/vue-3": patch
 +---
++
 +Fix attribute forwarding for BubbleMenu and FloatingMenu Vue 3 components to allow setting z-index and other HTML attributes