возможность убрать смайлик

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "godrix.svgr-preview"
+    ]
+}

src/assets/icons/SmallAddPluse.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon, SxProps } from "@mui/material";
+
+export default function SmallAddPluse({ sx }: { sx: SxProps }) {
+    return (
+        <SvgIcon
+            sx={{
+                width: "11px",
+                height: "11px",
+
+                ...sx
+            }}
+        >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4.518 9.612C4.398 9.612 4.296 9.576 4.212 9.504C4.14 9.42 4.104 9.318 4.104 9.198V5.454H0.414C0.294 5.454 0.192 5.418 0.108 5.346C0.036 5.262 0 5.16 0 5.04V4.464C0 4.344 0.036 4.248 0.108 4.176C0.192 4.092 0.294 4.05 0.414 4.05H4.104V0.414C4.104 0.294 4.14 0.198 4.212 0.126C4.296 0.0420001 4.398 0 4.518 0H5.148C5.268 0 5.364 0.0420001 5.436 0.126C5.52 0.198 5.562 0.294 5.562 0.414V4.05H9.27C9.39 4.05 9.486 4.092 9.558 4.176C9.642 4.248 9.684 4.344 9.684 4.464V5.04C9.684 5.16 9.642 5.262 9.558 5.346C9.486 5.418 9.39 5.454 9.27 5.454H5.562V9.198C5.562 9.318 5.52 9.42 5.436 9.504C5.364 9.576 5.268 9.612 5.148 9.612H4.518Z" fill="white" />
+            </svg>
+        </SvgIcon>
+    );
+}

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -41,6 +41,7 @@ const AnswerItem = memo<AnswerItemProps>(
       });
     };
 
+
     return (
       <Draggable
         draggableId={String(index)}
@@ -63,7 +64,7 @@ const AnswerItem = memo<AnswerItemProps>(
               }}
             >
               <TextField
-                value={ isOwn ? ownPlaceholder : variant.answer}
+                value={isOwn ? ownPlaceholder : variant.answer}
                 fullWidth
                 focused={false}
                 placeholder={isOwn ? "Добавьте текст-подсказку для ввода “своего ответа”" : "Добавьте ответ"}
@@ -71,9 +72,9 @@ const AnswerItem = memo<AnswerItemProps>(
                 onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
                   if (target.value.length <= 1000) {
                     isOwn ?
-                    setOwnPlaceholder(target.value || " ")
+                      setOwnPlaceholder(target.value || " ")
-                    :
+                      :
-                    setQuestionVariantField(questionId, variant.id, "answer", target.value || " ");
+                      setQuestionVariantField(questionId, variant.id, "answer", target.value || " ");
                   } else {
                     enqueueSnackbar("Превышена длина вводимого текста")
                   }
@@ -105,8 +106,8 @@ const AnswerItem = memo<AnswerItemProps>(
                           isOwn ? updateQuestion<QuizQuestionVariant>(questionId, (question) => {
                             question.content.own = false;
                           })
-                           : 
+                            :
-                           deleteQuestionVariant(questionId, variant.id)
+                            deleteQuestionVariant(questionId, variant.id)
                         }}
                       >
                         <DeleteIcon

src/pages/Questions/Emoji/EmojiAnswerItem/EmojiAnswerItem.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, useMemo } from "react";
+import { ComponentPropsWithoutRef, MouseEvent, useMemo } from "react";
 import AnswerItem from "../../AnswerDraggableList/AnswerItem";
 import VariantAdornment from "./VariantAdornment";
 import VariantAdornmentMobile from "./VariantAdornmentMobile";
@@ -31,6 +31,17 @@ export default function EmojiAnswerItem({
 }: Props) {
 
 
+  const clearEmoji = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    updateQuestion(questionId, (question) => {
+      if (question.type !== "emoji") return;
+
+      const v = question.content.variants.find((v) => v.id === variant.id);
+      if (!v) return;
+
+      v.extendedText = "";
+    });
+  }
   const addOrEditImageButton = useMemo(() => {
     return (
       !isTablet && (
@@ -41,6 +52,7 @@ export default function EmojiAnswerItem({
             setSelectedVariant(variant.id);
             setOpen(true);
           }}
+          clearEmoji={clearEmoji}
         />
       )
     );
@@ -63,6 +75,7 @@ export default function EmojiAnswerItem({
             setSelectedVariant(variant.id);
             setOpen(true);
           }}
+          clearEmoji={clearEmoji}
         />
       )
     );

src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornment.tsx

@@ -1,15 +1,19 @@
+import SmallAddPluse from "@/assets/icons/SmallAddPluse";
 import AddEmoji from "@icons/questionsPage/addEmoji";
 import PlusImage from "@icons/questionsPage/plus";
-import { Box } from "@mui/material";
+import { Box, useTheme, IconButton } from "@mui/material";
 import { MouseEventHandler } from "react";
 
 export default function VariantAdornment({
   onClick,
   extendedText,
+  clearEmoji,
 }: {
   onClick: MouseEventHandler<HTMLDivElement>;
   extendedText: string;
+  clearEmoji: () => void;
 }) {
+  const theme = useTheme();
 
   console.log("VariantAdornment extendedText", extendedText)
   return (
@@ -44,13 +48,20 @@ export default function VariantAdornment({
               >
                 {extendedText}
               </Box>
-              <Box>
+              <IconButton 
-                <PlusImage 
+              onClick={clearEmoji}
+              sx={{
+                height: "100%",
+                width: "20px",
+                borderRadius: "0 3px 3px 0",
+                bgcolor: theme.palette.brightPurple.main
+              }}>
+                <SmallAddPluse 
                 sx={{
-                  transform: extendedText ? "rotate(45)" : ""
+                  transform: extendedText ? "rotate(45deg)" : ""
                 }}
                 />
-              </Box>
+              </IconButton>
             </Box>
           ) : (
             <AddEmoji />

src/pages/Questions/Emoji/EmojiAnswerItem/VariantAdornmentMobile.tsx

@@ -1,14 +1,19 @@
+import SmallAddPluse from "@/assets/icons/SmallAddPluse";
 import { EmojiIcons } from "@icons/EmojiIocns";
-import { Box } from "@mui/material";
+import { Box, IconButton, useTheme } from "@mui/material";
 import { MouseEventHandler } from "react";
 
 export default function VariantAdornmentMobile({
   onClick,
   extendedText,
+  clearEmoji
 }: {
   onClick: MouseEventHandler<HTMLDivElement>;
   extendedText: string;
+  clearEmoji: () => void;
 }) {
+  const theme = useTheme();
+
   return (
     <Box
       onClick={onClick}
@@ -61,7 +66,20 @@ export default function VariantAdornmentMobile({
           backgroundColor: "#7E2AEA",
         }}
       >
-        +
+        <IconButton
+          onClick={clearEmoji}
+          sx={{
+            height: "100%",
+            width: "20px",
+            borderRadius: "0 3px 3px 0",
+            bgcolor: theme.palette.brightPurple.main
+          }}>
+          <SmallAddPluse
+            sx={{
+              transform: extendedText ? "rotate(45deg)" : ""
+            }}
+          />
+        </IconButton>
       </Box>
     </Box>
   );