diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx index 3fe7675b969..7cb6211855c 100644 --- 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 index 29e34bb29db..09a178bf415 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6564,12 +6564,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/lodash": { - "version": "4.14.191", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", - "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", - "dev": true - }, "node_modules/@types/minimatch": { "version": "3.0.5", "dev": true, @@ -13328,7 +13322,8 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -19345,12 +19340,10 @@ "version": "2.0.0-beta.220", "license": "MIT", "dependencies": { - "lodash": "^4.17.21", "tippy.js": "^6.3.7" }, "devDependencies": { - "@tiptap/pm": "^2.0.0-beta.220", - "@types/lodash": "^4.14.191" + "@tiptap/pm": "^2.0.0-beta.220" }, "funding": { "type": "github", @@ -24496,8 +24489,6 @@ "version": "file:packages/extension-bubble-menu", "requires": { "@tiptap/pm": "^2.0.0-beta.220", - "@types/lodash": "^4.14.191", - "lodash": "^4.17.21", "tippy.js": "^6.3.7" } }, @@ -24917,12 +24908,6 @@ "version": "0.0.29", "dev": true }, - "@types/lodash": { - "version": "4.14.191", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", - "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", - "dev": true - }, "@types/minimatch": { "version": "3.0.5", "dev": true @@ -29258,7 +29243,8 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "lodash.debounce": { "version": "4.0.8", diff --git a/packages/extension-bubble-menu/package.json b/packages/extension-bubble-menu/package.json index b15eda3e8ab..1df36675b94 100644 --- 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 index f297f43aca1..fea29cd537d 100644 --- 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 = ({ 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()