diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx index f37053f5..22613f08 100644 --- a/src/components/comment/CommentForm/index.tsx +++ b/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 = memo( uploadUploadFiles, nodeCancelCommentEdit, }) => { + const [textarea, setTextarea] = useState(); 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 = memo( disabled={is_sending_comment} placeholder={placeholder} minRows={2} + setRef={setTextarea} /> {comment.error && ( @@ -203,6 +212,7 @@ const CommentFormUnconnected: FC = memo( + diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss index 5d691822..37719a51 100644 --- a/src/components/comment/CommentForm/styles.module.scss +++ b/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 { diff --git a/src/components/comment/CommentFormButtons/index.tsx b/src/components/comment/CommentFormAttachButtons/index.tsx similarity index 100% rename from src/components/comment/CommentFormButtons/index.tsx rename to src/components/comment/CommentFormAttachButtons/index.tsx diff --git a/src/components/comment/CommentFormFormatButtons/index.tsx b/src/components/comment/CommentFormFormatButtons/index.tsx new file mode 100644 index 00000000..390b9e77 --- /dev/null +++ b/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 = ({ element, handler }) => { + const wrap = useCallback( + (prefix = '', suffix = '') => useFormatWrapper(element, handler, prefix, suffix), + [element, handler] + ); + + return ( + +