editing once works, editing twice does not

src/widgets/chat-message.jsx

@@ -80,6 +80,9 @@ class BaseChatMessage extends React.PureComponent {
         this.props.received > Tinode.MESSAGE_STATUS_FAILED &&
         this.props.received < Tinode.MESSAGE_STATUS_DEL_RANGE) {
       menuItems.push('menu_item_reply');
+      if (!this.props.response) {
+        menuItems.push('menu_item_edit');
+      }
     }
     menuItems.push('menu_item_forward');
 
@@ -90,7 +93,8 @@ class BaseChatMessage extends React.PureComponent {
       userName: this.props.userName,
       y: e.pageY,
       x: e.pageX,
-      pickReply: this.props.pickReply
+      pickReply: this.props.pickReply,
+      editMessage: this.props.editMessage,
     }, menuItems);
   }
 
@@ -175,6 +179,7 @@ class BaseChatMessage extends React.PureComponent {
               </div>
               {this.props.timestamp ?
                 <ReceivedMarker
+                  edited={this.props.edited}
                   timestamp={this.props.timestamp}
                   received={this.props.received} />
                 : null}

src/widgets/context-menu.jsx

@@ -55,6 +55,11 @@ const messages = defineMessages({
     defaultMessage: 'Forward',
     description: 'Forward message'
   },
+  edit: {
+    id: 'menu_item_edit',
+    defaultMessage: 'Edit',
+    description: 'Edit message'
+  },
   topic_delete: {
     id: 'menu_item_delete_topic',
     defaultMessage: 'Delete',
@@ -193,6 +198,13 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.forward),
         handler: () => {} /* the action is taken directly in tinode-web */
       },
+      'menu_item_edit': {
+        id: 'menu_item_edit',
+        title: formatMessage(messages.edit),
+        handler: (params, errorHandler) => {
+          return this.editMessage(params, errorHandler);
+        }
+      },
       'topic_unmute': {
         id: 'topic_unmute',
         title: formatMessage(messages.unmute),
@@ -437,6 +449,10 @@ class ContextMenu extends React.Component {
     params.pickReply(params.seq, params.content, params.userFrom, params.userName, errorHandler);
   }
 
+  editMessage(params, errorHandler) {
+    params.editMessage(params.seq, params.content, errorHandler);
+  }
+
   render() {
     const menu = [];
     let count = 0;

src/widgets/received-marker.jsx

@@ -16,6 +16,11 @@ const messages = defineMessages({
     id: 'message_sending_failed',
     defaultMessage: 'failed',
     description: 'Failed to send message, in place of time stamp'
+  },
+  message_edited_marker: {
+    id: 'message_edited_marker',
+    defaultMessage: ', edited',
+    description: 'Marker indicating that the message was edited'
   }
 });
 
@@ -33,10 +38,11 @@ class ReceivedMarker extends React.PureComponent {
 
     const icon = deliveryMarker(this.props.received);
     const marker = icon ? <i className={'material-icons small ' + icon.color}>{icon.name}</i> : null;
+    const edited = this.props.edited ? formatMessage(messages.message_edited_marker) : null;
 
     return (
       <span className="timestamp">
-        {timestamp}{'\u00a0'}{marker}
+        {timestamp}{edited}{'\u00a0'}{marker}
       </span>
     );
   }

src/widgets/send-message.jsx

@@ -83,7 +83,14 @@ class SendMessage extends React.PureComponent {
     }
 
     if (prevProps.topicName != this.props.topicName) {
-      this.setState({message: '', audioRec: false, quote: null});
+      this.setState({message: this.props.initMessage || '', audioRec: false, quote: null});
+    } else if (prevProps.initMessage != this.props.initMessage) {
+      const msg = this.props.initMessage || '';
+      this.setState({message: msg}, _ => {
+        // If there is text, scroll to bottom and set caret to the end.
+        this.messageEditArea.scrollTop = this.messageEditArea.scrollHeight;
+        this.messageEditArea.setSelectionRange(msg.length, msg.length);
+      });
     }
     if (prevProps.reply != this.props.reply) {
       this.setState({quote: this.formatReply()});
@@ -193,10 +200,13 @@ class SendMessage extends React.PureComponent {
         formatMessage(messages[this.props.messagePrompt]) :
         formatMessage(messages.type_new_message));
 
+    const sendIcon = (this.props.reply && this.props.reply.editing) ?
+      'check_circle' : 'send';
+
     const quote = this.state.quote ?
       (<div id="reply-quote-preview">
         <div className="cancel">
-          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+          <a href="#" onClick={e => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
         </div>
         {this.state.quote}
       </div>) : null;
@@ -209,10 +219,10 @@ class SendMessage extends React.PureComponent {
             <>
               {this.props.onAttachFile && !this.state.audioRec ?
                 <>
-                  <a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
+                  <a href="#" onClick={e => {e.preventDefault(); this.attachImage.click();}} title="Add image">
                     <i className="material-icons secondary">photo</i>
                   </a>
-                  <a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
+                  <a href="#" onClick={e => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
                     <i className="material-icons secondary">attach_file</i>
                   </a>
                 </>
@@ -225,13 +235,14 @@ class SendMessage extends React.PureComponent {
                     onDeleted={_ => this.setState({audioRec: false})}
                     onFinished={this.handleAttachAudio}/> :
                   <textarea id="sendMessage" placeholder={prompt}
-                    value={this.state.message} onChange={this.handleMessageTyping}
+                    value={this.state.message}
+                    onChange={this.handleMessageTyping}
                     onKeyPress={this.handleKeyPress}
                     ref={(ref) => {this.messageEditArea = ref;}}
                     autoFocus />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title="Send">
-                  <i className="material-icons">send</i>
+                  <i className="material-icons">{sendIcon}</i>
                 </a> :
                 !this.state.audioRec ?
                   <a href="#" onClick={e => {e.preventDefault(); this.setState({audioRec: true})}} title="Voice">
@@ -239,9 +250,9 @@ class SendMessage extends React.PureComponent {
                   </a> :
                   null
               }
-              <input type="file" ref={(ref) => {this.attachFile = ref;}}
+              <input type="file" ref={ref => {this.attachFile = ref}}
                 onChange={this.handleAttachFile} style={{display: 'none'}} />
-              <input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
+              <input type="file" ref={ref => {this.attachImage = ref}} accept="image/*"
                 onChange={this.handleAttachImage} style={{display: 'none'}} />
             </>
             :