Merge pull request #8 from tidbcloud/chore/extension-event

chore: add extension events

packages/extensions/events/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@tidbcloud/tisqleditor-extension-events",
+  "version": "1.0.0",
+  "description": "tisqleditor extensions",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*.js",
+    "dist/*.ts",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "tsc:watch": "tsc --watch",
+    "rollup:watch": "rollup -c --watch",
+    "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
+    "build": "tsc && rollup -c"
+  },
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "extensions",
+    "events"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.16.2",
+    "@codemirror/commands": "6.3.3",
+    "@codemirror/lang-sql": "^6.6.4",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.0",
+    "@codemirror/search": "^6.5.6",
+    "@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/autocomplete": "^6.16.2",
+    "@codemirror/commands": "6.3.3",
+    "@codemirror/lang-sql": "^6.6.4",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.0",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3",
+    "@lezer/highlight": "^1.2.0"
+  },
+  "dependencies": {
+    "@tidbcloud/tisqleditor-extension-cur-sql": "workspace:^",
+    "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^"
+  }
+}

packages/extensions/events/rollup.config.js

@@ -0,0 +1,10 @@
+import typescript from '@rollup/plugin-typescript'
+
+export default {
+  input: './src/index.ts',
+  output: {
+    dir: './dist',
+    format: 'es'
+  },
+  plugins: [typescript()]
+}

packages/extensions/events/src/change.ts

@@ -0,0 +1,18 @@
+import { EditorView, ViewUpdate } from '@codemirror/view'
+
+type ChangeHelperOptions = {
+  onChange: (sql: string, view?: EditorView) => void
+}
+
+const changeHandler = (change: (sql: string, view?: EditorView) => void) => {
+  return EditorView.updateListener.of((update: ViewUpdate) => {
+    if (!update.docChanged) return
+
+    const { state } = update.view
+    change(state.doc.sliceString(0), update.view)
+  })
+}
+
+export const onChange = ({ onChange }: ChangeHelperOptions) => {
+  return [changeHandler(onChange)]
+}

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

@@ -0,0 +1,35 @@
+import { EditorView, ViewUpdate } from '@codemirror/view'
+
+import { getCurStatements } from '@tidbcloud/tisqleditor-extension-cur-sql'
+import { SqlStatement } from '@tidbcloud/tisqleditor-extension-sql-parser'
+
+type FocusChangeHelperOptions = {
+  onFocusChange: (curSql: SqlStatement[]) => void
+}
+
+const focusChangeHandler = (change: (curSql: SqlStatement[]) => void) => {
+  let timer: number | undefined
+  let first = true
+
+  return EditorView.updateListener.of((v: ViewUpdate) => {
+    if (!v.selectionSet) return
+
+    // debounce
+    timer && clearTimeout(timer)
+    timer = window.setTimeout(
+      () => {
+        first && (first = false)
+
+        const { state } = v.view
+        change(getCurStatements(state))
+      },
+      first ? 0 : 100
+    )
+  })
+}
+
+export const focusChangeHelper = ({
+  onFocusChange
+}: FocusChangeHelperOptions) => {
+  return [focusChangeHandler(onFocusChange)]
+}

packages/extensions/events/src/index.ts

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

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

@@ -0,0 +1,43 @@
+import { EditorView, ViewUpdate } from '@codemirror/view'
+
+export interface SelectionRange {
+  from: number
+  to: number
+}
+
+type SelectionChangeHelperOptions = {
+  onFocusChange: (curSql: SelectionRange[]) => void
+}
+
+const selectionChangeHandler = (change: (curSql: SelectionRange[]) => void) => {
+  let timer: number | undefined
+  let first = true
+
+  return EditorView.updateListener.of((v: ViewUpdate) => {
+    if (!v.selectionSet) return
+
+    if (v.startState.selection.eq(v.state.selection)) {
+      return
+    }
+
+    timer && clearTimeout(timer)
+    timer = window.setTimeout(
+      () => {
+        first && (first = false)
+        change(
+          v.state.selection.ranges.map((r) => ({
+            from: r.from,
+            to: r.to
+          }))
+        )
+      },
+      first ? 0 : 100
+    )
+  })
+}
+
+export const onSelectionChange = ({
+  onFocusChange
+}: SelectionChangeHelperOptions) => {
+  return [selectionChangeHandler(onFocusChange)]
+}

packages/extensions/events/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}