markdown and video

src/components/AnswerModal.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import classes from "../assets/styles/components/answerModal.module.scss";
-import MyButton from "./MyButton.jsx"
+import MyButton from "./MyButton.jsx";
+import MarkDowm from "./MarkDown.jsx";
 
 const AnswerModal = ({
     cleanStates, 
@@ -10,6 +11,8 @@ const AnswerModal = ({
     addFormBlock, 
     question, 
     file,
+    video,
+    setVideo,
     listTypeAnswer,
     optionAnswer,
     setOptionAnswer,
@@ -40,7 +43,7 @@ const AnswerModal = ({
                     <div class="modal-body" className={classes.myModal__dialog__content__body}>
                         <div className={classes.myModal__dialog__content__body__answer}>
                             <span className={classes.myModal__dialog__content__body__answer__title}>Вопрос</span>
-                            <textarea className={classes.myModal__dialog__content__body__answer__text} value={question} onChange={event => setQuestion(event.target.value)}></textarea>
+                            <MarkDowm mkValue={question} setMkValue={setQuestion}></MarkDowm>
                             <input 
                                 type="file" 
                                 multiple 
@@ -48,12 +51,16 @@ const AnswerModal = ({
                                 className={classes.myModal__dialog__content__body__answer__file}
                                 value={file}
                                 onChange={event => setFile(event.target.value)}
-                            ></input>                         
+                            ></input>                     
                         </div>
                         <div className={classes.myModal__dialog__content__body__comment}>
                             <span className={classes.myModal__dialog__content__body__comment__title}>Комментарий</span>
                             <textarea className={classes.myModal__dialog__content__body__comment__text} value={comment} onChange={event => setComment(event.target.value)}></textarea>
                         </div>
+                        <div className={classes.myModal__dialog__content__body__video}>
+                            <span className={classes.myModal__dialog__content__body__video__title}>Видео</span>
+                            <input type="text" className={classes.myModal__dialog__content__body__video__link} placeholder="Ссылка на видео" value={video} onChange={(e) => setVideo(e.target.value)}/>
+                        </div>
                         {[3, 4, 5].find(item => item === currentTypeAnswer) ? <div className={classes.myModal__dialog__content__body__answerOptions}>
                             <span className={classes.myModal__dialog__content__body__answerOptions__title}>Варианты ответа</span>
                             <div className={classes.myModal__dialog__content__body__answerOptions__list}>

src/components/GeneratingFormFields.jsx

@@ -1,13 +1,25 @@
 import React, { useState } from "react";
 import classes from "../assets/styles/generatingFormFields.module.scss";
+import MarkdownEditor from "@uiw/react-markdown-editor";
 
 const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswersForm}) => {
     return (
         listBlock.map((item, i) => 
             <div className={classes.item} key={i}>
                 <div className={classes.item__question}>
-                    <p className={classes.item__question__text}>{i + 1}) {item.question}</p>
+                    <p className={classes.item__question__text}>{i + 1}) <MarkdownEditor.Markdown source={item.question}/></p>
                     <p className={classes.item__question__comment}>{item.comment}</p>
+                    <div className={classes.item__question__video}>
+                        {item.video ? <iframe 
+                            width="300" 
+                            height="150" 
+                            src={item.video} 
+                            frameborder="0" 
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                            referrerpolicy="strict-origin-when-cross-origin" 
+                            allowfullscreen
+                        ></iframe> : <span></span>}
+                    </div>
                 </div>
                 <div className={classes.item__answer}>
                     {

src/components/MarkDown.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import MarkdownEditor from '@uiw/react-markdown-editor';
+import classes from "../assets/styles/components/markDown.module.scss"
+
+const MarkDown = ({mkValue, setMkValue}) => {
+    return (
+        <div className={classes.main} data-color-mode="light">
+            <MarkdownEditor 
+                value={mkValue} 
+                onChange={(value, viewUpdate) => setMkValue(value)}
+                enablePreview={false}
+            />
+        </div>
+        
+    )
+}
+
+export default MarkDown;