diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx index 41fc729d4b..32b18684b9 100644 --- a/client/modules/IDE/components/ConsoleInput.jsx +++ b/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, diff --git a/client/modules/IDE/components/Editor/utils/fileState.js b/client/modules/IDE/components/Editor/utils/fileState.js index 49961dc357..3634a1a743 100644 --- a/client/modules/IDE/components/Editor/utils/fileState.js +++ b/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(), diff --git a/client/styles/components/_console-input.scss b/client/styles/components/_console-input.scss index ca0833c782..91e318f110 100644 --- a/client/styles/components/_console-input.scss +++ b/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'); } } -} \ No newline at end of file +} diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index e01e2095f8..29ed3e6e87 100644 --- a/client/styles/components/_editor.scss +++ b/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;