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.

Basic Usage

html

<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.