From 2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 10 Oct 2021 01:11:33 +0200
Subject: feat(web): add CodeMirror 6 editor

---
 language-web/package.json                         |  17 +-
 language-web/src/main/css/index.scss              | 213 ----------------
 language-web/src/main/js/RootStore.tsx            |   4 +-
 language-web/src/main/js/editor/EditorArea.tsx    | 142 ++++++++---
 language-web/src/main/js/editor/EditorButtons.tsx |  35 ++-
 language-web/src/main/js/editor/EditorParent.ts   |  61 +++++
 language-web/src/main/js/editor/EditorStore.ts    | 294 ++++++++++++----------
 language-web/src/main/js/editor/editor.ts         |  18 --
 language-web/src/main/js/index.tsx                |   3 +-
 language-web/src/main/js/theme/ThemeStore.ts      |   4 +
 language-web/yarn.lock                            | 220 +++++++++++++++-
 11 files changed, 588 insertions(+), 423 deletions(-)
 create mode 100644 language-web/src/main/js/editor/EditorParent.ts
 delete mode 100644 language-web/src/main/js/editor/editor.ts

diff --git a/language-web/package.json b/language-web/package.json
index 7a931d95..d55968ee 100644
--- a/language-web/package.json
+++ b/language-web/package.json
@@ -62,20 +62,33 @@
   "dependencies": {
     "ansi-styles": "^6.1.0",
     "@babel/runtime": "^7.15.4",
+    "@codemirror/autocomplete": "^0.19.3",
+    "@codemirror/closebrackets": "^0.19.0",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.0",
+    "@codemirror/gutter": "^0.19.2",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
+    "@codemirror/language": "^0.19.3",
+    "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
+    "@codemirror/state": "^0.19.0",
+    "@codemirror/view": "^0.19.9",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/jetbrains-mono": "^4.5.0",
     "@fontsource/roboto": "^4.5.0",
     "@mui/material": "5.0.2",
     "@mui/icons-material": "5.0.1",
-    "codemirror": "^5.63.1",
     "jquery": "^3.6.0",
     "loglevel": "^1.7.1",
     "loglevel-plugin-prefix": "^0.8.4",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
     "react": "^17.0.2",
-    "react-codemirror2": "npm:react17-codemirror2@^7.2.3",
     "react-dom": "^17.0.2"
   }
 }
diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index 54f3a654..ad876aaf 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -1,13 +1,6 @@
-@use 'sass:map';
 @use '@fontsource/roboto/scss/mixins' as Roboto;
 @use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;
 
-@import 'codemirror/lib/codemirror';
-@import 'codemirror/addon/hint/show-hint';
-@import 'codemirror/theme/material-darker';
-
-@import './themes';
-
 $fontWeights: 300, 400, 500, 700;
 @each $weight in $fontWeights {
   @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight);
@@ -21,209 +14,3 @@ $monoFontWeights: 400, 700;
 }
 @include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable');
 @include JetbrainsMono.fontFaceVariable($fontName: 'JetBrains MonoVariable', $style: italic);
