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 {

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 () => {