fix(codemirror): line-height/gutter] calculation (#262)

codesandbox · Dec 15, 2021 · 77f3f04 · 77f3f04
1 parent 1030ca4
commit 77f3f04
Show file tree

Hide file tree

Showing 4 changed files with 1,419 additions and 1,156 deletions.
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -33,18 +33,18 @@
   "dependencies": {
     "@code-hike/classer": "^0.0.0-aa6efee",
     "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/commands": "^0.19.5",
+    "@codemirror/commands": "^0.19.6",
     "@codemirror/comment": "^0.19.0",
-    "@codemirror/gutter": "^0.19.5",
+    "@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.3",
+    "@codemirror/lang-html": "^0.19.4",
     "@codemirror/lang-javascript": "^0.19.3",
-    "@codemirror/language": "^0.19.4",
+    "@codemirror/language": "^0.19.7",
     "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/state": "^0.19.5",
-    "@codemirror/view": "^0.19.16",
+    "@codemirror/state": "^0.19.6",
+    "@codemirror/view": "^0.19.32",
     "@codesandbox/sandpack-client": "^0.10.3",
     "@react-hook/intersection-observer": "^3.1.1",
     "codesandbox-import-util-types": "^2.2.3",

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -8,6 +8,7 @@ import {
 } 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 { EditorState } from "@codemirror/state";
@@ -181,6 +182,8 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           ] as KeyBinding[]),
           langSupport,
 
+          defaultHighlightStyle.fallback,
+
           getEditorTheme(theme),
           getSyntaxHighlight(theme),
         ];

diff --git a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
@@ -61,33 +61,6 @@ export const VueCode: React.FC = () => (
 );
 
 export const Decorators: React.FC = () => {
-  const [itemClick, setItemClicked] = React.useState();
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const ref = React.useRef<any>(null);
-
-  React.useEffect(() => {
-    const handle = (event): void => {
-      let id = event.target.dataset.id;
-
-      if (!id) {
-        id = event.target.parentElement.dataset.id;
-      }
-
-      setItemClicked(id);
-    };
-    const node = ref.current;
-
-    node?.querySelectorAll(".widget").forEach((element) => {
-      element.addEventListener("click", handle);
-    });
-
-    return (): void => {
-      node?.querySelectorAll(".widget").forEach((element) => {
-        element.removeEventListener("click", handle);
-      });
-    };
-  });
-
   return (
     <SandpackProvider
       customSetup={{
@@ -146,10 +119,9 @@ export default function List() {
       }
       `}
       </style>
-      {itemClick && <p>Widget clicked: {itemClick}</p>}
+
       <SandpackThemeProvider>
         <SandpackCodeViewer
-          ref={ref}
           decorators={[
             { className: "highlight", line: 1 },
             { className: "highlight", line: 9 },