diff --git a/src/shared/lib/mui-tiptap/controls/controlled-bubble-menu.tsx b/src/shared/lib/mui-tiptap/controls/controlled-bubble-menu.tsx index a46e1750..12c84455 100644 --- a/src/shared/lib/mui-tiptap/controls/controlled-bubble-menu.tsx +++ b/src/shared/lib/mui-tiptap/controls/controlled-bubble-menu.tsx @@ -2,18 +2,18 @@ import { ReactNode, useCallback } from "react"; import { Fade, Paper, - Popover, - useTheme, type PaperProps, + Popover, type PopoverProps, type PopoverVirtualElement, + useTheme, } from "@mui/material"; -import { isNodeSelection, posToDOMRect, type Editor } from "@tiptap/core"; +import { type Editor, isNodeSelection, posToDOMRect } from "@tiptap/core"; import { makeStyles } from "tss-react/mui"; import { Maybe } from "api/graphql/generated/graphql"; -import { Z_INDEXES, getUtilityClasses } from "../styles"; +import { getUtilityClasses, Z_INDEXES } from "../styles"; export type ControlledBubbleMenuClasses = ReturnType< typeof useStyles diff --git a/src/shared/lib/mui-tiptap/controls/link-bubble-menu/index.tsx b/src/shared/lib/mui-tiptap/controls/link-bubble-menu/index.tsx index 328fe5c0..e49bc3ab 100644 --- a/src/shared/lib/mui-tiptap/controls/link-bubble-menu/index.tsx +++ b/src/shared/lib/mui-tiptap/controls/link-bubble-menu/index.tsx @@ -1,6 +1,6 @@ -/// import { makeStyles } from "tss-react/mui"; import type { Except } from "type-fest"; +import { useEffect } from "react"; import ControlledBubbleMenu, { type ControlledBubbleMenuProps, @@ -38,6 +38,12 @@ export default function LinkBubbleMenu({ const { classes } = useStyles(); const editor = useRichTextEditorContext(); + useEffect(() => { + if (editor?.isEditable && "linkBubbleMenuHandler" in editor.storage) { + handleClose(); + } + }, [location.pathname, editor]); + if (!editor?.isEditable) { return null; } @@ -82,7 +88,6 @@ export default function LinkBubbleMenu({ onSave={({ text, link }) => { editor .chain() - .extendMarkRange("link") .insertContent({ type: "text", @@ -96,11 +101,9 @@ export default function LinkBubbleMenu({ ], text, }) - .setLink({ href: link, }) - .focus() .run(); diff --git a/src/shared/lib/mui-tiptap/controls/menu-button-edit-link.tsx b/src/shared/lib/mui-tiptap/controls/menu-button-edit-link.tsx index b9e464fa..845b4306 100644 --- a/src/shared/lib/mui-tiptap/controls/menu-button-edit-link.tsx +++ b/src/shared/lib/mui-tiptap/controls/menu-button-edit-link.tsx @@ -1,5 +1,6 @@ import Link from "@mui/icons-material/Link"; import { useRef } from "react"; +import { type PopoverOrigin } from "@mui/material"; import { Maybe } from "api/graphql/generated/graphql"; @@ -11,6 +12,17 @@ export type MenuButtonEditLinkProps = Partial; export default function MenuButtonEditLink(props: MenuButtonEditLinkProps) { const editor = useRichTextEditorContext(); const buttonRef = useRef>(null); + + const anchorOrigin: PopoverOrigin = { + vertical: "bottom", + horizontal: "center", + }; + + const transformOrigin: PopoverOrigin = { + vertical: "top", + horizontal: "center", + }; + return ( editor?.commands.openLinkBubbleMenu({ anchorEl: buttonRef.current, - placement: "bottom", + placement: { + anchorOrigin, + transformOrigin, + }, }) } {...props}