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

Try it

• Full Featured Playground
• Simple Example

Installation

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

You need to install its dependencies as well:

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

Usage

import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
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'

const editorView = new EditorView({
  state: EditorState.create({
    doc,
    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