search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
319 stars 43 forks source link

MenuButtonEditLink not displaying edit link pop-up box #201

Closed sfkaos closed 7 months ago

sfkaos commented 8 months ago

Describe the bug

The pop-up box for inputting the URL for editing a link does not show up.

To Reproduce

While using the control inside of a mui-tiptap editor:

  1. Highlight text inside of the editor
  2. Click on the edit link button in the menu bar

Expected behavior

Expectation: A popup box appears allowing user to input URL Actual: Nothing

System (please complete the following information):

Additional context

Add any other context about the problem here.

sjdemartini commented 8 months ago

@sfkaos Can you provide more steps to reproduce this? What code are you using, and which extensions are installed and being passed in the extensions array? This works in the CodeSandbox linked in the README https://codesandbox.io/p/devbox/mui-tiptap-demo-3zl2l6

My guess is that you may not be including the LinkBubbleMenuHandler extension (https://github.com/sjdemartini/mui-tiptap?tab=readme-ov-file#linkbubblemenuhandler) in your extensions array for the editor.

Are there any errors in the dev tools console?

sfkaos commented 8 months ago

Actually ripped the useExtensions function directly from the sandbox demo.

I'm not seeing any errors in the dev tools console. I can send a video if that helps.

futurliberta commented 7 months ago

You probably didn't add this into the RichTextEditor component

{() => (
    <>
      <LinkBubbleMenu />
      <TableBubbleMenu />
    </>
  )}
vitality82 commented 7 months ago

In my case it's because of rendering the LinkBubbleMenu component inside a MUI Dialog, that has a 1300 z-index. Instead of dealing with z-index values, this worked for me:

<LinkBubbleMenu container={dialogRef.current} />

This solution still requires you to control the open/close state via the parent (e.g Parent Dialog closes while edit menu link was open).

sjdemartini commented 7 months ago

Closing per the last two comments' explanations of fixes. You have to be sure to render LinkBubbleMenu, and its container prop is the right approach if using the editor within a modal. Please feel free to comment if there is still some remaining issue here.