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,92 +31,115 @@ interface IProps {
   onCancelEdit?: () => void;
 }
 
-const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCancelEdit }) => {
+const CommentForm: FC<IProps> = observer(
-  const [textarea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
+  ({ comment, nodeId, saveComment, onCancelEdit }) => {
-  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments, comment?.files);
+    const [textarea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
-  const formik = useCommentFormFormik(
+    const uploader = useUploader(
-    comment || EMPTY_COMMENT,
+      UploadSubject.Comment,
-    nodeId,
+      UploadTarget.Comments,
-    uploader,
+      comment?.files,
-    saveComment,
+    );
-    onCancelEdit
+    const formik = useCommentFormFormik(
-  );
+      comment || EMPTY_COMMENT,
-  const isLoading = formik.isSubmitting || uploader.isUploading;
+      nodeId,
-  const isEditing = !!comment?.id;
+      uploader,
+      saveComment,
+      onCancelEdit,
+    );
+    const isLoading = formik.isSubmitting || uploader.isUploading;
+    const isEditing = !!comment?.id;
 
-  const clearError = useCallback(() => {
+    const clearError = useCallback(() => {
-    if (formik.status) {
+      if (formik.status) {
-      formik.setStatus('');
+        formik.setStatus('');
-    }
+      }
 
-    if (formik.errors.text) {
+      if (formik.errors.text) {
-      formik.setErrors({
+        formik.setErrors({
-        ...formik.errors,
+          ...formik.errors,
-        text: '',
+          text: '',
-      });
+        });
-    }
+      }
-  }, [formik]);
+    }, [formik]);
 
-  const error = formik.status || formik.errors.text;
+    const error = formik.status || formik.errors.text;
-  const onPaste = useInputPasteUpload(uploader.uploadFiles);
+    const onPaste = useInputPasteUpload(uploader.uploadFiles);
 
-  return (
+    const { isTester } = useAuth();
-    <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} />
 
-              {!!error && (
+    return (
-                <div className={styles.error} onClick={clearError}>
+      <UploadDropzone onUpload={uploader.uploadFiles}>
-                  {ERROR_LITERAL[error] || error}
+        <form onSubmit={formik.handleSubmit} className={styles.wrap}>
-                </div>
+          <FormikProvider value={formik}>
-              )}
+            <UploaderContextProvider value={uploader}>
-            </div>
+              <div className={styles.input}>
-
+                {isTester ? (
-            <CommentFormAttaches />
+                  <WYSIWYGTextaArea
-
+                    value={formik.values.text}
-            <div className={styles.buttons}>
+                    onChange={formik.handleChange('value')}
-              <div className={styles.button_column}>
+                  />
-                <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+                ) : (
-              </div>
+                  <LocalCommentFormTextarea
-
+                    onPaste={onPaste}
-              <div className={styles.button_column}>
+                    ref={setTextArea}
-                {!!textarea && (
-                  <CommentFormFormatButtons
-                    element={textarea}
-                    handler={formik.handleChange('text')}
                   />
                 )}
-              </div>
 
-              <Filler />
+                {!!error && (
-
+                  <div className={styles.error} onClick={clearError}>
-              <div className={styles.button_column}>
+                    {ERROR_LITERAL[error] || error}
-                {isEditing && (
+                  </div>
-                  <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-                    Отмена
-                  </Button>
                 )}
-
-                <Button
-                  type="submit"
-                  size="small"
-                  color="gray"
-                  iconRight={!isEditing ? 'enter' : 'check'}
-                  disabled={isLoading}
-                  loading={isLoading}
-                >
-                  {!isEditing ? 'Сказать' : 'Сохранить'}
-                </Button>
               </div>
-            </div>
+
-          </UploaderContextProvider>
+              <CommentFormAttaches />
-        </FormikProvider>
+
-      </form>
+              <div className={styles.buttons}>
-    </UploadDropzone>
+                <div className={styles.button_column}>
-  );
+                  <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
-});
+                </div>
+
+                <div className={styles.button_column}>
+                  {!!textarea && (
+                    <CommentFormFormatButtons
+                      element={textarea}
+                      handler={formik.handleChange('text')}
+                    />
+                  )}
+                </div>
+
+                <Filler />
+
+                <div className={styles.button_column}>
+                  {isEditing && (
+                    <Button
+                      size="small"
+                      color="link"
+                      type="button"
+                      onClick={onCancelEdit}
+                    >
+                      Отмена
+                    </Button>
+                  )}
+
+                  <Button
+                    type="submit"
+                    size="small"
+                    color="gray"
+                    iconRight={!isEditing ? 'enter' : 'check'}
+                    disabled={isLoading}
+                    loading={isLoading}
+                  >
+                    {!isEditing ? 'Сказать' : 'Сохранить'}
+                  </Button>
+                </div>
+              </div>
+            </UploaderContextProvider>
+          </FormikProvider>
+        </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;
-  }
 }