import { isNodeSelection } from "@tiptap/core";
import {
  BubbleMenuWrapper,
  type BubbleMenuWrapperProps,
} from "@vrite/tiptap-solid";
import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
import { useCurrentEditor } from "../utils/context";


export const EditorBubble = (props: EditorBubbleProps): JSX.Element => {
  const editor = useCurrentEditor();
  let instanceRef: Instance<Props> | null = null;

  createEffect(() => {
    if (!instanceRef || !props.tippyOptions?.placement) return;

    instanceRef.setProps({ placement: props.tippyOptions.placement });
    instanceRef.popperInstance?.update();
  });

  //   const bubbleMenuProps: Omit<BubbleMenuWrapperProps, "children">

  const memo = createMemo(() => {
    const shouldShow: BubbleMenuWrapperProps["shouldShow"] = ({
      editor,
      state,
    }) => {
      const { selection } = state;
      const { empty } = selection;

      // don't show bubble menu if:
      // - the editor is not editable
      // - the selected node is an image
      // - the selection is empty
      // - the selection is a node selection (for drag handles)
      if (
        !editor.isEditable ||
        editor.isActive("image") ||
        empty ||
        isNodeSelection(selection)
      ) {
        return false;
      }
      return true;
    };

    return {
      shouldShow,
      tippyOptions: {
        onCreate: (val: Instance<Props>) => {
          instanceRef = val;
        },
        moveTransition: "transform 0.15s ease-out",
        ...props.tippyOptions,
      },
      ...props,
    };
  });

  const bubbleMenuProps: Omit<BubbleMenuWrapperProps, "editor" | "children"> =
    memo();

  if (!editor) return null;

  return (
    // We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
    <div>
      <BubbleMenuWrapper {...bubbleMenuProps} editor={editor}>
        {props.children}
      </BubbleMenuWrapper>
    </div>
  );
};

export default EditorBubble;

import { isNodeSelection } from "@tiptap/core";
import {
  BubbleMenuWrapper,
  type BubbleMenuWrapperProps,
} from "@vrite/tiptap-solid";
import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
import { useCurrentEditor } from "../utils/context";


export const EditorBubble = (props: EditorBubbleProps): JSX.Element => {
  const editor = useCurrentEditor();
  let instanceRef: Instance<Props> | null = null;

  createEffect(() => {
    if (!instanceRef || !props.tippyOptions?.placement) return;

    instanceRef.setProps({ placement: props.tippyOptions.placement });
    instanceRef.popperInstance?.update();
  });

  //   const bubbleMenuProps: Omit<BubbleMenuWrapperProps, "children">

  const memo = createMemo(() => {
    const shouldShow: BubbleMenuWrapperProps["shouldShow"] = ({
      editor,
      state,
    }) => {
      const { selection } = state;
      const { empty } = selection;

      // don't show bubble menu if:
      // - the editor is not editable
      // - the selected node is an image
      // - the selection is empty
      // - the selection is a node selection (for drag handles)
      if (
        !editor.isEditable ||
        editor.isActive("image") ||
        empty ||
        isNodeSelection(selection)
      ) {
        return false;
      }
      return true;
    };

    return {
      shouldShow,
      tippyOptions: {
        onCreate: (val: Instance<Props>) => {
          instanceRef = val;
        },
        moveTransition: "transform 0.15s ease-out",
        ...props.tippyOptions,
      },
      ...props,
    };
  });

  const bubbleMenuProps: Omit<BubbleMenuWrapperProps, "editor" | "children"> =
    memo();

  if (!editor) return null;

  return (
    // We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
    <div>
      <BubbleMenuWrapper {...bubbleMenuProps} editor={editor}>
        {props.children}
      </BubbleMenuWrapper>
    </div>
  );
};

export default EditorBubble;