DocsSQL Editor ExtensionsExtension - SQLAutocomplete

@tidbcloud/codemirror-extension-sql-autocomplete

A codemirror extension implements the SQL keyword and database schema autocompletion based @codemirror/autocomplete, with a customized style.

Installation

npm install @tidbcloud/codemirror-extension-sql-autocomplete

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemirror/commands @codemirror/lang-sql

Usage

import { sql, MySQL } from '@codemirror/lang-sql'
import { sqlAutoCompletion } from '@tidbcloud/codemirror-extension-sql-autocomplete'
 
// add extensions to your editor created by getting started
const extensions = [
  // ...other extensions,
  sql({ dialect: MySQL }),
  sqlAutoCompletion({
    autocompleteItemClassName: 'autocomplete-item-test'
    // ...other configs
  })
]

API

// DefaultCompletionConfig configs please refer to:
// https://codemirror.net/docs/ref/#autocomplete.autocompletion
interface AutoCompletionConfig extends DefaultCompletionConfig {
  // accept the completion by pressing the key, defult is Tab
  acceptKey?: string
  // the classname added to the auto completion item
  autocompleteItemClassName?: string
  // the maximum number of options to render to the DOM, default is 50
  maxRenderedOptions?: number
  // icon map for the auto completion item, the key is the item key type , the value is the img src
  renderIconMap?: Record<string, string>
}
 
function sqlAutoCompletion(config?: AutoCompletionConfig): Extension

Try it

You can try all the extensions playground at here & the autocomplete extension at here.


Extension - LintersExtension - BasicSetup