added hotkeys for textarea formatter

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { Button } from '~/components/input/Button';
-import { useFormatWrapper } from '~/utils/hooks/useFormatWrapper';
+import { useFormatWrapper, wrapTextInsideInput } from '~/utils/hooks/useFormatWrapper';
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -15,10 +15,51 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
     [element, handler]
   );
 
+  const wrapBold = useCallback(
+    event => {
+      event.preventDefault();
+      wrapTextInsideInput(element, '**', '**', handler);
+    },
+    [wrap, handler]
+  );
+
+  const wrapItalic = useCallback(
+    event => {
+      event.preventDefault();
+      wrapTextInsideInput(element, '*', '*', handler);
+    },
+    [wrap, handler]
+  );
+
+  const onKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (!event.ctrlKey) return;
+
+      if (event.code === 'KeyB') {
+        wrapBold(event);
+      }
+
+      if (event.code === 'KeyI') {
+        wrapItalic(event);
+      }
+    },
+    [wrapBold, wrapItalic]
+  );
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    element.addEventListener('keypress', onKeyPress);
+
+    return () => element.removeEventListener('keypress', onKeyPress);
+  }, [element, onKeyPress]);
+
   return (
     <ButtonGroup className={styles.wrap}>
       <Button
-        onClick={wrap('**', '**')}
+        onClick={wrapBold}
         iconLeft="bold"
         size="small"
         color="gray"

src/utils/hooks/useFormatWrapper.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useCallback } from 'react';
+import { useCallback } from 'react';
 
 export const useFormatWrapper = (
   target: HTMLTextAreaElement,
@@ -6,10 +6,21 @@ export const useFormatWrapper = (
   prefix = '',
   suffix = ''
 ) => {
-  return useCallback<MouseEventHandler>(
+  return useCallback(
     event => {
       event.preventDefault();
+      wrapTextInsideInput(target, prefix, suffix, onChange);
+    },
+    [target, onChange, prefix, suffix]
+  );
+};
 
+export const wrapTextInsideInput = (
+  target: HTMLTextAreaElement,
+  prefix: string,
+  suffix: string,
+  onChange: (val: string) => void
+) => {
   if (!target) return;
 
   const start = target.selectionStart;
@@ -33,7 +44,4 @@ export const useFormatWrapper = (
       target.selectionEnd = end + prefix.length + suffix.length;
     }
   }, 0);
-    },
-    [target, onChange, prefix, suffix]
-  );
 };