Add styling to editing

res/css/_components.pcss

@@ -299,6 +299,7 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
 @import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
 @import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
 @import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";

res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss

@@ -22,10 +22,10 @@ limitations under the License.
     flex-direction: column;
     max-width: 100%; /* disable overflow */
     width: auto;
-    gap: 5px;
+    gap: 8px;
-    padding: 3px var(--EditWysiwygComposer-padding-inline);
+    padding: 8px var(--EditWysiwygComposer-padding-inline);
 
-    .mx_WysiwygComposer_container {
+    .mx_WysiwygComposer_content {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
         background-color: $background;
@@ -50,4 +50,10 @@ limitations under the License.
             min-width: 100px; /* magic number to align the edge of the button with the input area */
         }
     }
+
+    .mx_FormattingButtons_Button {
+        &:first-child {
+            margin-left: 0px;
+        }
+    }
 }

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -0,0 +1,38 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_WysiwygComposer_container {
+    position: relative;
+
+    @keyframes visualbell {
+        from { background-color: $visual-bell-bg-color; }
+        to { background-color: $background; }
+    }
+
+    .mx_WysiwygComposer_content {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        overflow-x: hidden;
+
+        /* Force caret nodes to be selected in full so that they can be */
+        /* navigated through in a single keypress */
+        .caretNode {
+            user-select: all;
+        }
+    }
+}

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -45,7 +45,7 @@ limitations under the License.
             left: 6px;
             height: 16px;
             width: 16px;
-            background-color: $icon-button-color;
+            background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-position: center;

src/components/views/messages/TextualBody.tsx

@@ -565,7 +565,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         if (this.props.editState) {
             const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
             return isWysiwygComposerEnabled ?
-                <EditWysiwygComposer editorStateTransfer={this.props.editState} /> :
+                <EditWysiwygComposer editorStateTransfer={this.props.editState} className="mx_EventTile_content" /> :
                 <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
         const mxEvent = this.props.mxEvent;

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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { forwardRef, RefObject } from 'react';
+import classNames from 'classnames';
 
 import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
 import { WysiwygComposer } from './components/WysiwygComposer';
@@ -38,16 +39,17 @@ interface EditWysiwygComposerProps {
     disabled?: boolean;
     onChange?: (content: string) => void;
     editorStateTransfer: EditorStateTransfer;
+    className?: string;
 }
 
-export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiwygComposerProps) {
+export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
     const initialContent = useInitialContent(editorStateTransfer);
     const isReady = !editorStateTransfer || Boolean(initialContent);
 
     const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
 
     return isReady && <WysiwygComposer
-        className="mx_EditWysiwygComposer"
+        className={classNames("mx_EditWysiwygComposer", className)}
         initialContent={initialContent}
         onChange={onChange}
         onSend={editMessage}

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

@@ -26,7 +26,7 @@ interface EditionButtonsProps {
 }
 
 export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
-    return <div className="mx_EditMessageComposer_buttons">
+    return <div className="mx_EditWysiwygComposer_buttons">
         <AccessibleButton kind="secondary" onClick={onCancelClick}>
             { _t("Cancel") }
         </AccessibleButton>