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 (