remove weird code editor hardcoded height

GooeyAI · Dec 9, 2024 · 650995c · 650995c
1 parent 7273fb7
commit 650995c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/app/components/CodeEditor.tsx b/app/components/CodeEditor.tsx
@@ -32,15 +32,15 @@ const jsLinter = (lintOptions: LintOptions) => {
   });
 };
 
-const CodeEditor = ({
+export default function CodeEditor({
   props,
   state,
   onChange,
 }: {
   props: Record<string, any>;
   onChange: OnChange;
   state: Record<string, any>;
-}) => {
+}) {
   const {
     name,
     defaultValue,
@@ -96,14 +96,10 @@ const CodeEditor = ({
         data-enable-grammarly="false"
         theme={dracula}
         value={value}
-        id="gooey-code-editor"
         onChange={handleChange}
         extensions={[javascript(), lintGutter(), jsLinter(lintOptions)]}
-        height={`${height}px` || "200px"}
         {...restProps}
       />
     </div>
   );
-};
-
-export default CodeEditor;
+}
diff --git a/app/renderer.tsx b/app/renderer.tsx
@@ -28,7 +28,7 @@ const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 const { GooeyFileInput } = lazyImport(() => import("~/gooeyFileInput"), {
   fallback: ({ label }) => (
     <div className="gui-input">
-      {label && <RenderedMarkdown body={label} />}
+      <InputLabel label={label} />
       <div
         className="d-flex align-items-center justify-content-center bg-light"
         style={{ height: "250px" }}
@@ -44,7 +44,24 @@ const Plot = lazyImport(
   // @ts-ignore
 ).default;
 
-const CodeEditor = lazyImport(() => import("./components/CodeEditor")).default;
+const CodeEditor = lazyImport(() => import("./components/CodeEditor"), {
+  fallback: ({ props }) => {
+    return (
+      <div className="gui-input">
+        <InputLabel label={props.label} />
+        <div
+          className="d-flex align-items-center justify-content-center bg-dark text-white"
+          style={{
+            height: (props.defaultValue || "").split("\n").length * 1.5 + "rem",
+            ...props.style,
+          }}
+        >
+          Loading...
+        </div>
+      </div>
+    );
+  },
+}).default;
 
 export type TreeNode = {
   name: string;
@@ -312,12 +329,7 @@ function RenderedTreeNode({
       return <GooeyTextarea props={props} state={state} />;
     }
     case "code-editor": {
-      return (
-        // pre fill height to avoid ui jump
-        <div style={{ minHeight: props?.height + 100 + "px" }}>
-          <CodeEditor props={props} state={state} onChange={onChange} />
-        </div>
-      );
+      return <CodeEditor props={props} state={state} onChange={onChange} />;
     }
     case "switch":
       return <GooeySwitch props={props} state={state} />;

diff --git a/app/styles/custom.css b/app/styles/custom.css
@@ -717,7 +717,10 @@ a.text-primary:hover {
   display: none;
 }
 
-#gooey-code-editor :first-child {
+.cm-theme  {
+  overflow: auto;
+}
+.cm-theme :first-child {
   border-radius: 0.25rem;
 }