Merge pull request #10 from tidbcloud/playground

feat(playground): show gutter
tidbcloud · Jun 21, 2024 · e78f8ca · e78f8ca
2 parents 6900e1e + 68dfe0d
commit e78f8ca
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 42 deletions.
diff --git a/packages/core/src/editor-instance.ts b/packages/core/src/editor-instance.ts
@@ -81,6 +81,15 @@ export const createSQLEditorInstance = ({
   const sqlCompartment = new Compartment()
 
   const extensions = [
+    // make it full height default
+    // you can override it by theme and extraExts
+    EditorView.theme({
+      '&': { height: '100%' },
+      '.cm-line': {
+        paddingLeft: '8px'
+      }
+    }),
+
     basicSetup({
       foldGutter: false,
       foldKeymap: false,
@@ -95,12 +104,8 @@ export const createSQLEditorInstance = ({
     sqlCompartment.of(langSql(sqlConfig)),
     sqlParser(),
     curSql(),
-    extraExts,
 
-    // make it full height default
-    EditorView.theme({
-      '&': { height: '100%' }
-    })
+    extraExts
   ]
   const editorView = new EditorView({
     state: EditorState.create({

diff --git a/packages/extensions/cur-sql-gutter/src/index.ts b/packages/extensions/cur-sql-gutter/src/index.ts
@@ -7,18 +7,18 @@ export interface CurSqlGutterConfig {
   backgroundColor?: string
   width?: number
   className?: string
-  shouldGutterDisplay?: (view: EditorView) => boolean
+  shouldDisplay?: (view: EditorView) => boolean
 }
 
 function getMarkers(
   view: EditorView,
-  config: CurSqlGutterConfig,
-  curSqlMarker: GutterMarker
+  curSqlMarker: GutterMarker,
+  config?: CurSqlGutterConfig
 ) {
   let markers = RangeSet.empty
 
-  // when something happend, hide the gutter
-  if (config.shouldGutterDisplay && !config.shouldGutterDisplay(view)) {
+  // when something happens, hide the gutter
+  if (config?.shouldDisplay && !config.shouldDisplay(view)) {
     return markers
   }
 
@@ -54,34 +54,35 @@ function getMarkers(
 /**
  * gutter style
  */
-const baseTheme = (config: CurSqlGutterConfig) => {
+const baseTheme = (config?: CurSqlGutterConfig) => {
   return EditorView.baseTheme({
     '.cm-sql-gutter .cm-gutterElement': {
-      width: config.width || '2px'
+      width: `${config?.width ?? 2}px`
     },
     '.cm-lineNumbers .cm-gutterElement': {
+      paddingLeft: '8px',
       paddingRight: '8px'
     }
   })
 }
 
-const sqlGutter = (config: CurSqlGutterConfig, curSqlMarker: GutterMarker) => {
+const sqlGutter = (curSqlMarker: GutterMarker, config?: CurSqlGutterConfig) => {
   return gutter({
-    class: `cm-sql-gutter ${config.className || ''}`,
+    class: `cm-sql-gutter ${config?.className || ''}`,
     initialSpacer: () => curSqlMarker,
-    markers: (view: EditorView) => getMarkers(view, config, curSqlMarker)
+    markers: (view: EditorView) => getMarkers(view, curSqlMarker, config)
   })
 }
 
-export const curSqlGutter = (config: CurSqlGutterConfig) => {
+export const curSqlGutter = (config?: CurSqlGutterConfig) => {
   const curSqlMarker = new (class extends GutterMarker {
     toDOM() {
       const el = document.createElement('div')
-      el.style.background = config.backgroundColor || '#0CA6F2'
+      el.style.background = config?.backgroundColor || '#0CA6F2'
       el.style.height = '100%'
       return el
     }
   })()
 
-  return [baseTheme(config), sqlGutter(config, curSqlMarker)]
+  return [baseTheme(config), sqlGutter(curSqlMarker, config)]
 }
diff --git a/packages/extensions/themes/src/bbedit.ts b/packages/extensions/themes/src/bbedit.ts
@@ -42,7 +42,8 @@ export const bbeditTheme = EditorView.theme(
     // gutter
     '.cm-gutters': {
       backgroundColor: '#FFFFFF',
-      color: '#999'
+      color: '#999',
+      border: 'none'
     }
   },
   { dark: false }

diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.45.1",
+    "@tidbcloud/tisqleditor-extension-cur-sql-gutter": "workspace:^",
     "@tidbcloud/tisqleditor-extension-save-helper": "workspace:^",
     "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^",
     "@tidbcloud/tisqleditor-extension-themes": "workspace:^",

diff --git a/packages/playground/src/components/biz/editor-panel/actions.tsx b/packages/playground/src/components/biz/editor-panel/actions.tsx
@@ -20,24 +20,23 @@ export function EditorActions() {
     const activeEditor = cacheCtx.getEditor(activeFileId)
     if (!activeEditor) return
 
-    const curStatements = activeEditor.getCurStatements()
-    if (curStatements[0].content === '') return
+    const nearbyStatement = activeEditor.getNearbyStatement()
+    if (!nearbyStatement) {
+      return
+    }
 
-    const lastStatement = curStatements.at(-1)
-    if (lastStatement) {
-      setRunResult({ statement: lastStatement.content, status: 'running' })
-      try {
-        const res = await runStatement(activeFileId, lastStatement)
-        console.log('res:', res)
-        setRunResult(res)
-      } catch (error: any) {
-        console.log('error:', error)
-        setRunResult({
-          statement: lastStatement.content,
-          status: 'error',
-          message: error.message ?? 'unknown error'
-        })
-      }
+    setRunResult({ statement: nearbyStatement.content, status: 'running' })
+    try {
+      const res = await runStatement(activeFileId, nearbyStatement)
+      console.log('res:', res)
+      setRunResult(res)
+    } catch (error: any) {
+      console.log('error:', error)
+      setRunResult({
+        statement: nearbyStatement.content,
+        status: 'error',
+        message: error.message ?? 'unknown error'
+      })
     }
   }
 

diff --git a/packages/playground/src/components/biz/editor-panel/editor.tsx b/packages/playground/src/components/biz/editor-panel/editor.tsx
@@ -6,6 +6,7 @@ import { SQLConfig } from '@codemirror/lang-sql'
 import { SQLEditor } from '@tidbcloud/tisqleditor-react'
 import { saveHelper } from '@tidbcloud/tisqleditor-extension-save-helper'
 import { bbedit, oneDark } from '@tidbcloud/tisqleditor-extension-themes'
+import { curSqlGutter } from '@tidbcloud/tisqleditor-extension-cur-sql-gutter'
 
 import { useFilesContext } from '@/contexts/files-context'
 import { useTheme } from '@/components/darkmode-toggle/theme-provider'
@@ -67,7 +68,12 @@ export function Editor() {
             saveFile(activeFile.id, view.state.doc.toString())
           }
         }),
-        autocompletion()
+        autocompletion(),
+        curSqlGutter({
+          shouldDisplay: (_view) => {
+            return true
+          }
+        })
       ]
     }
     return []

diff --git a/packages/playground/src/index.css b/packages/playground/src/index.css
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -30,7 +30,7 @@
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221.2 83.2% 53.3%;
 
     --radius: 0.5rem;
   }
@@ -45,7 +45,7 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
 
     --secondary: 217.2 32.6% 17.5%;
@@ -62,7 +62,7 @@
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 224.3 76.3% 48%;
   }
 }
 

diff --git a/packages/playground/src/lib/env-vars.ts b/packages/playground/src/lib/env-vars.ts
@@ -1,4 +1,4 @@
-const keyPrefix = (import.meta.env.VITE_STORAGE_KEY_PREFIX ?? 'v1') + '.'
+const keyPrefix = (import.meta.env.VITE_STORAGE_KEY_PREFIX ?? 'v2') + '.'
 
 export function getLocalStorageItem(key: string) {
   return localStorage.getItem(keyPrefix + key)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml