refactor: events

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
 

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)
     ]
   })
 })

packages/extensions/events/package.json

@@ -28,21 +28,15 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@codemirror/lang-sql": "^6.6.4",
-    "@codemirror/view": "^6.26.3",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "rollup": "^4.18.0",
     "tslib": "^2.6.3",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@codemirror/lang-sql": "^6.6.4",
-    "@codemirror/view": "^6.26.3",
-    "@codemirror/state": "^6.4.1"
-  },
-  "dependencies": {
-    "@tidbcloud/codemirror-extension-cur-sql": "workspace:^",
-    "@tidbcloud/codemirror-extension-sql-parser": "workspace:^"
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3"
   }
 }

packages/extensions/events/src/doc-change.ts

@@ -0,0 +1,17 @@
+import { Extension } from '@codemirror/state'
+import { EditorView, ViewUpdate } from '@codemirror/view'
+
+type DocChangeHandler = (view: EditorView, content: string) => void
+
+const docChangeListener = (handler: DocChangeHandler) => {
+  return EditorView.updateListener.of((update: ViewUpdate) => {
+    if (!update.docChanged) return
+
+    const { state } = update.view
+    handler(update.view, state.doc.sliceString(0))
+  })
+}
+
+export function onDocChange(handler: DocChangeHandler): Extension {
+  return docChangeListener(handler)
+}

packages/extensions/events/src/index.ts

@@ -1,3 +1,2 @@
-export * from './change'
-export * from './focus-change'
+export * from './doc-change'
 export * from './selection-change'

packages/extensions/events/src/selection-change.ts

@@ -1,15 +1,17 @@
+import { Extension } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 
 export interface SelectionRange {
   from: number
   to: number
 }
 
-type SelectionChangeHelperOptions = (selectionRange: SelectionRange[]) => void
+type SelectionChangeHandler = (
+  view: EditorView,
+  selRanges: SelectionRange[]
+) => void
 
-const selectionChangeHandler = (
-  change: (selectionRange: SelectionRange[]) => void
-) => {
+const selectionChangeListener = (handler: SelectionChangeHandler) => {
   let timer: number | undefined
   let first = true
 
@@ -23,8 +25,11 @@ const selectionChangeHandler = (
     timer && clearTimeout(timer)
     timer = window.setTimeout(
       () => {
-        first && (first = false)
-        change(
+        if (first) {
+          first = false
+        }
+        handler(
+          v.view,
           v.state.selection.ranges.map((r) => ({
             from: r.from,
             to: r.to
@@ -36,8 +41,6 @@ const selectionChangeHandler = (
   })
 }
 
-export const onSelectionChange = (
-  onSelectionChange: SelectionChangeHelperOptions
-) => {
-  return [selectionChangeHandler(onSelectionChange)]
+export function onSelectionChange(handler: SelectionChangeHandler): Extension {
+  return selectionChangeListener(handler)
 }

packages/extensions/events/src/test/on-change.test.ts → packages/extensions/events/src/test/doc-change.test.ts

@@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
 
-import { onChange } from '..'
+import { onDocChange } from '..'
 
 const LINE_1 = 'USE game;'
 const LINE_2 = `SELECT
@@ -14,24 +14,24 @@ LIMIT
 const DOC = `${LINE_1}\n${LINE_2}`
 
 test('test change event', () => {
-  let curSql = ''
+  let doc = ''
 
   const editorView = new EditorView({
     state: EditorState.create({
       doc: '',
       extensions: [
-        onChange((sql) => {
-          curSql = sql
+        onDocChange((_view, content) => {
+          doc = content
         })
       ]
     })
   })
 
   editorView.dispatch({ changes: { from: 0, insert: LINE_1 } })
-  expect(curSql).toBe(LINE_1)
+  expect(doc).toBe(LINE_1)
 
   editorView.dispatch({
     changes: { from: LINE_1.length, insert: `\n${LINE_2}` }
   })
-  expect(curSql).toBe(DOC)
+  expect(doc).toBe(DOC)
 })

packages/extensions/events/src/test/on-selection-change.test.ts → packages/extensions/events/src/test/selection-change.test.ts

@@ -1,10 +1,6 @@
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
 
-import { MySQL, sql } from '@codemirror/lang-sql'
-import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
-import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
-
 import { onSelectionChange, SelectionRange } from '..'
 
 jest.useFakeTimers()
@@ -20,17 +16,14 @@ LIMIT
 const DOC = `${LINE_1}\n${LINE_2}`
 
 test('test selection change event', async () => {
-  let sqlStatement: SelectionRange[] = []
+  let selRanges: SelectionRange[] = []
 
   const editorView = new EditorView({
     state: EditorState.create({
       doc: '',
       extensions: [
-        sqlParser(),
-        sql({ dialect: MySQL }),
-        curSql(),
-        onSelectionChange((sql) => {
-          sqlStatement = sql
+        onSelectionChange((_view, ranges) => {
+          selRanges = ranges
         })
       ]
     })
@@ -40,13 +33,13 @@ test('test selection change event', async () => {
 
   editorView.dispatch({ selection: { anchor: 0, head: LINE_1.length } })
   await jest.advanceTimersByTime(100)
-  expect(sqlStatement[0].from).toBe(0)
-  expect(sqlStatement[0].to).toBe(LINE_1.length)
+  expect(selRanges[0].from).toBe(0)
+  expect(selRanges[0].to).toBe(LINE_1.length)
 
   editorView.dispatch({
     selection: { anchor: LINE_1.length, head: DOC.length }
   })
   await jest.advanceTimersByTime(100)
-  expect(sqlStatement[0].from).toBe(LINE_1.length)
-  expect(sqlStatement[0].to).toBe(DOC.length)
+  expect(selRanges[0].from).toBe(LINE_1.length)
+  expect(selRanges[0].to).toBe(DOC.length)
 })