diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 885851e8e6..3e6cfa864a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; +import EditorStateTransfer from "../../utils/EditorStateTransfer"; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -192,6 +193,7 @@ export interface IState { // whether or not a spaces context switch brought us here, // if it did we don't want the room to be marked as read as soon as it is loaded. wasContextSwitch?: boolean; + editState?: EditorStateTransfer; } @replaceableComponent("structures.RoomView") @@ -815,6 +817,36 @@ export default class RoomView extends React.Component { case 'focus_search': this.onSearchClick(); break; + + case "edit_event": { + const editState = payload.event ? new EditorStateTransfer(payload.event) : null; + this.setState({ editState }, () => { + if (payload.event) { + this.messagePanel?.scrollToEventIfNeeded(payload.event.getId()); + } + }); + break; + } + + case Action.ComposerInsert: { + // re-dispatch to the correct composer + if (this.state.editState) { + dis.dispatch({ + ...payload, + action: "edit_composer_insert", + }); + } else { + dis.dispatch({ + ...payload, + action: "send_composer_insert", + }); + } + break; + } + + case "scroll_to_bottom": + this.messagePanel?.jumpToLiveTimeline(); + break; } }; diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 03d0b5c6d7..ad20d38139 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -34,12 +34,10 @@ import * as sdk from "../../index"; import { Key } from '../../Keyboard'; import Timer from '../../utils/Timer'; import shouldHideEvent from '../../shouldHideEvent'; -import EditorStateTransfer from '../../utils/EditorStateTransfer'; import { haveTileForEvent } from "../views/rooms/EventTile"; import { UIFeature } from "../../settings/UIFeature"; import { replaceableComponent } from "../../utils/replaceableComponent"; import { arrayFastClone } from "../../utils/arrays"; -import { Action } from "../../dispatcher/actions"; const PAGINATE_SIZE = 20; const INITIAL_SIZE = 20; @@ -72,6 +70,8 @@ class TimelinePanel extends React.Component { manageReadReceipts: PropTypes.bool, sendReadReceiptOnLoad: PropTypes.bool, manageReadMarkers: PropTypes.bool, + // with this enabled it'll listen and react to Action.ComposerInsert and `edit_event` + manageComposerDispatches: PropTypes.bool, // true to give the component a 'display: none' style. hidden: PropTypes.bool, @@ -444,38 +444,6 @@ class TimelinePanel extends React.Component { case "ignore_state_changed": this.forceUpdate(); break; - - case "edit_event": { - const editState = payload.event ? new EditorStateTransfer(payload.event) : null; - this.setState({editState}, () => { - if (payload.event && this._messagePanel.current) { - this._messagePanel.current.scrollToEventIfNeeded( - payload.event.getId(), - ); - } - }); - break; - } - - case Action.ComposerInsert: { - // re-dispatch to the correct composer - if (this.state.editState) { - dis.dispatch({ - ...payload, - action: "edit_composer_insert", - }); - } else { - dis.dispatch({ - ...payload, - action: "send_composer_insert", - }); - } - break; - } - - case "scroll_to_bottom": - this.jumpToLiveTimeline(); - break; } }; @@ -866,6 +834,12 @@ class TimelinePanel extends React.Component { } }; + scrollToEventIfNeeded = (eventId) => { + if (this._messagePanel.current) { + this._messagePanel.current.scrollToEventIfNeeded(eventId); + } + } + /* scroll to show the read-up-to marker. We put it 1/3 of the way down * the container. */ @@ -1473,7 +1447,7 @@ class TimelinePanel extends React.Component { tileShape={this.props.tileShape} resizeNotifier={this.props.resizeNotifier} getRelationsForEvent={this.getRelationsForEvent} - editState={this.state.editState} + editState={this.props.editState} showReactions={this.props.showReactions} layout={this.props.layout} enableFlair={SettingsStore.getValue(UIFeature.Flair)}