Skip to content

Commit 4f87f70

Browse files
danilowozdanilowoz
authoredJan 9, 2023
feat(code editor): upgrade codemirror dependencies (#679)
·
v2.20.0v1.19.0
1 parent 671bb23 commit 4f87f70

File tree

10 files changed

+239
-407
lines changed

10 files changed

+239
-407
lines changed
 

‎sandpack-react/package.json

+11-16
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,16 @@
3737
],
3838
"dependencies": {
3939
"@code-hike/classer": "^0.0.0-aa6efee",
40-
"@codemirror/closebrackets": "^0.19.0",
41-
"@codemirror/commands": "^0.19.6",
42-
"@codemirror/comment": "^0.19.0",
43-
"@codemirror/gutter": "^0.19.9",
44-
"@codemirror/highlight": "^0.19.6",
45-
"@codemirror/history": "^0.19.0",
46-
"@codemirror/lang-css": "^0.19.3",
47-
"@codemirror/lang-html": "^0.19.4",
48-
"@codemirror/lang-javascript": "^0.19.3",
49-
"@codemirror/language": "^0.19.7",
50-
"@codemirror/matchbrackets": "^0.19.3",
51-
"@codemirror/state": "^0.19.6",
52-
"@codemirror/view": "^0.19.32",
40+
"@codemirror/autocomplete": "^6.4.0",
41+
"@codemirror/commands": "^6.1.3",
42+
"@codemirror/lang-css": "^6.0.1",
43+
"@codemirror/lang-html": "^6.4.0",
44+
"@codemirror/lang-javascript": "^6.1.2",
45+
"@codemirror/language": "^6.3.2",
46+
"@codemirror/state": "^6.2.0",
47+
"@codemirror/view": "^6.7.1",
5348
"@codesandbox/sandpack-client": "^1.18.0",
49+
"@lezer/highlight": "^1.1.3",
5450
"@react-hook/intersection-observer": "^3.1.1",
5551
"@stitches/core": "^1.2.6",
5652
"clean-set": "^1.1.2",
@@ -62,9 +58,8 @@
6258
},
6359
"devDependencies": {
6460
"@babel/core": "^7.12.3",
65-
"@codemirror/lang-python": "^0.19.5",
66-
"@codemirror/legacy-modes": "^0.19.1",
67-
"@codemirror/stream-parser": "^0.19.9",
61+
"@codemirror/lang-python": "^6.1.0",
62+
"@codemirror/legacy-modes": "^6.3.1",
6863
"@codesandbox/sandpack-themes": "^1.17.0",
6964
"@playwright/test": "^1.26.1",
7065
"@storybook/addon-actions": "^6.1.9",

‎sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx

+16-77
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { python } from "@codemirror/lang-python";
2-
import { LanguageSupport } from "@codemirror/language";
2+
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
33
import { shell } from "@codemirror/legacy-modes/mode/shell";
4-
import { StreamLanguage } from "@codemirror/stream-parser";
4+
import { storiesOf } from "@storybook/react";
55
import * as React from "react";
66

77
import { SandpackProvider } from "../../contexts/sandpackContext";
@@ -10,81 +10,20 @@ import * as mocks from "./languages-mocks";
1010

1111
import { CodeEditor } from "./index";
1212

13-
export default {
14-
title: "components/CodeMirror",
15-
component: CodeEditor,
16-
};
17-
18-
export const HTML: React.FC = () => (
19-
<SandpackProvider>
20-
<CodeEditor
21-
code={mocks.html}
22-
fileType="html"
23-
id="html"
24-
initMode="immediate"
25-
showLineNumbers={false}
26-
/>
27-
</SandpackProvider>
28-
);
29-
30-
export const Javascript: React.FC = () => (
31-
<SandpackProvider>
32-
<CodeEditor
33-
code={mocks.js}
34-
fileType="js"
35-
id="js"
36-
initMode="immediate"
37-
showLineNumbers={false}
38-
/>
39-
</SandpackProvider>
40-
);
41-
42-
export const JSX: React.FC = () => (
43-
<SandpackProvider>
44-
<CodeEditor
45-
code={mocks.jsx}
46-
fileType="jsx"
47-
id="jsx"
48-
initMode="immediate"
49-
showLineNumbers={false}
50-
/>
51-
</SandpackProvider>
52-
);
53-
54-
export const CSS: React.FC = () => (
55-
<SandpackProvider>
56-
<CodeEditor
57-
code={mocks.css}
58-
fileType="css"
59-
id="css"
60-
initMode="immediate"
61-
showLineNumbers={false}
62-
/>
63-
</SandpackProvider>
64-
);
65-
66-
export const Less: React.FC = () => (
67-
<SandpackProvider>
68-
<CodeEditor
69-
code={mocks.less}
70-
fileType="less"
71-
id="less"
72-
initMode="immediate"
73-
showLineNumbers={false}
74-
/>
75-
</SandpackProvider>
76-
);
77-
78-
export const Vue: React.FC = () => (
79-
<SandpackProvider>
80-
<CodeEditor
81-
code={mocks.vue}
82-
fileType="vue"
83-
id="vue"
84-
initMode="immediate"
85-
showLineNumbers={false}
86-
/>
87-
</SandpackProvider>
13+
const stories = storiesOf("components/CodeMirror", module);
14+
15+
Object.entries(mocks).forEach(([languageName, mockFile]) =>
16+
stories.add(languageName, () => (
17+
<SandpackProvider>
18+
<CodeEditor
19+
code={mockFile}
20+
fileType={languageName}
21+
id={languageName}
22+
initMode="immediate"
23+
showLineNumbers={false}
24+
/>
25+
</SandpackProvider>
26+
))
8827
);
8928

9029
export const CustomLanguageShell: React.FC = () => (

‎sandpack-react/src/components/CodeEditor/CodeMirror.tsx

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
/* eslint-disable @typescript-eslint/ban-ts-comment */
22
import { useClasser } from "@code-hike/classer";
3-
import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
3+
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
44
import {
55
defaultKeymap,
66
indentLess,
77
indentMore,
88
deleteGroupBackward,
9+
history,
10+
historyKeymap,
911
} from "@codemirror/commands";
10-
import { commentKeymap } from "@codemirror/comment";
11-
import { lineNumbers } from "@codemirror/gutter";
12-
import { defaultHighlightStyle } from "@codemirror/highlight";
13-
import { history, historyKeymap } from "@codemirror/history";
14-
import { bracketMatching } from "@codemirror/matchbrackets";
12+
import { syntaxHighlighting } from "@codemirror/language";
13+
import { bracketMatching } from "@codemirror/language";
1514
import type { Extension } from "@codemirror/state";
1615
import { EditorState, EditorSelection, StateEffect } from "@codemirror/state";
1716
import { Annotation } from "@codemirror/state";
@@ -20,6 +19,7 @@ import {
2019
highlightActiveLine,
2120
keymap,
2221
EditorView,
22+
lineNumbers,
2323
} from "@codemirror/view";
2424
import type { KeyBinding } from "@codemirror/view";
2525
import useIntersectionObserver from "@react-hook/intersection-observer";
@@ -208,7 +208,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
208208
({ key }) => key === "Tab"
209209
);
210210

211-
return customKey?.run(view) ?? true;
211+
return customKey?.run?.(view) ?? true;
212212
},
213213
},
214214
{
@@ -220,7 +220,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
220220
({ key }) => key === "Shift-Tab"
221221
);
222222

