Merge pull request #2978 from matrix-org/bwindels/message-edit-editor3

Message editing: smaller fixes

res/img/edit.svg

@@ -1 +1 @@
-<svg height="14.865319" viewBox="0 0 15.093 14.865319" width="15.093" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" height="1.158" width="1.118" x="-.059" y="-.079"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><g style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;filter:url(#a)" transform="translate(-1048.2035 -582.14881)"><path d="m1055.75 596h6.75m-3.375-12.375a1.591 1.591 0 0 1 2.25 2.25l-9.375 9.375-3 .75.75-3z"/></g></svg>
+<svg height="14.865319" viewBox="0 0 15.093 14.865319" width="15.093" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;" transform="translate(-1048.2035 -582.14881)"><path d="m1055.75 596h6.75m-3.375-12.375a1.591 1.591 0 0 1 2.25 2.25l-9.375 9.375-3 .75.75-3z"/></g></svg>

src/components/views/elements/MessageEditor.js

@@ -110,9 +110,15 @@ export default class MessageEditor extends React.Component {
             "msgtype": "m.text",
             "body": textSerialize(this.model),
         };
+        const contentBody = {
+            msgtype: newContent.msgtype,
+            body: ` * ${newContent.body}`,
+        };
         if (requiresHtml(this.model)) {
             newContent.format = "org.matrix.custom.html";
             newContent.formatted_body = htmlSerialize(this.model);
+            contentBody.format = newContent.format;
+            contentBody.formatted_body = ` * ${newContent.formatted_body}`;
         }
         const content = Object.assign({
             "m.new_content": newContent,
@@ -120,7 +126,7 @@ export default class MessageEditor extends React.Component {
                 "rel_type": "m.replace",
                 "event_id": this.props.event.getId(),
             },
-        }, newContent);
+        }, contentBody);
 
         const roomId = this.props.event.getRoomId();
         this.context.matrixClient.sendMessage(roomId, content);
@@ -138,6 +144,13 @@ export default class MessageEditor extends React.Component {
 
     componentDidMount() {
         this._updateEditorState();
+        const sel = document.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(this._editorRef);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this._editorRef.focus();
     }
 
     render() {

src/components/views/messages/MessageActionBar.js

@@ -23,7 +23,7 @@ import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import { createMenu } from '../../structures/ContextualMenu';
 import SettingsStore from '../../../settings/SettingsStore';
-import { isContentActionable } from '../../../utils/EventUtils';
+import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
@@ -148,12 +148,12 @@ export default class MessageActionBar extends React.PureComponent {
                 title={_t("Reply")}
                 onClick={this.onReplyClick}
             />;
-            if (this.isEditingEnabled()) {
-                editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
-                    title={_t("Edit")}
-                    onClick={this.onEditClick}
-                />;
-            }
+        }
+        if (this.isEditingEnabled() && canEditContent(this.props.mxEvent)) {
+            editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
+                title={_t("Edit")}
+                onClick={this.onEditClick}
+            />;
         }
 
         return <div className="mx_MessageActionBar">

src/components/views/messages/TextualBody.js

@@ -88,7 +88,10 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._unmounted = false;
+        this._applyFormatting();
+    },
 
+    _applyFormatting() {
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
@@ -123,7 +126,11 @@ module.exports = React.createClass({
         }
     },
 
-    componentDidUpdate: function() {
+    componentDidUpdate: function(prevProps) {
+        const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
+        if (messageWasEdited) {
+            this._applyFormatting();
+        }
         this.calculateUrlPreview();
     },
 

src/utils/EventUtils.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { EventStatus } from 'matrix-js-sdk';
+import MatrixClientPeg from '../MatrixClientPeg';
 
 /**
  * Returns whether an event should allow actions like reply, reactions, edit, etc.
@@ -43,3 +44,8 @@ export function isContentActionable(mxEvent) {
 
     return false;
 }
+
+export function canEditContent(mxEvent) {
+    return isContentActionable(mxEvent) &&
+        mxEvent.getSender() === MatrixClientPeg.get().getUserId();
+}