@baic/sql-editor

基于monaco-editor的SQL编辑器

使用

yarn add @baic/sql-editor

需要monaco-editor-webpack-plugin插件搭配

// 以umi为例
export default {
  chainWebpack: (memo) => {
    memo
      .plugin('monaco-editor-webpack-plugin')
      .use('monaco-editor-webpack-plugin', [['sql']]);
  }
}

React方式

import SqlEditor, { Kind } from '@baic/sql-editor';
const hintData = {
  databases: [
    {
      content: 'bigdata',
      kind: Kind.Struct,
      tables: [
        {
          content: 'auth',
          fields: [
            {
              content: 'id',
              kind: Kind.Field,
            },
          ],
          kind: Kind.Folder,
        },
        {
          content: 'role',
          fields: [
            {
              content: 'id',
              kind: Kind.Field,
            },
          ],
          kind: Kind.Folder,
        },
      ],
    },
  ],
  keywords: [
    {
      content: 'SELECT',
      kind: Kind.Keyword,
    },
    {
      content: 'INSERT',
      kind: Kind.Keyword,
    },
    {
      content: 'UPDATE',
      kind: Kind.Keyword,
    },
  ],
};
export default () => <SqlEditor hintData={hintData} />;

Dom方式

import { create, setHintData, Kind } from '@baic/sql-editor';

export default ({hintData}: any) => {
  React.useEffect(() => {
    create(
      document.getElementById('container')!,
      {},
      {
        databases: [
          {
            content: 'bigdata',
            kind: Kind.Struct,
            tables: [
              {
                content: 'auth',
                fields: [
                  {
                    content: 'id',
                    kind: Kind.Field,
                  },
                ],
                kind: Kind.Folder,
              },
              {
                content: 'role',
                fields: [
                  {
                    content: 'id',
                    kind: Kind.Field,
                  },
                ],
                kind: Kind.Folder,
              },
            ],
          },
        ],
        keywords: [
          {
            content: 'SELECT',
            kind: Kind.Keyword,
          },
          {
            content: 'INSERT',
            kind: Kind.Keyword,
          },
          {
            content: 'UPDATE',
            kind: Kind.Keyword,
          },
        ],
      },
    );
  }, []);
  React.useEffect(() => setHintData(hintData), [hintData]);
  return (
    <div
      id="container"
      style={{
        height: '100%',
      }}
    />
  );
};