Merge pull request #345 from qa-guru/QAGDEV-668

QAGDEV-688 – [FE] При редактировании ссылки в уроке не закрывается форма редактирования v2.0

Author: nik1999777

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

src/shared/lib/mui-tiptap/controls/link-bubble-menu/index.tsx

@@ -1,6 +1,6 @@
-/// <reference types="@tiptap/extension-link" />
 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();
 

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<MenuButtonProps>;
 export default function MenuButtonEditLink(props: MenuButtonEditLinkProps) {
   const editor = useRichTextEditorContext();
   const buttonRef = useRef<Maybe<HTMLButtonElement>>(null);
+
+  const anchorOrigin: PopoverOrigin = {
+    vertical: "bottom",
+    horizontal: "center",
+  };
+
+  const transformOrigin: PopoverOrigin = {
+    vertical: "top",
+    horizontal: "center",
+  };
+
   return (
     <MenuButton
       buttonRef={buttonRef}
@@ -22,7 +34,10 @@ export default function MenuButtonEditLink(props: MenuButtonEditLinkProps) {
       onClick={() =>
         editor?.commands.openLinkBubbleMenu({
           anchorEl: buttonRef.current,
-          placement: "bottom",
+          placement: {
+            anchorOrigin,
+            transformOrigin,
+          },
         })
       }
       {...props}