Edit last message with up arrow key (#774)

src/app/organisms/room/RoomViewContent.jsx

@@ -118,7 +118,15 @@ function handleOnClickCapture(e) {
   }
 }
 
-function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
+function renderEvent(
+  roomTimeline,
+  mEvent,
+  prevMEvent,
+  isFocus,
+  isEdit,
+  setEdit,
+  cancelEdit,
+) {
   const isBodyOnly = (prevMEvent !== null
     && prevMEvent.getSender() === mEvent.getSender()
     && prevMEvent.getType() !== 'm.room.member'
@@ -147,6 +155,9 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
       roomTimeline={roomTimeline}
       focus={isFocus}
       fullTime={false}
+      isEdit={isEdit}
+      setEdit={setEdit}
+      cancelEdit={cancelEdit}
     />
   );
 }
@@ -386,6 +397,8 @@ function RoomViewContent({ eventId, roomTimeline }) {
   const timelineSVRef = useRef(null);
   const timelineScrollRef = useRef(null);
   const eventLimitRef = useRef(null);
+  const [editEventId, setEditEventId] = useState(null);
+  const cancelEdit = () => setEditEventId(null);
 
   const readUptoEvtStore = useStore(roomTimeline);
   const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
@@ -470,6 +483,42 @@ function RoomViewContent({ eventId, roomTimeline }) {
     }
   }, [newEvent]);
 
+  const listenKeyboard = useCallback((event) => {
+    if (event.ctrlKey || event.altKey || event.metaKey) return;
+    if (event.key !== 'ArrowUp') return;
+    if (navigation.isRawModalVisible) return;
+
+    if (document.activeElement.id !== 'message-textarea') return;
+    if (document.activeElement.value !== '') return;
+
+    const {
+      timeline: tl, activeTimeline, liveTimeline, matrixClient: mx,
+    } = roomTimeline;
+    const limit = eventLimitRef.current;
+    if (activeTimeline !== liveTimeline) return;
+    if (tl.length > limit.length) return;
+
+    const mTypes = ['m.text'];
+    for (let i = tl.length - 1; i >= 0; i -= 1) {
+      const mE = tl[i];
+      if (
+        mE.getSender() === mx.getUserId()
+        && mE.getType() === 'm.room.message'
+        && mTypes.includes(mE.getContent()?.msgtype)
+      ) {
+        setEditEventId(mE.getId());
+        return;
+      }
+    }
+  }, [roomTimeline]);
+
+  useEffect(() => {
+    document.body.addEventListener('keydown', listenKeyboard);
+    return () => {
+      document.body.removeEventListener('keydown', listenKeyboard);
+    };
+  }, [listenKeyboard]);
+
   const handleTimelineScroll = (event) => {
     const timelineScroll = timelineScrollRef.current;
     if (!event.target) return;
@@ -535,7 +584,15 @@ function RoomViewContent({ eventId, roomTimeline }) {
       const isFocus = focusId === mEvent.getId();
       if (isFocus) jumpToItemIndex = itemCountIndex;
 
-      tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
+      tl.push(renderEvent(
+        roomTimeline,
+        mEvent,
+        isNewEvent ? null : prevMEvent,
+        isFocus,
+        editEventId === mEvent.getId(),
+        setEditEventId,
+        cancelEdit,
+      ));
       itemCountIndex += 1;
     }
     if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {