SQL editor

SQL editor with catalog completion, run and format.

Guidance

The SQL editor is the Query workspace's editor: mm-code-editor with the SQL grammar for the source's dialect, autocomplete from catalog metadata, and the run and format keys.

• Ctrl+Enter (⌘+Enter on Apple) fires mm-run with the selection if there is one, otherwise the whole statement.
• Shift+Alt+F fires a cancelable mm-format; unless you cancel it, keywords are upper-cased and trailing spaces trimmed. Nothing else changes, so formatting never alters meaning.
• Completions come from schema ({ 'shop.public.orders': ['order_id', …] }) and from the async completer, whose results show their asset type and provider ("table · PostgreSQL") with the provider's logo. The popup sits on the code ground; Enter accepts, Escape closes.
• error puts the server's error inline at its line and column, with a status line under the editor.

Dialects: postgresql (default), mysql, sqlite and standard. Trino maps to standard SQL, Snowflake, Redshift and DuckDB to PostgreSQL, BigQuery and ClickHouse to MySQL.

Properties

Property	Attribute	Type	Default	Description
dialect	dialect	SqlDialectName | string	'postgresql'	postgresql (default), mysql, sqlite, standard, or a Marmot provider mapped to the closest one.
schema		SqlSchema	{}	Catalog metadata for completion, keyed by dotted table name.
defaultSchema	default-schema	string	''	Schema whose tables complete without a prefix, such as shop.public.
completer		SqlCompleter | null	null	Async completion hook, called as people type. Return completions with assetType and provider for the detail.
error		SqlError | null	null	The server's error for the last run: { line, column, message }, 1-based.
hideShortcut	hide-shortcut	boolean	false	Hides the run shortcut hint under the editor.
language	language	CodeEditorLanguage	'sql'	sql, json, yaml or text.
value	value	string	''	The text.
label	label	string	''	Accessible name of the editor ("Role document", "Pipeline config").
placeholder	placeholder	string	''	Shown when the editor is empty. Never a substitute for label.
readonly	readonly	boolean	false	Selectable and copyable but not editable.
diagnostics		EditorDiagnostic[]	[]	Inline diagnostics: [{ from, to, severity, message }] with document offsets.
resize	resize	'vertical' | 'none'	'vertical'	vertical (default) lets people drag the editor taller; none fixes the height.
lazy	lazy	'load' | 'interaction'	'load'	load (default) loads CodeMirror after first render; interaction waits for the first focus or press.
ready		boolean	false	True once CodeMirror is mounted.
view				The CodeMirror view, once loaded.
selectedText		string		The selected text, or the empty string when nothing is selected or the editor has not loaded.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
run()	Fires mm-run with the selection, or the whole editor when nothing is selected.
format()	Fires mm-format and, unless it is cancelled, upper-cases keywords and trims trailing spaces.
load()	Loads CodeMirror now. Resolves when the editor is interactive.
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
mm-run	CustomEvent<{ sql: string, selection: boolean }>	Ctrl/⌘+Enter, or run(). sql is the selection when there is one.
mm-format	CustomEvent<{ sql: string }>	Shift+Alt+F, or format(). Cancel it to format on your side and set value.
mm-input	CustomEvent<{ value: string }>	The text changed.
mm-change	CustomEvent<{ value: string }>	The text changed and the editor lost focus.
mm-ready	CustomEvent<Record<string, never>>	CodeMirror loaded and the editor is interactive.
input	Event
change	Event

Slots

Slot	Description
badge	Status under the editor, such as "Read only" or "Read-only replica". Defaults to "Read only" when readonly.

CSS parts

Part	Description
frame	The code ground holding the editor.
fallback	The static highlighted copy shown before CodeMirror loads.
footer	The row under the editor with the error, badge and run shortcut.
messages	The list of diagnostic messages.
shortcut	The run shortcut hint.

CSS custom properties

Property	Description
--mm-code-editor-height	Initial height of the editor. Defaults to 240px.

Examples

Every state of mm-sql-editor in Storybook, with keyboard and screen reader tests.