-
-body {
-  font-family: 'Roboto', sans-serif;
-}
-
-.CodeMirror {
-  height: 100%;
-}
-
-.problem-fallback-editor {
-  display: block;
-  height: 100%;
-  width: 100%;
-  resize: none;
-  border: none;
-  outline: none;
-  padding: 4px 4px 4px 16px;
-  white-space: pre;
-  overflow-wrap: normal;
-  overflow: auto;
-}
-
-.CodeMirror, .CodeMirror-hints, .problem-fallback-editor {
-  font-size: 16px;
-  font-family: 'JetBrains MonoVariable', 'JetBrains Mono', monospace;
-  font-feature-settings: 'liga', 'calt';
-  font-weight: 400;
-  text-rendering: optimizeLegibility;
-  line-height: 1.35;
-  letter-spacing: 0;
-}
-
-@each $themeName, $theme in $themes {
-  .cm-s-problem-#{$themeName} {
-    &.CodeMirror {
-      background: map.get($theme, 'background');
-      color: map.get($theme, 'foreground');
-    }
-
-    &.problem-fallback-editor {
-      background: map.get($theme, 'background');
-      color: map.get($theme, 'foreground');
-      caret-color: map.get($theme, 'cursor');
-
-      &::selection {
-        background: map.get($theme, 'selection');
-      }
-    }
-
-    .CodeMirror-gutters {
-      background: map.get($theme, 'background');
-      border: none;
-    }
-
-    .CodeMirror-cursor {
-      border-left: 1px solid map.get($theme, 'cursor');
-    }
-
-    div.CodeMirror-selected,
-    &.CodeMirror-focused div.CodeMirror-selected,
-    .CodeMirror-line::selection,
-    .CodeMirror-line > span::selection,
-    .CodeMirror-line > span > span::selection {
-      background: map.get($theme, 'selection');
-    }
-
-    .CodeMirror-guttermarker,
-    .CodeMirror-guttermarker-subtle,
-    .CodeMirror-linenumber {
-      color: map.get($theme, 'lineNumber');
-    }
-
-    .CodeMirror-activeline-background {
-      background: map.get($theme, 'currentLine');
-    }
-
-    .CodeMirror-activeline-gutter {
-      background: map.get($theme, 'currentLine');
-
-      .CodeMirror-guttermarker,
-      .CodeMirror-guttermarker-subtle,
-      .CodeMirror-linenumber {
-        color: map.get($theme, 'foreground');
-      }
-    }
-
-    .cm-keyword {
-      color: map.get($theme, 'keyword');
-    }
-
-    .cm-number {
-      color: map.get($theme, 'number');
-    }
-
-    .cm-lparen, .cm-rparen {
-      color: map.get($theme, 'delimiter');
-    }
-
-    .cm-comment {
-      color: map.get($theme, 'comment');
-      font-style: italic;
-    }
-
-    .problem-predicate, .problem-class, .problem-reference, .problem-enum {
-      color: map.get($theme, 'predicate');
-    }
-
-    .problem-unique-node {
-      color: map.get($theme, 'uniqueNode');
-    }
-
-    .problem-variable {
-      color: map.get($theme, 'variable');
-    }
-  }
-}
-
-.CodeMirror-hints {
-  background: #333;
-  border: 0;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
-              0 5px 8px 0 rgba(0, 0, 0, 0.14),
-              0 1px 8px 0 rgba(0, 0, 0, 0.12);
-  padding: 0;
-}
-
-.CodeMirror-hint {
-  color: #fff;
-  border-radius: 0;
-}
-
-li.CodeMirror-hint-active {
-  background: rgba(128, 203, 196, 0.2);
-}
-
-.annotations-gutter {
-	width: 12px;
-}
-
-.xtext-annotation_error {
-	width: 12px;
-	height: 1em;
-	background-image: url('images/error_an.gif');
-	background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-.xtext-annotation_warning {
-	width: 12px;
-	height: 1em;
-	background-image: url('images/warning_an.gif');
-	background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-.xtext-annotation_info {
-	width: 12px;
-	height: 1em;
-	background-image: url('images/info_an.gif');
-	background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-.xtext-marker_error {
-	z-index: 30;
-	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
-	background-repeat: repeat-x;
-	background-position: left bottom;
-}
-
-.xtext-marker_warning {
-	z-index: 20;
-	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
-	background-repeat: repeat-x;
-	background-position: left bottom;
-}
-
-.xtext-marker_info {
-	z-index: 10;
-	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAANklEQVQI12NkgIIVRx8tZGBg6GZccfRRKAMDgw8DA0M3AwPDIiYGBoZKBgaG7ghruSsMDAwpABH5CoqwzCoTAAAAAElFTkSuQmCC");
-	background-repeat: repeat-x;
-	background-position: left bottom;
-}
-
-.xtext-marker_read {
-  background: rgba(128, 203, 196, 0.2);
-  display: inline-block;
-}
-
-
-.xtext-marker_write {
-  background: rgba(255, 229, 100, 0.2);
-  display: inline-block;
-}
-
-.problem-abstract {
-  font-style: italic;
-}
-
-.problem-containment {
-	font-weight: 700;
-}
-.problem-new-node {
-  font-style: italic;
-}
diff --git a/language-web/src/main/js/RootStore.tsx b/language-web/src/main/js/RootStore.tsx
index 88b8a445..96e1b26a 100644
--- a/language-web/src/main/js/RootStore.tsx
+++ b/language-web/src/main/js/RootStore.tsx
@@ -8,9 +8,9 @@ export class RootStore {
 
   themeStore;
 
-  constructor() {
+  constructor(initialValue: string) {
     this.themeStore = new ThemeStore();
-    this.editorStore = new EditorStore(this.themeStore);
+    this.editorStore = new EditorStore(initialValue, this.themeStore);
   }
 }
 
diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx
index 531a57c9..58d65184 100644
--- a/language-web/src/main/js/editor/EditorArea.tsx
+++ b/language-web/src/main/js/editor/EditorArea.tsx
@@ -1,41 +1,123 @@
+import { Command, EditorView } from '@codemirror/view';
+import { closeSearchPanel, openSearchPanel } from '@codemirror/search';
+import { closeLintPanel, openLintPanel } from '@codemirror/lint';
 import { observer } from 'mobx-react-lite';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
+import { EditorParent } from './EditorParent';
+import { getLogger } from '../logging';
 import { useRootStore } from '../RootStore';
 
+const log = getLogger('EditorArea');
+
+function usePanel(
+  label: string,
+  stateToSet: boolean,
+  editorView: EditorView | null,
+  openCommand: Command,
+  closeCommand: Command,
+) {
+  const [cachedViewState, setCachedViewState] = useState<boolean>(false);
+  useEffect(() => {
+    if (editorView === null || cachedViewState === stateToSet) {
+      return;
+    }
+    const success = stateToSet ? openCommand(editorView) : closeCommand(editorView);
+    if (!success) {
+      log.error(
+        'Failed to synchronize',
+        label,
+        'panel state - store state:',
+        cachedViewState,
+        'view state:',
+        stateToSet,
+      );
+    }
+    setCachedViewState(stateToSet);
+  }, [
+    stateToSet,
+    editorView,
+    cachedViewState,
+    label,
+    openCommand,
+    closeCommand,
+  ]);
+  return setCachedViewState;
+}
+
 export const EditorArea = observer(() => {
   const { editorStore } = useRootStore();
-  const { CodeMirror } = editorStore.chunk || {};
-  const fallbackTextarea = useRef<HTMLTextAreaElement>(null);
-
-  if (!CodeMirror) {
-    return (
-      <textarea
-        value={editorStore.value}
-        onChange={(e) => editorStore.updateValue(e.target.value)}
-        ref={fallbackTextarea}
-        className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`}
-      />
-    );
-  }
-
-  const textarea = fallbackTextarea.current;
-  if (textarea) {
-    editorStore.setInitialSelection(
-      textarea.selectionStart,
-      textarea.selectionEnd,
-      document.activeElement === textarea,
-    );
-  }
+  const editorParentRef = useRef<HTMLDivElement | null>(null);
+  const [editorViewState, setEditorViewState] = useState<EditorView | null>(null);
+
+  const setSearchPanelOpen = usePanel(
+    'search',
+    editorStore.showSearchPanel,
+    editorViewState,
+    openSearchPanel,
+    closeSearchPanel,
+  );
+
+  const setLintPanelOpen = usePanel(
+    'lint',
+    editorStore.showLintPanel,
+    editorViewState,
+    openLintPanel,
+    closeLintPanel,
+  );
+
+  useEffect(() => {
+    if (editorParentRef.current === null) {
+      // Nothing to clean up.
+      return () => {};
+    }
+
+    const editorView = new EditorView({
+      state: editorStore.state,
+      parent: editorParentRef.current,
+      dispatch: (transaction) => {
+        editorStore.onTransaction(transaction);
+        editorView.update([transaction]);
+        if (editorView.state !== editorStore.state) {
+          log.error(
+            'Failed to synchronize editor state - store state:',
+            editorStore.state,
+            'view state:',
+            editorView.state,
+          );
+        }
+      },
+    });
+    setEditorViewState(editorView);
+    setSearchPanelOpen(false);
+    setLintPanelOpen(false);
+    // `dispatch` is bound to the view instance,
+    // so it does not have to be called as a method.
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    editorStore.updateDispatcher(editorView.dispatch);
+    log.info('Editor created');
+
+    return () => {
+      editorStore.updateDispatcher(null);
+      editorView.destroy();
+      log.info('Editor destroyed');
+    };
+  }, [
+    editorParentRef,
+    editorStore,
+    setSearchPanelOpen,
+    setLintPanelOpen,
+  ]);
 
   return (
-    <CodeMirror
-      value={editorStore.value}
-      options={editorStore.codeMirrorOptions}
-      editorDidMount={(editor) => editorStore.editorDidMount(editor)}
-      editorWillUnmount={() => editorStore.editorWillUnmount()}
-      onBeforeChange={(_editor, _data, value) => editorStore.updateValue(value)}
-      onChange={() => editorStore.reportChanged()}
+    <EditorParent
+      className="dark"
+      sx={{
+        '.cm-lineNumbers': editorStore.showLineNumbers ? {} : {
+          display: 'none !important',
+        },
+      }}
+      ref={editorParentRef}
     />
   );
 });
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index 56577e82..9622475c 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -2,8 +2,10 @@ import { observer } from 'mobx-react-lite';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import CheckIcon from '@mui/icons-material/Check';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import RedoIcon from '@mui/icons-material/Redo';
+import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
 import React from 'react';
 
@@ -37,15 +39,34 @@ export const EditorButtons = observer(() => {
           <RedoIcon fontSize="small" />
         </ToggleButton>
       </ToggleButtonGroup>
-      <ToggleButton
-        selected={editorStore.showLineNumbers}
-        onChange={() => editorStore.toggleLineNumbers()}
+      <ToggleButtonGroup
         size="small"
-        aria-label="Show line numbers"
-        value="show-line-numbers"
       >
-        <FormatListNumberedIcon fontSize="small" />
-      </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showLineNumbers}
+          onClick={() => editorStore.toggleLineNumbers()}
+          aria-label="Show line numbers"
+          value="show-line-numbers"
+        >
+          <FormatListNumberedIcon fontSize="small" />
+        </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showSearchPanel}
+          onClick={() => editorStore.toggleSearchPanel()}
+          aria-label="Show find/replace"
+          value="show-search-panel"
+        >
+          <SearchIcon fontSize="small" />
+        </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showLintPanel}
+          onClick={() => editorStore.toggleLintPanel()}
+          aria-label="Show errors and warnings"
+          value="show-lint-panel"
+        >
+          <CheckIcon fontSize="small" />
+        </ToggleButton>
+      </ToggleButtonGroup>
     </Stack>
   );
 });
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
new file mode 100644
index 00000000..bf67522b
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -0,0 +1,61 @@
+import { styled } from '@mui/material/styles';
+
+export const EditorParent = styled('div')(({ theme }) => ({
+  background: theme.palette.background.default,
+  '&, .cm-editor': {
+    height: '100%',
+  },
+  '.cm-scroller': {
+    fontSize: 16,
+    fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+    fontFeatureSettings: '"liga", "calt"',
+    fontWeight: 400,
+    letterSpacing: 0,
+    textRendering: 'optimizeLegibility',
+    color: theme.palette.text.secondary,
+  },
+  '.cm-gutters': {
+    background: theme.palette.background.default,
+    color: theme.palette.text.disabled,
+    border: 'none',
+  },
+  '.cm-specialChar': {
+    color: theme.palette.secondary.main,
+  },
+  '.cm-activeLine': {
+    background: 'rgba(0, 0, 0, 0.3)',
+  },
+  '.cm-activeLineGutter': {
+    background: 'rgba(0, 0, 0, 0.3)',
+    color: theme.palette.text.primary,
+  },
+  '.cm-cursor, .cm-cursor-primary': {
+    borderColor: theme.palette.primary.main,
+    background: theme.palette.common.black,
+  },
+  '.cm-selectionBackground': {
+    background: '#3e4453',
+  },
+  '.cm-focused': {
+    outline: 'none',
+    '.cm-selectionBackground': {
+      background: '#3e4453',
+    },
+  },
+  '.cm-panels-top': {
+    color: theme.palette.text.secondary,
+  },
+  '.cm-panel': {
+    background: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    'button[name="close"]': {
+      // HACK We can't hook the panel close button to go through `EditorStore`,
+      // so we hide it altogether.
+      display: 'none',
+    },
+  },
+  '.cmt-comment': {
+    fontVariant: 'italic',
+    color: theme.palette.text.disabled,
+  },
+}));
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 705020b9..326c02a1 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -1,201 +1,217 @@
-import type { Editor, EditorConfiguration } from 'codemirror';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { commentKeymap } from '@codemirror/comment';
+import { foldGutter, foldKeymap } from '@codemirror/fold';
+import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter';
+import { classHighlightStyle } from '@codemirror/highlight';
+import {
+  history,
+  historyKeymap,
+  redo,
+  redoDepth,
+  undo,
+  undoDepth,
+} from '@codemirror/history';
+import { indentOnInput } from '@codemirror/language';
+import { lintKeymap } from '@codemirror/lint';
+import { bracketMatching } from '@codemirror/matchbrackets';
+import { rectangularSelection } from '@codemirror/rectangular-selection';
+import { searchConfig, searchKeymap } from '@codemirror/search';
+import {
+  EditorState,
+  StateCommand,
+  StateEffect,
+  Transaction,
+  TransactionSpec,
+} from '@codemirror/state';
+import {
+  drawSelection,
+  EditorView,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
+} from '@codemirror/view';
 import {
-  createAtom,
   makeAutoObservable,
   observable,
-  runInAction,
+  reaction,
 } from 'mobx';
-import type { IXtextOptions, IXtextServices } from 'xtext/xtext-codemirror';
 
-import type { IEditorChunk } from './editor';
 import { getLogger } from '../logging';
 import type { ThemeStore } from '../theme/ThemeStore';
 
 const log = getLogger('EditorStore');
 
-const xtextLang = 'problem';
-
-const xtextOptions: IXtextOptions = {
-  xtextLang,
-  enableFormattingAction: true,
-};
-
-const codeMirrorGlobalOptions: EditorConfiguration = {
-  mode: `xtext/${xtextLang}`,
-  indentUnit: 2,
-  styleActiveLine: true,
-  screenReaderLabel: 'Model source code',
-  inputStyle: 'contenteditable',
-};
-
 export class EditorStore {
   themeStore;
 
-  atom;
+  state: EditorState;
 
-  chunk?: IEditorChunk;
+  emptyHistory: unknown;
 
-  editor?: Editor;
+  showLineNumbers = false;
 
-  xtextServices?: IXtextServices;
+  showSearchPanel = false;
 
-  value = '';
+  showLintPanel = false;
 
-  showLineNumbers = false;
+  readonly defaultDispatcher = (tr: Transaction): void => {
+    this.onTransaction(tr);
+  };
 
-  initialSelection!: { start: number, end: number, focused: boolean };
+  dispatcher = this.defaultDispatcher;
 
-  constructor(themeStore: ThemeStore) {
+  constructor(initialValue: string, themeStore: ThemeStore) {
     this.themeStore = themeStore;
-    this.atom = createAtom('EditorStore');
-    this.resetInitialSelection();
+    this.state = EditorState.create({
+      doc: initialValue,
+      extensions: [
+        autocompletion(),
+        classHighlightStyle.extension,
+        closeBrackets(),
+        bracketMatching(),
+        drawSelection(),
+        EditorState.allowMultipleSelections.of(true),
+        EditorView.theme({}, {
+          dark: this.themeStore.darkMode,
+        }),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        indentOnInput(),
+        rectangularSelection(),
+        searchConfig({
+          top: true,
+          matchCase: true,
+        }),
+        // We add the gutters to `extensions` in the order we want them to appear.
+        foldGutter(),
+        lineNumbers(),
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...commentKeymap,
+          ...completionKeymap,
+          ...foldKeymap,
+          ...historyKeymap,
+          indentWithTab,
+          // Override keys in `lintKeymap` to go through the `EditorStore`.
+          { key: 'Mod-Shift-m', run: () => this.setLintPanelOpen(true) },
+          ...lintKeymap,
+          // Override keys in `searchKeymap` to go through the `EditorStore`.
+          { key: 'Mod-f', run: () => this.setSearchPanelOpen(true), scope: 'editor search-panel' },
+          { key: 'Escape', run: () => this.setSearchPanelOpen(false), scope: 'editor search-panel' },
+          ...searchKeymap,
+          ...defaultKeymap,
+        ]),
+      ],
+    });
+    reaction(
+      () => this.themeStore.darkMode,
+      (darkMode) => {
+        log.debug('Update editor dark mode', darkMode);
+        this.dispatch({
+          effects: [
+            StateEffect.appendConfig.of(EditorView.theme({}, {
+              dark: darkMode,
+            })),
+          ],
+        });
+      },
+    );
     makeAutoObservable(this, {
       themeStore: false,
-      atom: false,
-      chunk: observable.ref,
-      editor: observable.ref,
-      xtextServices: observable.ref,
-      initialSelection: false,
+      state: observable.ref,
+      defaultDispatcher: false,
+      dispatcher: false,
     });
-    this.loadChunk();
   }
 
-  private loadChunk(): void {
-    const loadingStartMillis = Date.now();
-    log.info('Requesting editor chunk');
-    import('./editor').then(({ editorChunk }) => {
-      runInAction(() => {
-        this.chunk = editorChunk;
-      });
-      const loadingDurationMillis = Date.now() - loadingStartMillis;
-      log.info('Loaded editor chunk in', loadingDurationMillis, 'ms');
-    }).catch((error) => {
-      log.error('Error while loading editor', error);
-    });
+  updateDispatcher(newDispatcher: ((tr: Transaction) => void) | null): void {
+    this.dispatcher = newDispatcher || this.defaultDispatcher;
   }
 
-  setInitialSelection(start: number, end: number, focused: boolean): void {
-    this.initialSelection = { start, end, focused };
-    this.applyInitialSelectionToEditor();
+  onTransaction(tr: Transaction): void {
+    log.trace('Editor transaction', tr);
+    this.state = tr.state;
   }
 
-  private resetInitialSelection(): void {
-    this.initialSelection = {
-      start: 0,
-      end: 0,
-      focused: false,
-    };
+  dispatch(...specs: readonly TransactionSpec[]): void {
+    this.dispatcher(this.state.update(...specs));
   }
 
-  private applyInitialSelectionToEditor(): void {
-    if (this.editor) {
-      const { start, end, focused } = this.initialSelection;
-      const doc = this.editor.getDoc();
-      const startPos = doc.posFromIndex(start);
-      const endPos = doc.posFromIndex(end);
-      doc.setSelection(startPos, endPos, {
-        scroll: true,
-      });
-      if (focused) {
-        this.editor.focus();
-      }
-      this.resetInitialSelection();
-    }
+  doStateCommand(command: StateCommand): boolean {
+    return command({
+      state: this.state,
+      dispatch: this.dispatcher,
+    });
   }
 
   /**
-   * Attaches a new CodeMirror instance and creates Xtext services.
-   *
-   * The store will not subscribe to any CodeMirror events. Instead,
-   * the editor component should subscribe to them and relay them to the store.
-   *
-   * @param newEditor The new CodeMirror instance
+   * @returns `true` if there is history to undo
    */
-  editorDidMount(newEditor: Editor): void {
-    if (!this.chunk) {
-      throw new Error('Editor not loaded yet');
-    }
-    if (this.editor) {
-      throw new Error('CoreMirror editor mounted before unmounting');
-    }
-    this.editor = newEditor;
-    this.xtextServices = this.chunk.createServices(newEditor, xtextOptions);
-    this.applyInitialSelectionToEditor();
+  get canUndo(): boolean {
+    return undoDepth(this.state) > 0;
   }
 
-  editorWillUnmount(): void {
-    if (!this.chunk) {
-      throw new Error('Editor not loaded yet');
-    }
-    if (this.editor) {
-      this.chunk.removeServices(this.editor);
-    }
-    delete this.editor;
-    delete this.xtextServices;
+  // eslint-disable-next-line class-methods-use-this
+  undo(): void {
+    log.debug('Undo', this.doStateCommand(undo));
   }
 
   /**
-   * Updates the contents of the editor.
-   *
-   * @param newValue The new contents of the editor
+   * @returns `true` if there is history to redo
    */
-  updateValue(newValue: string): void {
-    this.value = newValue;
-  }
-
-  reportChanged(): void {
-    this.atom.reportChanged();
-  }
-
-  protected observeEditorChanges(): void {
-    this.atom.reportObserved();
+  get canRedo(): boolean {
+    return redoDepth(this.state) > 0;
   }
 
-  get codeMirrorTheme(): string {
-    return `problem-${this.themeStore.className}`;
+  // eslint-disable-next-line class-methods-use-this
+  redo(): void {
+    log.debug('Redo', this.doStateCommand(redo));
   }
 
-  get codeMirrorOptions(): EditorConfiguration {
-    return {
-      ...codeMirrorGlobalOptions,
-      theme: this.codeMirrorTheme,
-      lineNumbers: this.showLineNumbers,
-    };
+  toggleLineNumbers(): void {
+    this.showLineNumbers = !this.showLineNumbers;
+    log.debug('Show line numbers', this.showLineNumbers);
   }
 
   /**
-   * @returns `true` if there is history to undo
+   * Sets whether the CodeMirror search panel should be open.
+   *
+   * This method can be used as a CodeMirror command,
+   * because it returns `false` if it didn't execute,
+   * allowing other commands for the same keybind to run instead.
+   * This matches the behavior of the `openSearchPanel` and `closeSearchPanel`
+   * commands from `'@codemirror/search'`.
+   *
+   * @param newShosSearchPanel whether we should show the search panel
+   * @returns `true` if the state was changed, `false` otherwise
    */
-  get canUndo(): boolean {
-    this.observeEditorChanges();
-    if (!this.editor) {
+  setSearchPanelOpen(newShowSearchPanel: boolean): boolean {
+    if (this.showSearchPanel === newShowSearchPanel) {
       return false;
     }
-    const { undo: undoSize } = this.editor.historySize();
-    return undoSize > 0;
+    this.showSearchPanel = newShowSearchPanel;
+    log.debug('Show search panel', this.showSearchPanel);
+    return true;
   }
 
-  undo(): void {
-    this.editor?.undo();
+  toggleSearchPanel(): void {
+    this.setSearchPanelOpen(!this.showSearchPanel);
   }
 
-  /**
-   * @returns `true` if there is history to redo
-   */
-  get canRedo(): boolean {
-    this.observeEditorChanges();
-    if (!this.editor) {
+  setLintPanelOpen(newShowLintPanel: boolean): boolean {
+    if (this.showLintPanel === newShowLintPanel) {
       return false;
     }
-    const { redo: redoSize } = this.editor.historySize();
-    return redoSize > 0;
+    this.showLintPanel = newShowLintPanel;
+    log.debug('Show lint panel', this.showLintPanel);
+    return true;
   }
 
-  redo(): void {
-    this.editor?.redo();
-  }
-
-  toggleLineNumbers(): void {
-    this.showLineNumbers = !this.showLineNumbers;
+  toggleLintPanel(): void {
+    this.setLintPanelOpen(!this.showLintPanel);
   }
 }
diff --git a/language-web/src/main/js/editor/editor.ts b/language-web/src/main/js/editor/editor.ts
deleted file mode 100644
index fbf8796b..00000000
--- a/language-web/src/main/js/editor/editor.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'codemirror/addon/selection/active-line';
-import 'mode-problem';
-import { Controlled } from 'react-codemirror2';
-import { createServices, removeServices } from 'xtext/xtext-codemirror';
-
-export interface IEditorChunk {
-  CodeMirror: typeof Controlled;
-
-  createServices: typeof createServices;
-
-  removeServices: typeof removeServices;
-}
-
-export const editorChunk: IEditorChunk = {
-  CodeMirror: Controlled,
-  createServices,
-  removeServices,
-};
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx
index 80c70f23..66ad1f28 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -44,8 +44,7 @@ age(bob, bobAge).
 scope Family = 1, Person += 5..10.
 `;
 
-const rootStore = new RootStore();
-rootStore.editorStore.updateValue(initialValue);
+const rootStore = new RootStore(initialValue);
 
 const app = (
   <RootStoreProvider rootStore={rootStore}>
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
index 3bbea3a1..db94d9f7 100644
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -51,6 +51,10 @@ export class ThemeStore {
     return responsiveFontSizes(materialUiTheme);
   }
 
+  get darkMode(): boolean {
+    return this.currentThemeData.paletteMode === 'dark';
+  }
+
   get className(): string {
     return this.currentThemeData.className;
   }
diff --git a/language-web/yarn.lock b/language-web/yarn.lock
index e87bc6ee..51c551a7 100644
--- a/language-web/yarn.lock
+++ b/language-web/yarn.lock
@@ -972,6 +972,189 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@codemirror/autocomplete@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.3.tgz#0266ac29617277d2d8cc7dcfb600c1e50c332d35"
+  integrity sha512-5juP6hVrHAogzQ0JUTQuibE8j1seqeGNJ98qLUPuliI6kLBg5INS4qvUI1Brqye+wYPFu7UHqrrn13RLh5YSzw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.2"
+    "@codemirror/tooltip" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/closebrackets@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz#69fdcee85779d638a00a42becd9f53a33a26d77f"
+  integrity sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/commands@^0.19.5":
+  version "0.19.5"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.19.5.tgz#2607b5c12c5c96df2cabce2e43f6285c07cfaf11"
+  integrity sha512-8PZOtx7d/GbKhFYA88zs2wINDtaUgj3pEjLYScKTd/Vsyw8qOp86tJQQNnMFTRZj/ISQl9Lbg3aAmHvroMqspw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/comment@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/comment/-/comment-0.19.0.tgz#4f23497924e9346898c2e0123011acc535a0bea6"
+  integrity sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/fold@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/fold/-/fold-0.19.0.tgz#cd57537870ff581ae57199a7658abe3f9908f2ed"
+  integrity sha512-cHbr2hqKe2pMls1Ia1a4IwXly87ljpmvPUKkul6H/Uv9kCwpQLOP3dGMPXbMGm/1hGjBF/0wnc+m2iba9iJBTQ==
+  dependencies:
+    "@codemirror/gutter" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/gutter@^0.19.0", "@codemirror/gutter@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.19.2.tgz#afc61dbe2977ff83aff8675200deab6d04244c5c"
+  integrity sha512-xiayxhc9uq1UXiG/r/E3AAYXZt+EtSdgdQXC4nlMHvbfw2EmtryfzGO3HrgasHRyAW8uNCaO9JO4n7mU7rm1rQ==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/highlight@^0.19.6":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.6.tgz#7f2e066f83f5649e8e0748a3abe0aaeaf64b8ac2"
+  integrity sha512-+eibu6on9quY8uN3xJ/n3rH+YIDLlpX7YulVmFvqAIz/ukRQ5tWaBmB7fMixHmnmRIRBRZgB8rNtonuMwZSAHQ==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    style-mod "^4.0.0"
+
+"@codemirror/history@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.19.0.tgz#cc8095c927c9566f7b69fa404074edde4c54d39c"
+  integrity sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/language@^0.19.0", "@codemirror/language@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.3.tgz#e4f61555dec0787f757b78348a54a00f3bb23c9c"
+  integrity sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.5"
+    "@lezer/lr" "^0.15.0"
+
+"@codemirror/lint@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.19.2.tgz#1c3932cffd635da796bea3384256b0a315b6fe1e"
+  integrity sha512-477qvXWwuf24YsBi1DzjrGyzM+qfPe5L4xEHGxQTGOMq6R0+QAFKppOJsxN3y7gzDpLrZSYZdhJzWevOuliZQg==
+  dependencies:
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/tooltip" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/matchbrackets@^0.19.0", "@codemirror/matchbrackets@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz#1f430ada6fa21af2205280ff344ef57bb95dd3cb"
+  integrity sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/panel@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.19.0.tgz#18c7a253a7a1ef686bece1ef13ec0e5eb6603265"
+  integrity sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/rangeset@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.19.1.tgz#03ab6f93fb60d9ba98f810b98ed9471cba1e3854"
+  integrity sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+
+"@codemirror/rectangular-selection@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/rectangular-selection/-/rectangular-selection-0.19.1.tgz#5a88ece4fb68ce5682539497db8a64fc015aae63"
+  integrity sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.4"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/search@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-0.19.2.tgz#d549c3daa527e17c173cdfc90b7c1b02deab1502"
+  integrity sha512-TrRxUxyJ/a7HXtUvMZhgkOUbKE1xO33UhXjn1XACEHKWhgovw1vEeEEti9dZejN8/QOOFJed39InUxmp7oQ8HA==
+  dependencies:
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^0.19.0", "@codemirror/state@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.19.2.tgz#81de81f89e87b9362b8bc6d51135637dddd4d33d"
+  integrity sha512-dDqCrtkb0c/LYUlvQBLyLfkISEskbZnhvBbcVOF4j2AusJ1ptJ3EGMxBL9G16GP1TOdC1T613gA1J1qc3pbfGQ==
+  dependencies:
+    "@codemirror/text" "^0.19.0"
+
+"@codemirror/text@^0.19.0", "@codemirror/text@^0.19.2", "@codemirror/text@^0.19.4":
+  version "0.19.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.19.4.tgz#522cbe93becdf7637ca7148b67f628b3d8b8fdf5"
+  integrity sha512-Msd1ImS+Mmref28+oyoOrBwqjH4lbCVO/5ol2jRaCEYH7+KaMocxFADZomPLnMPgDW6Gc4mu/K2lj8IjAOFdTA==
+
+"@codemirror/tooltip@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/tooltip/-/tooltip-0.19.2.tgz#a8f6b703edb64748106e136ec1f099a981a3f1d4"
+  integrity sha512-FMMGGLrr62Ck54NEz8yTGpgo8ihobAsC3sbeQg+OpY4jv9dt1yIP5B9LzsIV+TXQB57JZQZxtTqzkhnFq76haw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/view@^0.19.0", "@codemirror/view@^0.19.9":
+  version "0.19.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.9.tgz#cbdcbc398818e7c9603c81e4b2a2868ec0a1f954"
+  integrity sha512-d2Z2rFl53yTwvhsRYtS97xT7ce1f/Q/NNE2uDg/Be1MVjP2v1OlwUTyTosBmxiCt4oUvMklfa+EdPGOATVJhtg==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
@@ -1117,6 +1300,18 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
+  version "0.15.7"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.7.tgz#8b445dae9777f689783132cf490770ece3c03d7b"
+  integrity sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ==
+
+"@lezer/lr@^0.15.0":
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.4.tgz#634670d7224040fddac1370af01211eecd9ac0a0"
+  integrity sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==
+  dependencies:
+    "@lezer/common" "^0.15.0"
+
 "@mui/core@5.0.0-alpha.49":
   version "5.0.0-alpha.49"
   resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.49.tgz#e74d6ec7f83f85b55d48aa05ea6b7cefff88ce1b"
@@ -2294,11 +2489,6 @@ clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
-codemirror@^5.63.1:
-  version "5.63.1"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.63.1.tgz#b0b9e8444206fd6a43a58a4b31d5740bb891fa57"
-  integrity sha512-baivaNZreZOGh1/tYyTvCupC9NeWk7qlZeGUDi4nFKj/J0JU8FYKZND4QqLw70P7HOttlCt4JJAOj9GoIhHEkA==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2470,6 +2660,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -6095,11 +6290,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-"react-codemirror2@npm:react17-codemirror2@^7.2.3":
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/react17-codemirror2/-/react17-codemirror2-7.2.3.tgz#ff1ec8f5feadf9c03fb25095c40326971f3ce106"
-  integrity sha512-XOIu5k3IFH6ajunRw5HO9BX9N6u9T7tby7BN4tKi/sz0Yq3pvd0xylbvq5PbScl2oowRMcyiJXkpPRI8+h0H9Q==
-
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -6947,6 +7137,11 @@ style-loader@^3.3.0:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.0.tgz#d66ea95fc50b22f8b79b69a9e414760fcf58d8d8"
   integrity sha512-szANub7ksJtQioJYtpbWwh1hUl99uK15n5HDlikeCRil/zYMZgSxucHddyF/4A3qJMUiAjPhFowrrQuNMA7jwQ==
 
+style-mod@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
 style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
@@ -7480,6 +7675,11 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+w3c-keyname@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
 watchpack@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"
-- 
cgit v1.2.3-70-g09d2