DocsSQL Editor ExtensionsExtension - CurSQLGutter

@tidbcloud/codemirror-extension-cur-sql-gutter

A codemirror extension listens the editor selection change, and shows gutter for the SQL statements around the cursor position to make it highlight.

Installation

npm install @tidbcloud/codemirror-extension-cur-sql-gutter

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql

Usage

import { sql, MySQL } from '@codemirror/lang-sql'
import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'
 
// add extensions to your editor created by getting started
const extensions = [
  // ...other extensions,
  sql({ dialect: MySQL }),
  sqlParser(),
  curSql(),
  curSqlGutter()
]

API

interface CurSqlGutterConfig {
  // gutter background
  backgroundColor?: string
  // gutter width
  width?: number
  // gutter extra css class
  className?: string
  /* control gutter to hide when some cases happen */
  whenHide?: (view: EditorView) => boolean
}
 
function curSqlGutter(config?: CurSqlGutterConfig): Extension

Try it

You can try all the extensions playground at here & the cur-sql-gutter extension at here.


Extension - EventsExtension - CurSQL