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