Upgrade to CodeMirror 6 release

package.json

@@ -7,19 +7,12 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.5",
     "@chakra-ui/react": "^1.8.7",
-    "@codemirror/autocomplete": "^0.19.13",
-    "@codemirror/closebrackets": "^0.19.1",
-    "@codemirror/commands": "^0.19.8",
-    "@codemirror/comment": "^0.19.1",
-    "@codemirror/fold": "^0.19.3",
-    "@codemirror/gutter": "^0.19.9",
-    "@codemirror/highlight": "^0.19.7",
-    "@codemirror/history": "^0.19.2",
-    "@codemirror/lang-python": "^0.19.4",
-    "@codemirror/language": "^0.19.7",
-    "@codemirror/panel": "^0.19.1",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/view": "^0.19.44",
+    "@codemirror/autocomplete": "^6.3.0",
+    "@codemirror/commands": "6.1.1",
+    "@codemirror/lang-python": "^6.0.2",
+    "@codemirror/language": "^6.2.1",
+    "@codemirror/state": "^6.1.2",
+    "@codemirror/view": "^6.3.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@microbit/lunr-languages": "^1.9.0-microbit.1",

src/editor/active-editor-hooks.tsx

@@ -5,7 +5,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { redo, undo } from "@codemirror/history";
+import { redo, undo } from "@codemirror/commands";
 import { EditorView } from "@codemirror/view";
 import React, {
   Dispatch,

src/editor/codemirror/CodeMirror.tsx

@@ -3,10 +3,15 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { highlightActiveLineGutter, lineNumbers } from "@codemirror/gutter";
-import { redoDepth, undoDepth } from "@codemirror/history";
+import { redoDepth, undoDepth } from "@codemirror/commands";
 import { EditorSelection, EditorState, Extension } from "@codemirror/state";
-import { EditorView, highlightActiveLine, ViewUpdate } from "@codemirror/view";
+import {
+  EditorView,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  lineNumbers,
+  ViewUpdate,
+} from "@codemirror/view";
 import { useEffect, useMemo, useRef } from "react";
 import { useIntl } from "react-intl";
 import { lineNumFromUint8Array } from "../../common/text-util";
@@ -117,7 +122,7 @@ const CodeMirror = ({
           dndSupport({ sessionSettings, setSessionSettings }),
           // Extensions only relevant for editing:
           // Order of lintGutter and lineNumbers determines how they are displayed.
-          lintGutter(),
+          lintGutter({ hoverTime: 0 }),
           lineNumbers(),
           highlightActiveLineGutter(),
           highlightActiveLine(),

src/editor/codemirror/config.ts

@@ -3,14 +3,25 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { completionKeymap } from "@codemirror/autocomplete";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
-import { defaultKeymap, indentLess, indentMore } from "@codemirror/commands";
-import { commentKeymap } from "@codemirror/comment";
-import { defaultHighlightStyle } from "@codemirror/highlight";
-import { history, historyKeymap } from "@codemirror/history";
+import {
+  closeBrackets,
+  closeBracketsKeymap,
+  completionKeymap,
+} from "@codemirror/autocomplete";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentLess,
+  indentMore,
+} from "@codemirror/commands";
 import { python } from "@codemirror/lang-python";
-import { indentOnInput, indentUnit } from "@codemirror/language";
+import {
+  defaultHighlightStyle,
+  indentOnInput,
+  indentUnit,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import { Compartment, EditorState, Extension, Prec } from "@codemirror/state";
 import {
   drawSelection,
@@ -47,17 +58,16 @@ export const editorConfig: Extension = [
   history(),
   drawSelection(),
   indentOnInput(),
-  Prec.fallback(defaultHighlightStyle),
+  Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
   closeBrackets(),
-  highlightStyle(),
+  syntaxHighlighting(highlightStyle()),
 
   keymap.of([
     // Added, but see https://codemirror.net/6/examples/tab/ for accessibility discussion.
     customTabBinding,
     ...closeBracketsKeymap,
     ...defaultKeymap,
     ...historyKeymap,
-    ...commentKeymap,
     ...completionKeymap,
     ...lintKeymap,
   ]),

src/editor/codemirror/debug.ts

@@ -28,15 +28,15 @@ export const debug = () =>
             tree.iterate({
               from: 0,
               to: tree.length,
-              enter: (type, start) => {
-                if (isInteresting(type)) {
+              enter: (node) => {
+                if (isInteresting(node.type)) {
                   depth++;
                   let indent = "  ".repeat(depth);
-                  console.log(`${indent} ${type.name} ${start}`);
+                  console.log(`${indent} ${node.type.name} ${node.from}`);
                 }
               },
-              leave: (type, _start, _end) => {
-                if (isInteresting(type)) {
+              leave: (node) => {
+                if (isInteresting(node.type)) {
                   depth--;
                 }
               },

src/editor/codemirror/dnd-decorations.ts

@@ -3,15 +3,14 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { RangeSetBuilder, StateEffect } from "@codemirror/state";
 import {
   Decoration,
   DecorationSet,
   EditorView,
   ViewPlugin,
   ViewUpdate,
 } from "@codemirror/view";
-import { RangeSetBuilder } from "@codemirror/rangeset";
-import { StateEffect } from "@codemirror/state";
 
 export const timeoutEffect = StateEffect.define<{}>({});
 

src/editor/codemirror/dnd.ts

@@ -218,7 +218,8 @@ const findLogicalPosition = (
   view: EditorView,
   event: DragEvent
 ): { line: number; indent: number | undefined } => {
-  const visualLine = view.visualLineAtHeight(event.y || event.clientY);
+  const height = (event.y || event.clientY) - view.documentTop;
+  const visualLine = view.lineBlockAtHeight(height);
   const line = view.state.doc.lineAt(visualLine.from);
   const pos = view.posAtCoords({
     x: event.x || event.clientX,

src/editor/codemirror/edits.ts

@@ -414,7 +414,7 @@ const indentLevelOfContainingWhileTrue = (
     return -1;
   }
   let done = false;
-  for (const cursor = tree.cursor(pos, 0); !done; done = !cursor.parent()) {
+  for (const cursor = tree.cursorAt(pos, 0); !done; done = !cursor.parent()) {
     if (cursor.type.name === "WhileStatement") {
       const maybeTrueNode = cursor.node.firstChild?.nextSibling;
       if (

src/editor/codemirror/highlightStyle.ts

@@ -15,7 +15,8 @@
 // https://github.com/codemirror/highlight/blob/main/src/highlight.ts#L480
 // This file shows the mapping of grammar nodes to tags for Python
 // https://github.com/codemirror/lang-python/blob/main/src/python.ts#L17
-import { HighlightStyle, tags } from "@codemirror/highlight";
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
 
 export const highlightStyle = () => {
   const dark = "var(--chakra-colors-code-default)";

src/editor/codemirror/language-server/autocompletion.ts

@@ -8,8 +8,8 @@ import {
   Completion,
   CompletionContext,
   CompletionResult,
+  insertBracket,
 } from "@codemirror/autocomplete";
-import { insertBracket } from "@codemirror/closebrackets";
 import { TransactionSpec } from "@codemirror/state";
 import sortBy from "lodash.sortby";
 import { IntlShape } from "react-intl";
@@ -92,7 +92,7 @@ export const autocompletion = (
           // Could vary these based on isIncomplete? Needs investigation.
           // Very desirable to set most of the time to remove flicker.
           filter: true,
-          span: identifierLike,
+          validFor: identifierLike,
           options: sortBy(
             results.items
               // For now we don't support these edits (they usually add imports).
@@ -137,6 +137,7 @@ export const autocompletion = (
         };
       },
     ],
+    closeOnBlur: false,
   });
 
 const createDocumentationResolver =

src/editor/codemirror/language-server/diagnostics.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text } from "@codemirror/text";
+import { Text } from "@codemirror/state";
 import * as LSP from "vscode-languageserver-protocol";
 import { Diagnostic } from "../lint/lint";
 import { positionToOffset } from "./positions";

src/editor/codemirror/language-server/signatureHelp.ts

@@ -8,14 +8,15 @@
  * SPDX-License-Identifier: MIT
  */
 import { StateEffect, StateField } from "@codemirror/state";
-import { showTooltip, Tooltip } from "@codemirror/tooltip";
 import {
   Command,
   EditorView,
   KeyBinding,
   keymap,
   logException,
   PluginValue,
+  showTooltip,
+  Tooltip,
   ViewPlugin,
   ViewUpdate,
 } from "@codemirror/view";