Use Monaco for displaying diffs (fixes #2275, #2260)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Use Spinach task scheduler instead of Celery: simpler, and eliminates the need for a worker beat node (#2381)
 - Fix reps bug involving proxies (#2254, #2237, #1748)
+- Use Monaco for displaying diffs (fixes #2275, #2260)
 
 # 0.14.0 (2019-10-24)
 

package.json

@@ -31,7 +31,8 @@
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/fileMock.js",
       "\\.(css|less)$": "<rootDir>/test/styleMock.js",
-      "monaco-editor/esm/vs/editor/editor.api": "<rootDir>/test/monaco-mock.js"
+      "monaco-editor/esm/vs/editor/editor.api": "<rootDir>/test/monaco-mock.js",
+      "revision-diff-content": "identity-obj-proxy"
     },
     "globals": {
       "window": true,
@@ -76,7 +77,6 @@
     "prop-types": "15.7.2",
     "query-string": "6.8.3",
     "react": "16.11.0",
-    "react-diff-viewer": "2.0.3",
     "react-dom": "16.11.0",
     "react-helmet-async": "1.0.4",
     "react-jss": "8.6.1",
@@ -124,6 +124,7 @@
     "fake-indexeddb": "2.1.1",
     "git-revision-webpack-plugin": "3.0.4",
     "file-loader": "4.2.0",
+    "identity-obj-proxy": "3.0.0",
     "jest": "24.9.0",
     "jest-cli": "24.9.0",
     "jest-fetch-mock": "2.1.2",

src/editor/components/modals/revision-diff-content.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/* eslint-disable import/first */
+
+// for all potential imports, see https://github.com/microsoft/monaco-editor-samples/blob/master/browser-esm-webpack-small/index.js
+import "monaco-editor/esm/vs/editor/browser/controller/coreCommands";
+import "monaco-editor/esm/vs/editor/browser/widget/diffEditorWidget";
+import "monaco-editor/esm/vs/editor/contrib/wordOperations/wordOperations";
+import "monaco-editor/esm/vs/editor/contrib/find/findController";
+import "monaco-editor/esm/vs/editor/contrib/multicursor/multicursor";
+import "monaco-editor/esm/vs/editor/contrib/folding/folding";
+import "monaco-editor/esm/vs/editor/contrib/indentation/indentUtils";
+import "monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching";
+import "monaco-editor/esm/vs/editor/contrib/comment/comment";
+import "monaco-editor/esm/vs/editor/contrib/snippet/snippetController2";
+import "monaco-editor/esm/vs/editor/contrib/suggest/suggestController";
+import "monaco-editor/esm/vs/editor/contrib/codelens/codelensController";
+import "monaco-editor/esm/vs/editor/contrib/format/formatActions";
+
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import "../iomd-editor/monaco-language-init";
+
+import { iomdTheme } from "../iomd-editor/iomd-monaco-theme";
+import "../iomd-editor/monaco-custom-styles.css";
+
+export class RevisionDiffContent extends React.Component {
+  static propTypes = {
+    original: PropTypes.string,
+    modified: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.containerDivRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const { original, modified } = this.props;
+
+    monaco.editor.defineTheme("iomdTheme", iomdTheme);
+
+    this.editor = monaco.editor.createDiffEditor(this.containerDivRef.current, {
+      enableSplitViewResizing: false,
+      renderSideBySide: false,
+      language: "text/plain",
+      theme: "iomdTheme"
+    });
+
+    this.editor.setModel({
+      original: monaco.editor.createModel(original, "text/plain"),
+      modified: monaco.editor.createModel(modified, "text/plain")
+    });
+  }
+
+  componentDidUpdate() {
+    const { original, modified } = this.props;
+
+    this.editor.getModel().original.setValue(original);
+    this.editor.getModel().modified.setValue(modified);
+
+    this.editor.layout();
+  }
+
+  render() {
+    return (
+      <div
+        ref={this.containerDivRef}
+        style={{ width: "100%", height: "100%" }}
+      />
+    );
+  }
+}

src/editor/components/modals/revision-diff.jsx

@@ -1,12 +1,12 @@
 import PropTypes from "prop-types";
 import React from "react";
-import ReactDiffViewer from "react-diff-viewer";
 import styled from "@emotion/styled";
 import { connect } from "react-redux";
 
 import Fab from "@material-ui/core/Fab";
 
 import RestoreModal from "./restore-modal";
+import { RevisionDiffContent } from "./revision-diff-content";
 
 import { restoreSelectedRevision } from "../../actions/history-modal-actions";
 
@@ -15,7 +15,9 @@ import { getPreviousRevisionId } from "../../tools/revision-history";
 import THEME from "../../../shared/theme";
 
 const DiffContainer = styled("div")`
-  overflow: auto;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 `;
 
 class RevisionDiffUnconnected extends React.Component {
@@ -64,10 +66,9 @@ class RevisionDiffUnconnected extends React.Component {
               : undefined
           }
         />
-        <ReactDiffViewer
-          oldValue={this.props.previousRevisionContent}
-          newValue={this.props.currentRevisionContent}
-          splitView={false}
+        <RevisionDiffContent
+          original={this.props.previousRevisionContent}
+          modified={this.props.currentRevisionContent}
         />
         {this.props.canRestore && (
           <Fab