Implementation:TobikoData Sqlmesh Editor Extensions

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

Overview

A collection of CodeMirror extensions that provide SQLMesh-specific editor functionality including event handling, hover tooltips, model highlighting, and expression marking.

Description

Editor_Extensions serves as the main export module for all CodeMirror extensions used in the SQLMesh editor. It provides three primary extensions: events for handling DOM events like clicks and keyboard shortcuts, HoverTooltip for displaying model information on hover, SQLMeshModel for highlighting model and column references, and SQLMeshExpression for marking specific expressions in the editor. These extensions work together to create a rich, interactive editing experience tailored for SQLMesh SQL files.

The extensions are designed to be composable and can be combined with other CodeMirror extensions to build the complete editor configuration. Each extension handles a specific aspect of editor behavior, from visual decorations to user interactions, making the codebase modular and maintainable.

Usage

Import and use these extensions when configuring a CodeMirror editor for SQLMesh SQL files. Combine them with other standard CodeMirror extensions to create a fully-featured editor with SQLMesh-aware features.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/editor/extensions/index.ts

Signature

export { events, HoverTooltip, SQLMeshModel, SQLMeshExpression }

function events(
  events: Record<string, (event: MouseEvent) => void>
): Extension

function HoverTooltip(
  models: Map<string, ModelSQLMeshModel>
): Extension

function SQLMeshExpression(expression: string): Extension

Import

import { events, HoverTooltip, SQLMeshModel, SQLMeshExpression } from '@components/editor/extensions'

Extensions Overview

events Extension

Registers DOM event handlers for the editor:

function events(
  events: Record<string, (event: MouseEvent) => void>
): Extension {
  return EditorView.domEventHandlers(events)
}

Usage:

events({
  click: (e) => handleClick(e),
  keydown: (e) => handleKeydown(e),
  keyup: (e) => handleKeyup(e),
})

Common use cases:

Click events: Handle clicks on models and columns
Keydown events: Enable action mode when meta/cmd key pressed
Keyup events: Disable action mode when meta/cmd key released

HoverTooltip Extension

Displays a tooltip with model information on hover:

function HoverTooltip(models: Map<string, ModelSQLMeshModel>): Extension {
  return hoverTooltip(
    (view: EditorView, pos: number, side: number): Tooltip | null => {
      // Find word at cursor position
      // Check if it's a model name
      // Return tooltip with model info
    },
    { hoverTime: 50 },
  )
}

Features:

Fast hover time: 50ms delay for responsive feedback
Word boundary detection: Finds complete model names at cursor
Model information display: Shows model name in styled tooltip
Above cursor positioning: Tooltip appears above the hovered text

Tooltip Content:

<div class="flex items-center">
  <span>Model Name:</span>
  <span class="px-2 py-1 inline-block ml-1 bg-alternative-100 text-alternative-500 rounded">
    model_name
  </span>
</div>

SQLMeshModel Extension

Re-exported from the SQLMeshModel module:

import SQLMeshModel from './SQLMeshModel'
export { SQLMeshModel }

See TobikoData_Sqlmesh_SQLMeshModel_Extension for detailed documentation.

SQLMeshExpression Extension

Highlights lines containing a specific expression:

function SQLMeshExpression(expression: string): Extension {
  return ViewPlugin.fromClass(
    class SqlMeshModelView {
      decorations: DecorationSet = Decoration.set([])

      constructor(readonly view: EditorView) {
        this.decorations = markExpressionLine(expression, view)
      }

      update(viewUpdate: ViewUpdate): void {
        this.decorations = markExpressionLine(expression, viewUpdate.view)
      }
    },
    {
      decorations: value => value.decorations,
    },
  )
}

Features:

Marks entire lines containing the expression
Applies CSS class 'sqlmesh-expression' to marked lines
Sets 'id' attribute to the expression string
Updates decorations on viewport changes

Implementation:

function markExpressionLine(expression: string, view: EditorView): DecorationSet {
  const mark = Decoration.line({
    attributes: {
      id: expression,
      class: 'sqlmesh-expression',
    },
  })

  const builder = new RangeSetBuilder<Decoration>()

  for (const { from, to } of view.visibleRanges) {
    for (let pos = from; pos <= to; ) {
      const line = view.state.doc.lineAt(pos)

      if (line.text.includes(expression)) {
        builder.add(line.from, line.from, mark)
      }

      pos = line.to + 1
    }
  }

  return builder.finish()
}

Usage Example

Combining all extensions in an editor configuration:

import { events, HoverTooltip, SQLMeshModel, SQLMeshExpression } from '@components/editor/extensions'

const extensions = [
  // Event handling
  events({
    click: handleModelClick,
    keydown: handleKeyDown,
    keyup: handleKeyUp,
  }),

  // Hover tooltips
  HoverTooltip(models),

  // Model and column highlighting
  SQLMeshModel(models, columns, isActionMode, currentModel),

  // Expression highlighting
  SQLMeshExpression('SELECT'),
]

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment