From b06a6899a4f8ad2c7734dbfb421d1f061e4ad5fe Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:17:44 +0000
Subject: [PATCH 1/9] add new button svg

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

diff --git a/res/img/element-icons/room/composer/code_block.svg b/res/img/element-icons/room/composer/code_block.svg
new file mode 100644
index 00000000000..dd0be2aefc6
--- /dev/null
+++ b/res/img/element-icons/room/composer/code_block.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.14288 6.99997L5.47622 5.66663C5.5905 5.55235 5.64765 5.41266 5.64765 5.24758C5.64765 5.0825 5.5905 4.94282 5.47622 4.82854C5.36193 4.71425 5.22225 4.65711 5.05717 4.65711C4.89209 4.65711 4.75241 4.71425 4.63812 4.82854L2.86669 6.59997C2.8032 6.66346 2.75876 6.72695 2.73336 6.79044C2.70796 6.85393 2.69526 6.92377 2.69526 6.99997C2.69526 7.07616 2.70796 7.146 2.73336 7.20949C2.75876 7.27298 2.8032 7.33647 2.86669 7.39996L4.65717 9.19044C4.77145 9.30473 4.91114 9.36187 5.07622 9.36187C5.2413 9.36187 5.38098 9.30473 5.49526 9.19044C5.60955 9.07616 5.66669 8.93647 5.66669 8.77139C5.66669 8.60631 5.60955 8.46663 5.49526 8.35235L4.14288 6.99997ZM9.85717 6.99997L8.50479 8.35235C8.3905 8.46663 8.33336 8.60631 8.33336 8.77139C8.33336 8.93647 8.3905 9.07616 8.50479 9.19044C8.61907 9.30473 8.75876 9.36187 8.92384 9.36187C9.08891 9.36187 9.2286 9.30473 9.34288 9.19044L11.1334 7.39996C11.1969 7.33647 11.2413 7.27298 11.2667 7.20949C11.2921 7.146 11.3048 7.07616 11.3048 6.99997C11.3048 6.92377 11.2921 6.85393 11.2667 6.79044C11.2413 6.72695 11.1969 6.66346 11.1334 6.59997L9.34288 4.80949C9.29209 4.746 9.2286 4.70155 9.15241 4.67616C9.07622 4.65076 9.00003 4.63806 8.92384 4.63806C8.84765 4.63806 8.77463 4.65076 8.70479 4.67616C8.63495 4.70155 8.56828 4.746 8.50479 4.80949C8.3905 4.92377 8.33336 5.06346 8.33336 5.22854C8.33336 5.39362 8.3905 5.5333 8.50479 5.64758L9.85717 6.99997ZM1.28574 13.8571C0.980979 13.8571 0.714312 13.7428 0.48574 13.5143C0.257169 13.2857 0.142883 13.019 0.142883 12.7143V1.28568C0.142883 0.980918 0.257169 0.714251 0.48574 0.485679C0.714312 0.257108 0.980979 0.142822 1.28574 0.142822H12.7143C13.0191 0.142822 13.2857 0.257108 13.5143 0.485679C13.7429 0.714251 13.8572 0.980918 13.8572 1.28568V12.7143C13.8572 13.019 13.7429 13.2857 13.5143 13.5143C13.2857 13.7428 13.0191 13.8571 12.7143 13.8571H1.28574ZM1.28574 12.7143H12.7143V1.28568H1.28574V12.7143Z" fill="currentColor"/>
+</svg>

From db5c06229a77dd14f5a42c7f81f22f543a519173 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:17:56 +0000
Subject: [PATCH 2/9] add new button

---
 .../wysiwyg_composer/components/FormattingButtons.tsx    | 9 ++++++++-
 1 file changed, 8 insertions(+), 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 7c1601b4416..6a9b81f4f1c 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -26,6 +26,7 @@ import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.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 { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -125,11 +126,17 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             />
             <Button
                 isActive={actionStates.inlineCode === "reversed"}
-                label={_td("Code")}
+                label={_td("Inline code")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                isActive={actionStates.codeBlock === "reversed"}
+                label={_td("Code block")}
+                onClick={() => composer.codeBlock()}
+                icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 isActive={actionStates.link === "reversed"}
                 label={_td("Link")}

From bfb6e41bacbfc28dd3168d647d1c5d58af3c6f32 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:18:33 +0000
Subject: [PATCH 3/9] format code block in the composer

---
 .../wysiwyg_composer/components/_Editor.pcss      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 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 7ff3f11a500..0d491867665 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -46,9 +46,22 @@ 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
-        :is(ol, ul) + br:last-of-type {
+        :is(ol, ul, pre) + br:last-of-type {
             display: none;
         }
+
+        > pre {
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            margin-top: 0;
+            margin-bottom: 0;
+            padding: $spacing-8 $spacing-12;
+
+            background-color: $system;
+            border: 1px solid $quinary-content;
+            border-radius: 2px;
+        }
     }
 
     .mx_WysiwygComposer_Editor_content_placeholder::before {

From b430d60ca3ddf01677693515cada3f3d875dae97 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:18:52 +0000
Subject: [PATCH 4/9] format code block in the timeline

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

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 3beaeacf72f..f3087a00e4e 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -548,7 +548,7 @@ $left-gutter: 64px;
         pre,
         code {
             font-family: $monospace-font-family !important;
-            background-color: $codeblock-background-color;
+            background-color: $system;
         }
 
         code {
@@ -566,6 +566,8 @@ $left-gutter: 64px;
                 background: transparent;
             }
 
+            border: 1px solid $quinary-content;
+
             code {
                 white-space: pre; /* we want code blocks to be scrollable and not wrap */
 

From 3ae9af0b33243ba3cec77176e932831b70c1c0e5 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:36:07 +0000
Subject: [PATCH 5/9] amend copy

---
 .../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 6a9b81f4f1c..667dfbe0a84 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -126,7 +126,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             />
             <Button
                 isActive={actionStates.inlineCode === "reversed"}
-                label={_td("Inline code")}
+                label={_td("Code")}
                 keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}

From ec5bca80ec59a9b04a05b9daf8430116a306030d Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 17 Jan 2023 13:36:17 +0000
Subject: [PATCH 6/9] expand test for new button

---
 .../wysiwyg_composer/components/FormattingButtons-test.tsx      | 2 ++
 1 file changed, 2 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 012090d5d89..34b12a941d5 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -28,6 +28,7 @@ const mockWysiwyg = {
     underline: jest.fn(),
     strikeThrough: jest.fn(),
     inlineCode: jest.fn(),
+    codeBlock: jest.fn(),
     link: jest.fn(),
     orderedList: jest.fn(),
     unorderedList: jest.fn(),
@@ -44,6 +45,7 @@ const testCases: Record<
     underline: { label: "Underline", mockFormatFn: mockWysiwyg.underline },
     strikeThrough: { label: "Strikethrough", mockFormatFn: mockWysiwyg.strikeThrough },
     inlineCode: { label: "Code", mockFormatFn: mockWysiwyg.inlineCode },
+    codeBlock: { label: "Code block", mockFormatFn: mockWysiwyg.inlineCode },
     link: { label: "Link", mockFormatFn: openLinkModalSpy },
     orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
     unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },

From a233827eedd2f36fe1a936140613d51b35255a3d Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Wed, 18 Jan 2023 09:39:05 +0000
Subject: [PATCH 7/9] tweak codeblock padding in timeline

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

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index f3087a00e4e..239e82d6c31 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -746,6 +746,8 @@ $left-gutter: 64px;
 
         .mx_EventTile_collapsedCodeBlock {
             max-height: 30vh;
+            padding-top: $spacing-12;
+            padding-bottom: $spacing-12;
         }
 
         /* Inserted adjacent to <pre> blocks, (See TextualBody) */

From 3630c8e91609c014385e87663caaf8a7a8d38f16 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 19 Jan 2023 13:11:17 +0000
Subject: [PATCH 8/9] fix TS error

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

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 9865e688aee..adee606ac51 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -37,7 +37,7 @@ const mockWysiwyg = {
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
 
 const testCases: Record<
-    Exclude<ActionTypes, "undo" | "redo" | "clear" | "codeBlock">,
+    Exclude<ActionTypes, "undo" | "redo" | "clear">,
     { label: string; mockFormatFn: jest.Func | jest.SpyInstance }
 > = {
     bold: { label: "Bold", mockFormatFn: mockWysiwyg.bold },

From ff90aa6cba2f46b23a3cd26c3dee1b8c062178ee Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Thu, 19 Jan 2023 14:20:20 +0000
Subject: [PATCH 9/9] use new colour variables

---
 res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 4 ++--
 1 file changed, 2 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 b32bf8d5bc1..21db71a774b 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -58,8 +58,8 @@ limitations under the License.
             margin-bottom: 0;
             padding: $spacing-8 $spacing-12;
 
-            background-color: $system;
-            border: 1px solid $quinary-content;
+            background-color: $inlinecode-background-color;
+            border: 1px solid $inlinecode-border-color;
             border-radius: 2px;
         }