diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 27301110f3..15d6405d87 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -43,6 +43,7 @@ function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): J
element="button"
onClick={onClick as (e: ButtonEvent) => void}
aria-label={label}
+ disabled={actionState === "disabled"}
className={classNames("mx_FormattingButtons_Button", {
mx_FormattingButtons_active: actionState === "reversed",
mx_FormattingButtons_Button_hover: actionState === "enabled",
@@ -64,55 +65,59 @@ function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): J
interface FormattingButtonsProps {
composer: FormattingFunctions;
actionStates: AllActionStates;
+ /**
+ * Whether all buttons should be disabled
+ */
+ disabled?: boolean;
}
-export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps): JSX.Element {
+export function FormattingButtons({ composer, actionStates, disabled }: FormattingButtonsProps): JSX.Element {
const composerContext = useComposerContext();
const isInList = actionStates.unorderedList === "reversed" || actionStates.orderedList === "reversed";
return (