Merge pull request #36 from tidbcloud/feat/readme-opti

fix: opti some readme
tidbcloud · Jun 29, 2024 · 91067e6 · 91067e6
2 parents 7edafb0 + aa12d0a
commit 91067e6
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 
 - [Try Simple Example](https://tisqleditor-playground.netlify.app/?example=all&with_select)
 
-![image](./packages/playground/public/example.png)
+![image](./packages/playground/public/example-2.png)
 
 ## Features
 
@@ -25,25 +25,25 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 | ---------------------------------------------- | ------------------------------------------------------------------------- |
 | @tidbcloud/tisqleditor                         | SQLEditorInstance with pre-configured extensions                          |
 | @tidbcloud/tisqleditor-react                   | React component wrapper                                                   |
-| @tidbcloud/codemirror-extension-ai-widget      | a widget to chat with AI to help write or refine SQL by human language    |
+| @tidbcloud/codemirror-extension-ai-widget      | a widget to chat with AI to help write or refine SQL                      |
 | @tidbcloud/codemirror-extension-sql-parser     | parse the editor content to SQL statements                                |
 | @tidbcloud/codemirror-extension-cur-sql        | get the selected SQL statements                                           |
 | @tidbcloud/codemirror-extension-cur-sql-gutter | show gutter for the selected SQL statements                               |
 | @tidbcloud/codemirror-extension-save-helper    | save the editor content if it changes                                     |
-| @tidbcloud/codemirror-extension-autocomplete   | refine the original @codemirror/autocomplete to provides better style     |
-| @tidbcloud/codemirror-extension-linters        |                                                                           |
-| @tidbcloud/codemirror-extension-events         |                                                                           |
+| @tidbcloud/codemirror-extension-autocomplete   | SQL keyword and database schema autocomplete tips                         |
+| @tidbcloud/codemirror-extension-linters        | use db statement, full width chars, and regular expression linters        |
+| @tidbcloud/codemirror-extension-events         | 3 normal kinds of event listener                                          |
 | @tidbcloud/codemirror-extension-themes         | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |
-| @tidbcloud/codemirror-extension-basic-setup    |                                                                           |
+| @tidbcloud/codemirror-extension-basic-setup    | Basic configuration for the CodeMirror6 code editor                       |
 
 ## Usage
 
 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'
-import { saveHelper } from '@tidbcloud/codemirror-extension-save-helper'
 import { bbedit, oneDark } from '@tidbcloud/codemirror-extension-themes'
+import { saveHelper } from '@tidbcloud/codemirror-extension-save-helper'
 import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'
 import {
   useDbLinter,
@@ -56,97 +56,40 @@ import {
 } from '@tidbcloud/codemirror-extension-ai-widget'
 
 export function Editor() {
-  const {
-    api: { saveFile },
-    state: { activeFileId, openedFiles }
-  } = useFilesContext()
-
-  const { isDark } = useTheme()
-
-  const { schema } = useSchemaContext()
-  const sqlConfig = useMemo(
-    () => convertSchemaToSQLConfig(schema ?? []),
-    [schema]
-  )
-  const getDbListRef = useRef<() => string[]>()
-  getDbListRef.current = () => {
-    return schema?.map((d) => d.name) || []
-  }
-
-  const chatCtx = useChatContext()
-
-  const activeFile = useMemo(
-    () => openedFiles.find((f) => f.id === activeFileId),
-    [activeFileId, openedFiles]
-  )
-
-  const extraExts = useMemo(() => {
-    if (activeFile && activeFile.status === 'loaded') {
-      return [
-        saveHelper({
-          save: (view: EditorView) => {
-            saveFile(activeFile.id, view.state.doc.toString())
-          }
-        }),
-        autoCompletion(),
-        curSqlGutter({
-          whenHide: (view) => {
-            return isUnifiedMergeViewActive(view.state)
-          }
-        }),
-        useDbLinter(),
-        fullWidthCharLinter(),
-        aiWidget({
-          chat(view, chatId, req) {
-            const db = getCurDatabase(view.state)
-            req['extra']['db'] = db
-            return chatCtx.chat(chatId, { ...req })
-          },
-          cancelChat: chatCtx.cancelChat,
-          onEvent(_view, type, payload) {
-            chatCtx.onEvent(type, payload)
-          },
-          getDbList: getDbListRef.current!
-        })
-      ]
-    }
-    return []
-  }, [activeFile])
-
-  if (!activeFile) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-          TiSQLEditor
-        </h1>
-      </div>
-    )
-  }
-
-  if (activeFile.status === 'loading') {
-    return (
-      <SQLEditor
-        className="h-full"
-        editorId="loading"
-        doc=""
-        theme={isDark ? oneDark : bbedit}
-        extraExts={[
-          placeholder('loading...'),
-          // both needed to prevent user from typing
-          EditorView.editable.of(false),
-          EditorState.readOnly.of(true)
-        ]}
-      />
-    )
-  }
+  const extraExts = [
+    saveHelper({
+      save: (view: EditorView) => {
+        saveFile(activeFile.id, view.state.doc.toString())
+      }
+    }),
+    autoCompletion(),
+    curSqlGutter({
+      whenHide: (view) => {
+        return isUnifiedMergeViewActive(view.state)
+      }
+    }),
+    useDbLinter(),
+    fullWidthCharLinter(),
+    aiWidget({
+      chat(view, chatId, req) {
+        return chatCtx.chat(chatId, req)
+      },
+      cancelChat: chatCtx.cancelChat,
+      onEvent(_view, type, payload) {
+        chatCtx.onEvent(type, payload)
+      },
+      getDbList: getDbListRef.current!
+    })
+  ]
 
   return (
     <SQLEditor
       className="h-full"
       editorId={activeFile.id}
       doc={activeFile.content}
       sqlConfig={sqlConfig}
-      theme={isDark ? oneDark : bbedit}
+      theme={oneDark}
+      // theme={bbedit}
       extraExts={extraExts}
     />
   )

diff --git a/packages/extensions/basic-setup/README.md b/packages/extensions/basic-setup/README.md
@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-basic-setup
 
-Basic configuration for the CodeMirror6 code editor.
+Default basic configuration for the CodeMirror6 code editor.
 
 ## Installation
 

diff --git a/packages/extensions/cur-sql-gutter/README.md b/packages/extensions/cur-sql-gutter/README.md
@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-cur-sql-gutter
 
-This extension listens the editor selection change, and shows gutter for the selected statements to make it highlight.
+This extension listens the editor selection change, and shows gutter for the SQL statements around the cursor position to make it highlight.
 
 ## Installation
 
@@ -35,13 +35,10 @@ const editorView = new EditorView({
 interface CurSqlGutterConfig {
   /* gutter background */
   backgroundColor?: string
-
   /* gutter width */
   width?: number
-
   /* gutter extra css class */
   className?: string
-
   /* control gutter to hide when some cases happen */
   whenHide?: (view: EditorView) => boolean
 }

diff --git a/packages/extensions/cur-sql/README.md b/packages/extensions/cur-sql/README.md
@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-cur-sql
 
-This extension listens the editor selection change, return the selected statements.
+This extension listens the editor selection change, return the complete SQL statements around the cursor position.
 
 This extension is installed internally inside the `SQLEditorInstance`.
 

diff --git a/packages/extensions/events/README.md b/packages/extensions/events/README.md
@@ -1,6 +1,10 @@
 # @tidbcloud/codemirror-extension-events
 
-Events extensions for CodeMirror6. This extension provides 3 default events: onChange, onFocusChange and onSelectionChange.
+Events extensions for CodeMirror6. This extension provides 3 events: onChange, onFocusChange and onSelectionChange.
+
+- onChange: any doc change will trigger this event
+- onFocusChange: while the cursor change will trigger this event
+- onSelectionChange: while selection content change will trigger this event
 
 ## Installation
 
@@ -19,7 +23,11 @@ npm install @codemirror/view @codemirror/state
 ```ts
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
-import { onChange, onFocusChange, onSelectionChange } from '@tidbcloud/codemirror-extension-events'
+import {
+  onChange,
+  onFocusChange,
+  onSelectionChange
+} from '@tidbcloud/codemirror-extension-events'
 
 const onChangeHandler = (sql: string, view: EditorView) => {
   console.log(sql, view)
@@ -29,7 +37,10 @@ const onFocusChangeHandler = (sql: string) => {
   console.log(sql)
 }
 
-const onSelectionChangeHandler = (selectedRange: {from: number, to: numer}) => {
+const onSelectionChangeHandler = (selectedRange: {
+  from: number
+  to: numer
+}) => {
   console.log(selectedRange.from, selectedRange.to)
 }
 
@@ -39,7 +50,7 @@ const editorView = new EditorView({
     extensions: [
       onChange(onChangeHandler),
       focusChangeHelper(onFocusChangeHandler),
-      onSelectionChange: (onSelectionChangeHandler)
+      onSelectionChange(onSelectionChangeHandler)
     ]
   })
 })

diff --git a/packages/playground/public/example-2.png b/packages/playground/public/example-2.png