Update CodeMirror to ^6.0.0 (#6878)

* Update lang-packs, remove unused ones, install new ones, setup highlighting, change imports, etc * Double check elixir, nim, abap * Adjust import * Update wren's deps * Add jq codemirror highlighting (#6879) * Add more lang ts declarations * Get latest gleam codemirror extension
exercism · May 9, 2024 · 53e0d73 · 53e0d73
1 parent c85d5f0
commit 53e0d73
Show file tree

Hide file tree

Showing 6 changed files with 372 additions and 354 deletions.
diff --git a/app/javascript/components/misc/CodeMirror.tsx b/app/javascript/components/misc/CodeMirror.tsx
@@ -1,10 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { EditorView, keymap, KeyBinding } from '@codemirror/view'
-import { basicSetup } from '@codemirror/basic-setup'
+import { basicSetup } from 'codemirror'
 import { EditorState, Compartment, StateEffect } from '@codemirror/state'
-import { indentUnit } from '@codemirror/language'
-import { defaultHighlightStyle } from '@codemirror/highlight'
-import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import {
+  indentUnit,
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from '@codemirror/language'
+import { oneDark } from '@codemirror/theme-one-dark'
+
 import { Themes } from '../editor/types'
 import { loadLanguageCompartment } from './CodeMirror/languageCompartment'
 import { a11yTabBindingPanel } from './CodeMirror/a11yTabBinding'
@@ -90,12 +94,12 @@ export default function CodeMirror({
             keymap.of(isTabCaptured ? [tabBinding] : [])
           ),
           indentUnit.of(indentChar),
-          wrapCompartment.of(wrap ? EditorView.lineWrapping : []),
           themeCompartment.of(
-            theme === Themes.LIGHT
-              ? [defaultHighlightStyle]
-              : [oneDarkTheme, oneDarkHighlightStyle]
+            theme !== Themes.LIGHT
+              ? oneDark
+              : syntaxHighlighting(defaultHighlightStyle)
           ),
+          wrapCompartment.of(wrap ? EditorView.lineWrapping : []),
           readonlyCompartment.of([EditorView.editable.of(!readonly)]),
         ],
       }),
@@ -132,9 +136,9 @@ export default function CodeMirror({
 
     viewRef.current.dispatch({
       effects: themeCompartment.reconfigure(
-        theme === Themes.LIGHT
-          ? [defaultHighlightStyle]
-          : [oneDarkTheme, oneDarkHighlightStyle]
+        theme !== Themes.LIGHT
+          ? oneDark
+          : syntaxHighlighting(defaultHighlightStyle)
       ),
     })
   }, [theme])

diff --git a/app/javascript/components/misc/CodeMirror/a11yTabBinding.ts b/app/javascript/components/misc/CodeMirror/a11yTabBinding.ts
@@ -1,7 +1,5 @@
-import { EditorView } from '@codemirror/view'
-import { Panel } from '@codemirror/panel'
+import { EditorView, Panel, showPanel } from '@codemirror/view'
 import { StateField } from '@codemirror/state'
-import { showPanel } from '@codemirror/panel'
 
 // See the note on this near the bottom of the file
 // import { insertTab, indentSelection } from '@codemirror/commands'

diff --git a/app/javascript/components/misc/CodeMirror/languageCompartment.ts b/app/javascript/components/misc/CodeMirror/languageCompartment.ts
@@ -1,4 +1,4 @@
-import { StreamLanguage } from '@codemirror/stream-parser'
+import { StreamLanguage } from '@codemirror/language'
 import { Compartment, Extension } from '@codemirror/state'
 
 const compartment = new Compartment()
@@ -28,6 +28,10 @@ export const loadLanguageCompartment = async (
       const { javascript } = await import('@codemirror/lang-javascript')
       return compartment.of(javascript())
     }
