https://github.com/surrealdb/codemirror
An addon for supporting SurrealQL within your CodeMirror editors
https://github.com/surrealdb/codemirror
codemirror codemirror-addon codemirror-editor surreal surrealdb surrealql surrealql-grammar
Last synced: 5 months ago
JSON representation
An addon for supporting SurrealQL within your CodeMirror editors
- Host: GitHub
- URL: https://github.com/surrealdb/codemirror
- Owner: surrealdb
- License: apache-2.0
- Created: 2024-03-05T16:34:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-19T23:12:49.000Z (5 months ago)
- Last Synced: 2026-01-20T05:52:24.833Z (5 months ago)
- Topics: codemirror, codemirror-addon, codemirror-editor, surreal, surrealdb, surrealql, surrealql-grammar
- Language: JavaScript
- Homepage: https://surrealdb.com
- Size: 564 KB
- Stars: 10
- Watchers: 8
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
SurrealQL Support for CodeMirror
# @surrealdb/codemirror
This library provides full support for the SurrealQL language within your CodeMirror editors.
Some features include:
- Intelligent SurrealQL highlighting
- Folding support for blocks, objects, and arrays
- Automatic indentation support
- Support for comment toggling
- Embedded JavaScript highlighting
- Support for linting of supported syntax based on version
## How to install
Install it with:
```sh
# using npm
npm i @surrealdb/codemirror
# or using pnpm
pnpm i @surrealdb/codemirror
# or using yarn
yarn add @surrealdb/codemirror
```
Next, just import it with:
```ts
const { surrealql } = require("@surrealdb/codemirror");
```
or when you use modules:
```ts
import { surrealql } from "@surrealdb/codemirror";
```
## Example usage
```ts
import { surrealql } from "@surrealdb/codemirror";
const state = EditorState.create({
doc: "SELECT * FROM table",
extensions: [
surrealql()
]
});
const editor = new EditorView({
parent: document.getElementById("editor"),
state: state,
});
```
```ts
import { surrealql, surrealqlVersionLinter } from "@surrealdb/codemirror";
const state = EditorState.create({
doc: "SELECT * FROM table",
extensions: [
surrealql(),
surrealqlVersionLinter("2.0.0")
]
});
const editor = new EditorView({
parent: document.getElementById("editor"),
state: state,
});
```
# @surrealdb/lezer
This package contains the low level [Lezer](https://lezer.codemirror.net/) grammar used to perform SurrealQL syntax highlighting.
We recommend using `@surrealdb/codemirror` as it extends the grammar with additional CodeMirror supported functionality.