Implementation:TobikoData Sqlmesh EditorCode

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Code_Editor
Last Updated	2026-02-07 20:00 GMT

Overview

Concrete tool for CodeMirror-based code editor components provided by the SQLMesh web client.

Description

This module provides CodeMirror 6 wrapper components for editing SQL, Python, and YAML files. It includes CodeEditorDefault for rendering code with syntax highlighting and extensions, and CodeEditorRemoteFile for lazy-loading remote files with auto-save functionality. The editor supports custom keymaps, SQLMesh dialect extensions, autocomplete, and theme switching (dark/light mode).

Key features include:

Multi-language support (SQL, Python, YAML)
SQLMesh dialect system with custom autocomplete for models and columns
Web Worker integration for SQL formatting and dialect loading
Debounced auto-save (500ms) for remote files
Diff-based content updates to preserve cursor position
Custom keymap handling including Tab for autocomplete/indent
Theme synchronization with application color scheme

Usage

Use CodeEditorDefault when you have file content readily available (local tabs, generated SQL). Use CodeEditorRemoteFile when editing files stored on the server that need fetching and saving.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/editor/EditorCode.tsx

Signature

function CodeEditorDefault({
  type,
  dialect = '',
  content = '',
  className,
  keymaps,
  extensions,
  onChange,
}: {
  type: FileExtensions
  dialect?: string
  className?: string
  content: string
  keymaps?: KeyBinding[]
  extensions?: Extension[]
  onChange?: (value: string) => void
}): JSX.Element

function CodeEditorRemoteFile({
  path,
  children,
  keymaps,
}: {
  path: string
  keymaps?: KeyBinding[]
  children: (options: { file: ModelFile; keymaps: KeyBinding[] }) => JSX.Element
}): JSX.Element

Import

import { CodeEditorDefault, CodeEditorRemoteFile } from '@components/editor/EditorCode'

I/O Contract

Inputs (CodeEditorDefault)

Name	Type	Required	Description
type	FileExtensions	Yes	File type (SQL, PY, YAML, YML)
content	string	Yes	The code content to display
dialect	string	No	SQL dialect for syntax highlighting
className	string	No	Additional CSS classes
keymaps	KeyBinding[]	No	Custom keyboard shortcuts
extensions	Extension[]	No	CodeMirror extensions
onChange	function	No	Callback when content changes (omit for read-only)

Inputs (CodeEditorRemoteFile)

Name	Type	Required	Description
path	string	Yes	Remote file path to fetch
keymaps	KeyBinding[]	No	Base keymaps (Cmd+S added automatically)
children	function	Yes	Render prop receiving file and keymaps

Outputs

Name	Type	Description
rendered	JSX.Element	CodeMirror editor with configured extensions and handlers

Usage Examples

import { CodeEditorDefault, CodeEditorRemoteFile } from '@components/editor/EditorCode'
import { EnumFileExtensions } from '@models/file'

// Example 1: Local SQL editor with custom keymap
function LocalSQLEditor() {
  const [content, setContent] = useState('SELECT * FROM my_table')

  const customKeymaps = [{
    key: 'Mod-Enter',
    run: (view) => {
      console.log('Execute SQL:', view.state.doc.toString())
      return true
    }
  }]

  return (
    <CodeEditorDefault
      type={EnumFileExtensions.SQL}
      dialect="duckdb"
      content={content}
      keymaps={customKeymaps}
      onChange={setContent}
    />
  )
}

// Example 2: Remote file with auto-save
function RemoteFileEditor({ filePath }: { filePath: string }) {
  return (
    <CodeEditorRemoteFile
      path={filePath}
      keymaps={[]}
    >
      {({ file, keymaps }) => (
        <CodeEditorDefault
          type={file.extension}
          content={file.content}
          keymaps={keymaps} // Includes Cmd+S for save
          onChange={(value) => {
            file.content = value
          }}
        />
      )}
    </CodeEditorRemoteFile>
  )
}

// Example 3: Read-only Python editor
function ReadOnlyPythonViewer({ code }: { code: string }) {
  return (
    <CodeEditorDefault
      type={EnumFileExtensions.PY}
      content={code}
      // No onChange = read-only mode
    />
  )
}

// Example 4: YAML editor with validation
function YAMLConfigEditor({ config }: { config: string }) {
  const [yaml, setYaml] = useState(config)

  return (
    <CodeEditorDefault
      type={EnumFileExtensions.YAML}
      content={yaml}
      onChange={setYaml}
    />
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment