Merge pull request #21 from tidbcloud/feat/docs

feat: extension readme

packages/extensions/autocomplete/README.md

@@ -1,6 +1,6 @@
 # @tidbcloud/codemirror-extension-autocomplete
 
-// TODO: desc
+This extension implements the SQL autocompletion based @codemirror/autocomplete for the CodeMirror6 editor.
 
 ## Installation
 
@@ -19,16 +19,45 @@ npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemir
 ```ts
 import { EditorView } from '@codemirror/view'
 import { EditorState } from '@codemirror/state'
-import { autoCompletion } from '@tidbcloud/codemirror-extension-autocomplete'
+import { autoCompletion, AutoCompletionConfig } from '@tidbcloud/codemirror-extension-autocomplete'
+
+const autoCompleteConfig = {
+  acceptKey: 'Tab',
+  autocompleteItemClassName: 'autocomplete-item-test',
+  ...
+}: AutoCompletionConfig
 
 const editorView = new EditorView({
   state: EditorState.create({
     doc,
-    extensions: [autoCompletion()]
+    extensions: [autoCompletion(autoCompleteConfig)]
   })
 })
 ```
 
 ## API
 
-// TODO
+```ts
+// DefaultCompletionConfig configs please refer to: https://codemirror.net/docs/ref/#autocomplete.autocompletion
+
+interface AutoCompletionConfig extends DefaultCompletionConfig {
+  /**
+  accept the completion by pressing the key, defult is Tab
+  */
+  acceptKey?: string
+  /**
+  the classname added to the auto completion item
+  */
+  autocompleteItemClassName?: string
+  /**
+  The maximum number of options to render to the DOM, default is 50
+  */
+  maxRenderedOptions?: number
+  /**
+  The icon map for the auto completion item, the key is the type of the completion, the value is the img src
+  */
+  renderIconMap?: Record<string, string>
+}
+
+function autoCompletion(config?: AutoCompletionConfig): Extension
+```

packages/extensions/basic-setup/README.md

@@ -0,0 +1,78 @@
+# @tidbcloud/codemirror-extension-basic-setup
+
+Basic configuration for the CodeMirror6 code editor.
+
+## Installation
+
+```shell
+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
+```
+
+## Usage
+
+```ts
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import {
+  BasicSetupOptions,
+  basicSetup
+} from '@tidbcloud/codemirror-extension-basic-setup'
+
+const editorView = new EditorView({
+  state: EditorState.create({
+    doc,
+    extensions: [
+      basicSetup({
+        foldGutter: false,
+        foldKeymap: false,
+        searchKeymap: true,
+        autocompletion: false
+      })
+    ]
+  })
+})
+```
+
+## API
+
+```ts
+export interface MinimalSetupOptions {
+  highlightSpecialChars?: boolean
+  history?: boolean
+  drawSelection?: boolean
+  syntaxHighlighting?: boolean
+
+  defaultKeymap?: boolean
+  historyKeymap?: boolean
+}
+
+export interface BasicSetupOptions extends MinimalSetupOptions {
+  lineNumbers?: boolean
+  highlightActiveLineGutter?: boolean
+  foldGutter?: boolean
+  dropCursor?: boolean
+  allowMultipleSelections?: boolean
+  indentOnInput?: boolean
+  bracketMatching?: boolean
+  closeBrackets?: boolean
+  autocompletion?: boolean
+  rectangularSelection?: boolean
+  crosshairCursor?: boolean
+  highlightActiveLine?: boolean
+  highlightSelectionMatches?: boolean
+
+  closeBracketsKeymap?: boolean
+  searchKeymap?: boolean
+  foldKeymap?: boolean
+  completionKeymap?: boolean
+  lintKeymap?: boolean
+}
+
+function minimalSetup(options?: MinimalSetupOptions) => Extension[]
+```

packages/extensions/events/README.md

