New Component - Code editor

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5"
+}

app/app.tsx

@@ -185,6 +185,11 @@ function useRealtimeChannels({ channels }: { channels: string[] }) {
   return useEventSourceNullOk(url);
 }
 
+export type OnChange = (event?: {
+  target: EventTarget | HTMLElement | null | undefined;
+  currentTarget: EventTarget | HTMLElement | null | undefined;
+}) => void;
+
 function App() {
   const [searchParams] = useSearchParams();
   const loaderData = useLoaderData<typeof loader>();
@@ -206,9 +211,10 @@ function App() {
     submit(form);
   }, 500);
 
-  const handleChange = (event: FormEvent<HTMLFormElement>) => {
-    const target = event.target;
-    const form = event.currentTarget;
+  const onChange: OnChange = (event) => {
+    const target = event?.target;
+    const form = event?.currentTarget || formRef?.current;
+    if (!(form && form instanceof HTMLFormElement)) return;
 
     // ignore elements that have `data-submit-disabled` set
     if (
@@ -256,14 +262,12 @@ function App() {
         id={"gooey-form"}
         action={"?" + searchParams}
         method="POST"
-        onChange={handleChange}
+        onChange={onChange}
         noValidate
       >
         <RenderedChildren
           children={children}
-          onChange={() => {
-            if (formRef.current) submit(formRef.current);
-          }}
+          onChange={onChange}
           state={state}
         />
         <input

app/base.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from "react";
 import { useEffect, useRef } from "react";
 import type { OptionProps, SingleValueProps } from "react-select";
+import Select, { components } from "react-select";
 import { RenderedMarkdown } from "~/renderedMarkdown";
 
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@reach/tabs";
 import { Link, useSubmit } from "@remix-run/react";
 import { JsonViewer } from "@textea/json-viewer";
-import Select, { components } from "react-select";
 import { DownloadButton } from "~/downloadButton";
 import {
   GooeyCheckbox,
@@ -18,14 +18,16 @@ import { useJsonFormInput } from "~/jsonFormInput";
 import { RenderedHTML } from "~/renderedHTML";
 import CountdownTimer from "./components/countdown";
 import { lazyImport } from "./lazyImports";
+import { OnChange } from "./app";
 
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 const { GooeyFileInput } = lazyImport(() => import("~/gooeyFileInput"));
 
 const Plot = lazyImport(
-  () => import("react-plotly.js").then((mod) => mod.default),
+  () => import("react-plotly.js").then((mod) => mod.default)
   // @ts-ignore
 ).default;
+const CodeEditor = lazyImport(() => import("./components/CodeEditor")).default;
 
 type TreeNode = {
   name: string;
@@ -83,7 +85,7 @@ function RenderedTreeNode({
   state,
 }: {
   node: TreeNode;
-  onChange: () => void;
+  onChange: OnChange;
   state: Record<string, any>;
 }) {
   const { name, props, children } = node;
@@ -273,6 +275,14 @@ function RenderedTreeNode({
     case "textarea": {
       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>
+      );
+    }
     case "input": {
       const className = `gui-input gui-input-${props.type}`;
       const id = inputId(props);
@@ -447,7 +457,7 @@ export function RenderedChildren({
   state,
 }: {
   children: Array<TreeNode>;
-  onChange: () => void;
+  onChange: OnChange;
   state: Record<string, any>;
 }) {
   let elements = children.map((node, idx) => {
@@ -505,7 +515,7 @@ function GuiSelect({
   };
 
   let selectValue = args.options.filter((opt: any) =>
-    args.isMulti ? value.includes(opt.value) : opt.value === value,
+    args.isMulti ? value.includes(opt.value) : opt.value === value
   );
   // if selectedValue is not in options, then set it to the first option
   useEffect(() => {

app/components/CodeEditor.tsx

@@ -0,0 +1,99 @@
+import CodeMirror from "@uiw/react-codemirror";
+import { esLint, javascript } from "@codemirror/lang-javascript";
+import { useGooeyStringInput } from "~/gooeyInput";
+import { dracula } from "@uiw/codemirror-theme-dracula";
+import { RenderedMarkdown } from "~/renderedMarkdown";
+import { linter, lintGutter } from "@codemirror/lint";
+import { Linter } from "eslint-linter-browserify";
+import type esLintType from "eslint";
+import { OnChange } from "~/app";
+
+const LintConfig: esLintType.Linter.Config = {
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: "module",
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: "eslint:recommended",
+  rules: {
+    // enable additional rules
+    indent: ["off"],
+    "linebreak-style": ["error", "unix"],
+    "no-debugger": ["error"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    // override configuration set by extending "eslint:recommended"
+    "no-empty": "warn",
+    "no-undef": ["error"],
+    "no-cond-assign": ["error", "always"],
+    // disable rules from base configurations
+    "for-direction": "off",
+  },
+};
+
+const CodeEditor = ({
+  props,
+  state,
+  onChange,
+}: {
+  props: Record<string, any>;
+  onChange: OnChange;
+  state: Record<string, any>;
+}) => {
+  const { name, defaultValue, height, label, ...restProps } = props;
+  const [inputRef, value, setValue] = useGooeyStringInput<HTMLTextAreaElement>({
+    state,
+    name,
+    defaultValue,
+  });
+
+  const handleChange = (val: string) => {
+    setValue(val);
+    // trigger the onChange event for Root Form
+    // imitate the textarea onChange
+    onChange({ target: inputRef.current });
+  };
+
+  return (
+    <div className="mb-4 code-editor-wrapper position-relative">
+      {label && (
+        <label>
+          <RenderedMarkdown body={label} />
+        </label>
+      )}
+      <textarea
+        ref={inputRef}
+        name={name}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+      <CodeMirror
+        theme={dracula}
+        value={value}
+        id="gooey-code-editor"
+        onChange={handleChange}
+        extensions={[
+          javascript(),
+          lintGutter(),
+          linter(
+            esLint(
+              new Linter({
+                configType: "eslintrc",
+              }),
+              LintConfig
+            )
+          ),
+        ]}
+        height={`${height}px` || "200px"}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+export default CodeEditor;

app/styles/custom.css

@@ -714,3 +714,11 @@ a.text-primary:hover {
 .footer p {
   font-size: 14px;
 }
+
+.code-editor-wrapper textarea {
+  display: none;
+}
+
+#gooey-code-editor :first-child {
+  border-radius: 0.25rem;
+}