Javalab: Use codemirror

apps/package.json

@@ -218,6 +218,21 @@
   },
   "dependencies": {
     "@code-dot-org/js-interpreter": "1.3.13",
+    "@codemirror/closebrackets": "^0.17.0",
+    "@codemirror/commands": "^0.17.0",
+    "@codemirror/comment": "^0.17.0",
+    "@codemirror/fold": "^0.17.0",
+    "@codemirror/gutter": "^0.17.0",
+    "@codemirror/highlight": "^0.17.0",
+    "@codemirror/history": "^0.17.0",
+    "@codemirror/language": "^0.17.0",
+    "@codemirror/matchbrackets": "^0.17.0",
+    "@codemirror/rectangular-selection": "^0.17.0",
+    "@codemirror/search": "^0.17.0",
+    "@codemirror/state": "^0.17.0",
+    "@codemirror/view": "^0.17.0",
+    "@codemirror/lang-java": "^0.17.1",
+    "@codemirror/theme-one-dark": "^0.17.5",
     "@microsoft/immersive-reader-sdk": "^1.1.0",
     "ace-builds": "^1.4.12",
     "blockly": "4.20201217.0",

apps/src/javalab/JavalabEditor.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import $ from 'jquery';
-import AceEditor from 'react-ace';
 import {connect} from 'react-redux';
 import {setEditorText} from './javalabRedux';
 import PropTypes from 'prop-types';
 import PaneHeader, {PaneSection} from '@cdo/apps/templates/PaneHeader';
-import 'ace-builds/src-noconflict/mode-java';
-import 'ace-builds/src-noconflict/theme-monokai';
+import {EditorView} from '@codemirror/view';
+import {editorSetup} from './editorSetup';
+import {EditorState} from '@codemirror/state';
 
 const style = {
   editor: {
     width: '100%',
-    height: 600
+    height: 600,
+    backgroundColor: '#282c34'
   }
 };
 
@@ -23,32 +23,37 @@ class JavalabEditor extends React.Component {
     setEditorText: PropTypes.func
   };
 
-  onChange = newValue => {
-    this.props.setEditorText(newValue);
-  };
-
   componentDidMount() {
-    let textInput = $('.ace_text-input');
-    if (textInput) {
-      let textInputElement = textInput.first();
-      textInputElement.attr('aria-label', 'java editor panel');
-    }
+    this.editor = new EditorView({
+      state: EditorState.create({
+        extensions: editorSetup
+      }),
+      parent: this._codeMirror,
+      dispatch: this.dispatchEditorChange()
+    });
   }
 
+  dispatchEditorChange = () => {
+    // tr is a code mirror transaction
+    // see https://codemirror.net/6/docs/ref/#state.Transaction
+    return tr => {
+      // we are overwriting the default dispatch method for codemirror,
+      // so we need to manually call the update method.
+      this.editor.update([tr]);
+      // if there are changes to the editor, update redux.
+      if (!tr.changes.empty && tr.newDoc) {
+        this.props.setEditorText(tr.newDoc.toString());
+      }
+    };
+  };
+
   render() {
     return (
       <div style={this.props.style}>
         <PaneHeader hasFocus={true}>
           <PaneSection>Editor</PaneSection>
         </PaneHeader>
-        <AceEditor
-          mode="java"
-          theme="monokai"
-          onChange={this.onChange}
-          name="java-lab-editor"
-          editorProps={{$blockScrolling: true}}
-          style={style.editor}
-        />
+        <div ref={el => (this._codeMirror = el)} style={style.editor} />
       </div>
     );
   }

apps/src/javalab/editorSetup.js

@@ -0,0 +1,52 @@
+import {
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  keymap
+} from '@codemirror/view';
+import {EditorState, Prec} from '@codemirror/state';
+import {history, historyKeymap} from '@codemirror/history';
+import {foldGutter, foldKeymap} from '@codemirror/fold';
+import {indentOnInput} from '@codemirror/language';
+import {lineNumbers} from '@codemirror/gutter';
+import {defaultKeymap, defaultTabBinding} from '@codemirror/commands';
+import {bracketMatching} from '@codemirror/matchbrackets';
+import {closeBrackets, closeBracketsKeymap} from '@codemirror/closebrackets';
+import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
+import {commentKeymap} from '@codemirror/comment';
+import {rectangularSelection} from '@codemirror/rectangular-selection';
+import {defaultHighlightStyle} from '@codemirror/highlight';
+import {oneDarkTheme, oneDarkHighlightStyle} from '@codemirror/theme-one-dark';
+import {java} from '@codemirror/lang-java';
+
+// Extensions for codemirror. Based on @codemirror/basic-setup, with javascript-specific
+// extensions removed (lint, autocomplete).
+const editorSetup = [
+  lineNumbers(),
+  highlightSpecialChars(),
+  history(),
+  foldGutter(),
+  drawSelection(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  Prec.fallback(defaultHighlightStyle),
+  bracketMatching(),
+  closeBrackets(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    defaultTabBinding
+  ]),
+  oneDarkTheme,
+  oneDarkHighlightStyle,
+  java()
+];
+
+export {editorSetup};

apps/webpack.js

@@ -23,7 +23,11 @@ var toTranspileWithinNodeModules = [
   path.resolve(__dirname, 'node_modules', 'ml-array-min'),
   path.resolve(__dirname, 'node_modules', 'ml-array-rescale'),
   path.resolve(__dirname, 'node_modules', 'ml-distance-euclidean'),
-
+  path.resolve(__dirname, 'node_modules', '@codemirror'),
+  path.resolve(__dirname, 'node_modules', 'style-mod'),
+  path.resolve(__dirname, 'node_modules', 'lezer-tree'),
+  path.resolve(__dirname, 'node_modules', 'lezer-java'),
+  path.resolve(__dirname, 'node_modules', 'lezer'),
   path.resolve(
     __dirname,
     'node_modules',