Code Editors

The shared library provides code editing components built on Monaco Editor at frontend/shared/src/components/MonacoEditor/ and frontend/shared/src/components/CodeEditor/. The primary component is the SqlEditor with schema-aware autocomplete, custom theming, and keyboard shortcuts.

SqlEditor

File: frontend/shared/src/components/MonacoEditor/SqlEditor.tsx

A professional-grade SQL editor with schema-aware autocomplete, custom syntax highlighting, error markers, and keyboard shortcuts.

Props Interface

interface SqlEditorProps {
  value: string;
  onChange: (value: string) => void;
  onExecute?: () => void;             // Ctrl+Enter handler
  dataSourceId?: string;
  schema?: SchemaMetadata;            // For autocomplete
  readOnly?: boolean;
  height?: string | number;           // Default: '400px'
  theme?: 'vs-dark' | 'light' | 'matih-dark';
  markers?: EditorMarker[];           // Error/warning markers
  placeholder?: string;
  className?: string;
  lineNumbers?: boolean;              // Default: true
  minimap?: boolean;                  // Default: false
  fontSize?: number;                  // Default: 14
  autoFocus?: boolean;
}

Schema Metadata for Autocomplete

interface SchemaMetadata {
  catalogs: CatalogInfo[];
}
 
interface CatalogInfo {
  name: string;
  schemas: SchemaInfo[];
}
 
interface SchemaInfo {
  name: string;
  tables: TableInfo[];
}
 
interface TableInfo {
  name: string;
  type: 'table' | 'view';
  columns: ColumnInfo[];
}
 
interface ColumnInfo {
  name: string;
  type: string;
  nullable: boolean;
  description?: string;
}

Custom Theme (matih-dark)

The editor registers a custom dark theme with colors matching the MATIH design system:

Editor background: #18181b, cursor: #8b5cf6

Context-Aware Autocomplete

The editor provides intelligent completions based on SQL context:

• After FROM or JOIN -- Suggests table names from schema metadata
• After SELECT or WHERE -- Suggests column names from referenced tables
• After tableName. -- Suggests columns for the specific table
• General context -- SQL keywords and 35+ built-in SQL functions

Keyboard Shortcuts

Usage

<SqlEditor
  value={sql}
  onChange={setSql}
  onExecute={handleExecute}
  schema={schemaMetadata}
  height="300px"
  theme="matih-dark"
  placeholder="SELECT * FROM ..."
  markers={validationErrors}
/>

CodeEditor

File: frontend/shared/src/components/CodeEditor/index.tsx

A generic code editor wrapper supporting multiple languages (Python, YAML, JSON, SQL) used across workbenches for configuration editing, notebook cells, and dbt model editing.