Merge branch 'main' into feat/unit-test

tidbcloud · Jun 25, 2024 · 2bcc0b1 · 2bcc0b1
2 parents 1d5ab19 + 748c9a9
commit 2bcc0b1
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ TiSQLEditor is a CodeMirror6 based SQL code editor which is used in TiDB Cloud C
 
 ## Usage
 
-See [editor.tsx](./packages/playground/src/components/biz/editor-panel/editor.tsx) to get more details.
+See [editor.tsx](./packages/playground/src/components/biz/editor-panel/editor.tsx) or [editor-example.tsx](./packages/playground/src/examples/editor-example.tsx) to get more details.
 
 ```tsx
 import { SQLEditor } from '@tidbcloud/tisqleditor-react'

diff --git a/packages/extensions/save-helper/README.md b/packages/extensions/save-helper/README.md
@@ -27,6 +27,7 @@ const editorView = new EditorView({
     extensions: [
       saveHelper({
         save: (view: EditorView) => {
+          // call save file api
           saveFile(view.state.doc.toString())
         }
       })

diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>TiSQLEditor</title>
   </head>
   <body>
     <div id="root" class="h-full"></div>

diff --git a/packages/playground/public/favicon.ico b/packages/playground/public/favicon.ico
diff --git a/packages/playground/public/vite.svg b/packages/playground/public/vite.svg
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
@@ -8,9 +8,11 @@ import { StatementProvider } from '@/contexts/statement-context-provider'
 import { FilesProvider } from '@/contexts/files-context-provider'
 import { SchemaProvider } from '@/contexts/schema-context-provider'
 
+import { EditorExample } from '@/examples/editor-example'
+
 const queryClient = new QueryClient()
 
-function App() {
+function Full() {
   return (
     <QueryClientProvider client={queryClient}>
       <EditorCacheProvider>
@@ -28,4 +30,20 @@ function App() {
   )
 }
 
+function App() {
+  const params = new URLSearchParams(window.location.search)
+  const example = params.get('example')
+  const isDark = params.get('theme') === 'dark'
+
+  if (example !== null) {
+    return (
+      <EditorCacheProvider>
+        <EditorExample example={example} isDark={isDark} />
+      </EditorCacheProvider>
+    )
+  }
+
+  return <Full />
+}
+
 export default App
diff --git a/packages/playground/src/examples/editor-example.tsx b/packages/playground/src/examples/editor-example.tsx
@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import { EditorView } from '@codemirror/view'
+
+import { SQLEditor } from '@tidbcloud/tisqleditor-react'
+import { saveHelper } from '@tidbcloud/codemirror-extension-save-helper'
+import { bbedit, oneDark } from '@tidbcloud/codemirror-extension-themes'
+import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'
+import {
+  useDbLinter,
+  fullWidthCharLinter
+} from '@tidbcloud/codemirror-extension-linters'
+import { autoCompletion } from '@tidbcloud/codemirror-extension-autocomplete'
+
+const EXAMPLE_SQL = `
+USE sp500insight;
+
+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 = [
+  'save-helper',
+  'autocomplete',
+  'cur-sql-gutter',
+  'use-db-linter',
+  'full-width-char-linter'
+]
+
+export function EditorExample({
+  example = '',
+  isDark = false
+}: {
+  example?: string
+  isDark?: boolean
+}) {
+  const extraExts = useMemo(() => {
+    let exampleArr = example.split(',')
+    if (exampleArr.includes('all')) {
+      exampleArr = ALL_EXAMPLES
+    } else if (exampleArr.includes('linters')) {
+      exampleArr = exampleArr.concat([
+        'use-db-linter',
+        'full-width-char-linter'
+      ])
+    }
+    exampleArr = [...new Set(exampleArr)]
+
+    return exampleArr.map((example) => {
+      if (example === 'save-helper') {
+        saveHelper({
+          save: (view: EditorView) => {
+            console.log('save content:', view.state.doc.toString())
+          }
+        })
+      }
+      if (example === 'autocomplete') {
+        return autoCompletion()
+      }
+      if (example === 'cur-sql-gutter') {
+        return curSqlGutter()
+      }
+      if (example === 'use-db-linter') {
+        return useDbLinter()
+      }
+      if (example === 'full-width-char-linter') {
+        return fullWidthCharLinter()
+      }
+      return []
+    })
+  }, [example])
+
+  return (
+    <SQLEditor
+      className="h-full"
+      editorId={example || 'default'}
+      doc={EXAMPLE_SQL}
+      theme={isDark ? oneDark : bbedit}
+      extraExts={extraExts}
+    />
+  )
+}