From 73986faa7d73c9fe0963e25274c6d7d74e0281e3 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 9 Dec 2022 14:06:15 +0100
Subject: [PATCH] Add inline code to rich text editor (#9720)

Add inline code to rich text editor
---
 .../components/_FormattingButtons.pcss                 |  4 ++++
 res/img/element-icons/room/composer/inline_code.svg    |  5 +++++
 .../wysiwyg_composer/components/FormattingButtons.tsx  |  4 +++-
 src/i18n/strings/en_EN.json                            |  2 +-
 .../components/FormattingButtons-test.tsx              | 10 ++++++++--
 5 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 res/img/element-icons/room/composer/inline_code.svg

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
index 342a40c606..02f875d24a 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+++ b/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 {
diff --git a/res/img/element-icons/room/composer/inline_code.svg b/res/img/element-icons/room/composer/inline_code.svg
new file mode 100644
index 0000000000..a4392d9bce
--- /dev/null
+++ b/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>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c9408c8f0f..98c13cfa43 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/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>;
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc437398ae..c3caeead0e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",
diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index f97b2c614f..1c3dab6874 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/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 () => {