Merge pull request #74 from tidbcloud/fix/extensions-bugfix

Fix/extensions bugfix
tidbcloud · Oct 10, 2024 · bc5f27b · bc5f27b
2 parents 2d3846e + f6859c3
commit bc5f27b
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 16 deletions.
diff --git a/packages/extensions/cur-sql-gutter/README.md b/packages/extensions/cur-sql-gutter/README.md
@@ -16,7 +16,7 @@ npm install @tidbcloud/codemirror-extension-cur-sql-gutter
 You need to install its dependencies as well:
 
 ```shell
-npm install @codemirror/view @codemirror/state @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror/extension-cur-sql
+npm install @codemirror/view @codemirror/state @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql
 ```
 
 ## Usage

diff --git a/packages/extensions/events/README.md b/packages/extensions/events/README.md
@@ -28,11 +28,11 @@ import {
   SelectionRange
 } from '@tidbcloud/codemirror-extension-events'
 
-const docChangeHandler = (view: EditorView, doc: string) => {
+const docChangeHandler = (view: EditorView, state: EditorState, doc: string) => {
   console.log(doc)
 }
 
-const selectionChangeHandler = (view: EditorView, ranges: SelectionRange[]) => {
+const selectionChangeHandler = (view: EditorView, state: EditorState, ranges: SelectionRange[]) => {
   console.log(ranges)
 }
 
@@ -50,7 +50,7 @@ const editorView = new EditorView({
 ## API
 
 ```ts
-type DocChangeHandler = (view: EditorView, content: string) => void
+type DocChangeHandler = (view: EditorView, state: EditorState, content: string) => void
 function onDocChange(handler: DocChangeHandler): Extension
 
 type SelectionRange = {
@@ -59,6 +59,7 @@ type SelectionRange = {
 }
 type SelectionChangeHandler = (
   view: EditorView,
+  state: EditorState,
   selRanges: SelectionRange[]
 ) => void
 function onSelectionChange(handler: SelectionChangeHandler): Extension

diff --git a/packages/extensions/events/src/doc-change.ts b/packages/extensions/events/src/doc-change.ts
@@ -1,14 +1,14 @@
-import { Extension } from '@codemirror/state'
+import { EditorState, Extension } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 
-type DocChangeHandler = (view: EditorView, content: string) => void
+type DocChangeHandler = (view: EditorView, state: EditorState, 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))
+    handler(update.view, update.state, state.doc.sliceString(0))
   })
 }
 

diff --git a/packages/extensions/events/src/selection-change.ts b/packages/extensions/events/src/selection-change.ts
@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state'
+import { EditorState, Extension } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 
 export type SelectionRange = {
@@ -8,6 +8,7 @@ export type SelectionRange = {
 
 type SelectionChangeHandler = (
   view: EditorView,
+  state: EditorState,
   selRanges: SelectionRange[]
 ) => void
 
@@ -30,6 +31,7 @@ const selectionChangeListener = (handler: SelectionChangeHandler) => {
         }
         handler(
           v.view,
+          v.state,
           v.state.selection.ranges.map((r) => ({
             from: r.from,
             to: r.to

diff --git a/packages/extensions/events/src/test/doc-change.test.ts b/packages/extensions/events/src/test/doc-change.test.ts
@@ -23,7 +23,7 @@ describe('test change event', () => {
         state: EditorState.create({
           doc: '',
           extensions: [
-            onDocChange((_view, content) => {
+            onDocChange((_view, _state, content) => {
               doc = content
             })
           ]
@@ -45,7 +45,7 @@ describe('test change event', () => {
         state: EditorState.create({
           doc: LINE_1,
           extensions: [
-            onDocChange((_view, content) => {
+            onDocChange((_view, _state, content) => {
               doc = content
             })
           ]

diff --git a/packages/extensions/events/src/test/selection-change.test.ts b/packages/extensions/events/src/test/selection-change.test.ts
@@ -24,7 +24,7 @@ describe('test selection change event', () => {
       state: EditorState.create({
         doc: '',
         extensions: [
-          onSelectionChange((_view, ranges) => {
+          onSelectionChange((_view, _state, ranges) => {
             selRanges = ranges
           })
         ]

diff --git a/packages/extensions/sql-autocomplete/src/icons-svg.ts b/packages/extensions/sql-autocomplete/src/icons-svg.ts
@@ -51,3 +51,7 @@ export const Types = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none
 export const Variable = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.2709 14C14.1644 12.1926 14.6668 10.1553 14.6668 8C14.6668 5.84474 14.1644 3.80744 13.2709 2M2.72945 2C1.83592 3.80744 1.3335 5.84474 1.3335 8C1.3335 10.1553 1.83592 12.1926 2.72945 14M11.0326 5.75H10.9728C10.5372 5.75 10.1233 5.94134 9.83986 6.27381L6.25664 10.4762C5.97315 10.8087 5.5593 11 5.1237 11H5.06392M5.81005 5.75H6.73944C7.07256 5.75 7.36531 5.97198 7.45682 6.29396L8.63978 10.456C8.73129 10.778 9.02404 11 9.35716 11H10.2866" stroke="#2E6BE5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`
+
+export const Vector = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7569 4.92857C14.1302 4.51155 14.3571 3.96085 14.3571 3.35714C14.3571 2.05533 13.3018 1 12 1C10.6982 1 9.64286 2.05533 9.64286 3.35714C9.64286 3.96085 9.86981 4.51155 10.2431 4.92857M13.7569 4.92857C13.3253 5.4108 12.6981 5.71429 12 5.71429C11.3019 5.71429 10.6747 5.4108 10.2431 4.92857M13.7569 4.92857L18.8859 10.4286M18.8859 10.4286C18.5127 10.8456 18.2857 11.3963 18.2857 12C18.2857 12.6037 18.5127 13.1544 18.8859 13.5714M18.8859 10.4286C19.3175 9.94634 19.9447 9.64286 20.6429 9.64286C21.9447 9.64286 23 10.6982 23 12C23 13.3018 21.9447 14.3571 20.6429 14.3571C19.9447 14.3571 19.3175 14.0537 18.8859 13.5714M18.8859 13.5714L13.7569 19.0714M13.7569 19.0714C13.3253 18.5892 12.6981 18.2857 12 18.2857C11.3019 18.2857 10.6747 18.5892 10.2431 19.0714M13.7569 19.0714C14.1302 19.4885 14.3571 20.0391 14.3571 20.6429C14.3571 21.9447 13.3018 23 12 23C10.6982 23 9.64286 21.9447 9.64286 20.6429C9.64286 20.0391 9.86981 19.4885 10.2431 19.0714M10.2431 19.0714L4.92857 13.7569M4.92857 13.7569C5.4108 13.3253 5.71429 12.6981 5.71429 12C5.71429 11.3019 5.4108 10.6747 4.92857 10.2431M4.92857 13.7569C4.51155 14.1302 3.96085 14.3571 3.35714 14.3571C2.05533 14.3571 1 13.3018 1 12C1 10.6982 2.05533 9.64286 3.35714 9.64286C3.96085 9.64286 4.51155 9.86981 4.92857 10.2431M4.92857 10.2431L10.2431 4.92857" stroke="currentColor" stroke-width="inherit" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`
diff --git a/packages/extensions/sql-autocomplete/src/index.ts b/packages/extensions/sql-autocomplete/src/index.ts
@@ -19,7 +19,8 @@ import {
   Numberic,
   String,
   Types,
-  Variable
+  Variable,
+  Vector
 } from './icons-svg'
 
 /**
@@ -315,6 +316,11 @@ const customAutoCompletion = (config: AutoCompletionConfig) => {
             case 'JSON':
               src = Brackets
               break
+            case 'VECTOR<FLOAT>':
+            case 'VECTOR<FLOAT16>':
+            case 'VECTOR':
+              src = Vector
+              break
           }
 
           if (

diff --git a/packages/playground-nextjs/components/biz/editor-example.tsx b/packages/playground-nextjs/components/biz/editor-example.tsx
@@ -136,12 +136,12 @@ export function EditorExample({
         }
       }),
       events: [
-        onDocChange((_view, content) => {
+        onDocChange((_view, state, content) => {
           const s = `Doc changes, current doc:\n\n${content}`
           console.log(s)
           setOutput(s)
         }),
-        onSelectionChange((view, sels) => {
+        onSelectionChange((view, state, sels) => {
           if (sels.length === 0 || sels[0].from === sels[0].to) {
             return
           }

diff --git a/packages/playground/src/examples/editor-example.tsx b/packages/playground/src/examples/editor-example.tsx
@@ -133,12 +133,12 @@ export function EditorExample({
         }
       }),
       events: [
-        onDocChange((_view, content) => {
+        onDocChange((_view, _state, content) => {
           const s = `Doc changes, current doc:\n\n${content}`
           console.log(s)
           setOutput(s)
         }),
-        onSelectionChange((view, sels) => {
+        onSelectionChange((view, _state, sels) => {
           if (sels.length === 0 || sels[0].from === sels[0].to) {
             return
           }