imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add ability to properly edit messages in Threads. (#6877)

Browse source 
* Fix infinite rerender loop when editing message

* Refactor "edit_event" to Action.EditEvent

* Make up-arrow edit working in Threads

* Properly handle timeline events edit state

* Properly traverse messages to be edited

* Add MatrixClientContextHOC

* Refactor RoomContext to use AppRenderingContext

* Typescriptify test

Co-authored-by: Germain <germains@element.io>
This commit is contained in:
Dariusz Niemczyk 2021-10-01 15:35:54 +02:00 • committed by GitHub
parent 5dede230f1
commit 1331e960fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 403 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/messages/MessageActionBar.tsx
View file

@ -27,7 +27,7 @@ import { Action } from '../../../dispatcher/actions';
import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
import RoomContext from "../../../contexts/RoomContext";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { replaceableComponent } from "../../../utils/replaceableComponent";
@ -128,11 +128,6 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
</React.Fragment>;
};
export enum ActionBarRenderingContext {
Room,
Thread
}
interface IMessageActionBarProps {
mxEvent: MatrixEvent;
reactions?: Relations;
@ -142,7 +137,6 @@ interface IMessageActionBarProps {
permalinkCreator?: RoomPermalinkCreator;
onFocusChange?: (menuDisplayed: boolean) => void;
toggleThreadExpanded: () => void;
renderingContext?: ActionBarRenderingContext;
isQuoteExpanded?: boolean;
}
@ -150,10 +144,6 @@ interface IMessageActionBarProps {
export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
public static contextType = RoomContext;
public static defaultProps = {
renderingContext: ActionBarRenderingContext.Room,
};
public componentDidMount(): void {
if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
this.props.mxEvent.on("Event.status", this.onSent);
@ -217,8 +207,9 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
private onEditClick = (ev: React.MouseEvent): void => {
dis.dispatch({
action: 'edit_event',
action: Action.EditEvent,
event: this.props.mxEvent,
timelineRenderingType: this.context.timelineRenderingType,
});
};
@ -298,7 +289,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// Like the resend button, the react and reply buttons need to appear before the edit.
// The only catch is we do the reply button first so that we can make sure the react
// button is the very first button without having to do length checks for `splice()`.
if (this.context.canReply && this.props.renderingContext === ActionBarRenderingContext.Room) {
if (this.context.canReply && this.context.timelineRenderingType === TimelineRenderingType.Room) {
toolbarOpts.splice(0, 0, <>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"