Edit last message with up arrow key (#774)

src/app/molecules/message/Message.jsx

@@ -714,9 +714,9 @@ function getEditedBody(editedMEvent) {
 }
 
 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus, fullTime,
+  mEvent, isBodyOnly, roomTimeline,
+  focus, fullTime, isEdit, setEdit, cancelEdit,
 }) {
-  const [isEditing, setIsEditing] = useState(false);
   const roomId = mEvent.getRoomId();
   const { editedTimeline, reactionTimeline } = roomTimeline ?? {};
 
@@ -731,7 +731,7 @@ function Message({
   const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
 
   const edit = useCallback(() => {
-    setIsEditing(true);
+    setEdit(eventId);
   }, []);
   const reply = useCallback(() => {
     replyTo(senderId, mEvent.getId(), body);
@@ -788,7 +788,7 @@ function Message({
             eventId={mEvent.replyEventId}
           />
         )}
-        {!isEditing && (
+        {!isEdit && (
           <MessageBody
             senderName={username}
             isCustomHTML={isCustomHTML}
@@ -797,22 +797,22 @@ function Message({
             isEdited={isEdited}
           />
         )}
-        {isEditing && (
+        {isEdit && (
           <MessageEdit
             body={body}
             onSave={(newBody) => {
               if (newBody !== body) {
                 initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
               }
-              setIsEditing(false);
+              cancelEdit();
             }}
-            onCancel={() => setIsEditing(false)}
+            onCancel={cancelEdit}
           />
         )}
         {haveReactions && (
           <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
         )}
-        {roomTimeline && !isEditing && (
+        {roomTimeline && !isEdit && (
           <MessageOptions
             roomTimeline={roomTimeline}
             mEvent={mEvent}
@@ -829,6 +829,9 @@ Message.defaultProps = {
   focus: false,
   roomTimeline: null,
   fullTime: false,
+  isEdit: false,
+  setEdit: null,
+  cancelEdit: null,
 };
 Message.propTypes = {
   mEvent: PropTypes.shape({}).isRequired,
@@ -836,6 +839,9 @@ Message.propTypes = {
   roomTimeline: PropTypes.shape({}),
   focus: PropTypes.bool,
   fullTime: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  setEdit: PropTypes.func,
+  cancelEdit: PropTypes.func,
 };
 
 export { Message, MessageReply, PlaceholderMessage };

src/app/molecules/message/Message.scss

@@ -229,6 +229,8 @@
   padding: var(--sp-extra-tight) 0;
   &-btns button {
     margin: var(--sp-tight) 0 0 0;
+    padding: var(--sp-ultra-tight) var(--sp-tight);
+    min-width: 0;
     @include dir.side(margin, 0, var(--sp-tight));
   }
 }