diff --git a/src/components/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx b/src/components/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx index db29ea8..01323e2 100644 --- a/src/components/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx +++ b/src/components/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect } from 'react' +import React, { useState, useCallback } from 'react' import { Editor } from '@tiptap/core' import { BubbleMenu } from '@tiptap/react' import { LinkEditBlock } from '../link/link-edit-block' @@ -28,21 +28,21 @@ export const LinkBubbleMenu: React.FC = ({ editor }) => { setSelectedText(text) }, [editor]) - useEffect(() => { - editor.on('selectionUpdate', updateLinkState) + const shouldShow = useCallback( + ({ editor, from, to }: ShouldShowProps) => { + if (from === to) { + return false + } + const { href } = editor.getAttributes('link') - return () => { - editor.off('selectionUpdate', updateLinkState) - } - }, [editor, updateLinkState]) - - const shouldShow = useCallback(({ editor, from, to }: ShouldShowProps) => { - if (from === to) { + if (href) { + updateLinkState() + return true + } return false - } - const link = editor.getAttributes('link') - return typeof link.href === 'string' && link.href !== '' - }, []) + }, + [updateLinkState] + ) const handleEdit = useCallback(() => { setShowEdit(true) @@ -79,7 +79,6 @@ export const LinkBubbleMenu: React.FC = ({ editor }) => { editor.chain().focus().extendMarkRange('link').unsetLink().run() setShowEdit(false) updateLinkState() - return null }, [editor, updateLinkState]) return (