refactor(events): refactor events extension

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