I want to add new custom keywords to the intellisense

v6
1

I’m using @codemirror/lang-sql@6.4.0, @uiw/react-codemirror@4.19.11. the code for the react component looks like this, so when i type sql keywords(also other things) are suggested, keywords like select, where, like etc. I want to add new custom keywords similar to select, where, how can i do that?

import CodeMirror from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';
import './style.css';

const CodeInput = ({ formState, fieldData, onChange, value, disabled }) => {
  const name =
    fieldData != undefined && fieldData.id !== undefined && fieldData.id;
  return (
    <CodeMirror
      readOnly={disabled}
      style={{ minWidth: '100%' }}
      theme={'light'}
      value={
        formState !== undefined &&
        formState.value !== undefined &&
        formState.value !== null
          ? formState.value
          : value !== undefined && value !== null
          ? value
          : ''
      }
      onChange={(e) => onChange(name, e)}
      extensions={[
        sql({
          schema: {
            customers: ['abc', 'efg'],
            table1: ['hij', 'klm'],
            table2: [],
            table4: [],
          },
        }),
      ]}
      options={{
        mode: 'sql',
        theme: 'material',
        lineNumbers: true,
        lineWrapping: true,
        autoCloseBrackets: true,
        matchBrackets: true,
        extraKeys: {
          'Ctrl-Space': 'autocomplete',
        },
        hintOptions: {
          hintAlign: 'left',
        },
      }}
    />
  );
};

export default CodeInput;
2

Assuming you also want your keyword highlighted, this sounds like you want to define your own SQLDialect. Since @codemirror/lang-sql 6.5.0, this should be relatively easy by creating a configuration based on the spec property of the dialect you want to adjust.

3

I’m unable to find any documentation which shows an example to work with SQLDialect, can you provide some documentation link in which SQLDialect as well as its properties are modified?

4

This is easily answered by looking at the @codemirror/lang-sql repository.

The definition of the SQLDialectSpec class is available here:

Once you’ve defined a SQLDialectSpec object, you can then call SQLDialect.define on this object to define your own dialect. As an example, the implementation for MySQL is available here: