feat(code editor): upgrade codemirror dependencies (#679)

codesandbox · Jan 9, 2023 · 4f87f70 · 4f87f70
1 parent 671bb23
commit 4f87f70
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 407 deletions.
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -37,20 +37,16 @@
   ],
   "dependencies": {
     "@code-hike/classer": "^0.0.0-aa6efee",
-    "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/commands": "^0.19.6",
-    "@codemirror/comment": "^0.19.0",
-    "@codemirror/gutter": "^0.19.9",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
-    "@codemirror/lang-css": "^0.19.3",
-    "@codemirror/lang-html": "^0.19.4",
-    "@codemirror/lang-javascript": "^0.19.3",
-    "@codemirror/language": "^0.19.7",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/view": "^0.19.32",
+    "@codemirror/autocomplete": "^6.4.0",
+    "@codemirror/commands": "^6.1.3",
+    "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.0",
+    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/language": "^6.3.2",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.7.1",
     "@codesandbox/sandpack-client": "^1.18.0",
+    "@lezer/highlight": "^1.1.3",
     "@react-hook/intersection-observer": "^3.1.1",
     "@stitches/core": "^1.2.6",
     "clean-set": "^1.1.2",
@@ -62,9 +58,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@codemirror/lang-python": "^0.19.5",
-    "@codemirror/legacy-modes": "^0.19.1",
-    "@codemirror/stream-parser": "^0.19.9",
+    "@codemirror/lang-python": "^6.1.0",
+    "@codemirror/legacy-modes": "^6.3.1",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@playwright/test": "^1.26.1",
     "@storybook/addon-actions": "^6.1.9",

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -1,7 +1,7 @@
 import { python } from "@codemirror/lang-python";
-import { LanguageSupport } from "@codemirror/language";
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
-import { StreamLanguage } from "@codemirror/stream-parser";
+import { storiesOf } from "@storybook/react";
 import * as React from "react";
 
 import { SandpackProvider } from "../../contexts/sandpackContext";
@@ -10,81 +10,20 @@ import * as mocks from "./languages-mocks";
 
 import { CodeEditor } from "./index";
 
-export default {
-  title: "components/CodeMirror",
-  component: CodeEditor,
-};
-
-export const HTML: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.html}
-      fileType="html"
-      id="html"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
-);
-
-export const Javascript: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.js}
-      fileType="js"
-      id="js"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
-);
-
-export const JSX: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.jsx}
-      fileType="jsx"
-      id="jsx"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
-);
-
-export const CSS: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.css}
-      fileType="css"
-      id="css"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
-);
-
-export const Less: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.less}
-      fileType="less"
-      id="less"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
-);
-
-export const Vue: React.FC = () => (
-  <SandpackProvider>
-    <CodeEditor
-      code={mocks.vue}
-      fileType="vue"
-      id="vue"
-      initMode="immediate"
-      showLineNumbers={false}
-    />
-  </SandpackProvider>
+const stories = storiesOf("components/CodeMirror", module);
+
+Object.entries(mocks).forEach(([languageName, mockFile]) =>
+  stories.add(languageName, () => (
+    <SandpackProvider>
+      <CodeEditor
+        code={mockFile}
+        fileType={languageName}
+        id={languageName}
+        initMode="immediate"
+        showLineNumbers={false}
+      />
+    </SandpackProvider>
+  ))
 );
 
 export const CustomLanguageShell: React.FC = () => (

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { useClasser } from "@code-hike/classer";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import {
   defaultKeymap,
   indentLess,
   indentMore,
   deleteGroupBackward,
+  history,
+  historyKeymap,
 } from "@codemirror/commands";
-import { commentKeymap } from "@codemirror/comment";
-import { lineNumbers } from "@codemirror/gutter";
-import { defaultHighlightStyle } from "@codemirror/highlight";
-import { history, historyKeymap } from "@codemirror/history";
-import { bracketMatching } from "@codemirror/matchbrackets";
+import { syntaxHighlighting } from "@codemirror/language";
+import { bracketMatching } from "@codemirror/language";
 import type { Extension } from "@codemirror/state";
 import { EditorState, EditorSelection, StateEffect } from "@codemirror/state";
 import { Annotation } from "@codemirror/state";
@@ -20,6 +19,7 @@ import {
   highlightActiveLine,
   keymap,
   EditorView,
+  lineNumbers,
 } from "@codemirror/view";
 import type { KeyBinding } from "@codemirror/view";
 import useIntersectionObserver from "@react-hook/intersection-observer";
@@ -208,7 +208,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
                 ({ key }) => key === "Tab"
               );
 
-              return customKey?.run(view) ?? true;
+              return customKey?.run?.(view) ?? true;
             },
           },
           {
@@ -220,7 +220,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
                 ({ key }) => key === "Shift-Tab"
               );
 
-              return customKey?.run(view) ?? true;
+              return customKey?.run?.(view) ?? true;
             },
           },
           {
@@ -252,16 +252,13 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
             ...closeBracketsKeymap,
             ...defaultKeymap,
             ...historyKeymap,
-            ...commentKeymap,
             ...customCommandsKeymap,
             ...extensionsKeymap,
           ] as KeyBinding[]),
           langSupport,
 
-          defaultHighlightStyle.fallback,
-
           getEditorTheme(),
-          highlightTheme,
+          syntaxHighlighting(highlightTheme),
         ];
 
         if (readOnly) {
@@ -288,11 +285,6 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           extensionList.push(highlightInlineError());
         }
 
-        const startState = EditorState.create({
-          doc: code,
-          extensions: extensionList,
-        });
-
         const parentDiv = wrapper.current;
         const existingPlaceholder = parentDiv.querySelector(
           ".sp-pre-placeholder"
@@ -302,7 +294,8 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         }
 
         const view = new EditorView({
-          state: startState,
+          doc: code,
+          extensions: extensionList,
           parent: parentDiv,
           dispatch: (tr): void => {
             view.update([tr]);