Merge pull request #41 from tidbcloud/chore/refine-docs

chore: refine all README and package.json

README.md

@@ -29,12 +29,12 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 | @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-sql-autocomplete | SQL keyword and database schema autocomplete tips                         |
+| @tidbcloud/codemirror-extension-sql-autocomplete | SQL keyword and database schema autocomplete                              |
 | @tidbcloud/codemirror-extension-linters          | use db statement, full width chars, and regular expression linters        |
 | @tidbcloud/codemirror-extension-save-helper      | save the editor content if it changes                                     |
 | @tidbcloud/codemirror-extension-events           | 2 normal kinds of event listener: doc change, selection change            |
 | @tidbcloud/codemirror-extension-themes           | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |
-| @tidbcloud/codemirror-extension-basic-setup      | basic configuration for the CodeMirror6 code editor                       |
+| @tidbcloud/codemirror-extension-basic-setup      | basic configuration for codemirror                                        |
 
 ## Usage
 
@@ -96,6 +96,10 @@ export function Editor() {
 }
 ```
 
+## Documentation
+
+// TODO: add documentation link from https://tidbcloud-uikit.netlify.app/
+
 ## Development
 
 ### Setup

package.json

@@ -2,7 +2,7 @@
   "name": "tisqleditor",
   "private": "true",
   "version": "0.0.1",
-  "description": "a SQL editor based codemirror6",
+  "description": "a SQL code editor based codemirror",
   "main": "index.js",
   "scripts": {
     "prepare": "husky",
@@ -12,9 +12,10 @@
     "release": "changeset publish"
   },
   "keywords": [
+    "tidbcloud",
     "sql",
     "editor",
-    "codemirror6"
+    "codemirror"
   ],
   "author": "",
   "license": "MIT",

packages/core/README.md

@@ -15,7 +15,7 @@ npm install @tidbcloud/tisqleditor
 You need to install its peer dependencies as well.
 
 ```shell
-npm install @codemirror/view @codemirror/state @codemirror/lang-sql @codemirror/language @codemirror/search
+npm install @codemirror/view @codemirror/state @codemirror/lang-sql
 ```
 
 ## Usage

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tidbcloud/tisqleditor",
   "version": "0.0.2",
-  "description": "",
+  "description": "editor instance and editor cache",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,21 +10,25 @@
     "dist/*.js",
     "dist/*.ts",
     "package.json",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "tsc:watch": "tsc --watch",
     "rollup:watch": "rollup -c --watch",
     "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
     "build": "tsc && rollup -c"
   },
-  "keywords": [],
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "codemirror"
+  ],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@codemirror/lang-sql": "^6.6.4",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -34,8 +38,6 @@
   },
   "peerDependencies": {
     "@codemirror/lang-sql": "^6.6.4",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3"
   },

packages/core/src/editor-instance.ts

@@ -1,7 +1,6 @@
 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,
@@ -103,9 +102,6 @@ export const createSQLEditorInstance = ({
       autocompletion: false,
       ...basicSetupOptions
     }),
-    search({
-      top: true
-    }),
 
     themeCompartment.of(theme),
     sqlCompartment.of(langSql(sqlConfig)),

packages/extensions/ai-widget/README.md

@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-ai-widget
 
-This extension provides a widget to chat with AI to help you write or refine SQL by human language.
+A codemirror extension provides a widget to chat with AI to help you write or refine SQL. (work with other languages wip)
 
 https://github.com/tidbcloud/tisqleditor/assets/1284531/46684333-7efa-4925-bf58-9ab3fb45f692
 
@@ -11,6 +11,11 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/46684333-7efa-4925-bf58-
 - Easy to use prompt input widget to chat with AI
 - Show diff view to compare the result and the original content
 
+## Try it
+
+- [Full Featured Playground](https://tisqleditor-playground.netlify.app/)
+- [Simple Example](https://tisqleditor-playground.netlify.app/?example=ai-widget&with_select)
+
 ## Installation
 
 ```shell
@@ -20,20 +25,27 @@ npm install @tidbcloud/codemirror-extension-ai-widget
 You need to install its peer dependencies as well:
 
 ```shell
-npm install @codemirror/view @codemirror/state @codemirror/merge
+npm install @codemirror/view @codemirror/state @codemirror/merge @codemirror/lang-sql
 ```
 
 ## Usage
 
 ```ts
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
+import { sql, MySQL } from '@codemirror/lang-sql'
+import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
+import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
 import { aiWidget } from '@tidbcloud/codemirror-extension-ai-widget'
 
 const editorView = new EditorView({
   state: EditorState.create({
     doc,
     extensions: [
+      sql({ dialect: MySQL }),
+      sqlParser(),
+      curSql(),
+
       aiWidget({
         chat: async () => {
           // replace it by yourself chat to AI api in production
@@ -120,7 +132,3 @@ function activePromptInput(
   pos?: Pos
 ): void
 ```
-
-## Try it
-
-Try it in [playground](https://tisqleditor-playground.netlify.app/) or [example](https://tisqleditor-playground.netlify.app/?example=ai-widget)

packages/extensions/ai-widget/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tidbcloud/codemirror-extension-ai-widget",
   "version": "0.0.2",
-  "description": "tisqleditor extensions",
+  "description": "ai widget extension for codemirror",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,15 +10,24 @@
     "dist/*.js",
     "dist/*.ts",
     "package.json",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "tsc:watch": "tsc --watch",
     "rollup:watch": "rollup -c --watch",
     "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
     "build": "tsc && rollup -c"
   },
