added format buttons

src/utils/hooks/useFormatWrapper.ts

@@ -0,0 +1,39 @@
+import { MouseEventHandler, useCallback } from 'react';
+
+export const useFormatWrapper = (
+  target: HTMLTextAreaElement,
+  onChange: (val: string) => void,
+  prefix = '',
+  suffix = ''
+) => {
+  return useCallback<MouseEventHandler>(
+    event => {
+      event.preventDefault();
+
+      if (!target) return;
+
+      const start = target.selectionStart;
+      const end = target.selectionEnd;
+      const selection = target.value.substring(start, end);
+
+      const replacement = prefix + selection + suffix;
+
+      onChange(
+        target.value.substring(0, start) +
+          replacement +
+          target.value.substring(end, target.value.length)
+      );
+
+      target.focus();
+
+      setTimeout(() => {
+        if (start === end) {
+          target.selectionEnd = end + prefix.length;
+        } else {
+          target.selectionEnd = end + prefix.length + suffix.length;
+        }
+      }, 0);
+    },
+    [target, onChange, prefix, suffix]
+  );
+};