Split out all the separate codemirror editors

studio/src/components/CodeMirrorEditor/CodeMirrorJsonEditor.tsx

@@ -0,0 +1,47 @@
+import "./CodeMirrorEditorCssOverrides.css";
+
+import { json } from "@codemirror/lang-json";
+import { duotoneDark } from "@uiw/codemirror-theme-duotone";
+
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { customTheme } from "./themes";
+
+type CodeMirrorEditorProps = {
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  theme?: string;
+  readOnly?: boolean;
+  value?: string;
+  onChange: (value?: string) => void;
+};
+
+export function CodeMirrorJsonEditor(props: CodeMirrorEditorProps) {
+  const {
+    height,
+    value,
+    onChange,
+    readOnly,
+    minHeight = "200px",
+    maxHeight,
+  } = props;
+
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      extensions={[EditorView.lineWrapping, json()]}
+      onChange={onChange}
+      theme={[duotoneDark, customTheme]}
+      readOnly={readOnly}
+      basicSetup={{
+        // Turn off searching the input via cmd+g and cmd+f
+        searchKeymap: false,
+        // Investigate: Remap the default keymap: https://codemirror.net/docs/ref/#commands.defaultKeymap
+        //              This will allow us to do things like cmd+enter to submit a payload
+      }}
+    />
+  );
+}

studio/src/components/CodeMirrorEditor/CodeMirrorSqlEditor.tsx

@@ -0,0 +1,26 @@
+import "./CodeMirrorEditorCssOverrides.css";
+
+import { sql } from "@codemirror/lang-sql";
+import { duotoneDark } from "@uiw/codemirror-theme-duotone";
+
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { customTheme } from "./themes";
+import type { CodeMirrorEditorProps } from "./types";
+
+type CodeMirrorSqlEditorProps = CodeMirrorEditorProps;
+
+export function CodeMirrorSqlEditor(props: CodeMirrorSqlEditorProps) {
+  const { height, value, onChange, minHeight, maxHeight, readOnly } = props;
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      readOnly={readOnly}
+      extensions={[EditorView.lineWrapping, sql()]}
+      onChange={onChange}
+      theme={[duotoneDark, customTheme]}
+    />
+  );
+}

studio/src/components/CodeMirrorEditor/CodeMirrorTypescriptEditor.tsx

@@ -0,0 +1,34 @@
+import "./CodeMirrorEditorCssOverrides.css";
+
+import { javascript } from "@codemirror/lang-javascript";
+import { duotoneDark } from "@uiw/codemirror-theme-duotone";
+
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { customTheme } from "./themes";
+import type { CodeMirrorEditorProps } from "./types";
+
+type CodeMirrorTypescriptEditorProps = CodeMirrorEditorProps & {
+  jsx: boolean;
+};
+
+export function CodeMirrorTypescriptEditor(
+  props: CodeMirrorTypescriptEditorProps,
+) {
+  const { height, value, onChange, jsx, minHeight, maxHeight, readOnly } =
+    props;
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      readOnly={readOnly}
+      extensions={[
+        EditorView.lineWrapping,
+        javascript({ jsx, typescript: true }),
+      ]}
+      onChange={onChange}
+      theme={[duotoneDark, customTheme]}
+    />
+  );
+}

studio/src/components/CodeMirrorEditor/index.ts

@@ -1,7 +1,4 @@
-export {
-  CodeMirrorTypescriptEditor,
-  CodeMirrorJsonEditor,
-  CodeMirrorSqlEditor,
-} from "./CodeMirrorEditor";
-
+export { CodeMirrorSqlEditor } from "./CodeMirrorSqlEditor";
+export { CodeMirrorTypescriptEditor } from "./CodeMirrorTypescriptEditor";
+export { CodeMirrorJsonEditor } from "./CodeMirrorJsonEditor";
 export { CodeMirrorInput } from "./CodeMirrorInput";

studio/src/components/CodeMirrorEditor/themes.ts

@@ -0,0 +1,9 @@
+import { EditorView } from "@uiw/react-codemirror";
+
+export const customTheme = EditorView.theme({
+  "&": {
+    fontSize: "14px",
+    // HACK
+    background: "transparent !important",
+  },
+});

studio/src/components/CodeMirrorEditor/types.ts

@@ -0,0 +1,9 @@
+export type CodeMirrorEditorProps = {
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  theme?: string;
+  readOnly?: boolean;
+  value?: string;
+  onChange: (value?: string) => void;
+};