Feat/playground add events

.gitignore

@@ -4,3 +4,5 @@ build
 
 # Local Netlify folder
 .netlify
+
+.vscode

packages/playground/package.json

@@ -31,6 +31,7 @@
     "@tidbcloud/codemirror-extension-sql-parser": "workspace:^",
     "@tidbcloud/codemirror-extension-themes": "workspace:^",
     "@tidbcloud/tisqleditor-react": "workspace:^",
+    "@tidbcloud/codemirror-extension-events": "workspace:^",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",

packages/playground/src/App.tsx

@@ -59,7 +59,13 @@ function App() {
       )
     }
 
-    return <EditorExample example={example} theme={editorTheme} />
+    return (
+      <EditorExample
+        example={example}
+        withSelect={withSelect}
+        theme={editorTheme}
+      />
+    )
   }
 
   return <FullFeaturedPlayground />

packages/playground/src/examples/editor-example-with-select.tsx

@@ -39,6 +39,7 @@ function ExampleSelect({
             FullWidthChar Linter
           </SelectItem>
           <SelectItem value="save-helper">Save Helper</SelectItem>
+          <SelectItem value="events">Events</SelectItem>
           <SelectItem value="all">All</SelectItem>
         </SelectGroup>
       </SelectContent>
@@ -104,6 +105,8 @@ export function EditorExampleWithSelect({
     )
   }, [editorTheme])
 
+  const [consoleContent, setConsoleContent] = useState('')
+
   return (
     <main className="flex min-h-screen place-items-center justify-center p-4">
       <div className="max-w-7xl min-w-[800px]">
@@ -141,9 +144,40 @@ export function EditorExampleWithSelect({
             </Button>
           </div>
 
-          <div className="mt-2 text-left border-2 h-[400px]">
-            <EditorExample example={example} theme={editorTheme} />
+          <div
+            className={`mt-2 text-left border-2 h-[500px] ${example === 'events' ? 'overflow-y-auto' : ''}`}
+          >
+            <EditorExample
+              example={example}
+              theme={editorTheme}
+              docChangeHandler={(view, docs) => {
+                console.log(view)
+                setConsoleContent(`SQL changes, current SQLs: \n${docs}`)
+              }}
+              selectionChangeHandler={(view, selectRange) => {
+                if (
+                  selectRange.length === 0 ||
+                  selectRange[0].from === selectRange[0].to
+                ) {
+                  return
+                }
+
+                const content = `Selection changes, from: ${selectRange[0].from} to: ${selectRange[0].to}\nSelect SQLs: ${view.state.sliceDoc(
+                  selectRange[0].from,
+                  selectRange[0].to
+                )}`
+                setConsoleContent(content)
+              }}
+            />
           </div>
+
+          {example === 'events' && (
+            <div className="mt-2 p-2 text-left border-2 rounded-xl h-[300px] overflow-y-auto shrink-0	">
+              <pre>
+                <p className="text-sm text-slate-400">{consoleContent}</p>
+              </pre>
+            </div>
+          )}
         </div>
       </div>
     </main>

packages/playground/src/examples/editor-example.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { EditorView } from '@codemirror/view'
 
 import { SQLEditor } from '@tidbcloud/tisqleditor-react'
@@ -14,18 +14,39 @@ import {
   aiWidget,
   isUnifiedMergeViewActive
 } from '@tidbcloud/codemirror-extension-ai-widget'
+import {
+  onDocChange,
+  onSelectionChange,
+  SelectionRange
+} from '@tidbcloud/codemirror-extension-events'
 import { delay } from '@/lib/delay'
 import { Extension } from '@codemirror/state'
 
 const DOC_1 = `USE sp500insight;`
 const DOC_2 = `-- USE sp500insight;`
 const DOC_3 = `-- USE sp500insight；`
 const DOC_4 = `
-SELECT sector, industry, COUNT(*) AS companies
-FROM companies c
-WHERE c.stock_symbol IN (SELECT stock_symbol FROM index_compositions WHERE index_symbol = "SP500")
-GROUP BY sector, industry
-ORDER BY sector, companies DESC;
+SELECT
+  sector,
+  industry,
+  COUNT(*) AS companies
+FROM
+  companies c
+WHERE
+  c.stock_symbol IN (
+    SELECT
+      stock_symbol
+    FROM
+      index_compositions
+    WHERE
+      index_symbol = "SP500"
+  )
+GROUP BY
+  sector,
+  industry
+ORDER BY
+  sector,
+  companies DESC;
 `
 
 const ALL_EXAMPLES = [
@@ -81,10 +102,19 @@ const EXAMPLE_DOCS: { [key: string]: string } = {
 
 export function EditorExample({
   example = '',
-  theme = ''
+  theme = '',
+  withSelect,
+  docChangeHandler,
+  selectionChangeHandler
 }: {
   example?: string
+  withSelect?: string | null
   theme?: string
+  docChangeHandler?: (view: EditorView, doc: string) => void
+  selectionChangeHandler?: (
+    view: EditorView,
+    selectRange: SelectionRange[]
+  ) => void
 }) {
   const exampleArr = useMemo(() => {
     let exampleArr = example.split(',')
@@ -109,13 +139,47 @@ export function EditorExample({
     return [str, DOC_4].join('\n')
   }, [exampleArr])
 
+  const [consoleContent, setConsoleContent] = useState('')
+
   return (
-    <SQLEditor
-      className="h-full"
-      editorId={example || 'default'}
-      doc={doc}
-      theme={THEME_EXTS[theme]}
-      extraExts={extraExts}
-    />
+    <div className="flex flex-col h-full bg-slate-900">
+      <SQLEditor
+        className="flex-1 overflow-y-auto"
+        editorId={example || 'default'}
+        doc={doc}
+        theme={THEME_EXTS[theme]}
+        extraExts={[
+          ...extraExts,
+          onDocChange((view, content) => {
+            docChangeHandler?.(view, content)
+            console.log(view)
+            setConsoleContent(`SQL changes, current SQLs: \n${content}`)
+          }),
+          onSelectionChange((view, selectRange) => {
+            selectionChangeHandler?.(view, selectRange)
+            if (
+              selectRange.length === 0 ||
+              selectRange[0].from === selectRange[0].to
+            ) {
+              return
+            }
+
+            const content = `Selection changes, from: ${selectRange[0].from} to: ${selectRange[0].to}\nSelect SQLs: ${view.state.sliceDoc(
+              selectRange[0].from,
+              selectRange[0].to
+            )}`
+            setConsoleContent(content)
+          })
+        ]}
+      />
+
+      {example === 'events' && withSelect === null && (
+        <div className="mt-2 p-2 text-left rounded-xl h-[300px] overflow-y-auto shrink-0">
+          <pre>
+            <p className="text-sm text-slate-400">{consoleContent}</p>
+          </pre>
+        </div>
+      )}
+    </div>
   )
 }