From bddb97678df1f823bc14740aba67a920e028982e Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 31 Jan 2023 16:15:18 +0100
Subject: [PATCH] Add indent and unindent actions to RTE

---
 .../room/composer/indent_decrease.svg              | 10 ++++++++++
 .../room/composer/indent_increase.svg              | 10 ++++++++++
 .../components/FormattingButtons.tsx               | 14 ++++++++++++++
 .../components/FormattingButtons-test.tsx          |  4 ++++
 4 files changed, 38 insertions(+)
 create mode 100644 res/img/element-icons/room/composer/indent_decrease.svg
 create mode 100644 res/img/element-icons/room/composer/indent_increase.svg

diff --git a/res/img/element-icons/room/composer/indent_decrease.svg b/res/img/element-icons/room/composer/indent_decrease.svg
new file mode 100644
index 00000000000..660c3e55ca0
--- /dev/null
+++ b/res/img/element-icons/room/composer/indent_decrease.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2793_14104)">
+<path d="M8 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H8C7.63333 10 7.33333 10.3 7.33333 10.6667C7.33333 11.0333 7.63333 11.3333 8 11.3333ZM2.23333 8.23333L4.09333 10.0933C4.30667 10.3067 4.66667 10.16 4.66667 9.86V6.14C4.66667 5.84 4.30667 5.69333 4.1 5.90667L2.24 7.76667C2.10667 7.89333 2.10667 8.10667 2.23333 8.23333ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667ZM8 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H8C7.63333 4.66667 7.33333 4.96667 7.33333 5.33333C7.33333 5.7 7.63333 6 8 6ZM8 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H8C7.63333 7.33333 7.33333 7.63333 7.33333 8C7.33333 8.36667 7.63333 8.66667 8 8.66667Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_2793_14104">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/res/img/element-icons/room/composer/indent_increase.svg b/res/img/element-icons/room/composer/indent_increase.svg
new file mode 100644
index 00000000000..f40162e05de
--- /dev/null
+++ b/res/img/element-icons/room/composer/indent_increase.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2793_4893)">
+<path d="M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 6.14V9.86667C2 10.1667 2.36 10.3133 2.56667 10.1L4.42667 8.24C4.56 8.10667 4.56 7.9 4.42667 7.76667L2.56667 5.9C2.36 5.69333 2 5.84 2 6.14ZM8 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H8C7.63333 10 7.33333 10.3 7.33333 10.6667C7.33333 11.0333 7.63333 11.3333 8 11.3333ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667ZM8 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H8C7.63333 4.66667 7.33333 4.96667 7.33333 5.33333C7.33333 5.7 7.63333 6 8 6ZM8 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H8C7.63333 7.33333 7.33333 7.63333 7.33333 8C7.33333 8.36667 7.63333 8.66667 8 8.66667Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_2793_4893">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 80f2563d1d8..7bc4b33d412 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -28,6 +28,8 @@ import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/c
 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 { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg";
+import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg";
 import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
 import { Alignment } from "../../../elements/Tooltip";
 import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
@@ -127,6 +129,18 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 onClick={() => composer.orderedList()}
                 icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                actionState={actionStates.indent}
+                label={_td("Indent increase")}
+                onClick={() => composer.indent()}
+                icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
+            />
+            <Button
+                actionState={actionStates.unIndent}
+                label={_td("Indent decrease")}
+                onClick={() => composer.unIndent()}
+                icon={<UnIndentIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 actionState={actionStates.quote}
                 label={_td("Quote")}
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 1d9faa02712..d0d774c7f06 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -33,6 +33,8 @@ const mockWysiwyg = {
     orderedList: jest.fn(),
     unorderedList: jest.fn(),
     quote: jest.fn(),
+    indent: jest.fn(),
+    unIndent: jest.fn(),
 } as unknown as FormattingFunctions;
 
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
@@ -51,6 +53,8 @@ const testCases: Record<
     orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
     unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
     quote: { label: "Quote", mockFormatFn: mockWysiwyg.quote },
+    indent: { label: "Indent increase", mockFormatFn: mockWysiwyg.indent },
+    unIndent: { label: "Indent decrease", mockFormatFn: mockWysiwyg.unIndent },
 };
 
 const createActionStates = (state: ActionState): AllActionStates => {