bmad-elsabro 1.0.0

package/renderer/components/CodeEditor.types.ts

@@ -0,0 +1,245 @@
+/**
+ * CodeEditor Type Definitions
+ *
+ * Type definitions for the CodeEditor component with Monaco Editor integration.
+ * Supports TypeScript, JavaScript, YAML, JSON, and other common languages.
+ */
+
+import type * as monaco from 'monaco-editor';
+
+/**
+ * Supported programming languages for syntax highlighting
+ */
+export type SupportedLanguage =
+  | 'typescript'
+  | 'javascript'
+  | 'json'
+  | 'yaml'
+  | 'xml'
+  | 'html'
+  | 'css'
+  | 'scss'
+  | 'less'
+  | 'markdown'
+  | 'shell'
+  | 'plaintext';
+
+/**
+ * Editor theme options
+ */
+export type EditorTheme = 'vs' | 'vs-dark' | 'hc-black' | 'hc-light';
+
+/**
+ * Props for the CodeEditor component
+ */
+export interface CodeEditorProps {
+  /**
+   * The code content to display in the editor
+   */
+  value: string;
+
+  /**
+   * Callback fired when the editor content changes
+   * @param value - The new content value
+   */
+  onChange?: (value: string | undefined) => void;
+
+  /**
+   * Programming language for syntax highlighting
+   * @default 'typescript'
+   */
+  language?: SupportedLanguage;
+
+  /**
+   * Editor theme
+   * @default 'vs-dark'
+   */
+  theme?: EditorTheme;
+
+  /**
+   * Height of the editor
+   * @default '500px'
+   */
+  height?: string | number;
+
+  /**
+   * Width of the editor
+   * @default '100%'
+   */
+  width?: string | number;
+
+  /**
+   * Whether the editor is read-only
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Whether to show line numbers
+   * @default true
+   */
+  lineNumbers?: boolean;
+
+  /**
+   * Whether to show the minimap
+   * @default true
+   */
+  minimap?: boolean;
+
+  /**
+   * Custom Monaco editor options
+   * These will be merged with default options
+   */
+  options?: monaco.editor.IStandaloneEditorConstructionOptions;
+
+  /**
+   * Callback fired when the editor is mounted
+   * @param editor - The Monaco editor instance
+   * @param monaco - The Monaco namespace
+   */
+  onMount?: (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    monaco: typeof monaco
+  ) => void;
+
+  /**
+   * Callback fired before the editor is mounted
+   * @param monaco - The Monaco namespace
+   */
+  beforeMount?: (monaco: typeof monaco) => void;
+
+  /**
+   * Callback fired when editor validation changes
+   * @param markers - Array of validation markers
+   */
+  onValidate?: (markers: monaco.editor.IMarker[]) => void;
+
+  /**
+   * CSS class name for the editor container
+   */
+  className?: string;
+
+  /**
+   * Loading message displayed while Monaco is loading
+   * @default 'Loading editor...'
+   */
+  loading?: string | React.ReactNode;
+
+  /**
+   * File path or name (used for language detection if language prop not provided)
+   */
+  path?: string;
+
+  /**
+   * Whether to automatically detect language from file path
+   * @default true
+   */
+  autoDetectLanguage?: boolean;
+}
+
+/**
+ * Return type for useCodeEditor hook
+ */
+export interface CodeEditorHandle {
+  /**
+   * Get the current editor instance
+   */
+  getEditor: () => monaco.editor.IStandaloneCodeEditor | null;
+
+  /**
+   * Get the current editor value
+   */
+  getValue: () => string | undefined;
+
+  /**
+   * Set the editor value
+   */
+  setValue: (value: string) => void;
+
+  /**
+   * Focus the editor
+   */
+  focus: () => void;
+
+  /**
+   * Format the editor content
+   */
+  format: () => Promise<void>;
+
+  /**
+   * Get Monaco namespace
+   */
+  getMonaco: () => typeof monaco | null;
+
+  /**
+   * Save the current editor content to file system
+   * Requires a file path to be specified in the component props
+   */
+  saveFile: () => Promise<void>;
+
+  /**
+   * Reload the file content from file system
+   * Requires a file path to be specified in the component props
+   */
+  reloadFile: () => Promise<void>;
+}
+
+/**
+ * Editor validation marker with severity
+ */
+export interface EditorMarker extends monaco.editor.IMarker {
+  severity: monaco.MarkerSeverity;
+}
+
+/**
+ * Editor configuration options
+ */
+export interface EditorConfig {
+  /**
+   * Default language for new editors
+   */
+  defaultLanguage: SupportedLanguage;
+
+  /**
+   * Default theme
+   */
+  defaultTheme: EditorTheme;
+
+  /**
+   * Whether to enable IntelliSense
+   */
+  enableIntelliSense: boolean;
+
+  /**
+   * Whether to enable syntax validation
+   */
+  enableValidation: boolean;
+
+  /**
+   * Whether to enable auto-formatting
+   */
+  enableAutoFormat: boolean;
+
+  /**
+   * Tab size
+   */
+  tabSize: number;
+
+  /**
+   * Whether to insert spaces instead of tabs
+   */
+  insertSpaces: boolean;
+}
+
+/**
+ * Default editor configuration
+ */
+export const defaultEditorConfig: EditorConfig = {
+  defaultLanguage: 'typescript',
+  defaultTheme: 'vs-dark',
+  enableIntelliSense: true,
+  enableValidation: true,
+  enableAutoFormat: true,
+  tabSize: 2,
+  insertSpaces: true,
+};