@tidbcloud/codemirror-extension-events
v0.0.7
Published
codemirror extension to listen doc and selection changes event
Downloads
71
Readme
@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 { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import {
onDocChange,
onSelectionChange,
SelectionRange
} from '@tidbcloud/codemirror-extension-events'
const docChangeHandler = (view: EditorView, state: EditorState, doc: string) => {
console.log(doc)
}
const selectionChangeHandler = (view: EditorView, state: EditorState, ranges: SelectionRange[]) => {
console.log(ranges)
}
const editorView = new EditorView({
state: EditorState.create({
doc,
extensions: [
onDocChange(docChangeHandler),
onSelectionChange(selectionChangeHandler)
]
})
})
API
type DocChangeHandler = (view: EditorView, state: EditorState, content: string) => void
function onDocChange(handler: DocChangeHandler): Extension
type SelectionRange = {
from: number
to: number
}
type SelectionChangeHandler = (
view: EditorView,
state: EditorState,
selRanges: SelectionRange[]
) => void
function onSelectionChange(handler: SelectionChangeHandler): Extension