Improve design of the rich text editor (#9533)

New design for rich text composer

src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx

@@ -14,21 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, RefObject } from 'react';
+import React, { ForwardedRef, forwardRef, MutableRefObject } from 'react';
 
 import { useWysiwygSendActionHandler } from './hooks/useWysiwygSendActionHandler';
 import { WysiwygComposer } from './components/WysiwygComposer';
 import { PlainTextComposer } from './components/PlainTextComposer';
 import { ComposerFunctions } from './types';
+import { E2EStatus } from '../../../../utils/ShieldUtils';
+import E2EIcon from '../E2EIcon';
+import { EmojiButton } from '../EmojiButton';
+import { AboveLeftOf } from '../../../structures/ContextMenu';
 
 interface ContentProps {
-    disabled: boolean;
+    disabled?: boolean;
     composerFunctions: ComposerFunctions;
 }
 
 const Content = forwardRef<HTMLElement, ContentProps>(
-    function Content({ disabled, composerFunctions }: ContentProps, forwardRef: RefObject<HTMLElement>) {
-        useWysiwygSendActionHandler(disabled, forwardRef, composerFunctions);
+    function Content(
+        { disabled = false, composerFunctions }: ContentProps,
+        forwardRef: ForwardedRef<HTMLElement>,
+    ) {
+        useWysiwygSendActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
         return null;
     },
 );
@@ -37,14 +44,23 @@ interface SendWysiwygComposerProps {
     initialContent?: string;
     isRichTextEnabled: boolean;
     disabled?: boolean;
+    e2eStatus?: E2EStatus;
     onChange: (content: string) => void;
     onSend: () => void;
+    menuPosition: AboveLeftOf;
 }
 
-export function SendWysiwygComposer({ isRichTextEnabled, ...props }: SendWysiwygComposerProps) {
+export function SendWysiwygComposer(
+    { isRichTextEnabled, e2eStatus, menuPosition, ...props }: SendWysiwygComposerProps) {
     const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
 
-    return <Composer className="mx_SendWysiwygComposer" {...props}>
+    return <Composer
+        className="mx_SendWysiwygComposer"
+        leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
+        // TODO add emoji support
+        rightComponent={<EmojiButton menuPosition={menuPosition} addEmoji={() => false} />}
+        {...props}
+    >
         { (ref, composerFunctions) => (
             <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
         ) }