From 918f1513844ebf85fd1b2a43b96a724a155ed25a Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Tue, 31 Jan 2023 18:13:24 +0100
Subject: [PATCH] Add  indentation increasing/decreasing to RTE (#10034)

Add indent and unindent actions to RTE
---
 package.json                                       |  2 +-
 .../room/composer/indent_decrease.svg              | 10 ++++++++++
 .../room/composer/indent_increase.svg              | 10 ++++++++++
 .../components/FormattingButtons.tsx               | 14 ++++++++++++++
 src/i18n/strings/en_EN.json                        |  2 ++
 .../components/FormattingButtons-test.tsx          |  4 ++++
 yarn.lock                                          |  8 ++++----
 7 files changed, 45 insertions(+), 5 deletions(-)
 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/package.json b/package.json
index 1906e1e580..8b8c3209f5 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.4.0",
-        "@matrix-org/matrix-wysiwyg": "^0.22.0",
+        "@matrix-org/matrix-wysiwyg": "^0.23.0",
         "@matrix-org/react-sdk-module-api": "^0.0.3",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
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 0000000000..660c3e55ca
--- /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 0000000000..f40162e05d
--- /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 80f2563d1d..7bc4b33d41 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/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0edce777e7..908eae0535 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2144,6 +2144,8 @@
     "Underline": "Underline",
     "Bulleted list": "Bulleted list",
     "Numbered list": "Numbered list",
+    "Indent increase": "Indent increase",
+    "Indent decrease": "Indent decrease",
     "Code": "Code",
     "Link": "Link",
     "Edit link": "Edit link",
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 1d9faa0271..d0d774c7f0 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 => {
diff --git a/yarn.lock b/yarn.lock
index b1c415e85b..f5f4930289 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1589,10 +1589,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
   integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
 
-"@matrix-org/matrix-wysiwyg@^0.22.0":
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.22.0.tgz#53f1e80d9ae7be0940e0ca905a3952804b029b29"
-  integrity sha512-3b5jGMI56zcqZ2PktrSPMAbzfWmkdupuzcLeemWQ0fT8QuiG4dA72NUxdDyarlz+1eQ+Qm4fu9j/zsPlvNpy8g==
+"@matrix-org/matrix-wysiwyg@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.23.0.tgz#32242b18ae9dbb28d920c31f50bbac87ff4317fe"
+  integrity sha512-wO5KYznlfsSIMo0R8tyZqfvZrPkQMaL1qBHzhaeKIsC4vK4MnJ9mj6JiS6+XiuHJyc9nqN+IdeUjKyJOnStHaA==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"