Merge pull request #38 from tidbcloud/feat/refine-example

feat(example): refine
tidbcloud · Jun 29, 2024 · 7edafb0 · 7edafb0
2 parents 11ba5af + f781a17
commit 7edafb0
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 90 deletions.
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
@@ -20,7 +20,7 @@ const queryClient = new QueryClient({
   }
 })
 
-function FullPlayground() {
+function FullFeaturedPlayground() {
   return (
     <QueryClientProvider client={queryClient}>
       <EditorCacheProvider>
@@ -43,22 +43,18 @@ function FullPlayground() {
 function App() {
   const params = new URLSearchParams(window.location.search)
   const example = params.get('example')
-  const isDark = params.get('theme') === 'dark'
+  const theme = params.get('theme') ?? 'bbedit'
   const withSelect = params.get('with_select')
 
   if (example !== null) {
     if (withSelect !== null) {
-      return (
-        <ThemeProvider>
-          <EditorExampleWithSelect initExample={example} />
-        </ThemeProvider>
-      )
+      return <EditorExampleWithSelect defExample={example} defTheme={theme} />
     }
 
-    return <EditorExample example={example} isDark={isDark} />
+    return <EditorExample example={example} theme={theme} />
   }
 
-  return <FullPlayground />
+  return <FullFeaturedPlayground />
 }
 
 export default App
diff --git a/packages/playground/src/examples/editor-example-with-select.tsx b/packages/playground/src/examples/editor-example-with-select.tsx
@@ -13,9 +13,6 @@ import {
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 
-import { DarkModeToggle } from '@/components/darkmode-toggle/toggle'
-import { useTheme } from '@/components/darkmode-toggle/theme-provider'
-
 import { EditorExample } from './editor-example'
 
 function ExampleSelect({
@@ -27,7 +24,7 @@ function ExampleSelect({
 }) {
   return (
     <Select value={value} onValueChange={onChange}>
-      <SelectTrigger className="w-[200px]">
+      <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Select an extension" />
       </SelectTrigger>
       <SelectContent>
@@ -48,22 +45,55 @@ function ExampleSelect({
   )
 }
 
+function ThemeSelect({
+  value,
+  onChange
+}: {
+  value: string
+  onChange: (v: string) => void
+}) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger className="w-[120px]">
+        <SelectValue placeholder="Select a theme" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Themes</SelectLabel>
+          <SelectItem value="bbedit">bbedit</SelectItem>
+          <SelectItem value="oneDark">oneDark</SelectItem>
+          <SelectItem value="default">default</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+
+function updateUrlParam(key: string, value: string) {
+  const url = new URL(window.location.href)
+  const params = new URLSearchParams(url.search)
+  params.set(key, value)
+  window.history.replaceState({}, '', `${url.pathname}?${params.toString()}`)
+}
+
 export function EditorExampleWithSelect({
-  initExample
+  defExample,
+  defTheme
 }: {
-  initExample: string
+  defExample: string
+  defTheme: string
 }) {
-  const [example, setExample] = useState(initExample)
-  const { isDark } = useTheme()
+  const [example, setExample] = useState(defExample)
+  const [theme, setTheme] = useState(defTheme)
 
-  function onSelectValueChange(v: string) {
+  function onExampleChange(v: string) {
     setExample(v)
+    updateUrlParam('example', v)
+  }
 
-    // update url
-    const url = new URL(window.location.href)
-    const params = new URLSearchParams(url.search)
-    params.set('example', v)
-    window.history.replaceState({}, '', `${url.pathname}?${params.toString()}`)
+  function onThemeChange(v: string) {
+    setTheme(v)
+    updateUrlParam('theme', v)
   }
 
   return (
@@ -74,25 +104,22 @@ export function EditorExampleWithSelect({
             TiSQLEditor
           </h1>
 
-          <div className="mt-10 flex items-center">
-            <ExampleSelect value={example} onChange={onSelectValueChange} />
-            <Button variant="ghost" size="icon" className="ml-2">
-              <a
-                href={`/?example=${example}&theme=${isDark ? 'dark' : 'light'}`}
-                target="_blank"
-              >
+          <div className="mt-10 flex items-center gap-1">
+            <ExampleSelect value={example} onChange={onExampleChange} />
+            <ThemeSelect value={theme} onChange={onThemeChange} />
+            <Button variant="ghost" size="icon">
+              <a href={`/?example=${example}&theme=${theme}`} target="_blank">
                 <EnterFullScreenIcon className="h-4 w-4" />
               </a>
             </Button>
 
             <div className="mr-auto"></div>
 
-            <Button variant="outline" className="mr-2">
+            <Button variant="outline">
               <a href={`/?`} target="_blank">
                 Playground
               </a>
             </Button>
-            <DarkModeToggle />
             <Button variant="ghost" size="icon">
               <a
                 href="https://github.com/tidbcloud/tisqleditor"
@@ -104,7 +131,7 @@ export function EditorExampleWithSelect({
           </div>
 
           <div className="mt-2 text-left border-2 h-[400px]">
-            <EditorExample example={example} isDark={isDark} />
+            <EditorExample example={example} theme={theme} />
           </div>
         </div>
       </div>

diff --git a/packages/playground/src/examples/editor-example.tsx b/packages/playground/src/examples/editor-example.tsx
@@ -15,10 +15,12 @@ import {
   isUnifiedMergeViewActive
 } from '@tidbcloud/codemirror-extension-ai-widget'
 import { delay } from '@/lib/delay'
+import { Extension } from '@codemirror/state'
 
-const EXAMPLE_SQL = `
-USE sp500insight;
-
+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")
@@ -35,75 +37,84 @@ const ALL_EXAMPLES = [
   'full-width-char-linter'
 ]
 
+const EXAMPLE_EXTS: { [key: string]: Extension } = {
+  'ai-widget': aiWidget({
+    chat: async () => {
+      await delay(2000)
+      return {
+        status: 'success',
+        message:
+          'select * from test;\n-- the data is mocked, replace by your own api when using'
+      }
+    },
+    cancelChat: () => {},
+    getDbList: () => {
+      return ['test1', 'test2']
+    }
+  }),
+  'save-helper': saveHelper({
+    save: (view: EditorView) => {
+      console.log('save content:', view.state.doc.toString())
+    }
+  }),
+  autocomplete: autoCompletion(),
+  'cur-sql-gutter': curSqlGutter({
+    whenHide(view) {
+      return isUnifiedMergeViewActive(view.state)
+    }
+  }),
+  'use-db-linter': useDbLinter(),
+  'full-width-char-linter': fullWidthCharLinter()
+}
+
+const THEME_EXTS: { [key: string]: Extension } = {
+  light: bbedit,
+  bbedit: bbedit,
+  dark: oneDark,
+  oneDark: oneDark
+}
+
+const EXAMPLE_DOCS: { [key: string]: string } = {
+  'use-db-linter': DOC_2,
+  'full-width-char-linter': DOC_3
+}
+
 export function EditorExample({
   example = '',
-  isDark = false
+  theme = ''
 }: {
   example?: string
-  isDark?: boolean
+  theme?: string
 }) {
-  const extraExts = useMemo(() => {
+  const exampleArr = 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((item) => {
-      if (item === 'ai-widget') {
-        return aiWidget({
-          chat: async () => {
-            await delay(2000)
-            return {
-              status: 'success',
-              message:
-                'select * from test;\n-- the data is mocked, replace by your own api when using'
-            }
-          },
-          cancelChat: () => {},
-          getDbList: () => {
-            return ['test1', 'test2']
-          }
-        })
-      }
-      if (item === 'save-helper') {
-        return saveHelper({
-          save: (view: EditorView) => {
-            console.log('save content:', view.state.doc.toString())
-          }
-        })
-      }
-      if (item === 'autocomplete') {
-        return autoCompletion()
-      }
-      if (item === 'cur-sql-gutter') {
-        return curSqlGutter({
-          whenHide(view) {
-            return isUnifiedMergeViewActive(view.state)
-          }
-        })
-      }
-      if (item === 'use-db-linter') {
-        return useDbLinter()
-      }
-      if (item === 'full-width-char-linter') {
-        return fullWidthCharLinter()
-      }
-      return []
-    })
+    return [...new Set(exampleArr)]
   }, [example])
 
+  const extraExts = useMemo(() => {
+    return exampleArr.map((item) => EXAMPLE_EXTS[item])
+  }, [exampleArr])
+
+  const doc = useMemo(() => {
+    let str = exampleArr
+      .map((item) => EXAMPLE_DOCS[item])
+      .filter((s) => !!s)
+      .join('\n')
+    if (str === '') {
+      str = DOC_1
+    }
+    return [str, DOC_4].join('\n')
+  }, [exampleArr])
+
   return (
     <SQLEditor
       className="h-full"
       editorId={example || 'default'}
-      doc={EXAMPLE_SQL}
-      theme={isDark ? oneDark : bbedit}
+      doc={doc}
+      theme={THEME_EXTS[theme]}
       extraExts={extraExts}
     />
   )