Add indentation increasing/decreasing to RTE (#10034)

Add indent and unindent actions to RTE

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",

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>

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>

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")}

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",

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

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":
+"@matrix-org/matrix-wysiwyg@^0.23.0":
-  version "0.22.0"
+  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.22.0.tgz#53f1e80d9ae7be0940e0ca905a3952804b029b29"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.23.0.tgz#32242b18ae9dbb28d920c31f50bbac87ff4317fe"
-  integrity sha512-3b5jGMI56zcqZ2PktrSPMAbzfWmkdupuzcLeemWQ0fT8QuiG4dA72NUxdDyarlz+1eQ+Qm4fu9j/zsPlvNpy8g==
+  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"