Feature Request: React BubbleMenu - own portal container and custom styling to menuEl

[timheerwagen]

Description

Define custom container for createPortal

Define props for menuEl.

Perhaps it is not necessary to create menuEl at all, but to use the ref directly on the div here https://github.com/ueberdosis/tiptap/blob/next/packages/react/src/menus/BubbleMenu.tsx#L66

Use Case

createPortal to document.body, for example.
Give menuEl custom styles such as transitions

Type

New feature

[killia15]

I've been wrestling with that myself because I'm trying to animate the entrance/edit with framer motion.

and ended up forking and making own BubbleMenuPlugin. One challenge that I ran into with not having menuEl created beforehand is the measurements were off from computePosition.

// Broken new version with rendering menuEl in the dom

=== updatePosition START ===
Selection from: 23 to: 30
virtualRect (from posToDOMRect): {top: 205, bottom: 250.5, left: 245, right: 351.9765625, width: 106.9765625, …}
containerRect (this.element.getBoundingClientRect()): DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
computePosition output: {x: 298.48828125, y: 197, strategy: 'absolute'}
Final computed styles: {width: 'max-content', position: 'absolute', left: '298.48828125px', top: '197px', border: '1px solid red'}
=== updatePosition END ===



// Working old version with creating menuEl beforehand with useRef(document.createElement('div'));

=== updatePosition START ===
315 Selection from: 23 to: 30
316 virtualRect (from posToDOMRect): {top: 205, bottom: 250.5, left: 245, right: 351.9765625, width: 106.9765625, …}
317 containerRect (this.element.getBoundingClientRect()): DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
BubbleMenu.tsx:71 onShow called with view: EditorView {_root: document, focused: true, trackWrites: text, mounted: false, markCursor: null, …}
328 computePosition output: {x: 109.29278124999999, y: 143.5, strategy: 'absolute'}
336 Final computed styles: {width: 'max-content', position: 'absolute', left: '109.29278124999999px', top: '143.5px', border: '1px solid red'}
=== updatePosition END ===


Notice how the computePosition output is different- The virtualRect is the same so it must be the this.element. But I'm not sure how to get it to measure the same thing. So open to ideas!

I was able to get around it by stripping the BubbleMenuPlugin's ability to add/remove styles. Now it just passes them in callbacks.

    React.useEffect(() => {
      if (editor?.isDestroyed || currentEditor?.isDestroyed) {
        return;
      }

      const attachToEditor = editor || currentEditor;

      if (!attachToEditor) {
        console.warn(
          'BubbleMenu component is not rendered inside of an editor component or does not have editor prop.',
        );
        return;
      }

      const bubbleMenuElement = menuEl.current;
      bubbleMenuElement.style.visibility = 'hidden';
      bubbleMenuElement.style.visibility = 'absolute';

      const plugin = BubbleMenuPlugin({
        element: bubbleMenuElement,
        onShow: (view) => {
          bubbleMenuElement.style.visibility = 'visible';
          view.dom.parentElement?.appendChild(bubbleMenuElement);
        },
        onPositionUpdate: (styles) => {
          Object.assign(bubbleMenuElement.style, styles);
        },
        onHide: () => {
          bubbleMenuElement.style.visibility = 'hidden';
          bubbleMenuElement.remove();
        },
        editor: attachToEditor,
        options,
        pluginKey,
        resizeDelay,
        updateDelay,
        shouldShow,
      });

      attachToEditor.registerPlugin(plugin);

      return () => {
        attachToEditor.unregisterPlugin(pluginKey);
        window.requestAnimationFrame(() => {
          bubbleMenuElement.parentNode?.removeChild(bubbleMenuElement);
        });
      };
    }, [editor, currentEditor]);

Then in BubbleMenuPlugin.ts-

  updatePosition() {
    if (!this.element) return;

    const { selection } = this.editor.state;
    const virtualRect = posToDOMRect(this.view, selection.from, selection.to);

    const virtualElement = {
      getBoundingClientRect: () => virtualRect,
    };

    computePosition(virtualElement, this.element, {
      placement: this.floatingUIOptions.placement,
      strategy: this.floatingUIOptions.strategy,
      middleware: this.middlewares,
    }).then(({ x, y, strategy }) => {
      const styles: React.CSSProperties = {
        width: 'max-content',
        position: strategy as React.CSSProperties['position'],
        left: `${x}px`,
        top: `${y}px`,
      };
      this.onPositionUpdate?.(styles, this.view);
    });
  }

  show() {
    this.onShow?.(this.view);
  }

  hide() {
    this.onHide?.(this.view);
  }
 

This at least lets the BubbleMenu react component know that mounting/unmounting is happening. The next step would be to hold off on unmounting it and tearing down the bubbleMenuElement in the onAnimationEnd event instead of immediately.

I do think that the if we can put more control into the react component, that would be more ideal.