Skip to content

DTStack/monaco-sql-languages

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Monaco SQL Languages

NPM version NPM downloads

English | 简体中文

This project is based on the SQL language project of Monaco Editor, which was forked from the monaco-languages.The difference is that Monaco SQL Languages supports various SQL languages and the corresponding advanced features for the Big Data field.


Feature highlights

  • Code Highlighting
  • Syntax Validation
  • Code Completion

Powered By dt-sql-parser


Online Preview

https://dtstack.github.io/monaco-sql-languages/

Powered By molecule.


Supported SQL Languages

  • MySQL
  • Flink
  • Spark
  • Hive
  • Trino (Presto)
  • PostgreSQL
  • Impala

Installing

npm install monaco-sql-languages

Tips: Monaco SQL Languages is only guaranteed to work stably on monaco-editor@0.31.0 for now.


Integrating


Usage

  1. Import language contributions

    Tips: If integrated via MonacoEditorWebpackPlugin, it will help us to import contribution files automatically. Otherwise, you need to import the contribution files manually.

    import 'monaco-sql-languages/esm/languages/mysql/mysql.contribution';
    import 'monaco-sql-languages/esm/languages/flink/flink.contribution';
    import 'monaco-sql-languages/esm/languages/spark/spark.contribution';
    import 'monaco-sql-languages/esm/languages/hive/hive.contribution';
    import 'monaco-sql-languages/esm/languages/trino/trino.contribution';
    import 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution';
    import 'monaco-sql-languages/esm/languages/impala/impala.contribution';
    
    // Or you can import all language contributions at once.
    // import 'monaco-sql-languages/esm/all.contributions';
  2. Setup language features

    You can setup language features via setupLanguageFeatures. For example, setup code completion feature of flinkSQL language.

    import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages';
    
    setupLanguageFeatures(LanguageIdEnum.FLINK, {
        completionItems: {
            enable: true,
            triggerCharacters: [' ', '.'],
            completionService: //... ,
        }
    });

    By default, Monaco SQL Languages only provides keyword autocompletion, and you can customize your completionItem list via completionService.

    import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
    import {
        setupLanguageFeatures,
        LanguageIdEnum,
        CompletionService,
        ICompletionItem,
        SyntaxContextType
     } from 'monaco-sql-languages';
    
    const completionService: CompletionService = function (
        model,
        position,
        completionContext,
        suggestions, // syntax context info at caretPosition
        entities // tables, columns in the syntax context of the editor text
    ) {
        return new Promise((resolve, reject) => {
            if (!suggestions) {
                return Promise.resolve([]);
            }
            const { keywords, syntax } = suggestions;
            const keywordsCompletionItems: ICompletionItem[] = keywords.map((kw) => ({
                label: kw,
                kind: languages.CompletionItemKind.Keyword,
                detail: 'keyword',
                sortText: '2' + kw
            }));
    
            let syntaxCompletionItems: ICompletionItem[] = [];
    
            syntax.forEach((item) => {
                if (item.syntaxContextType === SyntaxContextType.DATABASE) {
                    const databaseCompletions: ICompletionItem[] = []; // some completions about databaseName
                    syntaxCompletionItems = [...syntaxCompletionItems, ...databaseCompletions];
                }
                if (item.syntaxContextType === SyntaxContextType.TABLE) {
                    const tableCompletions: ICompletionItem[] = []; // some completions about tableName
                    syntaxCompletionItems = [...syntaxCompletionItems, ...tableCompletions];
                }
            });
    
            resolve([...syntaxCompletionItems, ...keywordsCompletionItems]);
        });
    };
    
    setupLanguageFeatures(LanguageIdEnum.FLINK, {
        completionItems: {
            enable: true,
            completionService: //... ,
        }
    });
  3. Create the Monaco Editor instance and specify the language you need

    import { LanguageIdEnum } from 'monaco-sql-languages';
    
    monaco.editor.create(document.getElementById('container'), {
        value: 'select * from tb_test',
        language: LanguageIdEnum.FLINK // languageId
    });

Monaco Theme

Monaco SQL Languages plan to support more themes in the future.

Monaco SQL Languages provides built-in Monaco Theme that is named vsPlusTheme. vsPlusTheme inspired by vscode default plus colorTheme and it contains three styles of themes inside:

  • darkTheme: Inherited from monaco built-in theme vs-dark;
  • lightTheme: Inherited from monaco built-in theme vs;
  • hcBlackTheme: Inherited from monaco built-in theme hc-black;

Use Monaco SQL Languages built-in vsPlusTheme

import { vsPlusTheme } from 'monaco-sql-languages';
import { editor } from 'monaco-editor';

// import themeData and defineTheme, you can customize the theme name, e.g. sql-dark
editor.defineTheme('sql-dark', vsPlusTheme.darkThemeData);
editor.defineTheme('sql-light', vsPlusTheme.lightThemeData);
editor.defineTheme('sql-hc', vsPlusTheme.hcBlackThemeData);

// specify the theme you have defined
editor.create(null as any, {
    theme: 'sql-dark',
    language: 'flinksql'
});

Customize your own Monaco theme

import { TokenClassConsts, postfixTokenClass } from 'monaco-sql-languages';

// Customize the various tokens style
const myThemeData: editor.IStandaloneThemeData = {
    base: 'vs-dark',
    inherit: true,
    rules: [
        { token: postfixTokenClass(TokenClassConsts.COMMENT), foreground: '6a9955' },
        { token: postfixTokenClass(TokenClassConsts.IDENTIFIER), foreground: '9cdcfe' },
        { token: postfixTokenClass(TokenClassConsts.KEYWORD), foreground: '569cd6' },
        { token: postfixTokenClass(TokenClassConsts.NUMBER), foreground: 'b5cea8' },
        { token: postfixTokenClass(TokenClassConsts.STRING), foreground: 'ce9178' },
        { token: postfixTokenClass(TokenClassConsts.TYPE), foreground: '4ec9b0' }
    ],
    colors: {}
};

// Define the monaco theme
editor.defineTheme('my-theme', myThemeData);

postfixTokenClass is not required in most cases, but since Monaco SQL Languages has tokenPostfix: 'sql' internally set for all SQL languages, in some cases your custom style may not work if you don't use postfixTokenClassClass to handle TokenClassConsts.*.


Dev: cheat sheet

  • initial setup

    pnpm install
  • open the dev web

    pnpm watch-esm
    cd website
    pnpm install
    pnpm dev
  • build

    pnpm build
  • run test

    pnpm test
    

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.


License

MIT