From eea6838e898eef28373c14e30bd4cf1531f0b990 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Sat, 29 Jun 2024 19:46:57 +0800 Subject: [PATCH] doc(events): update README --- README.md | 4 ++-- packages/extensions/events/README.md | 33 ++++++++++------------------ 2 files changed, 14 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 48c252d..87c8321 100644 --- a/README.md +++ b/README.md @@ -32,9 +32,9 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2- | @tidbcloud/codemirror-extension-save-helper | save the editor content if it changes | | @tidbcloud/codemirror-extension-autocomplete | SQL keyword and database schema autocomplete tips | | @tidbcloud/codemirror-extension-linters | use db statement, full width chars, and regular expression linters | -| @tidbcloud/codemirror-extension-events | 3 normal kinds of event listener | +| @tidbcloud/codemirror-extension-events | 2 normal kinds of event listener: doc change, selection change | | @tidbcloud/codemirror-extension-themes | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode | -| @tidbcloud/codemirror-extension-basic-setup | Basic configuration for the CodeMirror6 code editor | +| @tidbcloud/codemirror-extension-basic-setup | basic configuration for the CodeMirror6 code editor | ## Usage diff --git a/packages/extensions/events/README.md b/packages/extensions/events/README.md index a068c4d..a5a60cc 100644 --- a/packages/extensions/events/README.md +++ b/packages/extensions/events/README.md @@ -1,10 +1,9 @@ # @tidbcloud/codemirror-extension-events -Events extensions for CodeMirror6. This extension provides 3 events: onChange, onFocusChange and onSelectionChange. +2 normal kinds of event listener: doc change, selection change -- onChange: any doc change will trigger this event -- onFocusChange: while the cursor change will trigger this event -- onSelectionChange: while selection content change will trigger this event +- onDocChange: triggered when doc changes +- onSelectionChange: triggered when selection changes ## Installation @@ -24,33 +23,25 @@ npm install @codemirror/view @codemirror/state import { EditorView } from '@codemirror/view' import { EditorState } from '@codemirror/state' import { - onChange, - onFocusChange, - onSelectionChange + onDocChange, + onSelectionChange, + SelectionRange } from '@tidbcloud/codemirror-extension-events' -const onChangeHandler = (sql: string, view: EditorView) => { - console.log(sql, view) +const docChangeHandler = (view: EditorView, doc: string) => { + console.log(doc) } -const onFocusChangeHandler = (sql: string) => { - console.log(sql) -} - -const onSelectionChangeHandler = (selectedRange: { - from: number - to: numer -}) => { - console.log(selectedRange.from, selectedRange.to) +const selectionChangeHandler = (view: EditorView, ranges: SelectionRange[]) => { + console.log(ranges) } const editorView = new EditorView({ state: EditorState.create({ doc, extensions: [ - onChange(onChangeHandler), - focusChangeHelper(onFocusChangeHandler), - onSelectionChange(onSelectionChangeHandler) + onDocChange(docChangeHandler), + onSelectionChange(selectionChangeHandler) ] }) })