Add inline code to rich text editor (#9720)

Add inline code to rich text editor

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -92,6 +92,10 @@ limitations under the License.
     .mx_FormattingButtons_Button_strikethrough::before {
         mask-image: url('$(res)/img/element-icons/room/composer/strikethrough.svg');
     }
+
+    .mx_FormattingButtons_Button_inline_code::before {
+        mask-image: url('$(res)/img/element-icons/room/composer/inline_code.svg');
+    }
 }
 
 .mx_FormattingButtons_Tooltip {

res/img/element-icons/room/composer/inline_code.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.97188 3.74903C10.0777 3.39637 9.87755 3.02471 9.52489 2.91892C9.17223 2.81312 8.80058 3.01324 8.69478 3.3659L6.02811 12.2548C5.92231 12.6075 6.12243 12.9791 6.4751 13.0849C6.82776 13.1907 7.19941 12.9906 7.30521 12.6379L9.97188 3.74903Z" fill="#8D97A5"/>
+<path d="M3.98237 4.82315C3.69951 4.58744 3.27914 4.62566 3.04343 4.90851L0.821206 7.57518C0.615181 7.82241 0.615181 8.18153 0.821206 8.42876L3.04343 11.0954C3.27914 11.3783 3.69951 11.4165 3.98237 11.1808C4.26522 10.9451 4.30343 10.5247 4.06772 10.2418L2.20116 8.00197L4.06772 5.76209C4.30343 5.47924 4.26522 5.05886 3.98237 4.82315Z" fill="#8D97A5"/>
+<path d="M12.0177 4.82315C12.3005 4.58744 12.7209 4.62566 12.9566 4.90851L15.1788 7.57518C15.3849 7.82241 15.3849 8.18153 15.1788 8.42876L12.9566 11.0954C12.7209 11.3783 12.3005 11.4165 12.0177 11.1808C11.7348 10.9451 11.6966 10.5247 11.9323 10.2418L13.7989 8.00197L11.9323 5.76209C11.6966 5.47924 11.7348 5.05886 12.0177 4.82315Z" fill="#8D97A5"/>
+</svg>

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -23,6 +23,7 @@ import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
 import { KeyCombo } from "../../../../../KeyBindingsManager";
 import { _td } from "../../../../../languageHandler";
+import { ButtonEvent } from "../../../elements/AccessibleButton";
 
 interface TooltipProps {
     label: string;
@@ -45,7 +46,7 @@ interface ButtonProps extends TooltipProps {
 function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) {
     return <AccessibleTooltipButton
         element="button"
-        onClick={onClick}
+        onClick={onClick as (e: ButtonEvent) => void}
         title={label}
         className={
             classNames('mx_FormattingButtons_Button', className, {
@@ -68,5 +69,6 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
         <Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} className="mx_FormattingButtons_Button_italic" />
         <Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} className="mx_FormattingButtons_Button_underline" />
         <Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
+        <Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} className="mx_FormattingButtons_Button_inline_code" />
     </div>;
 }

src/i18n/strings/en_EN.json

@@ -2120,6 +2120,7 @@
     "Stop recording": "Stop recording",
     "Italic": "Italic",
     "Underline": "Underline",
+    "Code": "Code",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",
@@ -3235,7 +3236,6 @@
     "Token incorrect": "Token incorrect",
     "A text message has been sent to %(msisdn)s": "A text message has been sent to %(msisdn)s",
     "Please enter the code it contains:": "Please enter the code it contains:",
-    "Code": "Code",
     "Submit": "Submit",
     "Something went wrong in confirming your identity. Cancel and try again.": "Something went wrong in confirming your identity. Cancel and try again.",
     "Start authentication": "Start authentication",

test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx

@@ -17,6 +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 { FormattingButtons }
     from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
@@ -27,14 +28,16 @@ describe('FormattingButtons', () => {
         italic: jest.fn(),
         underline: jest.fn(),
         strikeThrough: jest.fn(),
-    } as any;
+        inlineCode: jest.fn(),
+    } as unknown as FormattingFunctions;
 
     const actionStates = {
         bold: 'reversed',
         italic: 'reversed',
         underline: 'enabled',
         strikeThrough: 'enabled',
-    } as any;
+        inlineCode: 'enabled',
+    } as AllActionStates;
 
     afterEach(() => {
         jest.resetAllMocks();
@@ -49,6 +52,7 @@ describe('FormattingButtons', () => {
         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');
     });
 
     it('Should call wysiwyg function on button click', () => {
@@ -58,12 +62,14 @@ describe('FormattingButtons', () => {
         screen.getByLabelText('Italic').click();
         screen.getByLabelText('Underline').click();
         screen.getByLabelText('Strikethrough').click();
+        screen.getByLabelText('Code').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);
     });
 
     it('Should display the tooltip on mouse over', async () => {