Merge pull request #41273 from code-dot-org/ben/javalab-bump-codemirror

Bump Javalab Codemirror version
code-dot-org · Jun 24, 2021 · 540f74e · 540f74e
2 parents eb5a72b + 58f2226
commit 540f74e
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 165 deletions.
diff --git a/apps/package.json b/apps/package.json
@@ -221,21 +221,21 @@
   "dependencies": {
     "@code-dot-org/js-interpreter": "1.3.13",
     "@code-dot-org/remark-plugins": "^1.1.0",
-    "@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/lang-java": "^0.17.1",
-    "@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/theme-one-dark": "^0.17.5",
-    "@codemirror/view": "^0.17.0",
+    "@codemirror/closebrackets": "^0.18.0",
+    "@codemirror/commands": "^0.18.0",
+    "@codemirror/comment": "^0.18.0",
+    "@codemirror/fold": "^0.18.0",
+    "@codemirror/gutter": "^0.18.0",
+    "@codemirror/highlight": "^0.18.0",
+    "@codemirror/history": "^0.18.0",
+    "@codemirror/lang-java": "^0.18.0",
+    "@codemirror/language": "^0.18.0",
+    "@codemirror/matchbrackets": "^0.18.0",
+    "@codemirror/rectangular-selection": "^0.18.0",
+    "@codemirror/search": "^0.18.0",
+    "@codemirror/state": "^0.18.0",
+    "@codemirror/theme-one-dark": "^0.18.0",
+    "@codemirror/view": "^0.18.0",
     "@microsoft/immersive-reader-sdk": "^1.1.0",
     "ace-builds": "^1.4.12",
     "blockly": "5.20210325.1",

diff --git a/apps/src/javalab/JavalabEditor.jsx b/apps/src/javalab/JavalabEditor.jsx
@@ -16,7 +16,7 @@ import PaneHeader, {
 } from '@cdo/apps/templates/PaneHeader';
 import {EditorView} from '@codemirror/view';
 import {editorSetup, lightMode} from './editorSetup';
-import {EditorState, tagExtension} from '@codemirror/state';
+import {EditorState, Compartment} from '@codemirror/state';
 import {projectChanged} from '@cdo/apps/code-studio/initApp/project';
 import {oneDark} from '@codemirror/theme-one-dark';
 import color from '@cdo/apps/util/color';
@@ -88,6 +88,9 @@ class JavalabEditor extends React.Component {
     this.updateFileType = this.updateFileType.bind(this);
     this._codeMirrors = {};
 
+    // Used to manage dark and light mode configuration.
+    this.editorModeConfigCompartment = new Compartment();
+
     // fileMetadata is a dictionary of file key -> filename.
     let fileMetadata = {};
     // tab order is an ordered list of file keys.
@@ -131,9 +134,10 @@ class JavalabEditor extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.isDarkMode !== this.props.isDarkMode) {
       const newStyle = this.props.isDarkMode ? oneDark : lightMode;
+
       Object.keys(this.editors).forEach(editorKey => {
         this.editors[editorKey].dispatch({
-          reconfigure: {style: newStyle}
+          effects: this.editorModeConfigCompartment.reconfigure(newStyle)
         });
       });
     }
@@ -158,10 +162,13 @@ class JavalabEditor extends React.Component {
     const extensions = [...editorSetup];
 
     if (isDarkMode) {
-      extensions.push(tagExtension('style', oneDark));
+      const darkModeExtension = this.editorModeConfigCompartment.of(oneDark);
+      extensions.push(darkModeExtension);
     } else {
-      extensions.push(tagExtension('style', lightMode));
+      const lightModeExtension = this.editorModeConfigCompartment.of(lightMode);
+      extensions.push(lightModeExtension);
     }
+
     this.editors[key] = new EditorView({
       state: EditorState.create({
         doc: doc,

diff --git a/apps/test/unit/javalab/JavalabEditorTest.js b/apps/test/unit/javalab/JavalabEditorTest.js
@@ -201,18 +201,20 @@ describe('Java Lab Editor Test', () => {
   describe('componentDidUpdate', () => {
     it('toggles between light and dark modes', () => {
       const editor = createWrapper();
-      const javalabCodeMirrors = editor.find('JavalabEditor').instance()
-        .editors;
+      const javalabEditor = editor.find('JavalabEditor').instance();
+      const javalabCodeMirrors = javalabEditor.editors;
       const firstEditor = Object.values(javalabCodeMirrors)[0];
 
       const dispatchSpy = sinon.spy(firstEditor, 'dispatch');
       store.dispatch(setIsDarkMode(true));
       expect(dispatchSpy).to.have.been.calledWith({
-        reconfigure: {style: oneDark}
+        effects: javalabEditor.editorModeConfigCompartment.reconfigure(oneDark)
       });
       store.dispatch(setIsDarkMode(false));
       expect(dispatchSpy).to.have.been.calledWith({
-        reconfigure: {style: lightMode}
+        effects: javalabEditor.editorModeConfigCompartment.reconfigure(
+          lightMode
+        )
       });
     });
   });