PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6307 from matrix-org/t3chguy/fix/17858

Browse source 
Fix instances of the Edit Message Composer's save button being wrongly disabled
This commit is contained in:
Michael Telatynski 2021-07-07 16:03:27 +01:00 committed by GitHub
commit 25dab1eb64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/views/rooms/BasicMessageComposer.tsx
View file

@ -711,6 +711,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
} }
public insertMention(userId: string): void { public insertMention(userId: string): void {
this.modifiedFlag = true;
const { model } = this.props; const { model } = this.props;
const { partCreator } = model; const { partCreator } = model;
const member = this.props.room.getMember(userId); const member = this.props.room.getMember(userId);
@ -729,6 +730,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
} }
public insertQuotedMessage(event: MatrixEvent): void { public insertQuotedMessage(event: MatrixEvent): void {
this.modifiedFlag = true;
const { model } = this.props; const { model } = this.props;
const { partCreator } = model; const { partCreator } = model;
const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true }); const quoteParts = parseEvent(event, partCreator, { isQuotedMessage: true });
@ -744,6 +746,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
} }
public insertPlaintext(text: string): void { public insertPlaintext(text: string): void {
this.modifiedFlag = true;
const { model } = this.props; const { model } = this.props;
const { partCreator } = model; const { partCreator } = model;
const caret = this.getCaret(); const caret = this.getCaret();

39
src/components/views/rooms/EditMessageComposer.tsx
View file

@ -131,11 +131,12 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
super(props); super(props);
this.context = context; // otherwise React will only set it prior to render due to type def above this.context = context; // otherwise React will only set it prior to render due to type def above
const isRestored = this.createEditorModel();
const ev = this.props.editState.getEvent();
this.state = { this.state = {
saveDisabled: true, saveDisabled: !isRestored || !this.isContentModified(createEditContent(this.model, ev)["m.new_content"]),
}; };
this.createEditorModel();
window.addEventListener("beforeunload", this.saveStoredEditorState); window.addEventListener("beforeunload", this.saveStoredEditorState);
this.dispatcherRef = dis.register(this.onAction); this.dispatcherRef = dis.register(this.onAction);
} }
@ -230,12 +231,12 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
} }
} }
private saveStoredEditorState(): void { private saveStoredEditorState = (): void => {
const item = SendHistoryManager.createItem(this.model); const item = SendHistoryManager.createItem(this.model);
this.clearPreviousEdit(); this.clearPreviousEdit();
localStorage.setItem(this.editorRoomKey, this.props.editState.getEvent().getId()); localStorage.setItem(this.editorRoomKey, this.props.editState.getEvent().getId());
localStorage.setItem(this.editorStateKey, JSON.stringify(item)); localStorage.setItem(this.editorStateKey, JSON.stringify(item));
} };
private isSlashCommand(): boolean { private isSlashCommand(): boolean {
const parts = this.model.parts; const parts = this.model.parts;
@ -256,10 +257,9 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
private isContentModified(newContent: IContent): boolean { private isContentModified(newContent: IContent): boolean {
// if nothing has changed then bail // if nothing has changed then bail
const oldContent = this.props.editState.getEvent().getContent(); const oldContent = this.props.editState.getEvent().getContent();
if (!this.editorRef.current?.isModified() || if (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
(oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
oldContent["format"] === newContent["format"] && oldContent["format"] === newContent["format"] &&
oldContent["formatted_body"] === newContent["formatted_body"])) { oldContent["formatted_body"] === newContent["formatted_body"]) {
return false; return false;
} }
return true; return true;
@ -410,36 +410,27 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
dis.unregister(this.dispatcherRef); dis.unregister(this.dispatcherRef);
} }
private createEditorModel(): void { private createEditorModel(): boolean {
const { editState } = this.props; const { editState } = this.props;
const room = this.getRoom(); const room = this.getRoom();
const partCreator = new CommandPartCreator(room, this.context); const partCreator = new CommandPartCreator(room, this.context);
let parts; let parts;
let isRestored = false;
if (editState.hasEditorState()) { if (editState.hasEditorState()) {
// if restoring state from a previous editor, // if restoring state from a previous editor,
// restore serialized parts from the state // restore serialized parts from the state
parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p)); parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p));
} else { } else {
//otherwise, either restore serialized parts from localStorage or parse the body of the event // otherwise, either restore serialized parts from localStorage or parse the body of the event
parts = this.restoreStoredEditorState(partCreator) || parseEvent(editState.getEvent(), partCreator); const restoredParts = this.restoreStoredEditorState(partCreator);
parts = restoredParts || parseEvent(editState.getEvent(), partCreator);
isRestored = !!restoredParts;
} }
this.model = new EditorModel(parts, partCreator); this.model = new EditorModel(parts, partCreator);
this.saveStoredEditorState(); this.saveStoredEditorState();
}
private getInitialCaretPosition(): CaretPosition { return isRestored;
const { editState } = this.props;
let caretPosition;
if (editState.hasEditorState() && editState.getCaret()) {
// if restoring state from a previous editor,
// restore caret position from the state
const caret = editState.getCaret();
caretPosition = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
} else {
// otherwise, set it at the end
caretPosition = this.model.getPositionAtEnd();
}
return caretPosition;
} }
private onChange = (): void => { private onChange = (): void => {