Experimental CodeMirror editor (#1670)

* Basic CodeMirror editor component

Creates a basic CodeMirror-backed editor component. Currently hard-coded
to replace the old editor component but should actually be lazy-loaded
only in experimental mode. Lacks most of the features of the old editor
component so far, but bare-bones functionality is there.

* Add validation errors to CodeMirror editor

Uses the `lint` addon, which basically does the right thing. Interface
is a little strange in that you have to give it a function that returns
a collection of errors (you cannot set errors imperatively). So in
effect-world this means updating the editor configuration each time
errors change, providing a new function to return the new set of errors.
This seems to work well enough.

* Add keybinding for autoformatting to CodeMirror editor

* Support text zoom in CodeMirror editor

* CodeMirror editor jumps to error location on click

* Default to not allowing dev dependencies, then whitelist test & build files

* Handle explicit save keyboard shortcut

Author: outoftime

.eslintrc.json

@@ -44,6 +44,7 @@
       "files": [
         "babel.config.js",
         "gulpfile.js",
+        "jest.config.js",
         "karma.conf.js",
         "script/*.js",
         "webpack.config.js"
@@ -55,6 +56,12 @@
       },
       "rules": {
         "import/no-commonjs": "off",
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ],
         "import/no-nodejs-modules": "off",
         "lodash/import-scope": ["warn", "method-package"]
       },
@@ -74,6 +81,12 @@
         "jest-setup.js"
       ],
       "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ],
         "jest/no-alias-methods": "warn",
         "jest/no-disabled-tests": "warn",
         "jest/no-focused-tests": "warn",
@@ -108,27 +121,24 @@
         }
       }
     },
-    {
-      "files": "src/**/*",
-      "rules": {
-        "import/no-extraneous-dependencies": [
-          "error",
-          {
-            "devDependencies": false
-          }
-        ]
-      }
-    },
     {
       "files": "src/sagas/**/*",
       "rules": {
         "import/order": "off"
       }
     },
     {
-      "files": "test/unit/**/*",
+      "files": "test/**/*",
       "globals": {
         "sinon": true
+      },
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          {
+            "devDependencies": true
+          }
+        ]
       }
     },
     {
@@ -206,7 +216,12 @@
     ],
     "import/no-commonjs": "warn",
     "import/no-cycle": "error",
-    "import/no-extraneous-dependencies": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": false
+      }
+    ],
     "import/no-mutable-exports": "warn",
     "import/no-named-default": "warn",
     "import/no-namespace": "warn",
@@ -222,6 +237,7 @@
       {
         "allow": [
           "brace/**/*",
+          "codemirror/{addon,mode}/**/*",
           "core-js",
           "es6-set/implement",
           "firebase/*",
@@ -277,7 +293,7 @@
     "new-cap": [
       "warn",
       {
-        "capIsNewExceptions": ["Slowparse.HTML", "Record"]
+        "capIsNewExceptions": ["CodeMirror", "Slowparse.HTML", "Record"]
       }
     ],
     "no-alert": "warn",

.renovaterc.json

@@ -36,7 +36,8 @@
         "eslint-plugin-prettier",
         "eslint-plugin-private-props",
         "eslint-plugin-promise",
-        "eslint-plugin-react"
+        "eslint-plugin-react",
+        "eslint-plugin-react-hooks"
       ]
     },
     {
@@ -60,7 +61,6 @@
       "automerge": true,
       "packageNames": ["jest", "jest-extended"]
     },
-
     {
       "groupName": "Karma",
       "automerge": true,
@@ -167,6 +167,7 @@
         "jscodeshift",
         "prettier",
         "sinon",
+        "react-test-renderer",
         "rosie",
         "yarn-deduplicate"
       ],

__factories__/packages/codemirror.js

