Can send a message from text input using submit button

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,10 +1,12 @@
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, Input } from 'antd';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import ContentEditable from 'react-contenteditable';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom } from '../../stores/ClientConfigStore';
+import { getCaretPosition, convertToText, convertOnPaste } from '../chat';
+import { MessageType } from '../../../interfaces/socket-events';
 import s from './ChatTextField.module.scss';
 
 interface Props {
@@ -22,8 +24,27 @@ export default function ChatTextField(props: Props) {
   // large is 40px
   const size = 'small';
 
+  const sendMessage = () => {
+    if (!websocketService) {
+      console.log('websocketService is not defined');
+      return;
+    }
+
+    const message = convertToText(value);
+    websocketService.send({ type: MessageType.CHAT, body: message });
+    setValue('');
+  };
+
   const handleChange = evt => {
     text.current = evt.target.value;
+    setValue(evt.target.value);
+  };
+
+  const handleKeyDown = event => {
+    const key = event && event.key;
+
+    if (key === 'Enter') {
+    }
   };
 
   return (
@@ -33,11 +54,14 @@ export default function ChatTextField(props: Props) {
           style={{ width: '60%', maxHeight: '50px', padding: '5px' }}
           html={text.current}
           onChange={handleChange}
+          onKeyDown={e => {
+            handleKeyDown(e);
+          }}
         />
         <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
           <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
         </Button>
-        <Button size={size} type="primary">
+        <Button size={size} type="primary" onClick={sendMessage}>
           Submit
         </Button>
       </Input.Group>