From bcc53fc337bb3162363447927a574c25180cafc2 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 7 Oct 2022 11:46:57 +0200
Subject: [PATCH] Add style for WysiwygComposer

---
 res/css/_components.pcss                      |  1 +
 .../wysiwyg_composer/_WysiwygComposer.pcss    | 53 +++++++++++++++++++
 .../wysiwyg_composer/WysiwygComposer.tsx      |  8 +--
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 9161942d87..435ed9158b 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -295,6 +295,7 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
diff --git a/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
new file mode 100644
index 0000000000..133b66388e
--- /dev/null
+++ b/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
@@ -0,0 +1,53 @@
+/*
+Copyright 2022 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 {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    font-size: $font-14px;
+    /* fixed line height to prevent emoji from being taller than text */
+    line-height: $font-18px;
+    justify-content: center;
+    margin-right: 6px;
+    /* don't grow wider than available space */
+    min-width: 0;
+
+    .mx_WysiwygComposer_container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        /* min-height at this level so the mx_BasicMessageComposer_input */
+        /* still stays vertically centered when less than 55px. */
+        /* We also set this to ensure the voice message recording widget */
+        /* doesn't cause a jump. */
+        min-height: 55px;
+
+        .mx_WysiwygComposer_content {
+            border: 1px solid;
+            border-radius: 20px;
+            padding: 8px 10px;
+            /* this will center the contenteditable */
+            /* in it's parent vertically */
+            /* while keeping the autocomplete at the top */
+            /* of the composer. The parent needs to be a flex container for this to work. */
+            margin: auto 0;
+            /* max-height at this level so autocomplete doesn't get scrolled too */
+            max-height: 140px;
+            overflow-y: auto;
+        }
+    }
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
index f22963e4e7..3582b76ac9 100644
--- a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
@@ -52,9 +52,11 @@ export function WysiwygComposer(
     }, [content, mxClient, roomContext, wysiwyg, props, ref]);
 
     return (
-        <>
-            <div className="mx_SendMessageComposer" style={{ minHeight: '30px', marginBottom: '5px' }} ref={ref} contentEditable={!disabled && isWysiwygReady} />
+        <div className="mx_WysiwygComposer">
+            <div className="mx_WysiwygComposer_container">
+                <div className="mx_WysiwygComposer_content" ref={ref} contentEditable={!disabled && isWysiwygReady} />
+            </div>
             { children?.(memoizedSendMessage) }
-        </>
+        </div>
     );
 }