feat(code editor): upgrade codemirror dependencies

[danilowoz]

• Upgrade and deprecate CodeMirror dependencies;
• Highlight <foo> differently from <Foo>;

Closes #468
Potential fix for #666
Related to #668

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1a11791:

Sandbox	Source
Sandpack	Configuration

[github-actions]

Size changes

sandpack-react

Total base (gzip)	Total current (gzip)	+/-
168 kb	180 kb	⚠️ +12 kb (+6.92%)

Details

Dependency name / file	Base	Current	+/-
0	522 kb	File removed	⚠️
@codemirror/closebrackets	6 kb	File removed	⚠️
@codemirror/matchbrackets	4 kb	File removed	⚠️
@codemirror/comment	5 kb	File removed	⚠️
@codemirror/gutter	10 kb	File removed	⚠️
@codemirror/highlight	12 kb	File removed	⚠️
@codemirror/history	9 kb	File removed	⚠️
@codemirror/text	13 kb	File removed	⚠️
@codemirror/rangeset	16 kb	File removed	⚠️
@codemirror/tooltip	14 kb	File removed	⚠️
react-devtools-inline	823 kb	File removed	⚠️
package-build-stats	487 bytes	File removed	⚠️
react-is	2 kb	File removed	⚠️
main	506 kb	548 kb	⚠️ +42 kb (+8.20%)
@codesandbox/sandpack-react	87 kb	128 kb	⚠️ +41 kb (+47.30%)
@code-hike/classer	1 kb	1 kb	✅ 0 byte
@codesandbox/sandpack-client	9 kb	9 kb	✅ 0 byte
@stitches/core	16 kb	16 kb	✅ 0 byte
@codemirror/state	35 kb	65 kb	⚠️ +30 kb (+86.81%)
@codemirror/view	167 kb	210 kb	⚠️ +43 kb (+25.79%)
@lezer/highlight	New file	9 kb	⚠️
@codemirror/language	19 kb	46 kb	⚠️ +26 kb (+137.03%)
@codemirror/autocomplete	34 kb	45 kb	⚠️ +11 kb (+32.10%)
@codemirror/commands	24 kb	38 kb	⚠️ +14 kb (+58.40%)
@react-hook/intersection-observer	2 kb	2 kb	✅ 0 byte
@codemirror/lang-css	11 kb	10 kb	🎉 -870 bytes (-8.02%)
@codemirror/lang-javascript	6 kb	11 kb	⚠️ +4 kb (+69.60%)
@codemirror/lang-html	15 kb	17 kb	⚠️ +2 kb (+10.20%)
clean-set	229 bytes	229 bytes	✅ 0 byte
style-mod	3 kb	3 kb	✅ 0 byte
w3c-keyname	2 kb	2 kb	✅ 0 byte
@lezer/common	34 kb	36 kb	⚠️ +2 kb (+7.20%)
@react-hook/passive-layout-effect	191 bytes	191 bytes	✅ 0 byte
@lezer/css	9 kb	12 kb	⚠️ +2 kb (+25.74%)
@lezer/html	12 kb	19 kb	⚠️ +7 kb (+55.49%)
@lezer/javascript	54 kb	64 kb	⚠️ +10 kb (+19.06%)
@lezer/lr	31 kb	32 kb	⚠️ +1 kb (+3.56%)
lodash.isequal	18 kb	18 kb	✅ 0 byte
lz-string	9 kb	9 kb	✅ 0 byte
codesandbox-import-utils	3 kb	3 kb	✅ 0 byte
webpack	New file	487 bytes	⚠️
intersection-observer	13 kb	13 kb	✅ 0 byte

sandpack-client

Total base (gzip)	Total current (gzip)	+/-
7 kb	8 kb	⚠️ +867 bytes (+11.81%)

Details

Dependency name / file	Base	Current	+/-
package-build-stats	487 bytes	File removed	⚠️
main	21 kb	23 kb	⚠️ +3 kb (+14.06%)
@codesandbox/sandpack-client	9 kb	15 kb	⚠️ +7 kb (+76.77%)
codesandbox-import-utils	3 kb	3 kb	✅ 0 byte
lodash.isequal	18 kb	18 kb	✅ 0 byte
webpack	New file	487 bytes	⚠️

[danilowoz]

@joshwcomeau, you might be interested in this one