[CodeMirror v6] improve cm6 visual parity with current editor

client/modules/IDE/components/ConsoleInput.jsx

@@ -2,11 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
 import { EditorState } from '@codemirror/state';
 import { EditorView, highlightSpecialChars, keymap } from '@codemirror/view';
-import {
-  bracketMatching,
-  syntaxHighlighting,
-  defaultHighlightStyle
-} from '@codemirror/language';
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
@@ -17,6 +13,7 @@ import { Encode } from 'console-feed';
 import RightArrowIcon from '../../../images/right-arrow.svg';
 import { dispatchConsoleEvent } from '../actions/console';
 import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
+import { highlightStyle } from './Editor/utils/highlightStyle';
 
 // heavily inspired by
 // https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx
@@ -119,7 +116,7 @@ function ConsoleInput({ theme, fontSize }) {
         highlightSpecialChars(),
         bracketMatching(),
         closeBrackets(),
-        syntaxHighlighting(defaultHighlightStyle),
+        syntaxHighlighting(highlightStyle),
         javascript(),
         keymap.of([
           enterKeymap,

client/modules/IDE/components/Editor/utils/fileState.js

@@ -19,7 +19,7 @@ import {
   syntaxHighlighting
 } from '@codemirror/language';
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
-import { highlightSelectionMatches, search } from '@codemirror/search';
+import { search } from '@codemirror/search';
 import { history } from '@codemirror/commands';
 import { lintGutter, linter } from '@codemirror/lint';
 import {
@@ -174,7 +174,6 @@ export function createNewFileState(filename, document, settings) {
     highlightActiveLine(),
     highlightActiveLineGutter(),
     highlightSpecialChars(),
-    highlightSelectionMatches(),
     syntaxHighlighting(highlightStyle),
     // Selection extensions
     drawSelection(),

client/styles/components/_console-input.scss

@@ -32,24 +32,24 @@
 .console__editor {
   margin-left: #{math.div(15, $base-font-size)}rem;
   flex: 1;
-  & .CodeMirror {
+  .cm-editor {
     height: auto;
   }
-  & .CodeMirror-lines {
+  .cm-content {
     padding-top: #{math.div(2, $base-font-size)}rem;
   }
 }
 
-.console__editor .CodeMirror {
+.console__editor .cm-editor {
   border: none;
   font-family: Inconsolata,monospace;
   @include themify() {
     background-color: getThemifyVariable('console-input-background-color');
   }
 
-  .CodeMirror-line {
+  .cm-line {
     @include themify() {
       color: getThemifyVariable('console-color');
     }
   }
-}
+}

client/styles/components/_editor.scss

@@ -16,6 +16,10 @@
   .cm-content {
     padding-top: #{math.div(25, $base-font-size)}rem;
 
+    .cm-line {
+      padding: 0 #{math.div(4, $base-font-size)}rem;
+    }
+
     .cm-activeLine {
       // Needed to place the active line highlight behind the selection highlight.
       position: relative;