@@ -0,0 +1,15 @@
+import {Factory} from 'rosie';
+
+export const position = new Factory().attrs({
+  line: 0,
+  ch: 0,
+});
+
+export const change = new Factory()
+  .attr('from', () => position.build())
+  .attr('to', () => position.build())
+  .attrs({
+    text: 'c',
+    removed: '',
+    origin: '+input',
+  });

__factories__/records/Error.js

@@ -0,0 +1,14 @@
+import {List} from 'immutable';
+import {Factory} from 'rosie';
+
+import Error from '../../src/records/Error';
+
+export const errorFactory = new Factory(Error).attrs({
+  row: 3,
+  column: 2,
+  reason: 'bad-code',
+  payload: {},
+  suppresses: new List(),
+  text: 'Bad code',
+  raw: 'Bad code',
+});

__mocks__/bowser.js

@@ -0,0 +1,7 @@
+import constant from 'lodash-es/constant';
+
+export default {
+  getParser: constant({
+    isOS: jest.fn().mockReturnValue(false),
+  }),
+};

__mocks__/codemirror.js

@@ -0,0 +1,21 @@
+import assignIn from 'lodash-es/assignIn';
+import tap from 'lodash-es/tap';
+
+export const Doc = jest.fn(() => ({}));
+
+export default tap(
+  jest.fn(() => ({
+    focus: jest.fn(),
+    getDoc: jest.fn().mockReturnValue({setCursor: jest.fn()}),
+    on: jest.fn(),
+    off: jest.fn(),
+    performLint: jest.fn(),
+    scrollIntoView: jest.fn(),
+    setOption: jest.fn(),
+    setSize: jest.fn(),
+    swapDoc: jest.fn(),
+    getValue: jest.fn().mockReturnValue(''),
+    setValue: jest.fn(),
+  })),
+  CodeMirror => assignIn(CodeMirror, {Doc}),
+);

gulpfile.js

@@ -24,6 +24,10 @@ const srcDir = 'src';
 const distDir = 'dist';
 const stylesheetsDir = path.join(srcDir, 'css');
 const highlightStylesheetsDir = 'node_modules/highlight.js/styles';
+const codemirrorStylesheets = [
+  'node_modules/codemirror/lib/codemirror.css',
+  'node_modules/codemirror/addon/lint/lint.css',
+];
 const staticDir = path.join(srcDir, 'static');
 const bowerComponents = 'bower_components';
 
@@ -60,6 +64,7 @@ gulp.task('css', () => {
     .src([
       path.join(bowerComponents, 'normalize-css/normalize.css'),
       path.join(highlightStylesheetsDir, 'github.css'),
+      ...codemirrorStylesheets,
       path.join(stylesheetsDir, '**/*.css'),
     ])
     .pipe(concat('application.css'))

jest.config.js

@@ -1,9 +1,3 @@
-/* eslint-env node */
-/* eslint-disable import/no-commonjs */
-
-// For a detailed explanation regarding each configuration property, visit:
-// https://jestjs.io/docs/en/configuration.html
-
 module.exports = {
   clearMocks: true,
   moduleNameMapper: {

package.json

@@ -207,6 +207,7 @@
     "brace": "0.11.1",
     "chrono-node": "1.3.11",
     "classnames": "2.2.6",
+    "codemirror": "5.49.0",
     "core-js": "3.5.0",
     "css": "2.2.4",
     "delay": "4.3.0",
@@ -233,6 +234,7 @@
     "loadjs": "4.2.0",
     "lodash-es": "4.17.15",
     "loop-breaker": "0.1.1",
+    "lru-cache": "5.1.1",
     "moment": "2.24.0",
     "mousetrap": "1.6.3",
     "object-inspect": "1.7.0",
@@ -373,6 +375,7 @@
     "postcss-preset-env": "6.7.0",
     "prettier": "1.19.1",
     "raw-loader": "4.0.0",
+    "react-test-renderer": "16.10.2",
     "redux-saga-test-plan": "4.0.0-rc.3",
     "rosie": "2.0.1",
     "script-ext-html-webpack-plugin": "2.1.4",