Merge pull request #124 from Tauffer-Consulting/feature/new-lenguages…

…-code-editor feat: add additional language support on code editor input
Tauffer-Consulting · Oct 26, 2023 · 1c08f46 · 1c08f46
2 parents 37c6d5d + 33a6ccf
commit 1c08f46
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 9 deletions.
diff --git a/frontend/src/components/CodeEditorInput/index.tsx b/frontend/src/components/CodeEditorInput/index.tsx
@@ -7,11 +7,16 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-const CodeEditorItem = React.forwardRef<HTMLTextAreaElement>(
-  ({ ...register }, ref) => (
+interface Props {
+  language?: string;
+  placeholder?: string;
+}
+
+const CodeEditorItem = React.forwardRef<HTMLTextAreaElement, Props>(
+  ({ language = "python", placeholder, ...register }, ref) => (
     <CodeEditor
-      language="python"
-      placeholder="Enter Python code."
+      language={language}
+      placeholder={placeholder ?? ""}
       padding={15}
       style={{
         fontSize: 12,
@@ -33,18 +38,30 @@ const CodeEditorItem = React.forwardRef<HTMLTextAreaElement>(
 
 CodeEditorItem.displayName = "CodeEditorItem";
 
-interface Props<T> {
+interface CodeEditorInputProps<T> {
   name: Path<T>;
+  language?: string;
+  placeholder?: string;
 }
 
-function CodeEditorInput<T extends FieldValues>({ name }: Props<T>) {
+function CodeEditorInput<T extends FieldValues>({
+  name,
+  language,
+  placeholder,
+}: CodeEditorInputProps<T>) {
   const { control } = useFormContext();
 
   return (
     <Controller
       name={name}
       control={control}
-      render={({ field }) => <CodeEditorItem {...field} />}
+      render={({ field }) => (
+        <CodeEditorItem
+          language={language}
+          placeholder={placeholder}
+          {...field}
+        />
+      )}
     />
   );
 }

diff --git a/...tend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx b/...tend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx
@@ -155,10 +155,40 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
     "type" in schema &&
     "widget" in schema &&
     schema.type === "string" &&
-    schema.widget === "codeeditor"
+    (schema.widget === "codeeditor" || schema.widget === "codeeditor-python")
   ) {
     inputElement = (
-      <CodeEditorInput<IWorkflowPieceData> name={`inputs.${itemKey}.value`} />
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="python"
+        placeholder="Enter Python code."
+      />
+    );
+  } else if (
+    "type" in schema &&
+    "widget" in schema &&
+    schema.type === "string" &&
+    schema.widget === "codeeditor-json"
+  ) {
+    inputElement = (
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="json"
+        placeholder="Enter JSON code."
+      />
+    );
+  } else if (
+    "type" in schema &&
+    "widget" in schema &&
+    schema.type === "string" &&
+    schema.widget === "codeeditor-sql"
+  ) {
+    inputElement = (
+      <CodeEditorInput<IWorkflowPieceData>
+        name={`inputs.${itemKey}.value`}
+        language="sql"
+        placeholder="Enter SQL code."
+      />
     );
   } else if (
     "type" in schema &&