Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add code blocks to rich text editor #9921

Merged
merged 12 commits into from
Jan 19, 2023
6 changes: 5 additions & 1 deletion res/css/views/rooms/_EventTile.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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 *) {
Expand Down Expand Up @@ -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 */

Expand Down Expand Up @@ -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) */
Expand Down
15 changes: 14 additions & 1 deletion res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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: $system;
border: 1px solid $quinary-content;
border-radius: 2px;
}

code {
font-family: $monospace-font-family !important;
background-color: $inlinecode-background-color;
Expand Down
3 changes: 3 additions & 0 deletions res/img/element-icons/room/composer/code_block.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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 },
Expand Down