feat: new example page

README.md

@@ -2,13 +2,16 @@
 
 TiSQLEditor is a CodeMirror6 based SQL code editor which is used in TiDB Cloud Console.
 
-- [Try Playground](https://tisqleditor-playground.netlify.app/)
-- [Try Example](https://tisqleditor-playground.netlify.app/?example=all)
+- [Try Full Featured Playground](https://tisqleditor-playground.netlify.app/)
 
 ![image](./packages/playground/public/playground-2.png)
 
 https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-26479bd59d11
 
+- [Try Simple Example](https://tisqleditor-playground.netlify.app/?example=all&with_select)
+
+![image](./packages/playground/public/example.png)
+
 ## Features
 
 - Support edit multiple SQL files

packages/extensions/ai-widget/src/prompt-input.ts

@@ -40,7 +40,11 @@ export function isPromptInputActive(state: EditorState) {
 }
 
 export function isUnifiedMergeViewActive(state: EditorState) {
-  return (unifiedMergeViewCompartment.get(state) as Extension[]).length > 0
+  const mergeViewExt = unifiedMergeViewCompartment.get(state)
+  if (mergeViewExt) {
+    return (mergeViewExt as Extension[]).length > 0
+  }
+  return false
 }
 
 // this method triggers the AI widget to show.
@@ -222,7 +226,11 @@ class PromptInputWidget extends WidgetType {
     const { cancelChat, onEvent } = aiWidgetOptions
 
     onEvent?.(view, 'close', { by })
-    cancelChat(this.chatId)
+
+    // chat maybe canceled before close
+    if (this.chatId) {
+      cancelChat(this.chatId)
+    }
 
     if (isUnifiedMergeViewActive(view.state)) {
       rejectChunks(view)
@@ -394,6 +402,10 @@ class PromptInputWidget extends WidgetType {
       onEvent?.(view, 'req.send', { chatReq: this.chatReq })
       const start = performance.now()
       const res = await chat(view, this.chatId, this.chatReq)
+      // this request maybe canceled before returning
+      if (this.chatId === '') {
+        return
+      }
       const duration = performance.now() - start
       this.chatRes = res
 
@@ -435,6 +447,9 @@ class PromptInputWidget extends WidgetType {
         cancelChat(this.chatId)
         normalStatus()
         recoverSelection(view, this.oriSelPos)
+
+        // reset
+        this.chatId = ''
         this.chatRes = null
       } else {
         form.requestSubmit()

packages/playground/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.45.1",

packages/playground/src/App.tsx

@@ -10,10 +10,17 @@ import { SchemaProvider } from '@/contexts/schema-context-provider'
 
 import { EditorExample } from '@/examples/editor-example'
 import { ChatProvider } from './contexts/chat-context-provider'
+import { EditorExampleWithSelect } from './examples/editor-example-with-select'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+})
 
-function Full() {
+function FullPlayground() {
   return (
     <QueryClientProvider client={queryClient}>
       <EditorCacheProvider>
@@ -37,16 +44,21 @@ function App() {
   const params = new URLSearchParams(window.location.search)
   const example = params.get('example')
   const isDark = params.get('theme') === 'dark'
+  const withSelect = params.get('with_select')
 
   if (example !== null) {
-    return (
-      <EditorCacheProvider>
-        <EditorExample example={example} isDark={isDark} />
-      </EditorCacheProvider>
-    )
+    if (withSelect !== null) {
+      return (
+        <ThemeProvider>
+          <EditorExampleWithSelect initExample={example} />
+        </ThemeProvider>
+      )
+    }
+
+    return <EditorExample example={example} isDark={isDark} />
   }
 
-  return <Full />
+  return <FullPlayground />
 }
 
 export default App

packages/playground/src/components/biz/editor-panel/actions.tsx

@@ -66,6 +66,11 @@ export function EditorActions() {
         )}
         Run
       </Button>
+      <Button variant="outline" size="sm" className="mr-2">
+        <a href={`/?example=all&with_select`} target="_blank">
+          Example
+        </a>
+      </Button>
       <DarkModeToggle />
       <Button variant="ghost" size="icon">
         <a href="https://github.com/tidbcloud/tisqleditor" target="_blank">

packages/playground/src/components/ui/select.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react'
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon
+} from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+}