Add json schema form custom editor support

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.6.1

.yarnrc.yml

@@ -9,6 +9,9 @@ packageExtensions:
   '@modelcontextprotocol/sdk@*':
     dependencies:
       'eventsource-parser': '*'
+  '@rjsf/core@*':
+    dependencies:
+      '@rjsf/validator-ajv8': '*'
 
 pnpEnableEsmLoader: true
 

package.json

@@ -25,6 +25,7 @@
     "@types/yargs": "^17.0.29",
     "@typescript-eslint/eslint-plugin": "^8.24.0",
     "@typescript-eslint/parser": "^8.24.0",
+    "ajv": "^8.18.0",
     "chalk": "^5.3.0",
     "esbuild": "^0.19.5",
     "eslint": "^9.20.1",
@@ -35,6 +36,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
+    "js-yaml": "^4.1.1",
     "prettier": "^3.2.5",
     "rollup": "^4.34.6",
     "ts-node": "^10.9.1",

packages/app/package.json

@@ -61,6 +61,9 @@
     "@ironclad/rivet-core": "workspace:^",
     "@ironclad/trivet": "workspace:^",
     "@recoiljs/refine": "^0.1.1",
+    "@rjsf/core": "^6.4.1",
+    "@rjsf/utils": "^6.4.1",
+    "@rjsf/validator-ajv8": "^6.4.1",
     "@swc/core": "^1.3.94",
     "@tanstack/react-query": "^5.4.3",
     "@tauri-apps/api": "^1.5.1",

packages/app/src/components/CodeEditor.tsx

@@ -77,10 +77,7 @@ export const CodeEditor: FC<{
       editorRef.current = editor;
     }
 
-    const latestBeforeDispose = onChangeLatest.current;
-
     return () => {
-      latestBeforeDispose?.(editor.getValue());
       editor.dispose();
       window.removeEventListener('resize', onResize);
     };

packages/app/src/components/editors/CodeEditor.tsx

@@ -17,6 +17,12 @@ export const DefaultCodeEditor: FC<
 
   const debouncedOnChange = useDebounceFn<(node: ChartNode) => void>(onChange, { wait: 100 });
 
+  useEffect(() => {
+    return () => {
+      debouncedOnChange.flush();
+    };
+  }, [debouncedOnChange]);
+
   const onEditorChange = (newText: string) => {
     debouncedOnChange.run({
       ...nodeLatest.current,
@@ -38,6 +44,9 @@ export const DefaultCodeEditor: FC<
       name={editorDef.dataKey}
       helperMessage={helperMessage}
       onClose={onClose}
+      onBlur={() => {
+        debouncedOnChange.flush();
+      }}
       language={editorDef.language}
       theme={editorDef.theme}
       id={node.id}
@@ -55,6 +64,7 @@ export const CodeEditor: FC<{
   name?: string;
   helperMessage?: string;
   onClose?: () => void;
+  onBlur?: () => void;
   theme?: string;
   language?: string;
   id?: string;
@@ -68,6 +78,7 @@ export const CodeEditor: FC<{
   name,
   helperMessage,
   onClose,
+  onBlur,
   theme,
   language,
   id,
@@ -118,6 +129,7 @@ export const CodeEditor: FC<{
             onChange={(newValue) => {
               onChangeLatest.current?.(newValue);
             }}
+            onBlur={onBlur}
             theme={theme}
             language={language}
             isReadonly={isReadonly || isDisabled}

packages/app/src/components/editors/CustomEditor.tsx

@@ -1,4 +1,8 @@
-import { type CustomEditorDefinition, type ChartNode } from '@ironclad/rivet-core';
+import {
+  type CustomEditorDefinition,
+  type ChartNode,
+  type JsonSchemaFormCustomEditorDefinition,
+} from '@ironclad/rivet-core';
 import { type FC } from 'react';
 import { type SharedEditorProps } from './SharedEditorProps';
 import { match } from 'ts-pattern';
@@ -9,6 +13,7 @@ import { ObjectNodeAiAssistEditor } from './custom/ObjectNodeAiAssistEditor';
 import { GptFunctionNodeJsonSchemaAiAssistEditor } from './custom/GptFunctionJsonSchemaAiAssistEditor';
 import { PromptNodeAiAssistEditor } from './custom/PromptNodeAiAssistEditor';
 import { TextNodeAiAssistEditor } from './custom/TextNodeAiAssistEditor';
+import { JsonSchemaFormEditor } from './custom/JsonSchemaFormEditor';
 
 export const CustomEditor: FC<
   SharedEditorProps & {
@@ -25,5 +30,8 @@ export const CustomEditor: FC<
     ))
     .with('PromptNodeAiAssist', () => <PromptNodeAiAssistEditor {...props} editor={editor} />)
     .with('TextNodeAiAssist', () => <TextNodeAiAssistEditor {...props} editor={editor} />)
+    .with('JsonSchemaForm', () => (
+      <JsonSchemaFormEditor {...props} editor={editor as JsonSchemaFormCustomEditorDefinition<ChartNode>} />
+    ))
     .otherwise(() => null);
 };