added milkdown, but its not working

.env.local

@@ -1,7 +1,7 @@
 # NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
 # NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
-# NEXT_PUBLIC_API_HOST=http://localhost:7777/
+NEXT_PUBLIC_API_HOST=http://localhost:7777/
 # NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:7777/static/
-NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
+# NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
 NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/
 NEXT_PUBLIC_BOT_USERNAME=vault48testbot

package.json

@@ -5,6 +5,13 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
+    "@milkdown/core": "^7.1.0",
+    "@milkdown/ctx": "^7.1.0",
+    "@milkdown/plugin-listener": "^7.1.0",
+    "@milkdown/preset-commonmark": "^7.1.0",
+    "@milkdown/prose": "^7.1.0",
+    "@milkdown/react": "^7.1.0",
+    "@milkdown/transformer": "^7.1.0",
     "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/components/comment/CommentForm/index.tsx

@@ -13,12 +13,15 @@ import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { EMPTY_COMMENT } from '~/constants/node';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
+import { useAuth } from '~/hooks/auth/useAuth';
 import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
 import { useUploader } from '~/hooks/data/useUploader';
 import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
 import { IComment, INode } from '~/types';
 import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
 
+import { WYSIWYGTextaArea } from '../WYSIWYGTextaArea';
+
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -28,15 +31,20 @@ interface IProps {
   onCancelEdit?: () => void;
 }
 
-const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCancelEdit }) => {
+const CommentForm: FC<IProps> = observer(
+  ({ comment, nodeId, saveComment, onCancelEdit }) => {
     const [textarea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
-  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments, comment?.files);
+    const uploader = useUploader(
+      UploadSubject.Comment,
+      UploadTarget.Comments,
+      comment?.files,
+    );
     const formik = useCommentFormFormik(
       comment || EMPTY_COMMENT,
       nodeId,
       uploader,
       saveComment,
-    onCancelEdit
+      onCancelEdit,
     );
     const isLoading = formik.isSubmitting || uploader.isUploading;
     const isEditing = !!comment?.id;
@@ -57,13 +65,25 @@ const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCanc
     const error = formik.status || formik.errors.text;
     const onPaste = useInputPasteUpload(uploader.uploadFiles);
 
+    const { isTester } = useAuth();
+
     return (
       <UploadDropzone onUpload={uploader.uploadFiles}>
         <form onSubmit={formik.handleSubmit} className={styles.wrap}>
           <FormikProvider value={formik}>
             <UploaderContextProvider value={uploader}>
               <div className={styles.input}>
-              <LocalCommentFormTextarea onPaste={onPaste} ref={setTextArea} />
+                {isTester ? (
+                  <WYSIWYGTextaArea
+                    value={formik.values.text}
+                    onChange={formik.handleChange('value')}
+                  />
+                ) : (
+                  <LocalCommentFormTextarea
+                    onPaste={onPaste}
+                    ref={setTextArea}
+                  />
+                )}
 
                 {!!error && (
                   <div className={styles.error} onClick={clearError}>
@@ -92,7 +112,12 @@ const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCanc
 
                 <div className={styles.button_column}>
                   {isEditing && (
-                  <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                    <Button
+                      size="small"
+                      color="link"
+                      type="button"
+                      onClick={onCancelEdit}
+                    >
                       Отмена
                     </Button>
                   )}
@@ -114,6 +139,7 @@ const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCanc
         </form>
       </UploadDropzone>
     );
-});
+  },
+);
 
 export { CommentForm };

src/components/comment/WYSIWYGTextaArea/index.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useState } from 'react';
+
+import {
+  Editor,
+  rootCtx,
+  defaultValueCtx,
+  editorViewOptionsCtx,
+} from '@milkdown/core';
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { commonmark } from '@milkdown/preset-commonmark';
+import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react';
+
+import styles from './styles.module.scss';
+
+interface MilkdownEditorProps {
+  value?: string;
+  onChange?: (val: string) => void;
+}
+
+const MilkdownEditor: FC<MilkdownEditorProps> = ({ value = '', onChange }) => {
+  useEditor(
+    (root) =>
+      Editor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, root);
+          ctx.set(defaultValueCtx, value);
+          ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+            onChange?.(markdown);
+          });
+
+          ctx.update(editorViewOptionsCtx, (prev) => ({
+            ...prev,
+            attributes: {
+              class: styles.editor,
+              spellcheck: 'false',
+            },
+          }));
+        })
+        .use(commonmark)
+        .use(listener),
+    [onChange, value],
+  );
+
+  return <Milkdown />;
+};
+
+const WYSIWYGTextaArea: FC<MilkdownEditorProps> = ({ value, onChange }) => (
+  <MilkdownProvider>
+    <MilkdownEditor value={value} onChange={onChange} />
+  </MilkdownProvider>
+);
+export { WYSIWYGTextaArea };

