codemiror extension for SQL keyword and database schema autocompletion with customized style
npm install @tidbcloud/codemirror-extension-sql-autocompleteA codemirror extension implements the SQL keyword and database schema autocompletion based @codemirror/autocomplete, with a customized style.
- Full Featured Playground
- Simple Example
``shell`
npm install @tidbcloud/codemirror-extension-sql-autocomplete
You need to install its peer dependencies as well:
`shell`
npm install @codemirror/view @codemirror/state @codemirror/autocomplete @codemirror/commands @codemirror/lang-sql
`ts
import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { sql, MySQL } from '@codemirror/lang-sql'
import { sqlAutoCompletion } from '@tidbcloud/codemirror-extension-sql-autocomplete'
const editorView = new EditorView({
state: EditorState.create({
doc,
extensions: [
sql({ dialect: MySQL }),
sqlAutoCompletion({
acceptKey: 'Tab',
autocompleteItemClassName: 'autocomplete-item-test'
// ...
})
]
})
})
`
`ts
/ 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
/**
The icon map for the auto completion item, the key is the type of the completion, the value is the img src
*/
renderIconMap?: Record
}
function sqlAutoCompletion(config?: AutoCompletionConfig): Extension
``