Skip to content

Commit 330a956

Browse files
microbit-robertmicrobit-robert
authored
Upgrade to CodeMirror 6 release (#1016)
Manually merges our lint changes. Closes #995. Closes #753. Closes #697. Closes #612. Closes #716.
1 parent a479aea commit 330a956

File tree

16 files changed

+283
-433
lines changed

16 files changed

+283
-433
lines changed

‎package-lock.json

Lines changed: 124 additions & 341 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,12 @@
77
"dependencies": {
88
"@chakra-ui/icons": "^1.1.5",
99
"@chakra-ui/react": "^1.8.7",
10-
"@codemirror/autocomplete": "^0.19.13",
11-
"@codemirror/closebrackets": "^0.19.1",
12-
"@codemirror/commands": "^0.19.8",
13-
"@codemirror/comment": "^0.19.1",
14-
"@codemirror/fold": "^0.19.3",
15-
"@codemirror/gutter": "^0.19.9",
16-
"@codemirror/highlight": "^0.19.7",
17-
"@codemirror/history": "^0.19.2",
18-
"@codemirror/lang-python": "^0.19.4",
19-
"@codemirror/language": "^0.19.7",
20-
"@codemirror/panel": "^0.19.1",
21-
"@codemirror/state": "^0.19.9",
22-
"@codemirror/view": "^0.19.44",
10+
"@codemirror/autocomplete": "^6.3.0",
11+
"@codemirror/commands": "6.1.1",
12+
"@codemirror/lang-python": "^6.0.2",
13+
"@codemirror/language": "^6.2.1",
14+
"@codemirror/state": "^6.1.2",
15+
"@codemirror/view": "^6.3.0",
2316
"@emotion/react": "^11.7.1",
2417
"@emotion/styled": "^11.6.0",
2518
"@microbit/lunr-languages": "^1.9.0-microbit.1",

‎src/editor/active-editor-hooks.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*
66
* SPDX-License-Identifier: MIT
77
*/
8-
import { redo, undo } from "@codemirror/history";
8+
import { redo, undo } from "@codemirror/commands";
99
import { EditorView } from "@codemirror/view";
1010
import React, {
1111
Dispatch,

‎src/editor/codemirror/CodeMirror.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@
33
*
44
* SPDX-License-Identifier: MIT
55
*/
6-
import { highlightActiveLineGutter, lineNumbers } from "@codemirror/gutter";
7-
import { redoDepth, undoDepth } from "@codemirror/history";
6+
import { redoDepth, undoDepth } from "@codemirror/commands";
87
import { EditorSelection, EditorState, Extension } from "@codemirror/state";
9-
import { EditorView, highlightActiveLine, ViewUpdate } from "@codemirror/view";
8+
import {
9+
EditorView,
10+
highlightActiveLine,
11+
highlightActiveLineGutter,
12+
lineNumbers,
13+
ViewUpdate,
14+
} from "@codemirror/view";
1015
import { useEffect, useMemo, useRef } from "react";
1116
import { useIntl } from "react-intl";
1217
import { lineNumFromUint8Array } from "../../common/text-util";
@@ -117,7 +122,7 @@ const CodeMirror = ({
117122
dndSupport({ sessionSettings, setSessionSettings }),
118123
// Extensions only relevant for editing:
119124
// Order of lintGutter and lineNumbers determines how they are displayed.
120-
lintGutter(),
125+
lintGutter({ hoverTime: 0 }),
121126
lineNumbers(),
122127
highlightActiveLineGutter(),
123128
highlightActiveLine(),

‎src/editor/codemirror/config.ts

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,25 @@
33
*
44
* SPDX-License-Identifier: MIT
55
*/
6-
import { completionKeymap } from "@codemirror/autocomplete";
7-
import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
8-
import { defaultKeymap, indentLess, indentMore } from "@codemirror/commands";
9-
import { commentKeymap } from "@codemirror/comment";
10-
import { defaultHighlightStyle } from "@codemirror/highlight";
11-
import { history, historyKeymap } from "@codemirror/history";
6+
import {
7+
closeBrackets,
8+
closeBracketsKeymap,
9+
completionKeymap,
10+
} from "@codemirror/autocomplete";
11+
import {
12+
defaultKeymap,
13+
history,
14+
historyKeymap,
15+
indentLess,
16+
indentMore,
17+
} from "@codemirror/commands";
1218
import { python } from "@codemirror/lang-python";
13-
import { indentOnInput, indentUnit } from "@codemirror/language";
19+
import {
20+
defaultHighlightStyle,
21+
indentOnInput,
22+
indentUnit,
23+
syntaxHighlighting,
24+
} from "@codemirror/language";
1425
import { Compartment, EditorState, Extension, Prec } from "@codemirror/state";
1526
import {
1627
drawSelection,
@@ -47,17 +58,16 @@ export const editorConfig: Extension = [
4758
history(),
4859
drawSelection(),
4960
indentOnInput(),
50-
Prec.fallback(defaultHighlightStyle),
61+
Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
5162
closeBrackets(),
52-
highlightStyle(),
63+
syntaxHighlighting(highlightStyle()),
5364

5465
keymap.of([
5566
// Added, but see https://codemirror.net/6/examples/tab/ for accessibility discussion.
5667
customTabBinding,
5768
...closeBracketsKeymap,
5869
...defaultKeymap,
5970
...historyKeymap,
60-
...commentKeymap,
6171
...completionKeymap,
6272
...lintKeymap,
6373
]),

‎src/editor/codemirror/debug.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ export const debug = () =>
2828
tree.iterate({
2929
from: 0,
3030
to: tree.length,
31-
enter: (type, start) => {
32-
if (isInteresting(type)) {
31+
enter: (node) => {
32+
if (isInteresting(node.type)) {
3333
depth++;
3434
let indent = " ".repeat(depth);
35-
console.log(`${indent} ${type.name} ${start}`);
35+
console.log(`${indent} ${node.type.name} ${node.from}`);
3636
}
3737
},
38-
leave: (type, _start, _end) => {
39-
if (isInteresting(type)) {
38+
leave: (node) => {
39+
if (isInteresting(node.type)) {
4040
depth--;
4141
}
4242
},

‎src/editor/codemirror/dnd-decorations.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
*
44
* SPDX-License-Identifier: MIT
55
*/
6+
import { RangeSetBuilder, StateEffect } from "@codemirror/state";
67
import {
78
Decoration,
89
DecorationSet,
910
EditorView,
1011
ViewPlugin,
1112
ViewUpdate,
1213
} from "@codemirror/view";
13-
import { RangeSetBuilder } from "@codemirror/rangeset";
14-
import { StateEffect } from "@codemirror/state";
1514

1615
export const timeoutEffect = StateEffect.define<{}>({});
1716

‎src/editor/codemirror/dnd.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,8 @@ const findLogicalPosition = (
218218
view: EditorView,
219219
event: DragEvent
220220
): { line: number; indent: number | undefined } => {
221-
const visualLine = view.visualLineAtHeight(event.y || event.clientY);
221+
const height = (event.y || event.clientY) - view.documentTop;
222+
const visualLine = view.lineBlockAtHeight(height);
222223
const line = view.state.doc.lineAt(visualLine.from);
223224
const pos = view.posAtCoords({
224225
x: event.x || event.clientX,

‎src/editor/codemirror/edits.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -414,7 +414,7 @@ const indentLevelOfContainingWhileTrue = (
414414
return -1;
415415
}
416416
let done = false;
417-
for (const cursor = tree.cursor(pos, 0); !done; done = !cursor.parent()) {
417+
for (const cursor = tree.cursorAt(pos, 0); !done; done = !cursor.parent()) {
418418
if (cursor.type.name === "WhileStatement") {
419419
const maybeTrueNode = cursor.node.firstChild?.nextSibling;
420420
if (

‎src/editor/codemirror/highlightStyle.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
// https://github.com/codemirror/highlight/blob/main/src/highlight.ts#L480
1616
// This file shows the mapping of grammar nodes to tags for Python
1717
// https://github.com/codemirror/lang-python/blob/main/src/python.ts#L17
18-
import { HighlightStyle, tags } from "@codemirror/highlight";
18+
import { HighlightStyle } from "@codemirror/language";
19+
import { tags } from "@lezer/highlight";
1920

2021
export const highlightStyle = () => {
2122
const dark = "var(--chakra-colors-code-default)";

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
Completion,
99
CompletionContext,
1010
CompletionResult,
11+
insertBracket,
1112
} from "@codemirror/autocomplete";
12-
import { insertBracket } from "@codemirror/closebrackets";
1313
import { TransactionSpec } from "@codemirror/state";
1414
import sortBy from "lodash.sortby";
1515
import { IntlShape } from "react-intl";
@@ -92,7 +92,7 @@ export const autocompletion = (
9292
// Could vary these based on isIncomplete? Needs investigation.
9393
// Very desirable to set most of the time to remove flicker.
9494
filter: true,
95-
span: identifierLike,
95+
validFor: identifierLike,
9696
options: sortBy(
9797
results.items
9898
// For now we don't support these edits (they usually add imports).
@@ -137,6 +137,7 @@ export const autocompletion = (
137137
};
138138
},
139139
],
140+
closeOnBlur: false,
140141
});
141142

142143
const createDocumentationResolver =

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
* SPDX-License-Identifier: MIT
55
*/
6-
import { Text } from "@codemirror/text";
6+
import { Text } from "@codemirror/state";
77
import * as LSP from "vscode-languageserver-protocol";
88
import { Diagnostic } from "../lint/lint";
99
import { positionToOffset } from "./positions";

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88
* SPDX-License-Identifier: MIT
99
*/
1010
import { StateEffect, StateField } from "@codemirror/state";
11-
import { showTooltip, Tooltip } from "@codemirror/tooltip";
1211
import {
1312
Command,
1413
EditorView,
1514
KeyBinding,
1615
keymap,
1716
logException,
1817
PluginValue,
18+
showTooltip,
19+
Tooltip,
1920
ViewPlugin,
2021
ViewUpdate,
2122
} from "@codemirror/view";

0 commit comments

Comments
 (0)