diff --git a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
index cef1003285..341d045ba4 100644
--- a/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
@@ -44,18 +44,18 @@ export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiw
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || Boolean(initialContent);
- const { editMessage, endEditing, setContent } = useEditing(initialContent, editorStateTransfer);
+ const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
return isReady &&
{ (ref, wysiwyg,
content) => (
<>
-
+
>)
}
;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
index 20a3df2a7f..9e94c12470 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/EditionButtons.tsx
@@ -22,14 +22,15 @@ import AccessibleButton from '../../../elements/AccessibleButton';
interface EditionButtonsProps {
onCancelClick: MouseEventHandler;
onSaveClick: MouseEventHandler;
+ isSaveDisabled?: boolean;
}
-export function EditionButtons({ onCancelClick, onSaveClick }: EditionButtonsProps) {
+export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
return
{ _t("Cancel") }
-
+
{ _t("Save") }
;
diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts b/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
index 8076c0062a..fcd4471cb1 100644
--- a/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
+++ b/src/components/views/rooms/wysiwyg_composer/hooks/useEditing.ts
@@ -26,13 +26,18 @@ export function useEditing(initialContent: string, editorStateTransfer: EditorSt
const roomContext = useRoomContext();
const mxClient = useMatrixClientContext();
+ const [isSaveDisabled, setIsSaveDisabled] = useState(true);
const [content, setContent] = useState(initialContent);
+ const onChange = useCallback((_content: string) => {
+ setContent(_content);
+ setIsSaveDisabled(_isSaveDisabled => _isSaveDisabled && _content === initialContent);
+ }, [initialContent]);
+
const editMessageMemoized = useCallback(() =>
editMessage(content, { roomContext, mxClient, editorStateTransfer }),
[content, roomContext, mxClient, editorStateTransfer],
);
const endEditingMemoized = useCallback(() => endEditing(roomContext), [roomContext]);
-
- return { setContent, editMessage: editMessageMemoized, endEditing: endEditingMemoized };
+ return { onChange, editMessage: editMessageMemoized, endEditing: endEditingMemoized, isSaveDisabled };
}