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;
+}

src/components/input/ButtonGroup/index.tsx

@@ -1,6 +1,9 @@
 import React, { HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 
-export const ButtonGroup = ({ children }: IProps) => <div className={styles.wrap}>{children}</div>;
+export const ButtonGroup = ({ children, className }: IProps) => (
+  <div className={classNames(styles.wrap, className)}>{children}</div>
+);

src/components/input/Textarea/index.tsx

@@ -1,6 +1,6 @@
 import React, {
   ChangeEvent,
-  LegacyRef,
+  DetailedHTMLProps,
   memo,
   TextareaHTMLAttributes,
   useCallback,
@@ -14,7 +14,10 @@ import autosize from 'autosize';
 import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '../Icon';
 
-type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type IProps = DetailedHTMLProps<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+> & {
   value: string;
   placeholder?: string;
   rows?: number;
@@ -26,6 +29,7 @@ type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   status?: 'error' | 'success' | '';
   title?: string;
   seamless?: boolean;
+  setRef?: (r: HTMLTextAreaElement) => void;
 };
 
 const Textarea = memo<IProps>(
@@ -40,12 +44,12 @@ const Textarea = memo<IProps>(
     status = '',
     seamless,
     value,
+    setRef,
     ...props
   }) => {
     const [rows, setRows] = useState(minRows || 1);
     const [focused, setFocused] = useState(false);
-
-    const textarea: LegacyRef<HTMLTextAreaElement> = useRef(null);
+    const ref = useRef<HTMLTextAreaElement>();
 
     const onInput = useCallback(
       ({ target }: ChangeEvent<HTMLTextAreaElement>) => handler(target.value),
@@ -56,12 +60,13 @@ const Textarea = memo<IProps>(
     const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
     useEffect(() => {
-      if (!textarea.current) return;
+      if (!ref.current) return;
 
-      autosize(textarea.current);
+      autosize(ref.current);
+      setRef(ref.current);
 
-      return () => autosize.destroy(textarea.current);
-    }, [textarea.current]);
+      return () => autosize.destroy(ref.current);
+    }, [ref.current]);
 
     return (
       <div
@@ -80,7 +85,7 @@ const Textarea = memo<IProps>(
             placeholder={placeholder}
             className={classNames(styles.textarea, className)}
             onChange={onInput}
-            ref={textarea}
+            ref={ref}
             onFocus={onFocus}
             onBlur={onBlur}
             style={{