Skip to content

Latest commit

 

History

History
125 lines (91 loc) · 6.3 KB

README.md

File metadata and controls

125 lines (91 loc) · 6.3 KB
Raw

TiSQLEditor

SQL Editor is built on CodeMirror6, a modern code editor that is written in TypeScript and supports a wide range of extensions. Based on that, we provide a set of extensions to make it easy to use and easy to extend, all these features are validated in the TiDB Cloud, with countless customers all around the world. We also contribute to the CodeMirror6 project, and we are happy to share our extensions with the community.

👉🏻 Try Full Featured Playground

image

playground.mp4

👉🏻 Try Simple Example

image

Features

  • Support edit multiple SQL files
  • Supply React component and Vue component
  • Out of box extensions
  • AI Widget to chat with AI to help write or refine SQL

Packages

package desc
@tidbcloud/tisqleditor SQLEditorInstance with pre-configured extensions
@tidbcloud/tisqleditor-react React component wrapper
@tidbcloud/tisqleditor-vue Vue component wrapper
@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-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 codemirror

Usage

See editor.tsx or editor-example.tsx to get more details.

npm install @tidbcloud/tisqleditor-react @tidbcloud/codemirror-extension-themes @tidbcloud/codemirror-extension-cur-sql-gutter
import { SQLEditor } from '@tidbcloud/tisqleditor-react'
import { oneDark } from '@tidbcloud/codemirror-extension-themes'
import { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'

export function Editor() {
  return (
    <SQLEditor
      editorId="MySQLEditor"
      doc={'USE game;\nSELECT * from games;'}
      theme={oneDark}
      basicSetupOptions={{
        autocompletion: true
      }}
      extraExts={[
        curSqlGutter()
        // here you can add some other extensions as you need
      ]}
    />
  )
}

Documentation

Development

Setup

Local Development

echo 'link-workspace-packages=true' >> ~/.npmrc
pnpm i
pnpm dev

Production Build

pnpm i
pnpm build

PR Commit Convention

Before you create a pull request, please check whether your commits comply with the commit conventions used in this repository. When you create a commit, you should follow the convention category(scope or module): message in your commit message while using one of the following categories:

  • feat/feature: all changes that introduce completely new code or new features
  • fix: changes that fix a bug (ideally you will additionally reference an issue if present)
  • refactor: any code related change that is not a fix nor a feature
  • chore: all changes to the repository that do not fit into any of the above categories

Test

Run pnpm test to test.

pnpm test

Release

  • Checkout from the latest main branch.
  • Run pnpm changeset and follow the instructions, you will need to tell it the version and changelogs.
  • Commit the generated changeset file (a markdown file in .changeset folder), create a pull request to main branch.
  • After your pull request is merged, a new pull request will be created by a bot, you can review your release there.
  • After that pull request is merged, a new release will be published automatically to github registry.

License

MIT License