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}