Merge pull request #3238 from matrix-org/bwindels/diffplainedits

Basic diff visualisation for plain text edits

package.json

@@ -66,6 +66,7 @@
     "classnames": "^2.1.2",
     "commonmark": "^0.28.1",
     "counterpart": "^0.18.0",
+    "diff-match-patch": "^1.0.4",
     "emojibase-data": "^4.0.0",
     "emojibase-regex": "^3.0.0",
     "file-saver": "^1.3.3",

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -39,6 +39,20 @@ limitations under the License.
     padding: 0;
     color: $primary-fg-color;
 
+    span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
+        padding: 0px 2px;
+    }
+
+    span.mx_EditHistoryMessage_deletion {
+        color: rgb(255, 76, 85);
+        background-color: rgba(255, 76, 85, 0.1);
+    }
+
+    span.mx_EditHistoryMessage_insertion {
+        color: rgb(26, 169, 123);
+        background-color: rgba(26, 169, 123, 0.1);
+    }
+
     .mx_EventTile_line, .mx_EventTile_content {
         margin-right: 0px;
     }

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -108,7 +108,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             allEvents = allEvents.concat(this.state.originalEvent);
         }
         const baseEventId = this.props.mxEvent.getId();
-        allEvents.forEach(e => {
+        allEvents.forEach((e, i) => {
             if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) {
                 nodes.push(<li key={e.getTs() + "~"}><DateSeparator ts={e.getTs()} /></li>);
             }
@@ -116,6 +116,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             nodes.push((
                 <EditHistoryMessage
                     key={e.getId()}
+                    previousEdit={!isBaseEvent && allEvents[i + 1]}
                     isBaseEvent={isBaseEvent}
                     mxEvent={e}
                     isTwelveHour={this.state.isTwelveHour}

src/components/views/messages/EditHistoryMessage.js

@@ -25,11 +25,24 @@ import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import classNames from 'classnames';
+import DiffMatchPatch from 'diff-match-patch';
+
+function getReplacedContent(event) {
+    const originalContent = event.getOriginalContent();
+    return originalContent["m.new_content"] || originalContent;
+}
+
+function isPlainMessage(event) {
+    const content = getReplacedContent(event);
+    return content.msgtype === "m.text" && !content.format;
+}
 
 export default class EditHistoryMessage extends React.PureComponent {
     static propTypes = {
         // the message event being edited
         mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
+        previousEdit: PropTypes.instanceOf(MatrixEvent).isRequired,
+        isBaseEvent: PropTypes.bool,
     };
 
     constructor(props) {
@@ -115,16 +128,36 @@ export default class EditHistoryMessage extends React.PureComponent {
         );
     }
 
+    _renderBodyDiff(oldBody, newBody) {
+        const dpm = new DiffMatchPatch();
+        const diff = dpm.diff_main(oldBody, newBody);
+        dpm.diff_cleanupSemantic(diff);
+        return diff.map(([modifier, text], i) => {
+            // not using del and ins tags here as del is used for strikethrough
+            if (modifier < 0) {
+                return (<span className="mx_EditHistoryMessage_deletion" key={i}>{text}</span>);
+            } else if (modifier > 0) {
+                return (<span className="mx_EditHistoryMessage_insertion" key={i}>{text}</span>);
+            } else {
+                return text;
+            }
+        });
+    }
+
     render() {
         const {mxEvent} = this.props;
-        const originalContent = mxEvent.getOriginalContent();
-        const content = originalContent["m.new_content"] || originalContent;
+        const content = getReplacedContent(mxEvent);
         let contentContainer;
         if (mxEvent.isRedacted()) {
             const UnknownBody = sdk.getComponent('messages.UnknownBody');
             contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
         } else {
-            const contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
+            let contentElements;
+            if (isPlainMessage(mxEvent) && this.props.previousEdit && isPlainMessage(this.props.previousEdit)) {
+                contentElements = this._renderBodyDiff(getReplacedContent(this.props.previousEdit).body, content.body);
+            } else {
+                contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
+            }
             if (mxEvent.getContent().msgtype === "m.emote") {
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
                 contentContainer = (

yarn.lock

@@ -2464,6 +2464,11 @@ di@^0.0.1:
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
   integrity sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=
 
+diff-match-patch@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
+  integrity sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==
+
 diff-sequences@^24.3.0:
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"