Editor Setup
Set up JSONata language support with CodeMirror 6
Editor Setup
Syntax highlighting only
npm install @gnata-sqlite/codemirrorimport { EditorView, basicSetup } from "codemirror"
import { jsonata } from "@gnata-sqlite/codemirror"
new EditorView({
extensions: [basicSetup, jsonata()],
parent: document.getElementById("editor")!,
})Full support (diagnostics + autocomplete + hover)
Requires WASM files served from your app. The easiest way is to grab them from the @gnata-sqlite/react package:
npm install @gnata-sqlite/react
npx @gnata-sqlite/react setup ./publicThis copies gnata-lsp.wasm and lsp-wasm_exec.js into your public directory. Then:
import { EditorView, basicSetup } from "codemirror"
import { jsonataFull, initWasm } from "@gnata-sqlite/codemirror"
await initWasm("/gnata-lsp.wasm", "/lsp-wasm_exec.js")
new EditorView({
extensions: [basicSetup, jsonataFull({ schema: mySchema })],
parent: document.getElementById("editor")!,
})Alternatively, build from source with make wasm (requires TinyGo).
Tooltip styling
CodeMirror tooltips (hover docs, autocomplete, diagnostics) render as portals outside the editor DOM. They need global CSS to be styled.
A Tokyo Night stylesheet is included with each package:
// If using @gnata-sqlite/codemirror directly:
import '@gnata-sqlite/codemirror/styles.css';
// If using @gnata-sqlite/react:
import '@gnata-sqlite/react/tooltips.css';This covers dark and light mode using the Tokyo Night palette. For custom themes, override the key selectors: .cm-tooltip-hover, .cm-hover-tooltip, .cm-tooltip-autocomplete, and .cm-lintRange-error.
Schema for autocomplete
Without a schema, autocomplete only suggests built-in functions. Pass a schema to enable field suggestions:
{
"fields": {
"Account": {
"type": "object",
"fields": {
"Name": { "type": "string" },
"Order": { "type": "array", "fields": { "OrderID": { "type": "string" } } }
}
}
}
}Pass via schema option in jsonataFull().