diff --git a/README.md b/README.md index 13775b2..1545092 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 61689fb..22ab1a1 100644 --- a/package.json +++ b/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", diff --git a/packages/core/README.md b/packages/core/README.md index 06186a6..db79a91 100644 --- a/packages/core/README.md +++ b/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 diff --git a/packages/core/package.json b/packages/core/package.json index 6050033..4e10663 100644 --- a/packages/core/package.json +++ b/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,7 +10,8 @@ "dist/*.js", "dist/*.ts", "package.json", - "README.md" + "README.md", + "CHANGELOG.md" ], "scripts": { "tsc:watch": "tsc --watch", @@ -18,13 +19,16 @@ "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" }, diff --git a/packages/core/src/editor-instance.ts b/packages/core/src/editor-instance.ts index e509c20..7e1cbb4 100644 --- a/packages/core/src/editor-instance.ts +++ b/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)), diff --git a/packages/extensions/ai-widget/README.md b/packages/extensions/ai-widget/README.md index 5593fd3..4578c7f 100644 --- a/packages/extensions/ai-widget/README.md +++ b/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,7 +25,7 @@ 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 @@ -28,12 +33,19 @@ npm install @codemirror/view @codemirror/state @codemirror/merge ```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) diff --git a/packages/extensions/ai-widget/package.json b/packages/extensions/ai-widget/package.json index ae5dc66..ac5a13c 100644 --- a/packages/extensions/ai-widget/package.json +++ b/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,7 +10,8 @@ "dist/*.js", "dist/*.ts", "package.json", - "README.md" + "README.md", + "CHANGELOG.md" ], "scripts": { "tsc:watch": "tsc --watch", @@ -18,7 +19,15 @@ "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": { diff --git a/packages/extensions/basic-setup/README.md b/packages/extensions/basic-setup/README.md index 998ec8c..53ff06f 100644 --- a/packages/extensions/basic-setup/README.md +++ b/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,7 +11,7 @@ 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 @@ -19,10 +19,7 @@ npm install @codemirror/autocomplete @codemirror/commands @codemirror/lang-sql @ ```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[] ``` diff --git a/packages/extensions/basic-setup/package.json b/packages/extensions/basic-setup/package.json index 6fb7675..714f553 100644 --- a/packages/extensions/basic-setup/package.json +++ b/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,7 +23,8 @@ "tidbcloud", "sql", "editor", - "extensions", + "codemirror", + "extension", "basic setup" ], "author": "", @@ -30,7 +32,6 @@ "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" } } diff --git a/packages/extensions/cur-sql-gutter/README.md b/packages/extensions/cur-sql-gutter/README.md index a128417..dbab793 100644 --- a/packages/extensions/cur-sql-gutter/README.md +++ b/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,7 +16,7 @@ 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 @@ -19,12 +24,15 @@ npm install @codemirror/view @codemirror/state ```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()] }) }) ``` diff --git a/packages/extensions/cur-sql-gutter/package.json b/packages/extensions/cur-sql-gutter/package.json index 029d3ed..a2e58b9 100644 --- a/packages/extensions/cur-sql-gutter/package.json +++ b/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": "", diff --git a/packages/extensions/cur-sql-gutter/src/index.ts b/packages/extensions/cur-sql-gutter/src/index.ts index 1782a6c..91831a4 100644 --- a/packages/extensions/cur-sql-gutter/src/index.ts +++ b/packages/extensions/cur-sql-gutter/src/index.ts @@ -1,4 +1,4 @@ -import { RangeSet } from '@codemirror/state' +import { Extension, RangeSet } from '@codemirror/state' import { EditorView, gutter, GutterMarker } from '@codemirror/view' import { getCurStatements } from '@tidbcloud/codemirror-extension-cur-sql' import { getNearbyStatement } from '@tidbcloud/codemirror-extension-sql-parser' @@ -74,7 +74,7 @@ const sqlGutter = (curSqlMarker: GutterMarker, config: CurSqlGutterConfig) => { }) } -export const curSqlGutter = (config: CurSqlGutterConfig = {}) => { +export function curSqlGutter(config: CurSqlGutterConfig = {}): Extension { const curSqlMarker = new (class extends GutterMarker { toDOM() { const el = document.createElement('div') diff --git a/packages/extensions/cur-sql/README.md b/packages/extensions/cur-sql/README.md index 1691e1c..e72578c 100644 --- 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 complete SQL statements around the cursor position. +A codemirror extension listens the editor selection change, returns the complete SQL statements around the cursor position. This extension is installed internally inside the `SQLEditorInstance`. diff --git a/packages/extensions/cur-sql/package.json b/packages/extensions/cur-sql/package.json index 2874129..369e1e6 100644 --- a/packages/extensions/cur-sql/package.json +++ b/packages/extensions/cur-sql/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-cur-sql", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemirror extension to get 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", "cur sql" ], "author": "", diff --git a/packages/extensions/cur-sql/src/index.ts b/packages/extensions/cur-sql/src/index.ts index 31edf60..6aa57db 100644 --- a/packages/extensions/cur-sql/src/index.ts +++ b/packages/extensions/cur-sql/src/index.ts @@ -1,4 +1,9 @@ -import { StateField, StateEffect, EditorState } from '@codemirror/state' +import { + StateField, + StateEffect, + EditorState, + Extension +} from '@codemirror/state' import { EditorView, ViewUpdate } from '@codemirror/view' import { @@ -102,6 +107,6 @@ export function getFirstNonUseTypeStatement(state: EditorState) { //------------------- -export function curSql() { +export function curSql(): Extension { return [curStatementsField, curStatements()] } diff --git a/packages/extensions/events/README.md b/packages/extensions/events/README.md index a5a60cc..c6fb68f 100644 --- a/packages/extensions/events/README.md +++ b/packages/extensions/events/README.md @@ -1,6 +1,6 @@ # @tidbcloud/codemirror-extension-events -2 normal kinds of event listener: doc change, selection change +2 normal kinds of codemirror event listener: doc change, selection change - onDocChange: triggered when doc changes - onSelectionChange: triggered when selection changes @@ -46,3 +46,20 @@ const editorView = new EditorView({ }) }) ``` + +## API + +```ts +type DocChangeHandler = (view: EditorView, content: string) => void +function onDocChange(handler: DocChangeHandler): Extension + +type SelectionRange = { + from: number + to: number +} +type SelectionChangeHandler = ( + view: EditorView, + selRanges: SelectionRange[] +) => void +function onSelectionChange(handler: SelectionChangeHandler): Extension +``` diff --git a/packages/extensions/events/package.json b/packages/extensions/events/package.json index c21366e..1224453 100644 --- a/packages/extensions/events/package.json +++ b/packages/extensions/events/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-events", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemirror extension to listen doc and selection changes event", "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", "events" ], "author": "", diff --git a/packages/extensions/events/src/selection-change.ts b/packages/extensions/events/src/selection-change.ts index d2f1eb5..fe69cc7 100644 --- a/packages/extensions/events/src/selection-change.ts +++ b/packages/extensions/events/src/selection-change.ts @@ -1,7 +1,7 @@ import { Extension } from '@codemirror/state' import { EditorView, ViewUpdate } from '@codemirror/view' -export interface SelectionRange { +export type SelectionRange = { from: number to: number } diff --git a/packages/extensions/linters/README.md b/packages/extensions/linters/README.md index 4dbf301..77c9171 100644 --- a/packages/extensions/linters/README.md +++ b/packages/extensions/linters/README.md @@ -1,11 +1,16 @@ # @tidbcloud/codemirror-extension-linters -This extension provides 3 linters: +3 linter codemirror extensions: -- fullWidthCharLinter: lint all the chinese characters -- useDbLinter: use statement linter, the first statement should be use dbName; +- useDbLinter: use statement linter, the first statement should be `use ${dbName};` +- fullWidthCharLinter: lint all the full width characters - regexMatchLinter: configurable by regular expression +## Try it + +- [Full Featured Playground](https://tisqleditor-playground.netlify.app/) +- [Simple Example](https://tisqleditor-playground.netlify.app/?example=use-db-linter&with_select) + ## Installation ```shell @@ -15,7 +20,7 @@ npm install @tidbcloud/codemirror-extension-linters You need to install its peer dependencies as well: ```shell -npm install @codemirror/view @codemirror/state @codemirror/lint +npm install @codemirror/view @codemirror/state @codemirror/lint @codemirror/lang-sql ``` ## Usage @@ -23,67 +28,30 @@ npm install @codemirror/view @codemirror/state @codemirror/lint ```ts import { EditorView } from '@codemirror/view' import { EditorState } from '@codemirror/state' -import { fullWidthCharLinter } from '@tidbcloud/codemirror-extension-linters' - -interface charLinterConfig { - title?: string - message?: string -} +import { sql, MySQL } from '@codemirror/lang-sql' +import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser' +import { + useDbLinter, + fullWidthCharLinter, + regexMatchLinter +} from '@tidbcloud/codemirror-extension-linters' 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' + sql({ dialect: MySQL }), + sqlParser(), -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: [ + }), + fullWidthCharLinter({ + title: 'the title when error', + message: 'error content' + }), regexMatchLinter([ { reg: /[a-z]/, @@ -99,7 +67,25 @@ const editorView = new EditorView({ ## API ```ts -function fullWidthCharLinter(config?: charLinterConfig): Extension +type DBLinterOptions = { + level?: 'error' | 'warning' + title?: string + message?: string + /* control to disable the lint when some cases happen in run time */ + whenDisable?: (view: EditorView) => boolean +} function useDbLinter(config?: DBLinterOptions): Extension -function regexMatchLinter(config?: RegexpItem[]): Extension + +interface CharLinterConfig { + title?: string + message?: string +} +function fullWidthCharLinter(config?: charLinterConfig): Extension + +interface RegexpItem { + reg: RegExp + title: string + message: string +} +function regexMatchLinter(config: RegexpItem[]): Extension ``` diff --git a/packages/extensions/linters/package.json b/packages/extensions/linters/package.json index 787cac4..9dda99e 100644 --- a/packages/extensions/linters/package.json +++ b/packages/extensions/linters/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-linters", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemirror linter extensions", "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", "linters" ], "author": "", diff --git a/packages/extensions/linters/src/char-linter.ts b/packages/extensions/linters/src/char-linter.ts index 29d44cb..190412b 100644 --- a/packages/extensions/linters/src/char-linter.ts +++ b/packages/extensions/linters/src/char-linter.ts @@ -1,13 +1,14 @@ +import { Extension } from '@codemirror/state' import { linter, Diagnostic } from '@codemirror/lint' import { hintEle, linterBaseTheme } from './lint-style' -export interface charLinterConfig { +export interface CharLinterConfig { title?: string message?: string } -const fullWidthCharChecker = (config: charLinterConfig) => +const fullWidthCharChecker = (config: CharLinterConfig) => linter((view) => { const diagnostics: Diagnostic[] = [] @@ -40,6 +41,6 @@ const fullWidthCharChecker = (config: charLinterConfig) => return diagnostics }) -export const fullWidthCharLinter = (config: charLinterConfig = {}) => { +export function fullWidthCharLinter(config: CharLinterConfig = {}): Extension { return [fullWidthCharChecker(config), linterBaseTheme] } diff --git a/packages/extensions/linters/src/regex-match-linter.ts b/packages/extensions/linters/src/regex-match-linter.ts index 78b7fac..36a38c6 100644 --- a/packages/extensions/linters/src/regex-match-linter.ts +++ b/packages/extensions/linters/src/regex-match-linter.ts @@ -1,4 +1,6 @@ +import { Extension } from '@codemirror/state' import { linter, Diagnostic } from '@codemirror/lint' + import { hintEle, linterBaseTheme } from './lint-style' export interface RegexpItem { @@ -49,6 +51,6 @@ const regexMatchParser = (regs: RegexpItem[]) => return diagnostics }) -export const regexMatchLinter = (config: RegexpItem[]) => { +export function regexMatchLinter(config: RegexpItem[]): Extension { return [regexMatchParser(config), linterBaseTheme] } diff --git a/packages/extensions/linters/src/use-db-linter.ts b/packages/extensions/linters/src/use-db-linter.ts index b7173c5..dedc960 100644 --- a/packages/extensions/linters/src/use-db-linter.ts +++ b/packages/extensions/linters/src/use-db-linter.ts @@ -1,4 +1,5 @@ import { EditorView } from '@codemirror/view' +import { Extension } from '@codemirror/state' import { linter, Diagnostic } from '@codemirror/lint' import { getSqlStatements } from '@tidbcloud/codemirror-extension-sql-parser' @@ -9,6 +10,7 @@ export type DBLinterOptions = { level?: 'error' | 'warning' title?: string message?: string + /* control to disable the lint when some cases happen in run time */ whenDisable?: (view: EditorView) => boolean } @@ -43,6 +45,6 @@ const databaseLinter = (config: DBLinterOptions) => return diagnostics }) -export function useDbLinter(config: DBLinterOptions = {}) { +export function useDbLinter(config: DBLinterOptions = {}): Extension { return [databaseLinter(config), linterBaseTheme] } diff --git a/packages/extensions/save-helper/README.md b/packages/extensions/save-helper/README.md index 6673c74..1a163d1 100644 --- a/packages/extensions/save-helper/README.md +++ b/packages/extensions/save-helper/README.md @@ -1,6 +1,11 @@ # @tidbcloud/codemirror-extension-save-helper -This extension listens the editor doc changes, if changes, it will call the save handler in delay time, or, you can press the defined hotkey (default is `Mod-s`) to call save handler immediately. +A codemirror extension listens the editor doc changes, if changes, it will call the save handler in delay time, or, you can press the defined hotkey (default is `Mod-s`) to call save handler immediately. + +## Try it + +- [Full Featured Playground](https://tisqleditor-playground.netlify.app/) +- [Simple Example](https://tisqleditor-playground.netlify.app/?example=save-helper&with_select) ## Installation @@ -42,16 +47,13 @@ const editorView = new EditorView({ type SaveHelperOptions = { /* in milliseconds, default 5000 */ delay?: number - /* default is true */ auto?: boolean - /* default is Mod-s */ hotkey?: string - /* save handler */ save: (view: EditorView) => void } -const saveHelper: (options: SaveHelperOptions) => Extension +function saveHelper(options: SaveHelperOptions): Extension ``` diff --git a/packages/extensions/save-helper/package.json b/packages/extensions/save-helper/package.json index ded61b8..6b2a478 100644 --- a/packages/extensions/save-helper/package.json +++ b/packages/extensions/save-helper/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-save-helper", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemiror extension to help save editor content", "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", @@ -18,7 +19,14 @@ "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"", "build": "tsc && rollup -c" }, - "keywords": [], + "keywords": [ + "tidbcloud", + "sql", + "editor", + "codemirror", + "extension", + "save helper" + ], "author": "", "license": "MIT", "devDependencies": { diff --git a/packages/extensions/save-helper/src/index.ts b/packages/extensions/save-helper/src/index.ts index 41a93d8..b28cb4b 100644 --- a/packages/extensions/save-helper/src/index.ts +++ b/packages/extensions/save-helper/src/index.ts @@ -35,12 +35,12 @@ const saveKeymap = (key: string, save: (view: EditorView) => void) => { ) } -export const saveHelper = ({ +export function saveHelper({ delay = 5000, auto = true, hotkey = 'Mod-s', save -}: SaveHelperOptions) => { +}: SaveHelperOptions): Extension { const exts: Extension[] = [] if (auto) { diff --git a/packages/extensions/sql-autocomplete/README.md b/packages/extensions/sql-autocomplete/README.md index 8f9cb38..790fa83 100644 --- a/packages/extensions/sql-autocomplete/README.md +++ b/packages/extensions/sql-autocomplete/README.md @@ -1,6 +1,11 @@ # @tidbcloud/codemirror-extension-sql-autocomplete -This extension implements the SQL keyword and database schema autocompletion based `@codemirror/autocomplete` for the CodeMirror6 editor, with a customized style. +A codemirror extension implements the SQL keyword and database schema autocompletion based `@codemirror/autocomplete`, with a customized style. + +## Try it + +- [Full Featured Playground](https://tisqleditor-playground.netlify.app/) +- [Simple Example](https://tisqleditor-playground.netlify.app/?example=sql-autocomplete&with_select) ## Installation @@ -11,7 +16,7 @@ npm install @tidbcloud/codemirror-extension-sql-autocomplete You need to install its peer dependencies as well: ```shell -npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemirror/commands +npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemirror/commands @codemirror/lang-sql ``` ## Usage @@ -19,18 +24,21 @@ npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemir ```ts import { EditorView } from '@codemirror/view' import { EditorState } from '@codemirror/state' -import { sqlAutoCompletion, AutoCompletionConfig } from '@tidbcloud/codemirror-extension-sql-autocomplete' - -const autoCompleteConfig = { - acceptKey: 'Tab', - autocompleteItemClassName: 'autocomplete-item-test', - ... -}: AutoCompletionConfig +import { sql, MySQL } from '@codemirror/lang-sql' +import { sqlAutoCompletion } from '@tidbcloud/codemirror-extension-sql-autocomplete' const editorView = new EditorView({ state: EditorState.create({ doc, - extensions: [sqlAutoCompletion(autoCompleteConfig)] + extensions: [ + sql({ dialect: MySQL }), + + sqlAutoCompletion({ + acceptKey: 'Tab', + autocompleteItemClassName: 'autocomplete-item-test' + // ... + }) + ] }) }) ``` diff --git a/packages/extensions/sql-autocomplete/package.json b/packages/extensions/sql-autocomplete/package.json index 96222c5..0607873 100644 --- a/packages/extensions/sql-autocomplete/package.json +++ b/packages/extensions/sql-autocomplete/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-sql-autocomplete", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemiror extension for SQL keyword and database schema autocompletion with customized style", "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", "autocomplete" ], "author": "", diff --git a/packages/extensions/sql-autocomplete/src/index.ts b/packages/extensions/sql-autocomplete/src/index.ts index a6cfcc4..2604645 100644 --- a/packages/extensions/sql-autocomplete/src/index.ts +++ b/packages/extensions/sql-autocomplete/src/index.ts @@ -1,4 +1,4 @@ -import { EditorState } from '@codemirror/state' +import { EditorState, Extension } from '@codemirror/state' import { EditorView, Rect, keymap } from '@codemirror/view' import { acceptCompletion, @@ -352,6 +352,8 @@ const autoCompleteTab = (config: AutoCompletionConfig) => { ]) } -export function sqlAutoCompletion(config: AutoCompletionConfig = {}) { +export function sqlAutoCompletion( + config: AutoCompletionConfig = {} +): Extension { return [baseTheme, customAutoCompletion(config), autoCompleteTab(config)] } diff --git a/packages/extensions/sql-parser/README.md b/packages/extensions/sql-parser/README.md index 801f976..8401dbc 100644 --- a/packages/extensions/sql-parser/README.md +++ b/packages/extensions/sql-parser/README.md @@ -1,6 +1,6 @@ # @tidbcloud/codemirror-extension-sql-parser -This extension listens the editor doc change, return all the parsed statements. +A codemirror extension listens the editor doc change, parses the content to SQL statements. This extension is installed internally inside the `SQLEditorInstance`. diff --git a/packages/extensions/sql-parser/package.json b/packages/extensions/sql-parser/package.json index 690d030..eaf51d5 100644 --- a/packages/extensions/sql-parser/package.json +++ b/packages/extensions/sql-parser/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-sql-parser", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "codemiror extension to parser editor content to SQL statements", "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", "sql parser" ], "author": "", diff --git a/packages/extensions/sql-parser/src/index.ts b/packages/extensions/sql-parser/src/index.ts index 168edf1..1abd619 100644 --- a/packages/extensions/sql-parser/src/index.ts +++ b/packages/extensions/sql-parser/src/index.ts @@ -1,5 +1,10 @@ import { ensureSyntaxTree } from '@codemirror/language' -import { StateField, StateEffect, EditorState } from '@codemirror/state' +import { + StateField, + StateEffect, + EditorState, + Extension +} from '@codemirror/state' import { EditorView, ViewUpdate } from '@codemirror/view' export type SqlStatement = { @@ -121,6 +126,6 @@ export function getNearbyStatement(state: EditorState, pos: number) { //------------------- -export function sqlParser() { +export function sqlParser(): Extension { return [statementsField, statementsParser()] } diff --git a/packages/extensions/themes/README.md b/packages/extensions/themes/README.md index dfc3cb7..da738e0 100644 --- a/packages/extensions/themes/README.md +++ b/packages/extensions/themes/README.md @@ -1,8 +1,8 @@ # @tidbcloud/codemirror-extension-themes -This extension provides 2 simple and out of box editor themes to use, `bbedit` is for light mode and `oneDark` is for dark mode. +Codemirror theme extensions, provide 2 simple and out of box editor themes to use, `bbedit` is for light mode and `oneDark` is for dark mode. -If these 2 themes is not suitable for you, you can use other themes from third-party libraries or customized a theme by yourself. +If these 2 themes are not suitable for you, you can choose other themes from third-party libraries or customized a theme by yourself. ## Installation diff --git a/packages/extensions/themes/package.json b/packages/extensions/themes/package.json index 02916bf..eba1128 100644 --- a/packages/extensions/themes/package.json +++ b/packages/extensions/themes/package.json @@ -1,7 +1,7 @@ { "name": "@tidbcloud/codemirror-extension-themes", "version": "0.0.2", - "description": "tisqleditor extensions", + "description": "2 simple codemirror themes", "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", @@ -18,7 +19,14 @@ "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"", "build": "tsc && rollup -c" }, - "keywords": [], + "keywords": [ + "tidbcloud", + "sql", + "editor", + "codemirror", + "extension", + "theme" + ], "author": "", "license": "MIT", "devDependencies": { diff --git a/packages/playground/README.md b/packages/playground/README.md index 741484d..c2c114a 100644 --- a/packages/playground/README.md +++ b/packages/playground/README.md @@ -1 +1,13 @@ # TiSQLEditor Playground + +## Try it + +- [Full Featured Playground](https://tisqleditor-playground.netlify.app/) +- [Simple Example](https://tisqleditor-playground.netlify.app/?example=all&with_select) + +## Tech Stack + +- vite +- tailwindcss +- shadcn ui +- react-query diff --git a/packages/playground/src/components/biz/editor-panel/actions.tsx b/packages/playground/src/components/biz/editor-panel/actions.tsx index c524aba..68f6a27 100644 --- a/packages/playground/src/components/biz/editor-panel/actions.tsx +++ b/packages/playground/src/components/biz/editor-panel/actions.tsx @@ -55,7 +55,7 @@ export function EditorActions() {