Handle NodeViews in BubbleMenu positioning (#3881)

* fix(bubble-menu): use correct children of node view renderers for clientRect * fix(bubble-menu): remove lodash * fix(bubble-menu): support vue node views * fix(demos): revert bubble menu demo
ueberdosis · Mar 27, 2023 · 65371b7 · 65371b7
1 parent 00aad1f
commit 65371b7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -1,6 +1,8 @@
 import './styles.scss'
 
-import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
+import {
+  BubbleMenu, EditorContent, useEditor,
+} from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/extension-bubble-menu/package.json b/packages/extension-bubble-menu/package.json
@@ -33,7 +33,6 @@
     "@tiptap/pm": "^2.0.0-beta.209"
   },
   "dependencies": {
-    "lodash": "^4.17.21",
     "tippy.js": "^6.3.7"
   },
   "repository": {
@@ -43,8 +42,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@tiptap/pm": "^2.0.0-beta.220",
-    "@types/lodash": "^4.14.191"
+    "@tiptap/pm": "^2.0.0-beta.220"
   },
   "scripts": {
     "clean": "rm -rf dist",

diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -3,7 +3,6 @@ import {
 } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
 import { EditorView } from '@tiptap/pm/view'
-import debounce from 'lodash/debounce'
 import tippy, { Instance, Props } from 'tippy.js'
 
 export interface BubbleMenuPluginProps {
@@ -43,6 +42,8 @@ export class BubbleMenuView {
 
   public updateDelay: number
 
+  private updateDebounceTimer: number | undefined
+
   public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
     view,
     state,
@@ -159,10 +160,21 @@ export class BubbleMenuView {
     const hasValidSelection = state.selection.$from.pos !== state.selection.$to.pos
 
     if (this.updateDelay > 0 && hasValidSelection) {
-      debounce(this.updateHandler, this.updateDelay)(view, oldState)
-    } else {
-      this.updateHandler(view, oldState)
+      this.handleDebouncedUpdate(view, oldState)
+      return
+    }
+
+    this.updateHandler(view, oldState)
+  }
+
+  handleDebouncedUpdate = (view: EditorView, oldState?: EditorState) => {
+    if (this.updateDebounceTimer) {
+      clearTimeout(this.updateDebounceTimer)
     }
+
+    this.updateDebounceTimer = window.setTimeout(() => {
+      this.updateHandler(view, oldState)
+    }, this.updateDelay)
   }
 
   updateHandler = (view: EditorView, oldState?: EditorState) => {
@@ -201,7 +213,13 @@ export class BubbleMenuView {
         this.tippyOptions?.getReferenceClientRect
         || (() => {
           if (isNodeSelection(state.selection)) {
-            const node = view.nodeDOM(from) as HTMLElement
+            let node = view.nodeDOM(from) as HTMLElement
+
+            const nodeViewWrapper = node.dataset.nodeViewWrapper ? node : node.querySelector('[data-node-view-wrapper]')
+
+            if (nodeViewWrapper) {
+              node = nodeViewWrapper.firstChild as HTMLElement
+            }
 
             if (node) {
               return node.getBoundingClientRect()