@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


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


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


bun add @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


pnpm add @codemirror/view @codemirror/state @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql


yarn add @codemirror/view @codemirror/state @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql


bun add @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 .