src/components/comment/WYSIWYGTextaArea/styles.module.scss

@@ -0,0 +1,5 @@
+@import 'src/styles/markdown.scss';
+
+.editor {
+  @include markdown;
+}

src/styles/_markdown.scss

@@ -0,0 +1,95 @@
+@use 'sass:math';
+
+@import './variables.scss';
+
+$margin: 1em;
+
+@mixin markdown {
+  blockquote {
+    border-left: 4px solid $color_primary;
+    padding: $margin * 0.5 0;
+    margin-bottom: $margin;
+    color: $color_primary;
+    font-size: 0.9em;
+    background-color: $content_bg_success;
+
+    p {
+      margin: 0 $margin;
+    }
+
+    & + blockquote {
+      margin-top: -$margin;
+    }
+  }
+
+  pre {
+    background-color: $content_bg_info;
+    font-family: monospace;
+    font-size: 0.8em;
+    border-radius: 2px;
+    width: 100%;
+    overflow: auto;
+    padding: $gap;
+    box-sizing: border-box;
+    margin-bottom: $margin;
+
+    code {
+      color: $gray_50;
+      font-family: monospace;
+      white-space: pre-wrap;
+    }
+  }
+
+  p,
+  li {
+    code {
+      background-color: $content_bg_info;
+      padding: 2px 4px;
+      border-radius: 0.3em;
+      color: $gray_25;
+      font-size: 0.8em;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    margin-bottom: $margin;
+  }
+
+  h5,
+  h4,
+  h3,
+  h2,
+  h1 {
+    line-height: 1.2em;
+    margin: $margin * 1.5 0 $margin * 0.5;
+
+    &:first-child {
+      margin-top: $margin * 0.25;
+    }
+  }
+
+  ul {
+    list-style: disc;
+    padding-left: 20px;
+    margin-bottom: $margin;
+
+    li {
+      margin: math.div($margin, 3) 0;
+    }
+  }
+
+  strong {
+    font-weight: bold;
+    color: white;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  :global(.grey) {
+    color: #666666;
+    white-space: pre-line;
+  }
+}

src/styles/common/markdown.module.scss

@@ -1,95 +1,6 @@
-@use 'sass:math';
-
 @import '../variables';
-
+@import '../markdown';
-$margin: 1em;
 
 .wrapper {
-  blockquote {
+  @include markdown;
-    border-left: 4px solid $color_primary;
-    padding: $margin * 0.5 0;
-    margin-bottom: $margin;
-    color: $color_primary;
-    font-size: 0.9em;
-    background-color: $content_bg_success;
-
-    p {
-      margin: 0 $margin;
-    }
-
-    & + blockquote {
-      margin-top: -$margin;
-    }
-  }
-
-  pre {
-    background-color: $content_bg_info;
-    font-family: monospace;
-    font-size: 0.8em;
-    border-radius: 2px;
-    width: 100%;
-    overflow: auto;
-    padding: $gap;
-    box-sizing: border-box;
-    margin-bottom: $margin;
-
-    code {
-      color: $gray_50;
-      font-family: monospace;
-      white-space: pre-wrap;
-    }
-  }
-
-  p,
-  li {
-    code {
-      background-color: $content_bg_info;
-      padding: 2px 4px;
-      border-radius: 0.3em;
-      color: $gray_25;
-      font-size: 0.8em;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    margin-bottom: $margin;
-  }
-
-  h5,
-  h4,
-  h3,
-  h2,
-  h1 {
-    line-height: 1.2em;
-    margin: $margin * 1.5 0 $margin * 0.5;
-
-    &:first-child {
-      margin-top: $margin * 0.25;
-    }
-  }
-
-  ul {
-    list-style: disc;
-    padding-left: 20px;
-    margin-bottom: $margin;
-
-    li {
-      margin: math.div($margin, 3) 0;
-    }
-  }
-
-  strong {
-    font-weight: bold;
-    color: white;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  :global(.grey) {
-    color: #666666;
-    white-space: pre-line;
-  }
 }