{"id":21846579,"url":"https://github.com/tidbcloud/tisqleditor","last_synced_at":"2025-04-14T13:23:04.433Z","repository":{"id":250650089,"uuid":"808542477","full_name":"tidbcloud/tisqleditor","owner":"tidbcloud","description":"CodeMirror6 based SQL code editor which is used in TiDB Cloud Console","archived":false,"fork":false,"pushed_at":"2025-03-25T04:14:01.000Z","size":5401,"stargazers_count":6,"open_issues_count":6,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-25T05:21:09.509Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tisqleditor.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tidbcloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-31T09:32:47.000Z","updated_at":"2025-03-18T05:36:46.000Z","dependencies_parsed_at":"2025-03-25T05:20:11.211Z","dependency_job_id":"9c6d214d-5643-4c2e-ad00-ebf552ca87dd","html_url":"https://github.com/tidbcloud/tisqleditor","commit_stats":null,"previous_names":["tidbcloud/tisqleditor"],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Ftisqleditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Ftisqleditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Ftisqleditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tidbcloud%2Ftisqleditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tidbcloud","download_url":"https://codeload.github.com/tidbcloud/tisqleditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886779,"owners_count":21177745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-27T23:14:30.099Z","updated_at":"2025-04-14T13:23:04.393Z","avatar_url":"https://github.com/tidbcloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TiSQLEditor\n\nSQL Editor is built on [CodeMirror6](https://codemirror.net/), 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](https://tidbcloud.com), 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.\n\n👉🏻 [Try Full Featured Playground](https://tisqleditor.vercel.app/playground)\n\n![image](./packages/playground/public/playground-2.png)\n\nhttps://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-26479bd59d11\n\n👉🏻 [Try Simple Example](https://tisqleditor.vercel.app/examples?ex=all)\n\n![image](./packages/playground/public/example-2.png)\n\n## Features\n\n- Support edit multiple SQL files\n- Supply React component and Vue component\n- Out of box extensions\n- AI Widget to chat with AI to help write or refine SQL\n\n## Packages\n\n| package                                                                                              | desc                                                                      |\n| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| [@tidbcloud/tisqleditor](./packages/core/README.md)                                                  | SQLEditorInstance with pre-configured extensions                          |\n| [@tidbcloud/tisqleditor-react](./packages/react/README.md)                                           | React component wrapper                                                   |\n| [@tidbcloud/tisqleditor-vue](./packages/vue/README.md)                                               | Vue component wrapper                                                     |\n| [@tidbcloud/codemirror-extension-ai-widget](./packages/extensions/ai-widget/README.md)               | A widget to chat with AI to help write or refine SQL                      |\n| [@tidbcloud/codemirror-extension-sql-parser](./packages/extensions/sql-parser/README.md)             | Parse the editor content to SQL statements                                |\n| [@tidbcloud/codemirror-extension-cur-sql](./packages/extensions/cur-sql/README.md)                   | Get the selected SQL statements                                           |\n| [@tidbcloud/codemirror-extension-cur-sql-gutter](./packages/extensions/cur-sql-gutter/README.md)     | Show gutter for the selected SQL statements                               |\n| [@tidbcloud/codemirror-extension-sql-autocomplete](./packages/extensions/sql-autocomplete/README.md) | SQL keyword and database schema autocomplete                              |\n| [@tidbcloud/codemirror-extension-linters](./packages/extensions/linters/README.md)                   | Use db statement, full width chars, and regular expression linters        |\n| [@tidbcloud/codemirror-extension-save-helper](./packages/extensions/save-helper/README.md)           | Save the editor content if it changes                                     |\n| [@tidbcloud/codemirror-extension-events](./packages/extensions/events/README.md)                     | 2 normal kinds of event listener: doc change, selection change            |\n| [@tidbcloud/codemirror-extension-themes](./packages/extensions/themes/README.md)                     | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |\n| [@tidbcloud/codemirror-extension-basic-setup](./packages/extensions/basic-setup/README.md)           | Basic configuration for codemirror                                        |\n\n## Usage\n\nSee [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.\n\n```shell\nnpm install @tidbcloud/tisqleditor-react @tidbcloud/codemirror-extension-themes @tidbcloud/codemirror-extension-cur-sql-gutter\n```\n\n```tsx\nimport { SQLEditor } from '@tidbcloud/tisqleditor-react'\nimport { oneDark } from '@tidbcloud/codemirror-extension-themes'\nimport { curSqlGutter } from '@tidbcloud/codemirror-extension-cur-sql-gutter'\n\nexport function Editor() {\n  return (\n    \u003cSQLEditor\n      editorId=\"MySQLEditor\"\n      doc={'USE game;\\nSELECT * from games;'}\n      theme={oneDark}\n      basicSetupOptions={{\n        autocompletion: true\n      }}\n      extraExts={[\n        curSqlGutter()\n        // here you can add some other extensions as you need\n      ]}\n    /\u003e\n  )\n}\n```\n\n## Documentation\n\n- Official site: [https://tiui.tidbcloud.com/sql-editor](https://tiui.tidbcloud.com/sql-editor)\n- Documentation: [https://tiui.tidbcloud.com/docs/sql-editor-getting-started](https://tiui.tidbcloud.com/docs/sql-editor-getting-started)\n\n## Development\n\n### Setup\n\n- node.js \u003e 20.0\n- [enable corepack](https://www.totaltypescript.com/how-to-use-corepack): `corepack enable \u0026\u0026 corepack enable npm`\n\n### Local Development\n\n```bash\necho 'link-workspace-packages=true' \u003e\u003e ~/.npmrc\npnpm i\npnpm dev\n```\n\n### Production Build\n\n```bash\npnpm i\npnpm build\n```\n\n### PR Commit Convention\n\nBefore 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:\n\n- feat/feature: all changes that introduce completely new code or new features\n- fix: changes that fix a bug (ideally you will additionally reference an issue if present)\n- refactor: any code related change that is not a fix nor a feature\n- chore: all changes to the repository that do not fit into any of the above categories\n\n### Test\n\nRun `pnpm test` to test.\n\n```bash\npnpm test\n```\n\n### Release\n\n- Checkout from the latest main branch.\n- Run `pnpm changeset` and follow the instructions, you will need to tell it the version and changelogs.\n- Commit the generated changeset file (a markdown file in `.changeset` folder), create a pull request to main branch.\n- After your pull request is merged, a new pull request will be created by a bot, you can review your release there.\n- After that pull request is merged, a new release will be published automatically to github registry.\n\n## License\n\n[MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Ftisqleditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftidbcloud%2Ftisqleditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftidbcloud%2Ftisqleditor/lists"}