From be18bfd170edc1ca8df257031c047448cbd10625 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 5 Jan 2023 14:17:00 +0000
Subject: [PATCH 01/29] add bullet list svg icon

---
 res/img/element-icons/room/composer/bullet_list.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 res/img/element-icons/room/composer/bullet_list.svg

diff --git a/res/img/element-icons/room/composer/bullet_list.svg b/res/img/element-icons/room/composer/bullet_list.svg
new file mode 100644
index 00000000000..5abe9b564a7
--- /dev/null
+++ b/res/img/element-icons/room/composer/bullet_list.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66666 4C1.11332 4 0.666656 4.44667 0.666656 5C0.666656 5.55333 1.11332 6 1.66666 6C2.21999 6 2.66666 5.55333 2.66666 5C2.66666 4.44667 2.21999 4 1.66666 4ZM1.66666 0C1.11332 0 0.666656 0.446667 0.666656 1C0.666656 1.55333 1.11332 2 1.66666 2C2.21999 2 2.66666 1.55333 2.66666 1C2.66666 0.446667 2.21999 0 1.66666 0ZM1.66666 8C1.11332 8 0.666656 8.45333 0.666656 9C0.666656 9.54667 1.11999 10 1.66666 10C2.21332 10 2.66666 9.54667 2.66666 9C2.66666 8.45333 2.21999 8 1.66666 8ZM4.33332 9.66667H12.3333C12.7 9.66667 13 9.36667 13 9C13 8.63333 12.7 8.33333 12.3333 8.33333H4.33332C3.96666 8.33333 3.66666 8.63333 3.66666 9C3.66666 9.36667 3.96666 9.66667 4.33332 9.66667ZM4.33332 5.66667H12.3333C12.7 5.66667 13 5.36667 13 5C13 4.63333 12.7 4.33333 12.3333 4.33333H4.33332C3.96666 4.33333 3.66666 4.63333 3.66666 5C3.66666 5.36667 3.96666 5.66667 4.33332 5.66667ZM3.66666 1C3.66666 1.36667 3.96666 1.66667 4.33332 1.66667H12.3333C12.7 1.66667 13 1.36667 13 1C13 0.633333 12.7 0.333333 12.3333 0.333333H4.33332C3.96666 0.333333 3.66666 0.633333 3.66666 1Z" fill="#8D97A5"/>
+</svg>

From ae37394c3f7ccf4f3cb42263bf526742db42e928 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 5 Jan 2023 14:17:07 +0000
Subject: [PATCH 02/29] use new icon and add button

---
 .../wysiwyg_composer/components/FormattingButtons.tsx      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index d2cafb11989..dfc28294f7c 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -24,6 +24,7 @@ import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/r
 import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
+import { Icon as BulletListIcon } from "../../../../../../res/img/element-icons/room/composer/bullet_list.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -110,6 +111,12 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 onClick={() => composer.strikeThrough()}
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                isActive={actionStates.inlineCode === "reversed"}
+                label={_td("Bullet list")}
+                onClick={() => composer.orderedList()}
+                icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 isActive={actionStates.inlineCode === "reversed"}
                 label={_td("Code")}

From 660b1059c693969891b7ebaf70ebf3776f5244db Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 5 Jan 2023 16:20:05 +0000
Subject: [PATCH 03/29] amend fill colour for icon

---
 res/img/element-icons/room/composer/bullet_list.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/img/element-icons/room/composer/bullet_list.svg b/res/img/element-icons/room/composer/bullet_list.svg
index 5abe9b564a7..828bb8ab038 100644
--- a/res/img/element-icons/room/composer/bullet_list.svg
+++ b/res/img/element-icons/room/composer/bullet_list.svg
@@ -1,3 +1,3 @@
 <svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.66666 4C1.11332 4 0.666656 4.44667 0.666656 5C0.666656 5.55333 1.11332 6 1.66666 6C2.21999 6 2.66666 5.55333 2.66666 5C2.66666 4.44667 2.21999 4 1.66666 4ZM1.66666 0C1.11332 0 0.666656 0.446667 0.666656 1C0.666656 1.55333 1.11332 2 1.66666 2C2.21999 2 2.66666 1.55333 2.66666 1C2.66666 0.446667 2.21999 0 1.66666 0ZM1.66666 8C1.11332 8 0.666656 8.45333 0.666656 9C0.666656 9.54667 1.11999 10 1.66666 10C2.21332 10 2.66666 9.54667 2.66666 9C2.66666 8.45333 2.21999 8 1.66666 8ZM4.33332 9.66667H12.3333C12.7 9.66667 13 9.36667 13 9C13 8.63333 12.7 8.33333 12.3333 8.33333H4.33332C3.96666 8.33333 3.66666 8.63333 3.66666 9C3.66666 9.36667 3.96666 9.66667 4.33332 9.66667ZM4.33332 5.66667H12.3333C12.7 5.66667 13 5.36667 13 5C13 4.63333 12.7 4.33333 12.3333 4.33333H4.33332C3.96666 4.33333 3.66666 4.63333 3.66666 5C3.66666 5.36667 3.96666 5.66667 4.33332 5.66667ZM3.66666 1C3.66666 1.36667 3.96666 1.66667 4.33332 1.66667H12.3333C12.7 1.66667 13 1.36667 13 1C13 0.633333 12.7 0.333333 12.3333 0.333333H4.33332C3.96666 0.333333 3.66666 0.633333 3.66666 1Z" fill="#8D97A5"/>
+<path d="M1.66666 4C1.11332 4 0.666656 4.44667 0.666656 5C0.666656 5.55333 1.11332 6 1.66666 6C2.21999 6 2.66666 5.55333 2.66666 5C2.66666 4.44667 2.21999 4 1.66666 4ZM1.66666 0C1.11332 0 0.666656 0.446667 0.666656 1C0.666656 1.55333 1.11332 2 1.66666 2C2.21999 2 2.66666 1.55333 2.66666 1C2.66666 0.446667 2.21999 0 1.66666 0ZM1.66666 8C1.11332 8 0.666656 8.45333 0.666656 9C0.666656 9.54667 1.11999 10 1.66666 10C2.21332 10 2.66666 9.54667 2.66666 9C2.66666 8.45333 2.21999 8 1.66666 8ZM4.33332 9.66667H12.3333C12.7 9.66667 13 9.36667 13 9C13 8.63333 12.7 8.33333 12.3333 8.33333H4.33332C3.96666 8.33333 3.66666 8.63333 3.66666 9C3.66666 9.36667 3.96666 9.66667 4.33332 9.66667ZM4.33332 5.66667H12.3333C12.7 5.66667 13 5.36667 13 5C13 4.63333 12.7 4.33333 12.3333 4.33333H4.33332C3.96666 4.33333 3.66666 4.63333 3.66666 5C3.66666 5.36667 3.96666 5.66667 4.33332 5.66667ZM3.66666 1C3.66666 1.36667 3.96666 1.66667 4.33332 1.66667H12.3333C12.7 1.66667 13 1.36667 13 1C13 0.633333 12.7 0.333333 12.3333 0.333333H4.33332C3.96666 0.333333 3.66666 0.633333 3.66666 1Z" fill="currentColor"/>
 </svg>

From 458e756fec6d839023bcf5740400cd21fd8ac686 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 5 Jan 2023 16:20:28 +0000
Subject: [PATCH 04/29] look at correct part of actionStates for styling

---
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index dfc28294f7c..7dee3475e6d 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -112,7 +112,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.inlineCode === "reversed"}
+                isActive={actionStates.orderedList === "reversed"}
                 label={_td("Bullet list")}
                 onClick={() => composer.orderedList()}
                 icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}

From da8fdba4f98fcbe0b84e4452f98384951d956e96 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 12:52:07 +0000
Subject: [PATCH 05/29] use .unorderedList method, not .orderedList

---
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 7dee3475e6d..c49670e5176 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -114,7 +114,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 isActive={actionStates.orderedList === "reversed"}
                 label={_td("Bullet list")}
-                onClick={() => composer.orderedList()}
+                onClick={() => composer.unorderedList()}
                 icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button

From c2cff3e155e17202fd56337e5828192bcec325be Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 13:24:08 +0000
Subject: [PATCH 06/29] style ul and ol to remove margin, use circle not disc

---
 .../views/rooms/wysiwyg_composer/components/_Editor.pcss   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index d48476cfd7f..924a2e7cc8e 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -35,6 +35,13 @@ limitations under the License.
         .caretNode {
             user-select: all;
         }
