Comment improvements

src/cloud/components/Comments/CommentInput.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react'
-import Button from '../../../design/components/atoms/Button'
 import styled from '../../../design/lib/styled'
 import { useEffectOnce } from 'react-use'
 import useSuggestions from '../../../design/lib/hooks/useSuggestions'
@@ -11,27 +10,29 @@ import {
   toFragment,
   isMention,
 } from '../../lib/comments'
-import { lngKeys } from '../../lib/i18n/types'
-import { useI18n } from '../../lib/hooks/useI18n'
-import Flexbox from '../../../design/components/atoms/Flexbox'
+import Button from '../../../design/components/atoms/Button'
+import { mdiSendOutline } from '@mdi/js'
 
 interface CommentInputProps {
   onSubmit: (comment: string) => any
   value?: string
   autoFocus?: boolean
   users: SerializedUser[]
+  placeholder: string
 }
 
 const smallUserIconStyle = { width: '20px', height: '20px', lineHeight: '17px' }
-export function CommentInput({
+
+function CommentInput({
   onSubmit,
   value = '',
   autoFocus = false,
   users,
+  placeholder,
 }: CommentInputProps) {
   const [working, setWorking] = useState(false)
   const inputRef = useRef<HTMLDivElement>(null)
-  const { translate } = useI18n()
+  const [isInputEmpty, setIsInputEmpty] = useState(true)
   const onSuggestionSelect = useRef((item: SerializedUser, hint: string) => {
     if (inputRef.current == null) {
       return
@@ -75,27 +76,28 @@ export function CommentInput({
       inputRef.current.addEventListener('blur', closeSuggestions)
       if (value.length > 0) {
         inputRef.current.appendChild(toFragment(value))
-      } else {
-        resetInitialContent(inputRef.current)
       }
       if (autoFocus) {
         inputRef.current.focus()
       }
     }
   })
 
-  const submit = useCallback(async () => {
-    if (inputRef.current != null) {
-      try {
-        setWorking(true)
-        await onSubmit(fromNode(inputRef.current).trim())
-        if (inputRef.current != null) {
-          resetInitialContent(inputRef.current)
-          inputRef.current.focus()
-        }
-      } finally {
-        setWorking(false)
-      }
+  const onPostCommentAction = useCallback(async () => {
+    if (inputRef.current == null) {
+      return
+    }
+    const inputContent = fromNode(inputRef.current).trim()
+    if (inputContent === '') {
+      return
+    }
+    try {
+      setWorking(true)
+      await onSubmit(fromNode(inputRef.current).trim())
+      inputRef.current.innerHTML = ''
+    } finally {
+      setWorking(false)
+      inputRef.current.focus()
     }
   }, [onSubmit])
 
@@ -104,10 +106,12 @@ export function CommentInput({
       onKeyDownListener(ev)
 
       if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
-        ev.preventDefault()
-        ev.stopPropagation()
-        submit()
-        return
+        if (inputRef.current != null) {
+          ev.preventDefault()
+          ev.stopPropagation()
+          onPostCommentAction()
+          return
+        }
       }
 
       if (ev.key === 'Enter' && ev.shiftKey) {
@@ -123,9 +127,21 @@ export function CommentInput({
         }
       }
     },
-    [submit, onKeyDownListener]
+    [onKeyDownListener, onPostCommentAction]
   )
 
+  const onKeyUp = useCallback(() => {
+    const inputContent =
+      inputRef.current !== null ? fromNode(inputRef.current).trim() : ''
+    setIsInputEmpty(inputContent === '')
+  }, [])
+
+  const onCommentInput = useCallback(() => {
+    if (inputRef.current != null) {
+      setIsInputEmpty(fromNode(inputRef.current).trim() === '')
+    }
+  }, [])
+
   const selectSuggestion: React.MouseEventHandler = useCallback(
     (ev) => {
       ev.stopPropagation()
@@ -152,20 +168,30 @@ export function CommentInput({
 
   return (
     <InputContainer>
-      <div
-        className='comment__input__editable'
-        ref={inputRef}
-        onKeyDown={onKeyDown}
-        contentEditable={!working}
-        onCompositionEnd={onCompositionEndListener}
-        onClick={closeSuggestions}
-        onBeforeInput={beforeInputHandler}
-      ></div>
-      <Flexbox justifyContent='flex-end'>
-        <Button disabled={working} onClick={submit}>
-          {translate(lngKeys.ThreadPost)}
-        </Button>
-      </Flexbox>
+      <div className={'comment__input__container'}>
+        <div className={'comment__input__input__editable_container'}>
+          <div
+            className='comment__input__editable'
+            ref={inputRef}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+            contentEditable={!working}
+            onCompositionEnd={onCompositionEndListener}
+            onClick={closeSuggestions}
+            onBeforeInput={beforeInputHandler}
+            onInput={onCommentInput}
+            data-placeholder={placeholder}
+          />
+        </div>
+        <Button
+          className={'comment__input__send_button'}
+          variant={'icon-secondary'}
+          iconPath={mdiSendOutline}
+          size={'sm'}
+          onClick={() => onPostCommentAction()}
+          disabled={working || isInputEmpty}
+        />
+      </div>
       {state.type === 'enabled' && state.suggestions.length > 0 && (
         <div
           className='comment__input__suggestions'
@@ -197,16 +223,39 @@ export function CommentInput({
 const InputContainer = styled.div`
   position: relative;
   width: 100%;
-  & .comment__input__editable {
-    white-space: pre-wrap;
-    resize: none;
-    width: 100%;
+
+  .comment__input__container {
+    display: flex;
+    position: relative;
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.l}px;
+
+    .comment__input__send_button {
+      position: absolute;
+      right: 30px;
+      bottom: 6px;
+    }
+  }
+
+  & .comment__input__input__editable_container {
+    margin: auto;
+    width: 90%;
     border: 1px solid ${({ theme }) => theme.colors.border.second};
-    min-height: 60px;
+    min-height: 30px;
     background-color: ${({ theme }) => theme.colors.background.secondary};
     color: ${({ theme }) => theme.colors.text.primary};
     padding: 5px 10px;
-    margin-bottom: ${({ theme }) => theme.sizes.spaces.df}px;
+
+    border-radius: ${({ theme }) => theme.borders.radius}px;
+  }
+
+  & .comment__input__editable {
+    white-space: pre-wrap;
+    resize: none;
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+
+    &:empty:before {
+      content: attr(data-placeholder);
+    }
   }
 
   & .comment__input__suggestions {
@@ -234,16 +283,6 @@ const InputContainer = styled.div`
   }
 `
 
-function resetInitialContent(element: Element) {
-  for (let i = 0; i < element.childNodes.length; i++) {
-    element.removeChild(element.childNodes[i])
-  }
-
-  const child = document.createElement('div')
-  child.appendChild(document.createElement('br'))
-  element.appendChild(child)
-}
-
 function getMentionInSelection() {
   const selection = getSelection()
   if (selection == null) return null