fix code editor scrolling (#51)

tscircuit · Oct 11, 2024 · 4f9539d · 4f9539d
1 parent 8be8e80
commit 4f9539d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
@@ -90,6 +90,7 @@ export const CodeEditor = ({
     ata(`
 import React from "@types/react/jsx-runtime"
 import { Circuit } from "@tscircuit/core"
+import type { CommonLayoutProps } from "@tscircuit/props"
 ${code}
 `)
 
@@ -140,5 +141,14 @@ ${code}
     return <div className="font-mono whitespace-pre-wrap text-xs">{code}</div>
   }
 
-  return <div ref={editorRef} style={{ height: "640px", width: "100%" }} />
+  return (
+    <div
+      ref={editorRef}
+      style={{
+        height: "640px",
+        width: "100%",
+        overflow: "auto",
+      }}
+    />
+  )
 }
diff --git a/src/hooks/use-run-tsx/index.tsx b/src/hooks/use-run-tsx/index.tsx
@@ -104,13 +104,17 @@ export const useRunTsx = ({
 
         const module = evalCompiledJs(compiledJs!)
 
-        if (Object.keys(module.exports).length > 1) {
+        const componentExportKeys = Object.keys(module.exports).filter(
+          (key) => !key.startsWith("use"),
+        )
+
+        if (componentExportKeys.length > 1) {
           throw new Error(
-            `Too many exports, only export one thing. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
+            `Too many exports, only export one component. You exported: ${JSON.stringify(Object.keys(module.exports))}`,
           )
         }
 
-        const primaryKey = Object.keys(module.exports)[0]
+        const primaryKey = componentExportKeys[0]
 
         const UserElm = (props: any) =>
           React.createElement(module.exports[primaryKey], props)