Option for BubbleMenu to use block size instead of cursor position.

[iamelevich]

What problem are you facing?

I'm trying to add language select in a code block with CodeBlockLowlight extension. But the problem here is that I want BubbleMenu to use the whole code block as a reference, not a cursor position.

To make it look like this:

For now, I found a workaround with Focus extension and getReferenceClientRect option in tippy.js:

// Need this variable cause after choosing something there can be no code block with .has-focused class
let prevCodeElement: Element;

return (
    <BubbleMenu
      editor={editor}
      pluginKey="code-menu"
      shouldShow={() => editor.isActive('codeBlock')}
      tippyOptions={{
        getReferenceClientRect: () => {
          const currentElement = document.querySelector('pre.has-focus');
          if (currentElement) {
            prevCodeElement = currentElement;
          }
          return prevCodeElement.getBoundingClientRect();
        },
        placement: 'top-end',
      }}
    >
        // Your menu components
    </BubbleMenu>

What’s the solution you would like to see?

Add option reference: 'cursor' | 'block' to the BubbleMenu

What alternatives did you consider?

It also be okay to have possibility to get currently active node or just get it clientRect

Anything to add? (optional)

No response

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