варианты и варианты и картинка умеют в фичи

lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx

@@ -1,7 +1,16 @@
 import { useQuizSettings } from "@contexts/QuizDataContext";
 import { CheckboxIcon } from "@icons/Checkbox";
 import type { QuestionVariant } from "@model/questionTypes/shared";
-import { Checkbox, FormControlLabel, TextField as MuiTextField, Radio, TextFieldProps, useTheme } from "@mui/material";
+import {
+  Checkbox,
+  FormControlLabel,
+  Input,
+  TextField as MuiTextField,
+  Radio,
+  TextFieldProps,
+  TextareaAutosize,
+  useTheme,
+} from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
@@ -10,6 +19,55 @@ import type { FC, MouseEvent } from "react";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
+interface OwnInputProps {
+  questionId: string;
+  variant: QuestionVariant;
+  largeCheck: boolean;
+  ownPlaceholder: string;
+}
+const OwnInput = ({ questionId, variant, largeCheck }: OwnInputProps) => {
+  const theme = useTheme();
+  const ownVariants = useQuizViewStore((state) => state.ownVariants);
+  const { updateOwnVariant } = useQuizViewStore((state) => state);
+
+  const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || "";
+
+  return largeCheck ? (
+    <TextareaAutosize
+      placeholder=""
+      style={{
+        resize: "none",
+        width: "100%",
+        fontSize: "16px",
+        color: theme.palette.text.primary,
+        letterSpacing: "-0.4px",
+        wordSpacing: "-3px",
+        border: "none",
+        outline: "0px none",
+      }}
+      value={ownAnswer}
+      onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        updateOwnVariant(variant.id, e.target.value);
+      }}
+    />
+  ) : (
+    <Input
+      sx={{
+        width: "100%",
+        fontSize: "18px",
+        color: theme.palette.text.primary,
+      }}
+      value={ownAnswer}
+      disableUnderline
+      onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        updateOwnVariant(variant.id, e.target.value);
+      }}
+    />
+  );
+};
+
 export const VariantItem = ({
   questionId,
   isMulti,
@@ -17,6 +75,8 @@ export const VariantItem = ({
   answer,
   index,
   own = false,
+  questionLargeCheck,
+  ownPlaceholder,
 }: {
   isMulti: boolean;
   questionId: string;
@@ -24,6 +84,8 @@ export const VariantItem = ({
   answer: string | string[] | undefined;
   index: number;
   own?: boolean;
+  questionLargeCheck: boolean;
+  ownPlaceholder: string;
 }) => {
   const { settings } = useQuizSettings();
   const theme = useTheme();
@@ -78,6 +140,7 @@ export const VariantItem = ({
         "&:hover": { borderColor: theme.palette.primary.main },
         "&.MuiFormControl-root": { width: "100%" },
         "& .MuiFormControlLabel-label": {
+          width: "100%",
           wordBreak: "break-word",
           height: variant.answer.length <= 60 ? undefined : "60px",
           overflow: "auto",
@@ -105,7 +168,18 @@ export const VariantItem = ({
           />
         )
       }
-      label={own ? <TextField label="Другое..." /> : variant.answer}
+      label={
+        own ? (
+          <OwnInput
+            questionId={questionId}
+            variant={variant}
+            largeCheck={questionLargeCheck}
+            ownPlaceholder={ownPlaceholder}
+          />
+        ) : (
+          variant.answer
+        )
+      }
       onClick={sendVariant}
     />
   );

lib/components/ViewPublicationPage/questions/Variant/index.tsx

@@ -73,26 +73,24 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
               gap: "20px",
             }}
           >
-            {currentQuestion.content.variants.map((variant, index) => (
+            {currentQuestion.content.variants
-              <VariantItem
+              .filter((v) => {
-                key={variant.id}
+                if (!v.isOwn) return true;
-                questionId={currentQuestion.id}
+                return v.isOwn && currentQuestion.content.own;
-                isMulti={currentQuestion.content.multi}
+              })
-                variant={variant}
+              .map((variant, index) => (
-                answer={answer}
+                <VariantItem
-                index={index}
+                  key={variant.id}
-              />
+                  questionId={currentQuestion.id}
-            ))}
+                  isMulti={currentQuestion.content.multi}
-            {currentQuestion.content.own && ownVariant && (
+                  variant={variant}
-              <VariantItem
+                  answer={answer}
-                own
+                  index={index}
-                questionId={currentQuestion.id}
+                  own={variant.isOwn}
-                isMulti={currentQuestion.content.multi}
+                  questionLargeCheck={currentQuestion.content.largeCheck}
-                variant={ownVariant.variant}
+                  ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
-                answer={answer}
+                />
-                index={currentQuestion.content.variants.length + 2}
+              ))}
-              />
-            )}
           </Box>
         </Group>
         {currentQuestion.content.back && currentQuestion.content.back !== " " && (

lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx

@@ -14,23 +14,24 @@ type VarimgVariantProps = {
   index: number;
   isSending: boolean;
   setIsSending: (isSending: boolean) => void;
-  questionOwn: boolean;
   questionLargeCheck: boolean;
   isMulti: boolean;
   answer: string | string[] | undefined;
+  ownPlaceholder: string;
 };
 
 interface OwnInputProps {
   questionId: string;
   variant: QuestionVariant;
   largeCheck: boolean;
+  ownPlaceholder: string;
 }
 const OwnInput = ({ questionId, variant, largeCheck }: OwnInputProps) => {
   const theme = useTheme();
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
   const { updateOwnVariant } = useQuizViewStore((state) => state);
 
-  const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)].variant.answer || "";
+  const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || "";
 
   return largeCheck ? (
     <TextareaAutosize
@@ -74,8 +75,8 @@ export const VarimgVariant = ({
   index,
   isSending,
   setIsSending,
-  questionOwn,
   questionLargeCheck,
+  ownPlaceholder,
   answer,
 }: VarimgVariantProps) => {
   const { settings } = useQuizSettings();
@@ -137,6 +138,7 @@ export const VarimgVariant = ({
             questionId={questionId}
             variant={variant}
             largeCheck={questionLargeCheck}
+            ownPlaceholder={ownPlaceholder}
           />
         ) : (
           variant.answer

lib/components/ViewPublicationPage/questions/Varimg/index.tsx

@@ -28,6 +28,8 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
   const ownVariant = ownVariants.find((variant) => variant.id === currentQuestion.id);
   const variant = currentQuestion.content.variants.find(({ id }) => answer === id);
 
+  console.log(variant);
+
   useEffect(() => {
     if (!ownVariant) {
       updateOwnVariant(currentQuestion.id, "");
@@ -77,20 +79,25 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
               "&:active": { color: theme.palette.text.primary },
             }}
           >
-            {currentQuestion.content.variants.map((variant, index) => (
+            {currentQuestion.content.variants
-              <VarimgVariant
+              .filter((v) => {
-                key={variant.id}
+                if (!v.isOwn) return true;
-                questionId={currentQuestion.id}
+                return v.isOwn && currentQuestion.content.own;
-                variant={variant}
+              })
-                isSending={isSending}
+              .map((variant, index) => (
-                setIsSending={setIsSending}
+                <VarimgVariant
-                index={index}
+                  key={variant.id}
-                questionOwn={currentQuestion.content.own}
+                  questionId={currentQuestion.id}
-                questionLargeCheck={currentQuestion.content.largeCheck}
+                  variant={variant}
-                isMulti={Boolean(currentQuestion.content.multi)}
+                  isSending={isSending}
-                answer={answer}
+                  setIsSending={setIsSending}
-              />
+                  index={index}
-            ))}
+                  questionLargeCheck={currentQuestion.content.largeCheck}
+                  ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
+                  isMulti={Boolean(currentQuestion.content?.multi)}
+                  answer={answer}
+                />
+              ))}
           </Box>
         </RadioGroup>
         <Box

lib/utils/sendQuestionAnswer.ts

@@ -125,6 +125,14 @@ export function sendQuestionAnswer(
     case "variant": {
       if (question.content.multi) {
         const answer = questionAnswer.answer;
+        if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
+
+        const ownAnswer = Array.isArray(answer)
+          ? ownVariants[ownVariants.findIndex((variant) => answer.some((a: string) => a === variant.id))]?.variant
+              ?.answer || ""
+          : ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)]?.variant?.answer ||
+            "";
+
         if (!Array.isArray(answer)) throw new Error("Cannot send answer in select question");
 
         //Оставляем только выбранные варианты
@@ -132,8 +140,12 @@ export function sendQuestionAnswer(
 
         let answerString = ``;
         selectedVariants.forEach((e) => {
-          answerString += `\`${e.answer}\`,`;
+          if (!e.isOwn) answerString += `\`${e.answer}\`,`;
         });
+
+        if (question.content.own && selectedVariants.some((v) => v.isOwn)) {
+          answerString += `\`${ownAnswer}\`,`;
+        }
         answerString = answerString.slice(0, -1);
 
         return sendAnswer({
@@ -155,7 +167,7 @@ export function sendQuestionAnswer(
     case "varimg": {
       const variant = question.content.variants.find((v) => v.id === questionAnswer.answer);
       const ownAnswer =
-        ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)].variant.answer || "";
+        ownVariants[ownVariants.findIndex((variant) => variant.id === questionAnswer.answer)]?.variant?.answer || "";
 
       if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`);
       const body = {