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
matrix-org · Jan 19, 2023 · a63da74 · a63da74
1 parent 422802e
commit a63da74
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git 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 <pre> 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
@@ -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
diff --git 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={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                actionState={actionStates.codeBlock}
+                label={_td("Code block")}
+                onClick={() => composer.codeBlock()}
+                icon={<CodeBlockIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 actionState={actionStates.link}
                 label={_td("Link")}

diff --git 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(),
@@ -36,14 +37,15 @@ 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 },
     italic: { label: "Italic", mockFormatFn: mockWysiwyg.italic },
     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 },