кнопка удаления у эмоджи

lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx

@@ -18,6 +18,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import type { MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
+import { useEffect } from "react";
 import { OwnEmojiPicker } from "./OwnEmojiPicker";
 
 polyfillCountryFlagEmojis();
@@ -138,6 +139,12 @@ export const EmojiVariant = ({
     updateOwnVariant(variant.id, currentOwnAnswer, emoji);
   };
 
+  const handleEmojiRemove = () => {
+    // Сохраняем текущий answer, очищаем только extendedText (эмодзи)
+    const currentOwnAnswer = ownVariants.find((v: OwnVariant) => v.id === variant.id)?.variant.answer || "";
+    updateOwnVariant(variant.id, currentOwnAnswer, "");
+  };
+
   const isSelected = isMulti ? Array.isArray(answer) && answer.includes(variant.id) : answer === variant.id;
 
   return (
@@ -174,6 +181,7 @@ export const EmojiVariant = ({
           <OwnEmojiPicker
             emoji={customEmoji || variant.extendedText}
             onEmojiSelect={handleEmojiSelect}
+            onEmojiRemove={customEmoji ? handleEmojiRemove : undefined}
           />
         ) : (
           <Box

lib/components/ViewPublicationPage/questions/Emoji/OwnEmojiPicker.tsx

@@ -1,14 +1,16 @@
-import { Box, ButtonBase, Typography, useTheme, Modal } from "@mui/material";
+import { Box, ButtonBase, Typography, useTheme, Modal, IconButton } from "@mui/material";
 import { useState } from "react";
 import { EmojiPicker } from "./EmojiPicker";
 import { useTranslation } from "react-i18next";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface Props {
   emoji: string;
   onEmojiSelect?: (emoji: string) => void;
+  onEmojiRemove?: () => void;
 }
 
-export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => {
+export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect, onEmojiRemove }: Props) => {
   const theme = useTheme();
   const { t } = useTranslation();
   const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -28,23 +30,51 @@ export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => {
     setIsPickerOpen(false);
   };
 
+  const handleRemoveEmoji = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEmojiRemove?.();
+  };
+
   return (
     <>
-      <ButtonBase
-        onClick={handleClick}
-        sx={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          "&:hover": {
-            bgcolor: theme.palette.grey[100],
-          },
-        }}
-      >
-        <Typography fontSize={emoji ? "100px" : "18px"}>{emoji || t("select emoji")}</Typography>
-      </ButtonBase>
+      <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+        <ButtonBase
+          onClick={handleClick}
+          sx={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "&:hover": {
+              bgcolor: theme.palette.grey[100],
+            },
+          }}
+        >
+          <Typography fontSize={emoji ? "100px" : "18px"}>{emoji || t("select emoji")}</Typography>
+        </ButtonBase>
+
+        {onEmojiRemove && (
+          <IconButton
+            onClick={handleRemoveEmoji}
+            sx={{
+              position: "absolute",
+              top: 8,
+              left: 8,
+              zIndex: 1,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              color: "white",
+              height: "25px",
+              width: "25px",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
+      </Box>
 
       <Modal
         open={isPickerOpen}