Merge pull request #385 from qa-guru/develop

Develop

Author: nik1999777

src/app/providers/with-context.tsx

@@ -8,10 +8,7 @@ export const withContext = (component: () => ReactNode) => {
   return function WithContextComponent() {
     const { settings } = useSettings();
 
-    const theme = createCustomTheme({
-      theme: settings.theme,
-      responsiveFontSizes: settings.responsiveFontSizes,
-    });
+    const theme = createCustomTheme(settings);
 
     return <ThemeProvider theme={theme}>{component()}</ThemeProvider>;
   };

src/cache.ts

@@ -4,12 +4,32 @@ import { initialSettings, themeSettingsTypes } from "theme";
 import { THEMES } from "theme/constans";
 import { Maybe, UserRole } from "api/graphql/generated/graphql";
 
+// Функция для загрузки настроек из localStorage
+const loadSettingsFromStorage = (): themeSettingsTypes => {
+  try {
+    const storedSettings = window.localStorage.getItem("settings");
+    if (storedSettings) {
+      const parsedSettings = JSON.parse(storedSettings);
+      // Проверяем, что загруженные настройки валидны
+      if (parsedSettings && typeof parsedSettings.theme === "string") {
+        return parsedSettings;
+      }
+    }
+  } catch (error) {
+    // Silent fail - fallback to initial settings
+  }
+  return initialSettings;
+};
+
 export const userIdVar = makeVar<Maybe<string>>(null);
 export const userRolesVar = makeVar<Maybe<Maybe<UserRole>[]>>([]);
 export const commentVar = makeVar<Maybe<string | undefined>>(null);
-export const settingsVar = makeVar<themeSettingsTypes>(initialSettings);
+
+// Инициализируем настройки из localStorage
+const savedSettings = loadSettingsFromStorage();
+export const settingsVar = makeVar<themeSettingsTypes>(savedSettings);
 export const lightThemeVar = makeVar<boolean>(
-  initialSettings.theme === THEMES.LIGHT
+  savedSettings.theme === THEMES.LIGHT
 );
 
 export const cache = new InMemoryCache();

src/features/profile/views/edit-profile/edit-profile.tsx

@@ -146,7 +146,7 @@ const EditProfile: FC<IEditProfile> = ({ user, updateUser }) => {
               <StyledInputStack>
                 <InputText
                   control={control}
-                  name="linkedIn"
+                  name="linkedin"
                   placeholder="Cсылка на linkedIn"
                   label="LinkedIn"
                   errors={errors}

src/shared/hooks/use-local-storage.ts

@@ -1,24 +1,16 @@
-import { useEffect, useState } from "react";
-
 import { themeSettingsTypes } from "theme";
 
 export const useLocalStorage = (
   key: string,
   initialValue: themeSettingsTypes
 ) => {
-  const [data, setData] = useState(initialValue);
-
-  useEffect(() => {
-    const getData = window.localStorage.getItem(key);
-    if (getData) {
-      setData(JSON.parse(getData));
-    }
-  }, [key]);
-
   const storeData = (updateValue: themeSettingsTypes) => {
-    setData(updateValue);
-    window.localStorage.setItem(key, JSON.stringify(updateValue));
+    try {
+      window.localStorage.setItem(key, JSON.stringify(updateValue));
+    } catch (error) {
+      // Silent fail
+    }
   };
 
-  return { data, storeData };
+  return { storeData };
 };

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

@@ -1,12 +1,10 @@
 import { ReactNode, useCallback } from "react";
 import {
-  Fade,
   Paper,
   type PaperProps,
   Popover,
   type PopoverProps,
   type PopoverVirtualElement,
-  useTheme,
 } from "@mui/material";
 import { type Editor, isNodeSelection, posToDOMRect } from "@tiptap/core";
 import { makeStyles } from "tss-react/mui";
@@ -77,7 +75,6 @@ export default function ControlledBubbleMenu({
   const { classes, cx } = useStyles(undefined, {
     props: { classes: overrideClasses },
   });
-  const theme = useTheme();
 
   const defaultAnchorEl = useCallback((): VirtualElement => {
     const { ranges } = editor.state.selection;
@@ -119,24 +116,18 @@ export default function ControlledBubbleMenu({
       }}
       transformOrigin={{ vertical: "top", horizontal: "left" }}
       className={cx(controlledBubbleMenuClasses.root, classes.root, className)}
-      transitionDuration={{
-        enter: theme.transitions.duration.enteringScreen,
-        exit: 0,
-      }}
     >
-      <Fade in={open}>
-        <Paper
-          elevation={7}
-          {...PaperProps}
-          className={cx(
-            controlledBubbleMenuClasses.paper,
-            classes.paper,
-            PaperProps?.className
-          )}
-        >
-          {children}
-        </Paper>
-      </Fade>
+      <Paper
+        elevation={7}
+        {...PaperProps}
+        className={cx(
+          controlledBubbleMenuClasses.paper,
+          classes.paper,
+          PaperProps?.className
+        )}
+      >
+        {children}
+      </Paper>
     </Popover>
   );
 }

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

@@ -1,5 +1,5 @@
 import { findParentNodeClosestToPos, posToDOMRect } from "@tiptap/core";
-import { useMemo } from "react";
+import { useMemo, useCallback, useEffect, useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import type { Except } from "type-fest";
 import { type PopoverVirtualElement } from "@mui/material";
@@ -13,14 +13,8 @@ import { useRichTextEditorContext } from "../context";
 import TableMenuControls, {
   type TableMenuControlsProps,
 } from "./table-menu-controls";
-import useDebouncedFocus from "../hooks/use-debounced-focus";
-import DebounceRender, {
-  type DebounceRenderProps,
-} from "../utils/debounce-render";
 
 export type TableBubbleMenuProps = {
-  disableDebounce?: boolean;
-  DebounceProps?: Except<DebounceRenderProps, "children">;
   labels?: TableMenuControlsProps["labels"];
 } & Partial<Except<ControlledBubbleMenuProps, "open" | "editor" | "children">>;
 
@@ -34,15 +28,12 @@ const useStyles = makeStyles({
 }));
 
 export default function TableBubbleMenu({
-  disableDebounce = false,
-  DebounceProps,
   labels,
   ...controlledBubbleMenuProps
 }: TableBubbleMenuProps) {
   const editor = useRichTextEditorContext();
   const { classes } = useStyles();
-
-  const isEditorFocusedDebounced = useDebouncedFocus({ editor });
+  const [isManuallyHidden, setIsManuallyHidden] = useState(false);
 
   const bubbleMenuAnchorEl = useMemo(
     () =>
@@ -61,7 +52,7 @@ export default function TableBubbleMenu({
                   nearestTableParent.pos
                 ) as Maybe<HTMLElement | undefined>;
 
-                const tableDomNode = wrapperDomNode?.querySelector("admin");
+                const tableDomNode = wrapperDomNode?.querySelector("table");
                 if (tableDomNode) {
                   return tableDomNode.getBoundingClientRect();
                 }
@@ -77,18 +68,52 @@ export default function TableBubbleMenu({
     [editor]
   );
 
+  const handleClose = useCallback(() => {
+    setIsManuallyHidden(true);
+    if (editor) {
+      editor.commands.blur();
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor?.isActive("table")) {
+      setIsManuallyHidden(false);
+    }
+  }, [editor?.isActive("table")]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && editor?.isActive("table")) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [editor, handleClose]);
+
   if (!editor?.isEditable) {
     return null;
   }
 
   const controls = (
-    <TableMenuControls className={classes.controls} labels={labels} />
+    <TableMenuControls
+      className={classes.controls}
+      labels={labels}
+      onClose={handleClose}
+    />
   );
 
+  // Логика показа меню - активная таблица и не скрыто вручную
+  const shouldShowMenu = editor.isActive("table") && !isManuallyHidden;
+
   return (
     <ControlledBubbleMenu
       editor={editor}
-      open={isEditorFocusedDebounced && editor.isActive("table")}
+      open={shouldShowMenu}
+      onClose={handleClose}
       anchorEl={bubbleMenuAnchorEl as PopoverVirtualElement}
       placement={{
         anchorOrigin: { vertical: "top", horizontal: "left" },
@@ -104,11 +129,7 @@ export default function TableBubbleMenu({
       flipPadding={{ top: 35, left: 8, right: 8, bottom: -Infinity }}
       {...controlledBubbleMenuProps}
     >
-      {disableDebounce ? (
-        controls
-      ) : (
-        <DebounceRender {...DebounceProps}>{controls}</DebounceRender>
-      )}
+      {controls}
     </ControlledBubbleMenu>
   );
 }

src/shared/lib/mui-tiptap/controls/table-menu-controls.tsx

@@ -1,5 +1,6 @@
 import FormatColorFill from "@mui/icons-material/FormatColorFill";
 import GridOff from "@mui/icons-material/GridOff";
+import Close from "@mui/icons-material/Close";
 
 import MenuDivider from "./menu-divider";
 import { useRichTextEditorContext } from "../context";
@@ -18,6 +19,7 @@ import LayoutColumnFill from "../icons/layout-column-fill";
 
 export type TableMenuControlsProps = {
   className?: string;
+  onClose?: () => void;
 
   labels?: {
     insertColumnBefore?: string;
@@ -38,6 +40,7 @@ export type TableMenuControlsProps = {
 export default function TableMenuControls({
   className,
   labels,
+  onClose,
 }: TableMenuControlsProps) {
   const editor = useRichTextEditorContext();
   return (
@@ -134,6 +137,21 @@ export default function TableMenuControls({
         onClick={() => editor?.chain().focus().deleteTable().run()}
         disabled={!editor?.can().deleteTable()}
       />
+
+      <MenuDivider />
+
+      <MenuButton
+        tooltipLabel="Close"
+        IconComponent={Close}
+        onClick={() => {
+          if (onClose) {
+            onClose();
+          } else {
+            editor?.commands.blur();
+          }
+        }}
+        disabled={!editor?.isEditable}
+      />
     </MenuControlsContainer>
   );
 }

src/theme/index.ts

@@ -1,4 +1,4 @@
-import { createTheme, responsiveFontSizes } from "@mui/material";
+import { createTheme, responsiveFontSizes, ThemeOptions } from "@mui/material";
 import merge from "lodash/merge";
 
 import components from "./components";
@@ -16,7 +16,7 @@ export const initialSettings: themeSettingsTypes = {
   responsiveFontSizes: true,
 };
 
-const baseOptions = {
+const baseOptions: ThemeOptions = {
   typography: {
     fontFamily: "'Montserrat', sans-serif",
     h1: {
@@ -56,20 +56,32 @@ const baseOptions = {
 };
 
 export const createCustomTheme = (settings: themeSettingsTypes) => {
-  let themeOptions: object = themesOptions[settings.theme];
+  // Валидируем настройки
+  if (!settings || typeof settings.theme !== "string") {
+    settings = { ...initialSettings };
+  }
+
+  let themeOptions: ThemeOptions = themesOptions[
+    settings.theme
+  ] as unknown as ThemeOptions;
 
   if (!themeOptions) {
-    themeOptions = themesOptions[THEMES.LIGHT];
+    themeOptions = themesOptions[THEMES.LIGHT] as unknown as ThemeOptions;
   }
 
-  const mergedThemeOptions = merge({}, baseOptions, themeOptions);
+  try {
+    const mergedThemeOptions = merge({}, baseOptions, themeOptions);
 
-  let theme = createTheme(mergedThemeOptions);
+    let theme = createTheme(mergedThemeOptions);
 
-  theme.components = components(theme);
-  if (settings.responsiveFontSizes) {
-    theme = responsiveFontSizes(theme);
-  }
+    theme.components = components(theme);
+    if (settings.responsiveFontSizes !== false) {
+      theme = responsiveFontSizes(theme);
+    }
 
-  return theme;
+    return theme;
+  } catch (error) {
+    // Возвращаем базовую светлую тему в случае ошибки
+    return createTheme(themesOptions[THEMES.LIGHT] as unknown as ThemeOptions);
+  }
 };