@checkstack/ui 1.10.0 → 1.11.0

package/src/components/CodeEditor/CodeEditor.tsx

@@ -1,13 +1,55 @@
-// Monaco-based CodeEditor
-// Re-export all from MonacoEditor as the new CodeEditor implementation
+// Public `CodeEditor` component. Adapts the stable `CodeEditorProps` API to the
+// `@typefox/monaco-editor-react`-backed `TypefoxEditor` (real VS Code language
+// services in the browser). Consumers (DynamicForm, automation, healthcheck)
+// import this and are unaffected by the underlying editor implementation.
+import { TypefoxEditor } from "./TypefoxEditor";
+import type { CodeEditorProps } from "./types";
 
-export {
-  CodeEditor,
-  type CodeEditorProps,
-  type CodeEditorLanguage,
-  type TemplateProperty,
-  type ShellEnvVar,
-} from "./MonacoEditor";
+/**
+ * Code editor with context-aware IntelliSense, template / shell completion, and
+ * structural validation. See `CodeEditorProps`.
+ */
+export const CodeEditor = ({
+  id,
+  value,
+  onChange,
+  language = "typescript",
+  minHeight = "100px",
+  readOnly,
+  placeholder,
+  typeDefinitions,
+  templateProperties,
+  shellEnvVars,
+  markers,
+}: CodeEditorProps) => {
+  // CodeEditorProps.minHeight is a CSS length string ("240px"); TypefoxEditor
+  // takes a pixel number.
+  const minHeightPx = Number.parseInt(minHeight, 10) || 100;
+
+  return (
+    <TypefoxEditor
+      id={id ?? "code-editor"}
+      value={value}
+      onChange={onChange}
+      language={language}
+      minHeight={minHeightPx}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      typeDefinitions={typeDefinitions}
+      templateProperties={templateProperties}
+      shellEnvVars={shellEnvVars}
+      markers={markers}
+    />
+  );
+};
+
+export type {
+  CodeEditorProps,
+  CodeEditorLanguage,
+  TemplateProperty,
+  ShellEnvVar,
+  EditorMarker,
+} from "./types";
 
 export {
   generateTypeDefinitions,