feat: Syntax Highlighting for Multiline Editor (#1919)

## Description

Adds the option for syntax highlighting to the multiline texteditor via the new `highlightSyntax` prop.

When `true` it will render a select box for the user to choose a syntax language for highlighting purposes.

If the user selects `plaintext` the current vanilla `TextArea` component will render. If the user selects one of the provided code languages the Monaco Editor will render inside the dialog with syntax highlighting appropriate for that language.

This feature is currently implemented in all instances of the `MultilineTextInputDialog` though it is debateable if it has use for the Annotation Editor.

## Related Issue and Pull requests

Progresses #1891  
Progresses Shopify/oasis-frontend#391

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

Before

![image.png](https://app.graphite.com/user-attachments/assets/1566c663-63fa-4c50-8376-3cfd0d50ccf8.png)

After

![image.png](https://app.graphite.com/user-attachments/assets/3a70519d-5323-44e6-93f9-b3720e710ccb.png)

![image.png](https://app.graphite.com/user-attachments/assets/c78ead58-5573-416d-a2c9-cab167032a25.png)

Demo:

[syntax-highlighting-opt1.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/7b8f965b-d621-46b3-83a1-dfb3d0619b19.mov" />](https://app.graphite.com/user-attachments/video/7b8f965b-d621-46b3-83a1-dfb3d0619b19.mov)

## Test Instructions

Confirm that the multiline text editor now renders a select box and that changing the language renders the code viewer and appropriately highlights syntax.

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

react-compiler.config.js

@@ -55,6 +55,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/Editor/IOEditor/IOZIndexEditor.tsx",
   "src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/DynamicDataDropdown.tsx",
   "src/components/shared/ReactFlow/FlowCanvas/Multiselect",
+  "src/components/shared/CodeViewer/CodeEditor.tsx",
   "src/components/shared/HighlightText.tsx",
   "src/components/shared/AnnouncementBanners.tsx",
 

src/components/Editor/IOEditor/InputValueEditor/InputValueDialog.tsx

@@ -38,6 +38,7 @@ export const InputValueDialog = ({
       open={open}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      highlightSyntax
     />
   );
 };

src/components/shared/CodeViewer/CodeEditor.tsx

@@ -0,0 +1,27 @@
+import MonacoEditor from "@monaco-editor/react";
+
+interface CodeEditorProps {
+  value: string;
+  language: string;
+  onChange: (value: string) => void;
+}
+
+function CodeEditor({ value, language, onChange }: CodeEditorProps) {
+  return (
+    <MonacoEditor
+      language={language}
+      theme="vs-dark"
+      value={value}
+      onChange={(v) => onChange(v ?? "")}
+      options={{
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        lineNumbers: "on",
+        wordWrap: "on",
+        automaticLayout: true,
+      }}
+    />
+  );
+}
+
+export default CodeEditor;

src/components/shared/Dialogs/MultilineTextInputDialog.tsx

@@ -9,10 +9,28 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { InlineStack } from "@/components/ui/layout";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 
+import CodeEditor from "../CodeViewer/CodeEditor";
+
+const LANGUAGE_OPTIONS = [
+  { value: "plaintext", label: "Plain Text" },
+  { value: "yaml", label: "YAML" },
+  { value: "python", label: "Python" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "json", label: "JSON" },
+  { value: "sql", label: "SQL" },
+];
+
 interface MultilineTextInputDialogProps {
   title: ReactNode;
   description?: string;
@@ -21,6 +39,7 @@ interface MultilineTextInputDialogProps {
   open: boolean;
   required?: boolean;
   maxLength?: number;
+  highlightSyntax?: boolean;
   onCancel: () => void;
   onConfirm: (value: string) => void;
 }
@@ -33,10 +52,12 @@ export const MultilineTextInputDialog = ({
   open,
   required = false,
   maxLength,
+  highlightSyntax,
   onCancel,
   onConfirm,
 }: MultilineTextInputDialogProps) => {
   const [value, setValue] = useState(initialValue);
+  const [selectedLanguage, setSelectedLanguage] = useState("plaintext");
 
   const handleConfirm = useCallback(() => {
     onConfirm(value);
@@ -61,22 +82,55 @@ export const MultilineTextInputDialog = ({
     setValue(initialValue);
   }, [initialValue]);
 
+  useEffect(() => {
+    setSelectedLanguage("plaintext");
+  }, [highlightSyntax]);
+
   return (
     <Dialog open={open} onOpenChange={onCancel}>
       <DialogContent>
         <DialogTitle>{title}</DialogTitle>
-        <DialogDescription className={cn(!description ? "hidden" : "")}>
-          {description ?? title}
-        </DialogDescription>
-        <Textarea
-          ref={setCursorToEnd}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder={placeholder}
-          className="min-h-32 max-h-[80vh]"
-          required={required}
-          maxLength={maxLength}
-        />
+        <InlineStack gap="2" align="space-between" wrap="nowrap" fill>
+          <DialogDescription className={cn(!description ? "hidden" : "")}>
+            {description ?? title}
+          </DialogDescription>
+          {highlightSyntax && (
+            <Select
+              value={selectedLanguage}
+              onValueChange={setSelectedLanguage}
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {LANGUAGE_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </InlineStack>
+        {highlightSyntax && selectedLanguage !== "plaintext" ? (
+          <div className="h-64">
+            <CodeEditor
+              value={value}
+              language={selectedLanguage}
+              onChange={setValue}
+            />
+          </div>
+        ) : (
+          <Textarea
+            ref={setCursorToEnd}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={placeholder}
+            className="min-h-32 max-h-[80vh]"
+            required={required}
+            maxLength={maxLength}
+          />
+        )}
         <DialogFooter>
           <InlineStack gap="2" align="space-between" className="w-full">
             {maxLength && value.length >= maxLength && (

src/components/shared/ReactFlow/FlowCanvas/TaskNode/AnnotationsEditor/AnnotationsInput.tsx

@@ -409,6 +409,7 @@ export const AnnotationsInput = ({
           onConfirm={handleDialogConfirm}
           maxLength={config?.max}
           required={config?.required}
+          highlightSyntax={inputType === "json"}
         />
       )}
     </>

src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/ArgumentInputDialog.tsx

@@ -41,6 +41,7 @@ export const ArgumentInputDialog = ({
       open={open}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      highlightSyntax
     />
   );
 };