-  "keywords": [],
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "codemirror",
+    "extension",
+    "ai",
+    "widget"
+  ],
   "author": "",
   "license": "MIT",
   "devDependencies": {

packages/extensions/basic-setup/README.md

@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-basic-setup
 
-Default basic configuration for the CodeMirror6 code editor.
+Default basic configuration for codemirror.
 
 ## Installation
 
@@ -11,18 +11,15 @@ npm install @tidbcloud/codemirror-extension-basic-setup
 You need to install its peer dependencies as well:
 
 ```shell
-npm install @codemirror/autocomplete @codemirror/commands @codemirror/lang-sql @codemirror/language  @codemirror/lint @codemirror/search @codemirror/state @codemirror/view  @lezer/highlight
+npm install @codemirror/state @codemirror/view @codemirror/autocomplete @codemirror/commands @codemirror/language  @codemirror/lint @codemirror/search
 ```
 
 ## Usage
 
 ```ts
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
-import {
-  BasicSetupOptions,
-  basicSetup
-} from '@tidbcloud/codemirror-extension-basic-setup'
+import { basicSetup } from '@tidbcloud/codemirror-extension-basic-setup'
 
 const editorView = new EditorView({
   state: EditorState.create({
@@ -42,7 +39,7 @@ const editorView = new EditorView({
 ## API
 
 ```ts
-export interface MinimalSetupOptions {
+interface MinimalSetupOptions {
   highlightSpecialChars?: boolean
   history?: boolean
   drawSelection?: boolean
@@ -52,7 +49,7 @@ export interface MinimalSetupOptions {
   historyKeymap?: boolean
 }
 
-export interface BasicSetupOptions extends MinimalSetupOptions {
+interface BasicSetupOptions extends MinimalSetupOptions {
   lineNumbers?: boolean
   highlightActiveLineGutter?: boolean
   foldGutter?: boolean
@@ -74,5 +71,6 @@ export interface BasicSetupOptions extends MinimalSetupOptions {
   lintKeymap?: boolean
 }
 
-function minimalSetup(options?: MinimalSetupOptions) => Extension[]
+const basicSetup: (options?: BasicSetupOptions) => Extension[]
+const minimalSetup: (options?: MinimalSetupOptions) => Extension[]
 ```

packages/extensions/basic-setup/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tidbcloud/codemirror-extension-basic-setup",
   "version": "0.0.2",
-  "description": "tisqleditor extensions",
+  "description": "basic setup extension for codemirror",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,8 @@
     "dist/*.js",
     "dist/*.ts",
     "package.json",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "tsc:watch": "tsc --watch",
@@ -22,15 +23,15 @@
     "tidbcloud",
     "sql",
     "editor",
-    "extensions",
+    "codemirror",
+    "extension",
     "basic setup"
   ],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@codemirror/autocomplete": "^6.16.2",
     "@codemirror/commands": "6.3.3",
-    "@codemirror/lang-sql": "^6.6.4",
     "@codemirror/language": "^6.10.2",
     "@codemirror/lint": "^6.8.0",
     "@codemirror/search": "^6.5.6",
@@ -44,12 +45,10 @@
   "peerDependencies": {
     "@codemirror/autocomplete": "^6.16.2",
     "@codemirror/commands": "6.3.3",
-    "@codemirror/lang-sql": "^6.6.4",
     "@codemirror/language": "^6.10.2",
     "@codemirror/lint": "^6.8.0",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.3",
-    "@lezer/highlight": "^1.2.0"
+    "@codemirror/view": "^6.26.3"
   }
 }

packages/extensions/cur-sql-gutter/README.md

@@ -1,6 +1,11 @@
 # @tidbcloud/codemirror-extension-cur-sql-gutter
 
-This extension listens the editor selection change, and shows gutter for the SQL statements around the cursor position to make it highlight.
+A codemirror extension listens the editor selection change, and shows gutter for the SQL statements around the cursor position to make it highlight.
+
+## Try it
+
+- [Full Featured Playground](https://tisqleditor-playground.netlify.app/)
+- [Simple Example](https://tisqleditor-playground.netlify.app/?example=cur-sql-gutter&with_select)
 
 ## Installation
 
@@ -11,20 +16,23 @@ npm install @tidbcloud/codemirror-extension-cur-sql-gutter
 You need to install its peer dependencies as well:
 
 ```shell
-npm install @codemirror/view @codemirror/state
+npm install @codemirror/view @codemirror/state @codemirror/lang-sql
 ```
 
 ## Usage
 
 ```ts
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
+import { sql, MySQL } from '@codemirror/lang-sql'
+import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
+import { curSql } from '@tidbcloud/codemirror-extension-cur-sql'
 import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'
 
 const editorView = new EditorView({
   state: EditorState.create({
     doc,
-    extensions: [curSqlGutter()]
+    extensions: [sql({ dialect: MySQL }), sqlParser(), curSql(), curSqlGutter()]
   })
 })
 ```

packages/extensions/cur-sql-gutter/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tidbcloud/codemirror-extension-cur-sql-gutter",
   "version": "0.0.2",
-  "description": "tisqleditor extensions",
+  "description": "codemirror extension to show gutter for current selected sql",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,8 @@
     "dist/*.js",
     "dist/*.ts",
     "package.json",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "tsc:watch": "tsc --watch",
@@ -22,7 +23,8 @@
     "tidbcloud",
     "sql",
     "editor",
-    "extensions",
+    "codemirror",
+    "extension",
     "gutter"
   ],
   "author": "",