@@ -0,0 +1,46 @@
+# @tidbcloud/codemirror-extension-events
+
+Events extensions for CodeMirror6. This extension provides 3 default events: onChange, onFocusChange and onSelectionChange.
+
+## Installation
+
+```shell
+npm install @tidbcloud/codemirror-extension-events
+```
+
+You need to install its peer dependencies as well:
+
+```shell
+npm install @codemirror/view @codemirror/state
+```
+
+## Usage
+
+```ts
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { onChange, onFocusChange, onSelectionChange } from '@tidbcloud/codemirror-extension-events'
+
+const onChangeHandler = (sql: string, view: EditorView) => {
+  console.log(sql, view)
+}
+
+const onFocusChangeHandler = (sql: string) => {
+  console.log(sql)
+}
+
+const onSelectionChangeHandler = (selectedRange: {from: number, to: numer}) => {
+  console.log(selectedRange.from, selectedRange.to)
+}
+
+const editorView = new EditorView({
+  state: EditorState.create({
+    doc,
+    extensions: [
+      onChange(onChangeHandler),
+      focusChangeHelper(onFocusChangeHandler),
+      onSelectionChange: (onSelectionChangeHandler)
+    ]
+  })
+})
+```

packages/extensions/linters/README.md

@@ -0,0 +1,105 @@
+# @tidbcloud/codemirror-extension-linters
+
+This extension provides 3 linters:
+
+- fullWidthCharLinter: lint all the chinese characters
+- useDbLinter: use statement linter, the first statement should be use dbName;
+- regexMatchLinter: configurable by regular expression
+
+## Installation
+
+```shell
+npm install @tidbcloud/codemirror-extension-linters
+```
+
+You need to install its peer dependencies as well:
+
+```shell
+npm install @codemirror/view @codemirror/state @codemirror/lint
+```
+
+## Usage
+
+```ts
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { fullWidthCharLinter } from '@tidbcloud/codemirror-extension-linters'
+
+interface charLinterConfig {
+  title?: string
+  message?: string
+}
+
+const editorView = new EditorView({
+  state: EditorState.create({
+    doc,
+    extensions: [
+      fullWidthCharLinter({
+        title: 'the title when error',
+        message: 'error content'
+      })
+    ]
+  })
+})
+```
+
+```ts
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { useDbLinter } from '@tidbcloud/codemirror-extension-linters'
+
+type DBLinterOptions = {
+  level?: 'error' | 'warning'
+  title?: string
+  message?: string
+  whenDisable?: (view: EditorView) => boolean // the linter will be hidden when return false
+}
+
+const editorView = new EditorView({
+  state: EditorState.create({
+    doc,
+    extensions: [
+      useDbLinter({
+        level: 'warning',
+        title: 'the title when error',
+        message: 'error content'
+      })
+    ]
+  })
+})
+```
+
+```ts
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { regexMatchLinter } from '@tidbcloud/codemirror-extension-linters'
+
+interface RegexpItem {
+  reg: RegExp
+  title: string
+  message: string
+}
+
+const editorView = new EditorView({
+  state: EditorState.create({
+    doc,
+    extensions: [
+      regexMatchLinter([
+        {
+          reg: /[a-z]/,
+          title: 'test reg error',
+          message: 'test reg error content'
+        }
+      ])
+    ]
+  })
+})
+```
+
+## API
+
+```ts
+function fullWidthCharLinter(config?: charLinterConfig): Extension
+function useDbLinter(config?: DBLinterOptions): Extension
+function regexMatchLinter(config?: RegexpItem[]): Extension
+```

packages/extensions/linters/src/char-linter.ts

@@ -4,7 +4,7 @@ import { hintEle, linterBaseTheme } from './lint-style'
 
 export interface charLinterConfig {
   title?: string
-  content?: string
+  message?: string
 }
 
 const fullWidthCharChecker = (config: charLinterConfig) =>
@@ -30,7 +30,7 @@ const fullWidthCharChecker = (config: charLinterConfig) =>
                       codeNum
                     )}", which is more common in source code.`
                   : 'The character is invalid.'
-              return hintEle(config.title || '', config.content || tips)
+              return hintEle(config.title || '', config.message || tips)
             }
           })
         }