+
+        ul,
+        ol {
+            margin-top: 0;
+            margin-bottom: 0;
+            list-style-type: circle;
+        }
     }
 
     .mx_WysiwygComposer_Editor_content_placeholder::before {

From 43cd30d3c89f5d3de54ac266a138d040ece779ac Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 13:31:36 +0000
Subject: [PATCH 07/29] sort out line height and lhs padding

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 924a2e7cc8e..67589e29abf 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_WysiwygComposer_Editor_container {
+    line-height: 2.2rem;
+
     @keyframes visualbell {
         from {
             background-color: $visual-bell-bg-color;
@@ -41,6 +43,7 @@ limitations under the License.
             margin-top: 0;
             margin-bottom: 0;
             list-style-type: circle;
+            padding-inline-start: 28px;
         }
     }
 

From f0518549545c1c42cda751879c80bb04e8e5e2ed Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 14:31:07 +0000
Subject: [PATCH 08/29] add numbered list and icon

---
 res/img/element-icons/room/composer/numbered_list.svg    | 3 +++
 .../wysiwyg_composer/components/FormattingButtons.tsx    | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 res/img/element-icons/room/composer/numbered_list.svg

diff --git a/res/img/element-icons/room/composer/numbered_list.svg b/res/img/element-icons/room/composer/numbered_list.svg
new file mode 100644
index 00000000000..46a5438f3f6
--- /dev/null
+++ b/res/img/element-icons/room/composer/numbered_list.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33334 2.66663H12.3333C12.7 2.66663 13 2.36663 13 1.99996C13 1.63329 12.7 1.33329 12.3333 1.33329H4.33334C3.96668 1.33329 3.66668 1.63329 3.66668 1.99996C3.66668 2.36663 3.96668 2.66663 4.33334 2.66663ZM12.3333 9.33329H4.33334C3.96668 9.33329 3.66668 9.63329 3.66668 9.99996C3.66668 10.3666 3.96668 10.6666 4.33334 10.6666H12.3333C12.7 10.6666 13 10.3666 13 9.99996C13 9.63329 12.7 9.33329 12.3333 9.33329ZM12.3333 5.33329H4.33334C3.96668 5.33329 3.66668 5.63329 3.66668 5.99996C3.66668 6.36663 3.96668 6.66663 4.33334 6.66663H12.3333C12.7 6.66663 13 6.36663 13 5.99996C13 5.63329 12.7 5.33329 12.3333 5.33329ZM2.00001 8.66663H0.666677C0.48001 8.66663 0.333344 8.81329 0.333344 8.99996C0.333344 9.18663 0.48001 9.33329 0.666677 9.33329H1.66668V9.66663H1.33334C1.14668 9.66663 1.00001 9.81329 1.00001 9.99996C1.00001 10.1866 1.14668 10.3333 1.33334 10.3333H1.66668V10.6666H0.666677C0.48001 10.6666 0.333344 10.8133 0.333344 11C0.333344 11.1866 0.48001 11.3333 0.666677 11.3333H2.00001C2.18668 11.3333 2.33334 11.1866 2.33334 11V8.99996C2.33334 8.81329 2.18668 8.66663 2.00001 8.66663ZM0.666677 1.33329H1.00001V2.99996C1.00001 3.18663 1.14668 3.33329 1.33334 3.33329C1.52001 3.33329 1.66668 3.18663 1.66668 2.99996V0.999959C1.66668 0.813293 1.52001 0.666626 1.33334 0.666626H0.666677C0.48001 0.666626 0.333344 0.813293 0.333344 0.999959C0.333344 1.18663 0.48001 1.33329 0.666677 1.33329ZM2.00001 4.66663H0.666677C0.48001 4.66663 0.333344 4.81329 0.333344 4.99996C0.333344 5.18663 0.48001 5.33329 0.666677 5.33329H1.53334L0.413343 6.63996C0.36001 6.69996 0.333344 6.77996 0.333344 6.85329V6.99996C0.333344 7.18663 0.48001 7.33329 0.666677 7.33329H2.00001C2.18668 7.33329 2.33334 7.18663 2.33334 6.99996C2.33334 6.81329 2.18668 6.66663 2.00001 6.66663H1.13334L2.25334 5.35996C2.30668 5.29996 2.33334 5.21996 2.33334 5.14663V4.99996C2.33334 4.81329 2.18668 4.66663 2.00001 4.66663Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c49670e5176..bdae9ea3ae5 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -25,6 +25,7 @@ import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-ico
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
 import { Icon as BulletListIcon } from "../../../../../../res/img/element-icons/room/composer/bullet_list.svg";
+import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -112,11 +113,17 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
-                isActive={actionStates.orderedList === "reversed"}
+                isActive={actionStates.unorderedList === "reversed"}
                 label={_td("Bullet list")}
                 onClick={() => composer.unorderedList()}
                 icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                isActive={actionStates.orderedList === "reversed"}
+                label={_td("Numbered list")}
+                onClick={() => composer.orderedList()}
+                icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 isActive={actionStates.inlineCode === "reversed"}
                 label={_td("Code")}

From 20864e8857fd058184c75411e6c7ce9deadf3363 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 14:32:13 +0000
Subject: [PATCH 09/29] hide end of model linebreak, separate out ul styling

---
 .../rooms/wysiwyg_composer/components/_Editor.pcss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 67589e29abf..ef78a3a10c6 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 .mx_WysiwygComposer_Editor_container {
-    line-height: 2.2rem;
-
     @keyframes visualbell {
         from {
             background-color: $visual-bell-bg-color;
@@ -27,6 +25,7 @@ limitations under the License.
     }
 
     .mx_WysiwygComposer_Editor_content {
+        line-height: $font-22px; // copied from .mx_EventTile variable
         white-space: pre-wrap;
         word-wrap: break-word;
         outline: none;
@@ -42,8 +41,17 @@ limitations under the License.
         ol {
             margin-top: 0;
             margin-bottom: 0;
+            padding-inline-start: $spacing-28;
+        }
+
+        ul {
             list-style-type: circle;
-            padding-inline-start: 28px;
+        }
+
+        // model output always includes a linebreak but we do not want the user
+        // to see it when writing input
+        br:last-child {
+            display: none;
         }
     }
 

From 2f474fa81ba04af1b0352d208196fef0bcd98efd Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 16:00:22 +0000
Subject: [PATCH 10/29] Change copy bullet => bulleted

---
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index bdae9ea3ae5..43ff110f9a2 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -114,7 +114,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             />
             <Button
                 isActive={actionStates.unorderedList === "reversed"}
-                label={_td("Bullet list")}
+                label={_td("Bulleted list")}
                 onClick={() => composer.unorderedList()}
                 icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}
             />

From cbbdce7bee4c5fd4106d89a48f2c3f787bdf945a Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 6 Jan 2023 16:00:31 +0000
Subject: [PATCH 11/29] expand tests to include new buttons

---
 .../components/FormattingButtons-test.tsx              | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index a467aa404e7..3dca4bae24f 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -30,6 +30,8 @@ describe("FormattingButtons", () => {
         strikeThrough: jest.fn(),
         inlineCode: jest.fn(),
         link: jest.fn(),
+        orderedList: jest.fn(),
+        unorderedList: jest.fn(),
     } as unknown as FormattingFunctions;
 
     const actionStates = {
@@ -39,6 +41,8 @@ describe("FormattingButtons", () => {
         strikeThrough: "enabled",
         inlineCode: "enabled",
         link: "enabled",
+        orderedList: "enabled",
+        unorderedList: "enabled",
     } as AllActionStates;
 
     afterEach(() => {
@@ -56,6 +60,8 @@ describe("FormattingButtons", () => {
         expect(screen.getByLabelText("Strikethrough")).not.toHaveClass("mx_FormattingButtons_active");
         expect(screen.getByLabelText("Code")).not.toHaveClass("mx_FormattingButtons_active");
         expect(screen.getByLabelText("Link")).not.toHaveClass("mx_FormattingButtons_active");
+        expect(screen.getByLabelText("Bulleted list")).not.toHaveClass("mx_FormattingButtons_active");
+        expect(screen.getByLabelText("Numbered list")).not.toHaveClass("mx_FormattingButtons_active");
     });
 
     it("Should call wysiwyg function on button click", () => {
@@ -68,6 +74,8 @@ describe("FormattingButtons", () => {
         screen.getByLabelText("Strikethrough").click();
         screen.getByLabelText("Code").click();
         screen.getByLabelText("Link").click();
+        screen.getByLabelText("Bulleted list").click();
+        screen.getByLabelText("Numbered list").click();
 
         // Then
         expect(wysiwyg.bold).toHaveBeenCalledTimes(1);
@@ -75,6 +83,8 @@ describe("FormattingButtons", () => {
         expect(wysiwyg.underline).toHaveBeenCalledTimes(1);
         expect(wysiwyg.strikeThrough).toHaveBeenCalledTimes(1);
         expect(wysiwyg.inlineCode).toHaveBeenCalledTimes(1);
+        expect(wysiwyg.orderedList).toHaveBeenCalledTimes(1);
+        expect(wysiwyg.unorderedList).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledTimes(1);
     });
 

From 4e9d486216cf4d6ec6d1e0472182d6ff7e2a89a6 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 13:34:36 +0000
Subject: [PATCH 12/29] reformat tests, wip single failing refactored test

---
 .../components/FormattingButtons-test.tsx     | 176 ++++++++++++------
 1 file changed, 116 insertions(+), 60 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index 3dca4bae24f..826aca0871f 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -22,52 +22,100 @@ import { AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg
 import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
 
-describe("FormattingButtons", () => {
-    const wysiwyg = {
-        bold: jest.fn(),
-        italic: jest.fn(),
-        underline: jest.fn(),
-        strikeThrough: jest.fn(),
-        inlineCode: jest.fn(),
-        link: jest.fn(),
-        orderedList: jest.fn(),
-        unorderedList: jest.fn(),
-    } as unknown as FormattingFunctions;
-
-    const actionStates = {
-        bold: "reversed",
-        italic: "reversed",
-        underline: "enabled",
-        strikeThrough: "enabled",
-        inlineCode: "enabled",
-        link: "enabled",
-        orderedList: "enabled",
-        unorderedList: "enabled",
-    } as AllActionStates;
+const mockWysiwyg = {
+    bold: jest.fn(),
+    italic: jest.fn(),
+    underline: jest.fn(),
+    strikeThrough: jest.fn(),
+    inlineCode: jest.fn(),
+    link: jest.fn(),
+    orderedList: jest.fn(),
+    unorderedList: jest.fn(),
+} as unknown as FormattingFunctions;
+
+const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
+
+const testCases = {
+    bold: { label: "Bold", formatFunction: mockWysiwyg.bold },
+    italic: { label: "Italic", formatFunction: mockWysiwyg.italic },
+    underline: { label: "Underline", formatFunction: mockWysiwyg.underline },
+    strikeThrough: { label: "Strikethrough", formatFunction: mockWysiwyg.strikeThrough },
+    inlineCode: { label: "Code", formatFunction: mockWysiwyg.inlineCode },
+    link: { label: "Link", formatFunction: openLinkModalSpy },
+    orderedList: { label: "Bulleted list", formatFunction: mockWysiwyg.orderedList },
+    unorderedList: { label: "Numbered list", formatFunction: mockWysiwyg.unorderedList },
+};
+
+const createActionStates = (state: string): AllActionStates => {
+    return Object.fromEntries(Object.keys(testCases).map((testKey) => [testKey, state])) as AllActionStates;
+};
+
+const defaultActionStates = createActionStates("enabled");
+
+const actionStates = {
+    bold: "reversed",
+    italic: "reversed",
+    underline: "enabled",
+    strikeThrough: "enabled",
+    inlineCode: "enabled",
+    link: "enabled",
+    orderedList: "enabled",
+    unorderedList: "enabled",
+} as AllActionStates;
+
+const renderComponent = (props = {}) => {
+    return render(<FormattingButtons composer={mockWysiwyg} actionStates={defaultActionStates} {...props} />);
+};
+
+const classes = {
+    active: "mx_FormattingButtons_active",
+    hover: "mx_FormattingButtons_Button_hover",
+};
 
+describe("FormattingButtons", () => {
     afterEach(() => {
         jest.resetAllMocks();
     });
 
-    it("Should have the correspond CSS classes", () => {
-        // When
-        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
+    it("Each button should not have active class when enabled", () => {
+        renderComponent();
 
-        // Then
-        expect(screen.getByLabelText("Bold")).toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Italic")).toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Underline")).not.toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Strikethrough")).not.toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Code")).not.toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Link")).not.toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Bulleted list")).not.toHaveClass("mx_FormattingButtons_active");
-        expect(screen.getByLabelText("Numbered list")).not.toHaveClass("mx_FormattingButtons_active");
+        Object.values(testCases).forEach(({ label }) => {
+            expect(screen.getByLabelText(label)).not.toHaveClass(classes.active);
+        });
     });
 
+    it("Each button should have active class when reversed", () => {
+        const reversedActionStates = createActionStates("reversed");
+        renderComponent({ actionStates: reversedActionStates });
+
+        Object.values(testCases).forEach(({ label }) => {
+            expect(screen.getByLabelText(label)).toHaveClass(classes.active);
+        });
+    });
+
+    // it("Should call wysiwyg function on button click", () => {
+    //     renderComponent();
+
+    //     // Object.values(omit(testCases, ["orderedList", "unorderedList"])).forEach(({ label, formatFunction }) => {
+    //     //     screen.getByLabelText(label).click();
+    //     //     expect(formatFunction).toHaveBeenCalledTimes(1);
+    //     // });
+    //     const thing1 = screen.getByLabelText("Bold");
+    //     thing1.click();
+    //     expect(mockWysiwyg.bold).toHaveBeenCalledTimes(1);
+    //     const thing2 = screen.getByLabelText("Numbered list");
+    //     thing2.click();
+    //     thing2.click();
+    //     screen.debug();
+    //     expect(mockWysiwyg.unorderedList).toHaveBeenCalledTimes(1);
+    // });
+
+    // for some reason the above does not work despite looking identical...
     it("Should call wysiwyg function on button click", () => {
         // When
         const spy = jest.spyOn(LinkModal, "openLinkModal");
-        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
+        render(<FormattingButtons composer={mockWysiwyg} actionStates={actionStates} />);
         screen.getByLabelText("Bold").click();
         screen.getByLabelText("Italic").click();
         screen.getByLabelText("Underline").click();
@@ -78,39 +126,47 @@ describe("FormattingButtons", () => {
         screen.getByLabelText("Numbered list").click();
 
         // Then
-        expect(wysiwyg.bold).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.italic).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.underline).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.strikeThrough).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.inlineCode).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.orderedList).toHaveBeenCalledTimes(1);
-        expect(wysiwyg.unorderedList).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.bold).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.italic).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.underline).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.strikeThrough).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.inlineCode).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.orderedList).toHaveBeenCalledTimes(1);
+        expect(mockWysiwyg.unorderedList).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledTimes(1);
     });
 
-    it("Should display the tooltip on mouse over", async () => {
-        // When
-        const user = userEvent.setup();
-        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
-        await user.hover(screen.getByLabelText("Bold"));
+    it("Each button should display the tooltip on mouse over", async () => {
+        renderComponent();
 
-        // Then
-        expect(await screen.findByText("Bold")).toBeTruthy();
+        for (const testKey in testCases) {
+            const { label } = testCases[testKey];
+
+            await userEvent.hover(screen.getByLabelText(label));
+            expect(await screen.findByText(label)).toBeTruthy();
+        }
     });
 
-    it("Should not have hover style when active", async () => {
-        // When
-        const user = userEvent.setup();
-        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
-        await user.hover(screen.getByLabelText("Bold"));
+    it("Each button should have hover style when hovered and enabled", async () => {
+        renderComponent();
 
-        // Then
-        expect(screen.getByLabelText("Bold")).not.toHaveClass("mx_FormattingButtons_Button_hover");
+        for (const testKey in testCases) {
+            const { label } = testCases[testKey];
 
-        // When
-        await user.hover(screen.getByLabelText("Underline"));
+            await userEvent.hover(screen.getByLabelText(label));
+            expect(await screen.findByLabelText(label)).toHaveClass("mx_FormattingButtons_Button_hover");
+        }
+    });
 
-        // Then
-        expect(screen.getByLabelText("Underline")).toHaveClass("mx_FormattingButtons_Button_hover");
+    it("Each button should not have hover style when hovered and reversed", async () => {
+        const reversedActionStates = createActionStates("reversed");
+        renderComponent({ actionStates: reversedActionStates });
+
+        for (const testKey in testCases) {
+            const { label } = testCases[testKey];
+
+            await userEvent.hover(screen.getByLabelText(label));
+            expect(await screen.findByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");
+        }
     });
 });

From 135d82c2b8bf6afb63ccc79c3d083b5685d3bb2e Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 14:01:29 +0000
Subject: [PATCH 13/29] rewrite final test

---
 .../components/FormattingButtons-test.tsx     | 76 +++++--------------
 1 file changed, 17 insertions(+), 59 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index 826aca0871f..f42d2fee0ac 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -36,14 +36,14 @@ const mockWysiwyg = {
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
 
 const testCases = {
-    bold: { label: "Bold", formatFunction: mockWysiwyg.bold },
-    italic: { label: "Italic", formatFunction: mockWysiwyg.italic },
-    underline: { label: "Underline", formatFunction: mockWysiwyg.underline },
-    strikeThrough: { label: "Strikethrough", formatFunction: mockWysiwyg.strikeThrough },
-    inlineCode: { label: "Code", formatFunction: mockWysiwyg.inlineCode },
-    link: { label: "Link", formatFunction: openLinkModalSpy },
-    orderedList: { label: "Bulleted list", formatFunction: mockWysiwyg.orderedList },
-    unorderedList: { label: "Numbered list", formatFunction: mockWysiwyg.unorderedList },
+    bold: { label: "Bold", mockFormatFn: mockWysiwyg.bold },
+    italic: { label: "Italic", mockFormatFn: mockWysiwyg.italic },
+    underline: { label: "Underline", mockFormatFn: mockWysiwyg.underline },
+    strikeThrough: { label: "Strikethrough", mockFormatFn: mockWysiwyg.strikeThrough },
+    inlineCode: { label: "Code", mockFormatFn: mockWysiwyg.inlineCode },
+    link: { label: "Link", mockFormatFn: openLinkModalSpy },
+    orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
+    unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
 };
 
 const createActionStates = (state: string): AllActionStates => {
@@ -52,17 +52,6 @@ const createActionStates = (state: string): AllActionStates => {
 
 const defaultActionStates = createActionStates("enabled");
 
-const actionStates = {
-    bold: "reversed",
-    italic: "reversed",
-    underline: "enabled",
-    strikeThrough: "enabled",
-    inlineCode: "enabled",
-    link: "enabled",
-    orderedList: "enabled",
-    unorderedList: "enabled",
-} as AllActionStates;
-
 const renderComponent = (props = {}) => {
     return render(<FormattingButtons composer={mockWysiwyg} actionStates={defaultActionStates} {...props} />);
 };
@@ -94,46 +83,15 @@ describe("FormattingButtons", () => {
         });
     });
 
-    // it("Should call wysiwyg function on button click", () => {
-    //     renderComponent();
-
-    //     // Object.values(omit(testCases, ["orderedList", "unorderedList"])).forEach(({ label, formatFunction }) => {
-    //     //     screen.getByLabelText(label).click();
-    //     //     expect(formatFunction).toHaveBeenCalledTimes(1);
-    //     // });
-    //     const thing1 = screen.getByLabelText("Bold");
-    //     thing1.click();
-    //     expect(mockWysiwyg.bold).toHaveBeenCalledTimes(1);
-    //     const thing2 = screen.getByLabelText("Numbered list");
-    //     thing2.click();
-    //     thing2.click();
-    //     screen.debug();
-    //     expect(mockWysiwyg.unorderedList).toHaveBeenCalledTimes(1);
-    // });
-
-    // for some reason the above does not work despite looking identical...
-    it("Should call wysiwyg function on button click", () => {
-        // When
-        const spy = jest.spyOn(LinkModal, "openLinkModal");
-        render(<FormattingButtons composer={mockWysiwyg} actionStates={actionStates} />);
-        screen.getByLabelText("Bold").click();
-        screen.getByLabelText("Italic").click();
-        screen.getByLabelText("Underline").click();
-        screen.getByLabelText("Strikethrough").click();
-        screen.getByLabelText("Code").click();
-        screen.getByLabelText("Link").click();
-        screen.getByLabelText("Bulleted list").click();
-        screen.getByLabelText("Numbered list").click();
-
-        // Then
-        expect(mockWysiwyg.bold).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.italic).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.underline).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.strikeThrough).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.inlineCode).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.orderedList).toHaveBeenCalledTimes(1);
-        expect(mockWysiwyg.unorderedList).toHaveBeenCalledTimes(1);
-        expect(spy).toHaveBeenCalledTimes(1);
+    it("Should call wysiwyg function on button click", async () => {
+        renderComponent();
+
+        for (const testKey in testCases) {
+            const { label, mockFormatFn } = testCases[testKey];
+
+            screen.getByLabelText(label).click();
+            expect(mockFormatFn).toHaveBeenCalledTimes(1);
+        }
     });
 
     it("Each button should display the tooltip on mouse over", async () => {

From f4550d64cf95ee903cb85508949ff50aba4b5f8e Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 14:05:33 +0000
Subject: [PATCH 14/29] add i18n strings

---
 src/i18n/strings/en_EN.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cbefb01830b..586900bf265 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2137,6 +2137,8 @@
     "Underline": "Underline",
     "Code": "Code",
     "Link": "Link",
+    "Bulleted list": "Bulleted list",
+    "Numbered list": "Numbered list",
     "Create a link": "Create a link",
     "Text": "Text",
     "Message Actions": "Message Actions",

From 2641fde78b9c25bba7108e297ee6bddea08ef46f Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 14:27:20 +0000
Subject: [PATCH 15/29] fix no implicit any errors, neaten up types

---
 .../components/FormattingButtons-test.tsx     | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index f42d2fee0ac..7a87bf267d6 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
+import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 
 import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 import * as LinkModal from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
@@ -35,7 +35,10 @@ const mockWysiwyg = {
 
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
 
-const testCases = {
+const testCases: Record<
+    Exclude<ActionTypes, "undo" | "redo" | "clear">,
+    { label: string; mockFormatFn: jest.Func | jest.SpyInstance }
+> = {
     bold: { label: "Bold", mockFormatFn: mockWysiwyg.bold },
     italic: { label: "Italic", mockFormatFn: mockWysiwyg.italic },
     underline: { label: "Underline", mockFormatFn: mockWysiwyg.underline },
@@ -46,7 +49,7 @@ const testCases = {
     unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
 };
 
-const createActionStates = (state: string): AllActionStates => {
+const createActionStates = (state: ActionState): AllActionStates => {
     return Object.fromEntries(Object.keys(testCases).map((testKey) => [testKey, state])) as AllActionStates;
 };
 
@@ -78,7 +81,8 @@ describe("FormattingButtons", () => {
         const reversedActionStates = createActionStates("reversed");
         renderComponent({ actionStates: reversedActionStates });
 
-        Object.values(testCases).forEach(({ label }) => {
+        Object.values(testCases).forEach((testCase) => {
+            const { label } = testCase;
             expect(screen.getByLabelText(label)).toHaveClass(classes.active);
         });
     });
@@ -86,8 +90,8 @@ describe("FormattingButtons", () => {
     it("Should call wysiwyg function on button click", async () => {
         renderComponent();
 
-        for (const testKey in testCases) {
-            const { label, mockFormatFn } = testCases[testKey];
+        for (const testCase of Object.values(testCases)) {
+            const { label, mockFormatFn } = testCase;
 
             screen.getByLabelText(label).click();
             expect(mockFormatFn).toHaveBeenCalledTimes(1);
@@ -97,8 +101,8 @@ describe("FormattingButtons", () => {
     it("Each button should display the tooltip on mouse over", async () => {
         renderComponent();
 
-        for (const testKey in testCases) {
-            const { label } = testCases[testKey];
+        for (const testCase of Object.values(testCases)) {
+            const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
             expect(await screen.findByText(label)).toBeTruthy();
@@ -108,8 +112,8 @@ describe("FormattingButtons", () => {
     it("Each button should have hover style when hovered and enabled", async () => {
         renderComponent();
 
-        for (const testKey in testCases) {
-            const { label } = testCases[testKey];
+        for (const testCase of Object.values(testCases)) {
+            const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
             expect(await screen.findByLabelText(label)).toHaveClass("mx_FormattingButtons_Button_hover");
@@ -120,8 +124,8 @@ describe("FormattingButtons", () => {
         const reversedActionStates = createActionStates("reversed");
         renderComponent({ actionStates: reversedActionStates });
 
-        for (const testKey in testCases) {
-            const { label } = testCases[testKey];
+        for (const testCase of Object.values(testCases)) {
+            const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
             expect(await screen.findByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");

From 0d47acf93eeec6a976a348fe67689ce87ffb324c Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 14:57:17 +0000
Subject: [PATCH 16/29] use yarn i18n to generate file

---
 src/i18n/strings/en_EN.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 586900bf265..65bfab57343 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2135,10 +2135,10 @@
     "Stop recording": "Stop recording",
     "Italic": "Italic",
     "Underline": "Underline",
-    "Code": "Code",
-    "Link": "Link",
     "Bulleted list": "Bulleted list",
     "Numbered list": "Numbered list",
+    "Code": "Code",
+    "Link": "Link",
     "Create a link": "Create a link",
     "Text": "Text",
     "Message Actions": "Message Actions",

From e1926eb2ef689a0e12d39fcb648c55b7cf4939f6 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 16:07:15 +0000
Subject: [PATCH 17/29] rename to bulleted for consistency

---
 .../room/composer/{bullet_list.svg => bulleted_list.svg}      | 0
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx   | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename res/img/element-icons/room/composer/{bullet_list.svg => bulleted_list.svg} (100%)

diff --git a/res/img/element-icons/room/composer/bullet_list.svg b/res/img/element-icons/room/composer/bulleted_list.svg
similarity index 100%
rename from res/img/element-icons/room/composer/bullet_list.svg
rename to res/img/element-icons/room/composer/bulleted_list.svg
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 43ff110f9a2..c0cfe756f90 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -24,7 +24,7 @@ import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/r
 import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
-import { Icon as BulletListIcon } from "../../../../../../res/img/element-icons/room/composer/bullet_list.svg";
+import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bullet_list.svg";
 import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
@@ -116,7 +116,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 isActive={actionStates.unorderedList === "reversed"}
                 label={_td("Bulleted list")}
                 onClick={() => composer.unorderedList()}
-                icon={<BulletListIcon className="mx_FormattingButtons_Icon" />}
+                icon={<BulletedListIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 isActive={actionStates.orderedList === "reversed"}

From 10bff95c3a7b1d6b7f71d66a4cdbf97c9ed2b247 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 16:07:20 +0000
Subject: [PATCH 18/29] remove comment

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index ef78a3a10c6..a7deb15b951 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     }
 
     .mx_WysiwygComposer_Editor_content {
-        line-height: $font-22px; // copied from .mx_EventTile variable
+        line-height: $font-22px;
         white-space: pre-wrap;
         word-wrap: break-word;
         outline: none;

From ce7d478428de94dda976d67a679ca425d9b043c7 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 16:07:31 +0000
Subject: [PATCH 19/29] remove unnecessary awaits

---
 .../wysiwyg_composer/components/FormattingButtons-test.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index 7a87bf267d6..012090d5d89 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -116,7 +116,7 @@ describe("FormattingButtons", () => {
             const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
-            expect(await screen.findByLabelText(label)).toHaveClass("mx_FormattingButtons_Button_hover");
+            expect(screen.getByLabelText(label)).toHaveClass("mx_FormattingButtons_Button_hover");
         }
     });
 
@@ -128,7 +128,7 @@ describe("FormattingButtons", () => {
             const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
-            expect(await screen.findByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");
+            expect(screen.getByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");
         }
     });
 });

From 186d69e4f61a7fde6cf5724f22b3c20366232179 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 10 Jan 2023 17:43:36 +0000
Subject: [PATCH 20/29] update import path

---
 .../rooms/wysiwyg_composer/components/FormattingButtons.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c0cfe756f90..864a8077717 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -24,7 +24,7 @@ import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/r
 import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
-import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bullet_list.svg";
+import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg";
 import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";

From 98dd6e67abaae11e1cc30d4e6df4225d3b04055c Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Wed, 11 Jan 2023 09:49:03 +0000
Subject: [PATCH 21/29] make display: none only target last child of container

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index a7deb15b951..b164bf2b240 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -50,7 +50,7 @@ limitations under the License.
 
         // model output always includes a linebreak but we do not want the user
         // to see it when writing input
-        br:last-child {
+        > br:last-child {
             display: none;
         }
     }

From 7421d6984e6a5ae05eef4b3947cd3528db7ba611 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Wed, 11 Jan 2023 10:23:50 +0000
Subject: [PATCH 22/29] amend CSS selector

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index b164bf2b240..37df662c20f 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -49,8 +49,9 @@ limitations under the License.
         }
 
         // model output always includes a linebreak but we do not want the user
-        // to see it when writing input
-        > br:last-child {
+        // to see it when writing input in lists
+        ul + br:last-of-type,
+        ol + br:last-of-type {
             display: none;
         }
     }

From 421f80505117a52a5f3b8fd5238ddb9f0139c870 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Wed, 11 Jan 2023 14:55:32 +0000
Subject: [PATCH 23/29] use :is instead of repeating selectors

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 37df662c20f..e63216211de 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -50,8 +50,7 @@ limitations under the License.
 
         // model output always includes a linebreak but we do not want the user
         // to see it when writing input in lists
-        ul + br:last-of-type,
-        ol + br:last-of-type {
+        :is(ol, ul) + br:last-of-type {
             display: none;
         }
     }

From b2400f5e7c37d6b9146d8ebaf10960279208fd72 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 12 Jan 2023 11:58:30 +0000
Subject: [PATCH 24/29] fix rounding issue for composer input

---
 .../views/rooms/wysiwyg_composer/components/Editor.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
index 215d3be84fb..43e46572d67 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
@@ -20,7 +20,7 @@ import React, { CSSProperties, forwardRef, memo, MutableRefObject, ReactNode } f
 import { useIsExpanded } from "../hooks/useIsExpanded";
 import { useSelection } from "../hooks/useSelection";
 
-const HEIGHT_BREAKING_POINT = 20;
+const HEIGHT_BREAKING_POINT = 24;
 
 interface EditorProps {
     disabled: boolean;

From ee7ffa00eeaffc4b3197ad564ab010fcdd082438 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 12 Jan 2023 12:08:39 +0000
Subject: [PATCH 25/29] make timeline and composer use discs, not circles

---
 res/css/views/rooms/_EventTile.pcss                          | 4 ++++
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index c7e857fc9cb..a1e915ba286 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -619,6 +619,10 @@ $left-gutter: 64px;
         ul ol {
             list-style-type: revert;
         }
+
+        > ul {
+            list-style-type: disc;
+        }
     }
 }
 
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index e63216211de..7ff3f11a500 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -44,10 +44,6 @@ limitations under the License.
             padding-inline-start: $spacing-28;
         }
 
-        ul {
-            list-style-type: circle;
-        }
-
         // model output always includes a linebreak but we do not want the user
         // to see it when writing input in lists
         :is(ol, ul) + br:last-of-type {

From e9962d0189f59f49a116af05e7430d21737fa90b Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 12 Jan 2023 13:47:07 +0000
Subject: [PATCH 26/29] fix shift enter not working

---
 .../rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
index a94a8db9e99..75c8caa1ed9 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
@@ -29,7 +29,10 @@ export function useInputEventProcessor(onSend: () => void) {
 
             const isKeyboardEvent = event instanceof KeyboardEvent;
             const isEnterPress =
-                !isCtrlEnter && (isKeyboardEvent ? event.key === "Enter" : event.inputType === "insertParagraph");
+                !isCtrlEnter &&
+                (isKeyboardEvent
+                    ? event.key === "Enter" && event.shiftKey === false
+                    : event.inputType === "insertParagraph");
             // sendMessage is sent when ctrl+enter is pressed
             const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
 

From a634d4d8bfff74f51d1b9d27147c86b630f28ee1 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 12 Jan 2023 15:24:32 +0000
Subject: [PATCH 27/29] use ! instead of === false

---
 .../rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
index 100da15b101..0cd86dcf31e 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
@@ -30,9 +30,7 @@ export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent
             const isKeyboardEvent = event instanceof KeyboardEvent;
             const isEnterPress =
                 !isCtrlEnter &&
-                (isKeyboardEvent
-                    ? event.key === "Enter" && event.shiftKey === false
-                    : event.inputType === "insertParagraph");
+                (isKeyboardEvent ? event.key === "Enter" && !event.shiftKey : event.inputType === "insertParagraph");
             // sendMessage is sent when ctrl+enter is pressed
             const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
 

From db0bf64e4bd723357b029fcb989acd68c9f8e353 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 12 Jan 2023 17:05:26 +0000
Subject: [PATCH 28/29] revert regression fix

---
 .../rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
index 0cd86dcf31e..fb36bbf2d16 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
@@ -29,8 +29,7 @@ export function useInputEventProcessor(onSend: () => void): (event: WysiwygEvent
 
             const isKeyboardEvent = event instanceof KeyboardEvent;
             const isEnterPress =
-                !isCtrlEnter &&
-                (isKeyboardEvent ? event.key === "Enter" && !event.shiftKey : event.inputType === "insertParagraph");
+                !isCtrlEnter && (isKeyboardEvent ? event.key === "Enter" : event.inputType === "insertParagraph");
             // sendMessage is sent when ctrl+enter is pressed
             const isSendMessage = !isKeyboardEvent && event.inputType === "sendMessage";
 

From bc5e6ef08789e6fd54e402220ecaae9556fd6b4b Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Fri, 13 Jan 2023 10:00:58 +0000
Subject: [PATCH 29/29] Amend consecutive list display in timeline

---
 res/css/views/rooms/_EventTile.pcss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index a1e915ba286..57bf2ce3c88 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -620,9 +620,16 @@ $left-gutter: 64px;
             list-style-type: revert;
         }
 
+        /* Make list type disc to match rich text editor */
         > ul {
             list-style-type: disc;
         }
+
+        /* Remove top and bottom margin for better consecutive list display */
+        > :is(ol, ul) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }