From a63da74f06c923117465666f41f4cbf820c2af3c Mon Sep 17 00:00:00 2001 From: alunturner <56027671+alunturner@users.noreply.github.com> Date: Thu, 19 Jan 2023 15:49:21 +0000 Subject: [PATCH] Add code blocks to rich text editor (#9921) * Applies small changes to code block display in timeline * Makes the composer code block look like the timeline display, but without line numbers * Adds a button to allow code blocks to be implemented * Adds tests for the new button --- res/css/views/rooms/_EventTile.pcss | 6 +++++- .../wysiwyg_composer/components/_Editor.pcss | 15 ++++++++++++++- .../element-icons/room/composer/code_block.svg | 3 +++ .../components/FormattingButtons.tsx | 7 +++++++ .../components/FormattingButtons-test.tsx | 4 +++- 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 res/img/element-icons/room/composer/code_block.svg diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 9fa9ace107..5d55e8bf34 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:not(pre *) { @@ -578,6 +578,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 */ @@ -756,6 +758,8 @@ $left-gutter: 64px; .mx_EventTile_collapsedCodeBlock { max-height: 30vh; + padding-top: $spacing-12; + padding-bottom: $spacing-12; } /* Inserted adjacent to 
 blocks, (See TextualBody) */
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index dcebf80a24..21db71a774 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -46,10 +46,23 @@ 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: $inlinecode-background-color;
+            border: 1px solid $inlinecode-border-color;
+            border-radius: 2px;
+        }
+
         code {
             font-family: $monospace-font-family !important;
             background-color: $inlinecode-background-color;
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 0000000000..dd0be2aefc
--- /dev/null
+++ b/res/img/element-icons/room/composer/code_block.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 11c797d646..c80857b9f1 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";
@@ -132,6 +133,12 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 onClick={() => composer.inlineCode()}
                 icon={}
             />
+