+    case 'jq': {
+      const { jq } = await import('codemirror-lang-jq')
+      return compartment.of(jq())
+    }
     case 'php': {
       const { php } = await import('@codemirror/lang-php')
       return compartment.of(php())
@@ -56,6 +60,7 @@ export const loadLanguageCompartment = async (
     // Legacy
     case 'abap': {
       const { abapMode } = await import('codemirror6-abap')
+      // @ts-ignore
       return compartment.of(StreamLanguage.define(abapMode))
     }
     case 'bash': {
@@ -248,6 +253,7 @@ export const loadLanguageCompartment = async (
     // Custom
     case 'elixir': {
       const { elixir } = await import('codemirror-lang-elixir')
+      // @ts-ignore
       return compartment.of(StreamLanguage.define(elixir))
     }
     case 'nim': {

diff --git a/app/javascript/declarations/index.d.ts b/app/javascript/declarations/index.d.ts
@@ -46,6 +46,14 @@ declare module 'nim-codemirror-mode' {
   import { StreamParser } from '@codemirror/stream-parser'
   export const nim: StreamParser<unknown>
 }
+declare module 'codemirror6-abap' {
+  import { StreamParser } from '@codemirror/stream-parser'
+  export const abapMode: StreamParser<unknown>
+}
+declare module 'codemirror-lang-jq' {
+  import { LanguageSupport } from '@codemirror/language'
+  export const jq: () => LanguageSupport
+}
 
 declare module '@exercism/twine2-story-format/src/story' {
   export default class Story {

diff --git a/package.json b/package.json
@@ -5,19 +5,16 @@
     "@ballerina/highlightjs-ballerina": "^1.0.1",
     "@bugsnag/js": "^7.10.0",
     "@bugsnag/plugin-react": "^7.19.0",
-    "@codemirror/basic-setup": "^0.19.0",
-    "@codemirror/lang-cpp": "^0.19.0",
-    "@codemirror/lang-java": "^0.19.0",
-    "@codemirror/lang-javascript": "^0.19.0",
-    "@codemirror/lang-php": "^0.19.0",
-    "@codemirror/lang-python": "^0.19.0",
-    "@codemirror/lang-rust": "^0.19.0",
-    "@codemirror/legacy-modes": "^0.19.0",
-    "@codemirror/stream-parser": "^0.19.0",
-    "@codemirror/theme-one-dark": "^0.19.0",
-    "@codemirror/view": "^0.19.0",
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-php": "^6.0.1",
+    "@codemirror/lang-python": "^6.1.5",
+    "@codemirror/lang-rust": "^6.0.1",
+    "@codemirror/legacy-modes": "^6.4.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@exercism/active-background": "^0.6.2",
-    "@exercism/codemirror-lang-gleam": "^1.0.1",
+    "@exercism/codemirror-lang-gleam": "^2.0.1",
     "@exercism/codemirror-lang-wren": "https://github.com/exercism/codemirror-lang-wren",
     "@exercism/highlightjs-gdscript": "^0.0.1",
     "@exercism/twine2-story-format": "https://github.com/exercism/twine2-story-format.git",
@@ -30,15 +27,16 @@
     "@stripe/stripe-js": "^1.54.1",
     "@tanstack/react-query": "^4.33.0",
     "@tippyjs/react": "^4.2.5",
-    "@types/react-google-recaptcha": "^2.1.5",
     "@xstate/react": "^3.2.2",
     "abortcontroller-polyfill": "^1.7.3",
     "ace-builds": "^1.4.12",
     "actioncable": "^5.2.4-3",
     "autoprefixer": "^10.4.0",
     "browserslist-to-esbuild": "^1.1.1",
     "chart.js": "^3.1.0",
+    "codemirror": "^6.0.1",
     "codemirror-lang-elixir": "https://github.com/sachinraja/codemirror-lang-elixir",
+    "codemirror-lang-jq": "^1.0.0",
     "codemirror6-abap": "^0.1.3",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.5",