DocsSQL Editor ExtensionsExtension - Events

@tidbcloud/codemirror-extension-events

2 normal kinds of codemirror event listener: doc change, selection change

  • onDocChange: triggered when doc changes
  • onSelectionChange: triggered when selection changes

Installation

npm install @tidbcloud/codemirror-extension-events

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state

Usage

import { EditorState } from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import {
  onDocChange,
  onSelectionChange,
  SelectionRange
} from '@tidbcloud/codemirror-extension-events'
 
// add extensions to your editor created by getting started
const extensions = [
  // ...other extensions,
  onDocChange((view: EditorView, state: EditorState, doc: string) => {
    // doc is all the current SQL content
    console.log('doc change', doc)
  }),
  /**
  *  When your selection or cursor position changes,
  *  You can get the selection data from & to by the selRanges params,
  *  it is the cursor position if from equals to
  */
  onSelectionChange((view: EditorView, state: EditorState, selRanges: SelectionRange[]) => {
    console.log('selection change', selRanges)
    console.log(getNearbyStatement(view.state, selRanges[0].from))
    console.log(getSqlStatements(view.state))
  })
]

Try it

You can try all the extensions playground at here & the events extension at here.