223-
return customKey?.run(view) ?? true;
223+
return customKey?.run?.(view) ?? true;
224224
},
225225
},
226226
{
@@ -252,16 +252,13 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
252252
...closeBracketsKeymap,
253253
...defaultKeymap,
254254
...historyKeymap,
255-
...commentKeymap,
256255
...customCommandsKeymap,
257256
...extensionsKeymap,
258257
] as KeyBinding[]),
259258
langSupport,
260259

261-
defaultHighlightStyle.fallback,
262-
263260
getEditorTheme(),
264-
highlightTheme,
261+
syntaxHighlighting(highlightTheme),
265262
];
266263

267264
if (readOnly) {
@@ -288,11 +285,6 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
288285
extensionList.push(highlightInlineError());
289286
}
290287

291-
const startState = EditorState.create({
292-
doc: code,
293-
extensions: extensionList,
294-
});
295-
296288
const parentDiv = wrapper.current;
297289
const existingPlaceholder = parentDiv.querySelector(
298290
".sp-pre-placeholder"
@@ -302,7 +294,8 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
302294
}
303295

304296
const view = new EditorView({
305-
state: startState,
297+
doc: code,
298+
extensions: extensionList,
306299
parent: parentDiv,
307300
dispatch: (tr): void => {
308301
view.update([tr]);

‎sandpack-react/src/components/CodeEditor/__snapshots__/useSyntaxHighlight.test.tsx.snap

+34-34
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`useSyntaxHighlight renders a css block 1`] = `
44
Array [
55
<span
6-
className="sp-syntax-tag"
6+
className="sp-syntax-definition"
77
>
88
body
99
</span>,
@@ -47,7 +47,7 @@ Array [
4747
4848
",
4949
<span
50-
className="sp-syntax-tag"
50+
className="sp-syntax-definition"
5151
>
5252
h1
5353
</span>,
@@ -114,7 +114,7 @@ Array [
114114
115115
",
116116
<span
117-
className="sp-syntax-tag"
117+
className="sp-syntax-definition"
118118
>
119119
p
120120
</span>,
@@ -196,7 +196,7 @@ Array [
196196
&lt;
197197
</span>,
198198
<span
199-
className="sp-syntax-tag"
199+
className="sp-syntax-definition"
200200
>
201201
html
202202
</span>,
@@ -225,7 +225,7 @@ Array [
225225
&lt;
226226
</span>,
227227
<span
228-
className="sp-syntax-tag"
228+
className="sp-syntax-definition"
229229
>
230230
head
231231
</span>,
@@ -242,7 +242,7 @@ Array [
242242
&lt;
243243
</span>,
244244
<span
245-
className="sp-syntax-tag"
245+
className="sp-syntax-definition"
246246
>
247247
meta
248248
</span>,
@@ -271,7 +271,7 @@ Array [
271271
&lt;
272272
</span>,
273273
<span
274-
className="sp-syntax-tag"
274+
className="sp-syntax-definition"
275275
>
276276
meta
277277
</span>,
@@ -312,7 +312,7 @@ Array [
312312
&lt;
313313
</span>,
314314
<span
315-
className="sp-syntax-tag"
315+
className="sp-syntax-definition"
316316
>
317317
meta
318318
</span>,
@@ -353,7 +353,7 @@ Array [
353353
&lt;
354354
</span>,
355355
<span
356-
className="sp-syntax-tag"
356+
className="sp-syntax-definition"
357357
>
358358
title
359359
</span>,
@@ -369,7 +369,7 @@ Array [
369369
&lt;/
370370
</span>,
371371
<span
372-
className="sp-syntax-tag"
372+
className="sp-syntax-definition"
373373
>
374374
title
375375
</span>,
@@ -386,7 +386,7 @@ Array [
386386
&lt;
387387
</span>,
388388
<span
389-
className="sp-syntax-tag"
389+
className="sp-syntax-definition"
390390
>
391391
link
392392
</span>,
@@ -427,7 +427,7 @@ Array [
427427
&lt;/
428428
</span>,
429429
<span
430-
className="sp-syntax-tag"
430+
className="sp-syntax-definition"
431431
>
432432
head
433433
</span>,
@@ -444,7 +444,7 @@ Array [
444444
&lt;
445445
</span>,
446446
<span
447-
className="sp-syntax-tag"
447+
className="sp-syntax-definition"
448448
>
449449
body
450450
</span>,
@@ -461,7 +461,7 @@ Array [
461461
&lt;
462462
</span>,
463463
<span
464-
className="sp-syntax-tag"
464+
className="sp-syntax-definition"
465465
>
466466
script
467467
</span>,
@@ -488,7 +488,7 @@ Array [
488488
&lt;/
489489
</span>,
490490
<span
491-
className="sp-syntax-tag"
491+
className="sp-syntax-definition"
492492
>
493493
script
494494
</span>,
@@ -505,7 +505,7 @@ Array [
505505
&lt;/
506506
</span>,
507507
<span
508-
className="sp-syntax-tag"
508+
className="sp-syntax-definition"
509509
>
510510
body
511511
</span>,
@@ -522,7 +522,7 @@ Array [
522522
&lt;/
523523
</span>,
524524
<span
525-
className="sp-syntax-tag"
525+
className="sp-syntax-definition"
526526
>
527527
html
528528
</span>,
@@ -1220,7 +1220,7 @@ Array [
12201220
&lt;
12211221
</span>,
12221222
<span
1223-
className="sp-syntax-tag"
1223+
className="sp-syntax-definition"
12241224
>
12251225
Greeting
12261226
</span>,
@@ -1250,7 +1250,7 @@ Array [
12501250
&lt;
12511251
</span>,
12521252
<span
1253-
className="sp-syntax-tag"
1253+
className="sp-syntax-definition"
12541254
>
12551255
Greeting
12561256
</span>,
@@ -1280,7 +1280,7 @@ Array [
12801280
&lt;
12811281
</span>,
12821282
<span
1283-
className="sp-syntax-tag"
1283+
className="sp-syntax-definition"
12841284
>
12851285
Greeting
12861286
</span>,
@@ -1384,7 +1384,7 @@ Array [
13841384
</span>,
13851385
" + 10",
13861386
<span
1387-
className="sp-syntax-tag"
1387+
className="sp-syntax-definition"
13881388
>
13891389
px
13901390
</span>,
@@ -1607,7 +1607,7 @@ Array [
16071607
&lt;
16081608
</span>,
16091609
<span
1610-
className="sp-syntax-tag"
1610+
className="sp-syntax-definition"
16111611
>
16121612
template
16131613
</span>,
@@ -1624,7 +1624,7 @@ Array [
16241624
&lt;
16251625
</span>,
16261626
<span
1627-
className="sp-syntax-tag"
1627+
className="sp-syntax-definition"
16281628
>
16291629
div
16301630
</span>,
@@ -1653,7 +1653,7 @@ Array [
16531653
&lt;
16541654
</span>,
16551655
<span
1656-
className="sp-syntax-tag"
1656+
className="sp-syntax-definition"
16571657
>
16581658
label
16591659
</span>,
@@ -1693,7 +1693,7 @@ Array [
16931693
&lt;/
16941694
</span>,
16951695
<span
1696-
className="sp-syntax-tag"
1696+
className="sp-syntax-definition"
16971697
>
16981698
label
16991699
</span>,
@@ -1710,7 +1710,7 @@ Array [
17101710
&lt;
17111711
</span>,
17121712
<span
1713-
className="sp-syntax-tag"
1713+
className="sp-syntax-definition"
17141714
>
17151715
p
17161716
</span>,
@@ -1739,7 +1739,7 @@ Array [
17391739
&lt;
17401740
</span>,
17411741
<span
1742-
className="sp-syntax-tag"
1742+
className="sp-syntax-definition"
17431743
>
17441744
input
17451745
</span>,
@@ -1816,7 +1816,7 @@ Array [
18161816
&lt;
18171817
</span>,
18181818
<span
1819-
className="sp-syntax-tag"
1819+
className="sp-syntax-definition"
18201820
>
18211821
span
18221822
</span>,
@@ -1856,7 +1856,7 @@ Array [
18561856
&lt;/
18571857
</span>,
18581858
<span
1859-
className="sp-syntax-tag"
1859+
className="sp-syntax-definition"
18601860
>
18611861
span
18621862
</span>,
@@ -1873,7 +1873,7 @@ Array [
18731873
&lt;/
18741874
</span>,
18751875
<span
1876-
className="sp-syntax-tag"
1876+
className="sp-syntax-definition"
18771877
>
18781878
p
18791879
</span>,
@@ -1890,7 +1890,7 @@ Array [
18901890
&lt;/
18911891
</span>,
18921892
<span
1893-
className="sp-syntax-tag"
1893+
className="sp-syntax-definition"
18941894
>
18951895
div
18961896
</span>,
@@ -1907,7 +1907,7 @@ Array [
19071907
&lt;/
19081908
</span>,
19091909
<span
1910-
className="sp-syntax-tag"
1910+
className="sp-syntax-definition"
19111911
>
19121912
template
19131913
</span>,
@@ -1925,7 +1925,7 @@ Array [
19251925
&lt;
19261926
</span>,
19271927
<span
1928-
className="sp-syntax-tag"
1928+
className="sp-syntax-definition"
19291929
>
19301930
script
19311931
</span>,
@@ -1991,7 +1991,7 @@ Array [
19911991
&lt;/
19921992
</span>,
19931993
<span
1994-
className="sp-syntax-tag"
1994+
className="sp-syntax-definition"
19951995
>
19961996
script
19971997
</span>,

‎sandpack-react/src/components/CodeEditor/useSyntaxHighlight.test.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { python } from "@codemirror/lang-python";
2-
import { LanguageSupport } from "@codemirror/language";
2+
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
33
import { shell } from "@codemirror/legacy-modes/mode/shell";
4-
import { StreamLanguage } from "@codemirror/stream-parser";
54
import React from "react";
65
import { create } from "react-test-renderer";
76

‎sandpack-react/src/components/CodeEditor/useSyntaxHighlight.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import type { HighlightStyle } from "@codemirror/highlight";
2-
import { highlightTree } from "@codemirror/highlight";
3-
import type { LanguageSupport } from "@codemirror/language";
1+
import type { HighlightStyle, LanguageSupport } from "@codemirror/language";
2+
import { highlightTree } from "@lezer/highlight";
43
import { createElement } from "react";
54

65
export const useSyntaxHighlight = ({
@@ -35,7 +34,7 @@ export const useSyntaxHighlight = ({
3534
}
3635
};
3736

38-
highlightTree(tree, highlightTheme.match, (from, to, className) => {
37+
highlightTree(tree, highlightTheme, (from, to, className) => {
3938
addElement(from, "");
4039
addElement(to, className);
4140
});

‎sandpack-react/src/components/CodeEditor/utils.ts

+18-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { HighlightStyle, tags } from "@codemirror/highlight";
21
import { css } from "@codemirror/lang-css";
32
import { html } from "@codemirror/lang-html";
43
import { javascript } from "@codemirror/lang-javascript";
54
import type { LanguageSupport } from "@codemirror/language";
6-
import type { Extension } from "@codemirror/state";
7-
import type { Text } from "@codemirror/text";
5+
import { HighlightStyle } from "@codemirror/language";
6+
import type { Extension, Text } from "@codemirror/state";
87
import { EditorView } from "@codemirror/view";
98
import * as React from "react";
9+
import { tags } from "@lezer/highlight";
1010

1111
import { THEME_PREFIX } from "../../styles";
1212
import type { CustomLanguage, SandpackTheme } from "../../types";
@@ -119,18 +119,25 @@ export const getSyntaxHighlight = (theme: SandpackTheme): HighlightStyle =>
119119
class: classNameToken("static"),
120120
},
121121
{
122-
tag: tags.tagName,
123-
class: classNameToken("tag"),
122+
tag: tags.variableName,
123+
class: classNameToken("plain"),
124124
},
125-
{ tag: tags.variableName, class: classNameToken("plain") },
126125
{
127-
// Highlight function call
128-
tag: tags.function(tags.variableName),
129-
class: classNameToken("definition"),
126+
// Standard tags, e.g <h1 />
127+
tag: tags.standard(tags.tagName),
128+
class: classNameToken("tag"),
130129
},
131130
{
132-
// Highlight function definition differently (eg: functional component def in React)
133-
tag: tags.definition(tags.function(tags.variableName)),
131+
tag: [
132+
// Highlight function call
133+
tags.function(tags.variableName),
134+
135+
// Highlight function definition differently (eg: functional component def in React)
136+
tags.definition(tags.function(tags.variableName)),
137+
138+
// "Custom tags", meaning React component
139+
tags.tagName,
140+
],
134141
class: classNameToken("definition"),
135142
},
136143
{

‎sandpack-react/src/presets/Sandpack.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { LanguageSupport } from "@codemirror/language";
1+
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
22
import { shell } from "@codemirror/legacy-modes/mode/shell";
3-
import { StreamLanguage } from "@codemirror/stream-parser";
43
import React from "react";
54

65
import { Sandpack } from "../";

‎website/docs/docs/advanced-usage/components.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -304,8 +304,7 @@ import { python } from "@codemirror/lang-python";
304304
When using a [stream language mode](https://www.npmjs.com/package/@codemirror/legacy-modes) you'll need to convert it into a `LanguageSupport` instance.
305305
306306
```jsx
307-
import { LanguageSupport } from "@codemirror/language";
308-
import { StreamLanguage } from "@codemirror/stream-parser";
307+
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
309308
import { shell } from "@codemirror/legacy-modes/mode/shell";
310309

311310
<SandpackProvider>

‎yarn.lock

+143-241
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.