feat: playground phase 3

packages/core/package.json

@@ -42,7 +42,6 @@
   "dependencies": {
     "@tidbcloud/tisqleditor-extension-basic-setup": "workspace:^",
     "@tidbcloud/tisqleditor-extension-cur-sql": "workspace:^",
-    "@tidbcloud/tisqleditor-extension-lang-sql": "workspace:^",
     "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^"
   }
 }

packages/core/src/editor-instance.ts

@@ -1,7 +1,7 @@
-import { SQLConfig } from '@codemirror/lang-sql'
-import { search } from '@codemirror/search'
-import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
+import { Compartment, EditorState, Extension } from '@codemirror/state'
+import { SQLConfig, sql, MySQL } from '@codemirror/lang-sql'
+import { search } from '@codemirror/search'
 
 import {
   BasicSetupOptions,
@@ -12,12 +12,18 @@ import {
   getSqlStatements,
   getNearbyStatement
 } from '@tidbcloud/tisqleditor-extension-sql-parser'
-import { langSql } from '@tidbcloud/tisqleditor-extension-lang-sql'
 import {
   curSql,
   getCurStatements
 } from '@tidbcloud/tisqleditor-extension-cur-sql'
 
+const langSql = (config: SQLConfig) =>
+  sql({
+    dialect: MySQL,
+    upperCaseKeywords: true,
+    ...config
+  })
+
 export class SQLEditorInstance {
   constructor(
     public editorId: string,
@@ -100,8 +106,10 @@ export const createSQLEditorInstance = ({
     search({
       top: true
     }),
+
     themeCompartment.of(theme),
     sqlCompartment.of(langSql(sqlConfig)),
+
     sqlParser(),
     curSql(),
 

packages/extensions/autocomplete/src/index.ts

@@ -1,3 +1,5 @@
+import { EditorState } from '@codemirror/state'
+import { EditorView, Rect, keymap } from '@codemirror/view'
 import {
   acceptCompletion,
   autocompletion,
@@ -6,8 +8,7 @@ import {
   CompletionSource
 } from '@codemirror/autocomplete'
 import { indentLess, indentMore } from '@codemirror/commands'
-import { EditorState } from '@codemirror/state'
-import { EditorView, Rect, keymap } from '@codemirror/view'
+
 import {
   Brackets,
   Calendar,
@@ -203,9 +204,12 @@ const baseTheme = EditorView.baseTheme({
       color: '#333333'
     }
   },
-  '.cm-autocomplete-item > img': {
-    marginRight: '10px',
-    verticalAlign: 'middle'
+  '.cm-autocomplete-item': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.cm-autocomplete-item > div.icon': {
+    marginRight: '10px'
   },
   '.cm-autocomplete-item .cm-completionIcon-keyword': {
     paddingRight: '24px'
@@ -319,8 +323,9 @@ const customAutoCompletion = (config: AutoCompletionConfig) => {
           }
 
           if (src) {
-            const element = document.createElement('img')
-            element.src = src
+            const element = document.createElement('div')
+            element.className = 'icon'
+            element.innerHTML = src
             return element
           } else {
             return null
@@ -347,6 +352,6 @@ const autoCompleteTab = (config: AutoCompletionConfig) => {
   ])
 }
 
-export function autoCompletion(config: AutoCompletionConfig) {
+export function autoCompletion(config: AutoCompletionConfig = {}) {
   return [baseTheme, customAutoCompletion(config), autoCompleteTab(config)]
 }

packages/extensions/cur-sql-gutter/src/index.ts

@@ -7,18 +7,18 @@ export interface CurSqlGutterConfig {
   backgroundColor?: string
   width?: number
   className?: string
-  shouldDisplay?: (view: EditorView) => boolean
+  whenHide?: (view: EditorView) => boolean
 }
 
 function getMarkers(
   view: EditorView,
   curSqlMarker: GutterMarker,
-  config?: CurSqlGutterConfig
+  config: CurSqlGutterConfig
 ) {
   let markers = RangeSet.empty
 
   // when something happens, hide the gutter
-  if (config?.shouldDisplay && !config.shouldDisplay(view)) {
+  if (config.whenHide && config.whenHide(view)) {
     return markers
   }
 
@@ -54,10 +54,10 @@ function getMarkers(
 /**
  * gutter style
  */
-const baseTheme = (config?: CurSqlGutterConfig) => {
+const baseTheme = (config: CurSqlGutterConfig) => {
   return EditorView.baseTheme({
     '.cm-sql-gutter .cm-gutterElement': {
-      width: `${config?.width ?? 2}px`
+      width: `${config.width ?? 2}px`
     },
     '.cm-lineNumbers .cm-gutterElement': {
       paddingLeft: '8px',
@@ -66,19 +66,19 @@ const baseTheme = (config?: CurSqlGutterConfig) => {
   })
 }
 
-const sqlGutter = (curSqlMarker: GutterMarker, config?: CurSqlGutterConfig) => {
+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, 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
     }