diff --git a/packages/client/src/tiptap/editor/menus/callout/bubble.tsx b/packages/client/src/tiptap/editor/menus/callout/bubble.tsx index b9e8753..5ca7aa8 100644 --- a/packages/client/src/tiptap/editor/menus/callout/bubble.tsx +++ b/packages/client/src/tiptap/editor/menus/callout/bubble.tsx @@ -35,6 +35,12 @@ export const CalloutBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => { const shouldShow = useCallback(() => editor.isActive(Callout.name), [editor]); const getRenderContainer = useCallback((node) => { let container = node; + + // 文本节点 + if (!container.tag) { + container = node.parentElement; + } + while (container && container.id !== 'js-callout-container') { container = container.parentElement; } diff --git a/packages/client/src/tiptap/editor/menus/code-block/bubble.tsx b/packages/client/src/tiptap/editor/menus/code-block/bubble.tsx index f8cd64a..1daa373 100644 --- a/packages/client/src/tiptap/editor/menus/code-block/bubble.tsx +++ b/packages/client/src/tiptap/editor/menus/code-block/bubble.tsx @@ -11,9 +11,16 @@ export const CodeBlockBubbleMenu = ({ editor }) => { const shouldShow = useCallback(() => editor.isActive(CodeBlock.name), [editor]); const getRenderContainer = useCallback((node) => { let container = node; + + // 文本节点 + if (!container.tag) { + container = node.parentElement; + } + while (container && container.classList && !container.classList.contains('node-codeBlock')) { container = container.parentElement; } + return container; }, []); const copyMe = useCallback(() => copyNode(CodeBlock.name, editor), [editor]); diff --git a/packages/client/src/tiptap/editor/menus/table/bubble.tsx b/packages/client/src/tiptap/editor/menus/table/bubble.tsx index a3bed3f..63407fd 100644 --- a/packages/client/src/tiptap/editor/menus/table/bubble.tsx +++ b/packages/client/src/tiptap/editor/menus/table/bubble.tsx @@ -27,6 +27,10 @@ export const TableBubbleMenu = ({ editor }) => { }, [editor]); const getRenderContainer = useCallback((node) => { let container = node; + // 文本节点 + if (!container.tag) { + container = node.parentElement; + } while (container.tagName !== 'TABLE') { container = container.parentElement; } diff --git a/packages/client/src/tiptap/editor/views/bubble-menu/bubble-menu-plugin.tsx b/packages/client/src/tiptap/editor/views/bubble-menu/bubble-menu-plugin.tsx index 5a11f58..74898ab 100644 --- a/packages/client/src/tiptap/editor/views/bubble-menu/bubble-menu-plugin.tsx +++ b/packages/client/src/tiptap/editor/views/bubble-menu/bubble-menu-plugin.tsx @@ -41,9 +41,8 @@ export class BubbleMenuView { public tippyOptions?: Partial; - // public renderContainerSelector?: string; - // public matchRenderContainer?: BubbleMenuPluginProps['matchRenderContainer']; public getRenderContainer?: BubbleMenuPluginProps['getRenderContainer']; + public shouldShow: Exclude = ({ view, state, from, to }) => { const { doc, selection } = state; const { empty } = selection; @@ -60,22 +59,10 @@ export class BubbleMenuView { return true; }; - constructor({ - editor, - element, - view, - tippyOptions = {}, - shouldShow, - // renderContainerSelector, - // matchRenderContainer, - getRenderContainer, - }: BubbleMenuViewProps) { + constructor({ editor, element, view, tippyOptions = {}, shouldShow, getRenderContainer }: BubbleMenuViewProps) { this.editor = editor; this.element = element; this.view = view; - // this.renderContainerSelector = renderContainerSelector; - // this.matchRenderContainer = matchRenderContainer; - this.getRenderContainer = getRenderContainer; if (shouldShow) { @@ -192,44 +179,21 @@ export class BubbleMenuView { this.tippy?.setProps({ getReferenceClientRect: () => { + let toMountNode; + if (isNodeSelection(state.selection)) { - const node = view.nodeDOM(from) as HTMLElement; - if (this.getRenderContainer) { - return this.getRenderContainer(node).getBoundingClientRect(); + toMountNode = this.getRenderContainer(node); } - - // if (this.matchRenderContainer) { - // while (node && !this.matchRenderContainer(node)) { - // node = node.firstElementChild as HTMLElement; - // } - - // if (node) { - // return node.getBoundingClientRect(); - // } - // } - - // if (node) { - // return node.getBoundingClientRect(); - // } } if (this.getRenderContainer) { - const node = view.domAtPos(from).node as HTMLElement; - return this.getRenderContainer(node).getBoundingClientRect(); + toMountNode = this.getRenderContainer(node); } - // if (this.matchRenderContainer) { - // let node = view.domAtPos(from).node as HTMLElement; - - // while (node && !this.matchRenderContainer(node)) { - // node = node.parentElement; - // } - - // if (node) { - // return node.getBoundingClientRect(); - // } - // } + if (toMountNode && toMountNode.getBoundingClientRect) { + return toMountNode.getBoundingClientRect(); + } return posToDOMRect(view, from, to); },