added format buttons

src/components/comment/CommentForm/index.tsx

@@ -1,4 +1,12 @@
-import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
+import React, {
+  FC,
+  KeyboardEventHandler,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
@@ -19,8 +27,9 @@ import { getFileType } from '~/utils/uploader';
 import { useRandomPhrase } from '~/constants/phrases';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
-import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons';
+import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
 import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
+import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -51,12 +60,11 @@ const CommentFormUnconnected: FC<IProps> = memo(
     uploadUploadFiles,
     nodeCancelCommentEdit,
   }) => {
+    const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
     const comment = useMemo(() => comment_data[id], [comment_data, id]);
 
     const onUpload = useCallback(
       (files: File[]) => {
-        console.log(files);
-
         const items: IFileWithUUID[] = files.map(
           (file: File): IFileWithUUID => ({
             file,
@@ -182,6 +190,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
               disabled={is_sending_comment}
               placeholder={placeholder}
               minRows={2}
+              setRef={setTextarea}
             />
 
             {comment.error && (
@@ -203,6 +212,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
 
           <Group horizontal className={styles.buttons}>
             <CommentFormAttachButtons onUpload={onUpload} />
+            <CommentFormFormatButtons element={textarea} handler={onInput} />
 
             <Filler />
 

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

@@ -24,7 +24,6 @@
   background: transparentize(black, 0.8);
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
-  flex-wrap: wrap;
 }
 
 .uploads {

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useCallback } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+import { useFormatWrapper } from '~/utils/hooks/useFormatWrapper';
+import styles from './styles.module.scss';
+
+interface IProps {
+  element: HTMLTextAreaElement;
+  handler: (val: string) => void;
+}
+
+const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
+  const wrap = useCallback(
+    (prefix = '', suffix = '') => useFormatWrapper(element, handler, prefix, suffix),
+    [element, handler]
+  );
+
+  return (
+    <ButtonGroup className={styles.wrap}>
+      <Button
+        onClick={wrap('**', '**')}
+        iconLeft="bold"
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+      />
+
+      <Button
+        onClick={wrap('*', '*')}
+        iconLeft="italic"
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+      />
+
+      <Button
+        onClick={wrap('## ', '')}
+        iconLeft="title"
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+      />
+
+      <Button
+        onClick={wrap('[ссылка](', ')')}
+        iconLeft="link"
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+      />
+    </ButtonGroup>
+  );
+};
+
+export { CommentFormFormatButtons };

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

@@ -0,0 +1,8 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  display: flex;
+  flex-wrap: wrap;
+  height: 32px;
+  overflow: hidden;
+}