diff --git a/package.json b/package.json index fb8dda8154..4a4cfd2e4f 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.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 index 7bc4b33d41..36ca4b6a61 100644 --- 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 index d0d774c7f0..c33c29ae1c 100644 --- 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 index 8f1928700d..2ca6e78f0c 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.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"