Files
beekeeper-studio/apps/ui-kit/docs/sql-text-editor.md
azmy60 eae57cf4ae add documentation for LSP integration
This commit adds documentation for the Language Server Protocol (LSP) integration:

1. Add new API docs for language server helpers and client
2. Rename LanguageServerClientWrapper to LanguageServerClient for clarity
3. Update existing documentation with references to new LSP docs
4. Improve type definitions for LSP-related code
2025-04-24 17:29:14 +07:00

1.7 KiB

SQL Text Editor

The Text Editor that is specialized for SQL queries. It extends the Text Editor component and inherits all of its features including Language Server Protocol support.

SQL Text Editor

Basic Usage

<bks-sql-text-editor></bks-sql-text-editor>
<script>
  const sqlTextEditor = document.querySelector("bks-sql-text-editor");
  sqlTextEditor.entities = [
    {
      name: "users",
      schema: "public",
      columns: [
        { field: "id", dataType: "integer" },
        { field: "name", dataType: "string" },
      ],
    },
  ];
  sqlTextEditor.value = "SELECT * FROM users";
</script>

Autocompletion

You can add a list of entities to autocomplete using the entities property.

sqlTextEditor.entities = [
  {
    name: "users",
    schema: "public",
    columns: [
      { field: "id", dataType: "integer" },
      { field: "name", dataType: "string" },
    ],
  },
];

To use a custom function to autocomplete column names instead of using the entities.columns property, you can set the columnsGetter property.

sqlTextEditor.columnsGetter = async (entityName) => {
  const columns = await fetchColumns(entityName);
  return [
    { field: "id", dataType: "integer" },
    { field: "name", dataType: "string" },
  ];
};

API

See the API reference below for more details.