refactor(ui/editor): migrate code-editor to react [EE-4848] (#8257)

app/react/components/CodeEditor.tsx

@@ -0,0 +1,41 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { useMemo } from 'react';
+
+interface Props {
+  id: string;
+  placeholder?: string;
+  yaml?: boolean;
+  readonly?: boolean;
+  onChange: (value: string) => void;
+  value: string;
+  height?: string;
+}
+
+export function CodeEditor({
+  id,
+  onChange,
+  placeholder,
+  readonly,
+  value,
+  height = '500px',
+  yaml: isYaml,
+}: Props) {
+  const extensions = useMemo(
+    () => (isYaml ? [StreamLanguage.define(yaml)] : []),
+    [isYaml]
+  );
+
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      readOnly={readonly}
+      placeholder={placeholder}
+      id={id}
+      extensions={extensions}
+      height={height}
+    />
+  );
+}