Hide indent button in rte (#10149)

* add conditional rendering for indent and unindent buttons * bump rte to 1.1.1
matrix-org · Feb 14, 2023 · 18c9b2b · 18c9b2b
1 parent 49e0228
commit 18c9b2b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git 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.23.0",
+        "@matrix-org/matrix-wysiwyg": "^1.1.1",
         "@matrix-org/react-sdk-module-api": "^0.0.3",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",

diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -88,6 +88,7 @@ interface FormattingButtonsProps {
 
 export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps): JSX.Element {
     const composerContext = useComposerContext();
+    const isInList = actionStates.unorderedList === "reversed" || actionStates.orderedList === "reversed";
     return (
         <div className="mx_FormattingButtons">
             <Button
@@ -129,18 +130,22 @@ 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" />}
-            />
+            {isInList && (
+                <Button
+                    actionState={actionStates.indent}
+                    label={_td("Indent increase")}
+                    onClick={() => composer.indent()}
+                    icon={<IndentIcon className="mx_FormattingButtons_Icon" />}
+                />
+            )}
+            {isInList && (
+                <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
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 
@@ -40,7 +40,7 @@ const mockWysiwyg = {
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
 
 const testCases: Record<
-    Exclude<ActionTypes, "undo" | "redo" | "clear">,
+    Exclude<ActionTypes, "undo" | "redo" | "clear" | "indent" | "unindent">,
     { label: string; mockFormatFn: jest.Func | jest.SpyInstance }
 > = {
     bold: { label: "Bold", mockFormatFn: mockWysiwyg.bold },
@@ -53,8 +53,6 @@ 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 => {
@@ -162,4 +160,28 @@ describe("FormattingButtons", () => {
             expect(screen.getByLabelText(label)).not.toHaveClass("mx_FormattingButtons_Button_hover");
         }
     });
+
+    it("Does not show indent or unindent button when outside a list", () => {
+        renderComponent();
+
+        expect(screen.queryByLabelText("Indent increase")).not.toBeInTheDocument();
+        expect(screen.queryByLabelText("Indent decrease")).not.toBeInTheDocument();
+    });
+
+    it("Shows indent and unindent buttons when either a single list type is 'reversed'", () => {
+        const orderedListActive = { ...defaultActionStates, orderedList: "reversed" };
+        renderComponent({ actionStates: orderedListActive });
+
+        expect(screen.getByLabelText("Indent increase")).toBeInTheDocument();
+        expect(screen.getByLabelText("Indent decrease")).toBeInTheDocument();
+
+        cleanup();
+
+        const unorderedListActive = { ...defaultActionStates, unorderedList: "reversed" };
+
+        renderComponent({ actionStates: unorderedListActive });
+
+        expect(screen.getByLabelText("Indent increase")).toBeInTheDocument();
+        expect(screen.getByLabelText("Indent decrease")).toBeInTheDocument();
+    });
 });
diff --git 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.4.tgz#1b20294e0354c3dcc9c7dc810d883198a4042f04"
   integrity sha512-mdaDKrw3P5ZVCpq0ioW0pV6ihviDEbS8ZH36kpt9stLKHwwDSopPogE6CkQhi0B1jn1yBUtOYi32mBV/zcOR7g==
 
-"@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/matrix-wysiwyg@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-1.1.1.tgz#a07b13097e72a9bae220a647527d6418c5423827"
+  integrity sha512-pp7poyd3vfC/P34ZRj6u2oyLJuex77egeSsIA1MPowBqtrIAmHkji9xviBdXPcDss2zEI4EZuX77JWXtAfaz7Q==
 
 "@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"