@fc-components/monaco-editor 0.1.17 → 0.1.18

package/dist/sql/completion/getCompletionProvider.d.ts

@@ -0,0 +1,4 @@
+import * as monaco from 'monaco-editor';
+export declare const getSqlCompletionProvider: () => {
+    provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position, _context: monaco.languages.CompletionContext, _token: monaco.CancellationToken): monaco.languages.ProviderResult<monaco.languages.CompletionList>;
+};

package/dist/sql/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+interface SqlEditorProps {
+    size?: 'small' | 'middle' | 'large';
+    theme?: 'light' | 'dark';
+    value?: string;
+    placeholder?: string;
+    enableAutocomplete?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+}
+export default function SqlEditor(props: SqlEditorProps): React.JSX.Element;
+export {};

package/dist/sql/sql.d.ts

@@ -0,0 +1,85 @@
+export declare const languageConfiguration: {
+    wordPattern: RegExp;
+    comments: {
+        lineComment: string;
+        blockComment: [string, string];
+    };
+    brackets: any;
+    autoClosingPairs: any;
+    surroundingPairs: any;
+    folding: {
+        offSide: boolean;
+    };
+};
+export declare const language: {
+    defaultToken: string;
+    tokenPostfix: string;
+    ignoreCase: boolean;
+    brackets: {
+        open: string;
+        close: string;
+        token: string;
+    }[];
+    keywords: string[];
+    operators: string[];
+    builtinFunctions: string[];
+    escapes: RegExp;
+    digits: RegExp;
+    octaldigits: RegExp;
+    hexdigits: RegExp;
+    regexpctl: RegExp;
+    regexpattern: RegExp;
+    tokenizer: {
+        root: ((string | RegExp)[] | {
+            include: string;
+        } | (RegExp | {
+            cases: {
+                '@builtinFunctions': string;
+                '@default': string;
+            };
+        })[] | (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[])[];
+        whitespace: (string | RegExp)[][];
+        comments: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        comment: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        'pseudo-columns': (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[][];
+        builtinVariables: (RegExp | {
+            cases: {
+                '@keywords': string;
+                '@default': string;
+            };
+        })[][];
+        numbers: (string | RegExp)[][];
+        strings: (RegExp | {
+            token: string;
+            next: string;
+        })[][];
+        string: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        string_double: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+        string_backtick: ((string | RegExp)[] | (RegExp | {
+            token: string;
+            next: string;
+        })[])[];
+    };
+};

package/dist/sql/types.d.ts

@@ -0,0 +1,8 @@
+export interface SqlEditorMarker {
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+    message: string;
+    severity: 'Error' | 'Warning' | 'Information';
+}

package/dist/sql/validation.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export declare const validateSql: (sql: string) => Omit<monaco.editor.IMarker, 'owner' | 'resource'>[];

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.17",
+  "version": "0.1.18",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/index.tsx

@@ -1,5 +1,7 @@
 import promql from './promql';
 import yaml from './yaml';
+import sql from './sql';
 
 export { promql as PromQLMonacoEditor };
 export { yaml as YamlMonacoEditor };
+export { sql as SqlMonacoEditor };

package/src/sql/README.md

@@ -0,0 +1,140 @@
+# SQL Editor
+
+这是一个基于 Monaco Editor 和 `monaco-sql-languages` 的 SQL 编辑器组件。
+
+## 功能特性
+
+- ✨ 完整的 SQL 语法高亮
+- 🎯 智能代码补全（关键字、函数等）
+- ✅ SQL 语法验证（括号、引号匹配等）
+- 🎨 支持浅色和深色主题
+- 📏 支持不同尺寸（small, middle, large）
+- ♿ 只读和禁用模式
+- 🎹 快捷键支持（Ctrl+Enter 执行）
+
+## 使用方法
+
+### 基本用法
+
+```tsx
+import { SqlMonacoEditor } from '@fc-components/monaco-editor';
+
+function MyComponent() {
+  const [sql, setSql] = React.useState('SELECT * FROM users;');
+
+  return (
+    <div style={{ height: '400px' }}>
+      <SqlMonacoEditor value={sql} onChange={setSql} placeholder='Enter SQL query...' />
+    </div>
+  );
+}
+```
+
+### 完整示例
+
+```tsx
+import React, { useState } from 'react';
+import { SqlMonacoEditor } from '@fc-components/monaco-editor';
+
+function SqlQueryBuilder() {
+  const [sql, setSql] = useState('');
+  const [result, setResult] = useState<any>(null);
+
+  const handleChange = (value: string) => {
+    setSql(value);
+  };
+
+  const handleExecute = (value: string) => {
+    console.log('执行 SQL:', value);
+    // 发送到后端执行
+  };
+
+  const handleBlur = (value: string) => {
+    console.log('SQL 失焦:', value);
+  };
+
+  return (
+    <div>
+      <div style={{ height: '300px', border: '1px solid #ccc', marginBottom: '20px' }}>
+        <SqlMonacoEditor
+          size='large'
+          theme='light'
+          value={sql}
+          placeholder='输入 SQL 查询...'
+          enableAutocomplete={true}
+          onChange={handleChange}
+          onEnter={handleExecute}
+          onBlur={handleBlur}
+        />
+      </div>
+      {result && (
+        <div>
+          <h3>查询结果:</h3>
+          <pre>{JSON.stringify(result, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SqlQueryBuilder;
+```
+
+## Props
+
+| 参数                 | 类型                           | 默认值   | 说明                   |
+| -------------------- | ------------------------------ | -------- | ---------------------- |
+| `size`               | 'small' \| 'middle' \| 'large' | 'middle' | 编辑器尺寸             |
+| `theme`              | 'light' \| 'dark'              | 'light'  | 主题                   |
+| `value`              | string                         | ''       | 编辑器内容             |
+| `placeholder`        | string                         | -        | 占位符文本             |
+| `enableAutocomplete` | boolean                        | true     | 启用代码补全           |
+| `readOnly`           | boolean                        | false    | 只读模式               |
+| `disabled`           | boolean                        | false    | 禁用编辑               |
+| `onChange`           | (value: string) => void        | -        | 内容变化回调           |
+| `onEnter`            | (value: string) => void        | -        | Ctrl+Enter 时触发      |
+| `onBlur`             | (value: string) => void        | -        | 编辑器失焦时触发       |
+| `editorDidMount`     | (editor) => void               | -        | 编辑器挂载完成后的回调 |
+
+## 快捷键
+
+- **Ctrl+Enter** 或 **Cmd+Enter**: 触发 `onEnter` 事件（通常用于执行查询）
+- **Ctrl+Z** 或 **Cmd+Z**: 撤销
+- **Ctrl+Y** 或 **Cmd+Y**: 重做
+- **Ctrl+F** 或 **Cmd+F**: 查找
+- **Ctrl+H** 或 **Cmd+H**: 查找替换
+- **Ctrl+L**: 选中当前行
+
+## 支持的 SQL 关键字
+
+包括 SELECT, FROM, WHERE, JOIN, GROUP BY, ORDER BY, INSERT, UPDATE, DELETE, CREATE, DROP 等。
+
+## 支持的 SQL 函数
+
+- 聚合函数: COUNT, SUM, AVG, MIN, MAX
+- 字符串函数: UPPER, LOWER, LENGTH, SUBSTRING, TRIM, CONCAT
+- 数值函数: ROUND, ABS
+- 日期函数: DATE, NOW, YEAR, MONTH, DAY
+- 其他函数: COALESCE, NULLIF, IFNULL
+
+## 验证
+
+编辑器会自动检测以下 SQL 语法问题：
+
+- 未闭合的单引号、双引号和反引号
+- 未匹配的括号
+- 其他基本的语法问题
+
+## 主题定制
+
+如需自定义主题，可以添加 CSS 规则覆盖默认样式：
+
+```css
+.sql-light {
+  /* 浅色主题样式 */
+}
+
+.sql-dark {
+  /* 深色主题样式 */
+}
+```

package/src/sql/completion/getCompletionProvider.ts

@@ -0,0 +1,125 @@
+import * as monaco from 'monaco-editor';
+
+const SQL_KEYWORDS = [
+  'SELECT',
+  'FROM',
+  'WHERE',
+  'AND',
+  'OR',
+  'NOT',
+  'JOIN',
+  'INNER',
+  'LEFT',
+  'RIGHT',
+  'FULL',
+  'OUTER',
+  'ON',
+  'ORDER',
+  'BY',
+  'GROUP',
+  'HAVING',
+  'LIMIT',
+  'OFFSET',
+  'INSERT',
+  'INTO',
+  'VALUES',
+  'UPDATE',
+  'SET',
+  'DELETE',
+  'CREATE',
+  'TABLE',
+  'ALTER',
+  'DROP',
+  'PRIMARY',
+  'KEY',
+  'FOREIGN',
+  'CONSTRAINT',
+  'UNIQUE',
+  'INDEX',
+  'VIEW',
+  'DATABASE',
+  'SCHEMA',
+  'AS',
+  'DISTINCT',
+  'CASE',
+  'WHEN',
+  'THEN',
+  'ELSE',
+  'END',
+  'CAST',
+  'BETWEEN',
+  'IN',
+  'LIKE',
+  'IS',
+  'NULL',
+  'TRUE',
+  'FALSE',
+  'WITH',
+  'UNION',
+  'EXCEPT',
+  'INTERSECT',
+  'ASC',
+  'DESC',
+  'ALL',
+  'ANY',
+  'EXISTS',
+  'CROSS',
+];
+
+const SQL_FUNCTIONS = [
+  { name: 'COUNT', signature: 'COUNT(expression)', description: 'Returns the number of rows' },
+  { name: 'SUM', signature: 'SUM(expression)', description: 'Returns the sum of values' },
+  { name: 'AVG', signature: 'AVG(expression)', description: 'Returns the average value' },
+  { name: 'MIN', signature: 'MIN(expression)', description: 'Returns the minimum value' },
+  { name: 'MAX', signature: 'MAX(expression)', description: 'Returns the maximum value' },
+  { name: 'UPPER', signature: 'UPPER(string)', description: 'Converts string to uppercase' },
+  { name: 'LOWER', signature: 'LOWER(string)', description: 'Converts string to lowercase' },
+  { name: 'LENGTH', signature: 'LENGTH(string)', description: 'Returns the length of string' },
+  { name: 'SUBSTRING', signature: 'SUBSTRING(string, start, length)', description: 'Extracts substring' },
+  { name: 'TRIM', signature: 'TRIM(string)', description: 'Removes leading and trailing spaces' },
+  { name: 'ROUND', signature: 'ROUND(number, decimals)', description: 'Rounds a number' },
+  { name: 'ABS', signature: 'ABS(number)', description: 'Returns absolute value' },
+  { name: 'COALESCE', signature: 'COALESCE(value1, value2, ...)', description: 'Returns first non-null value' },
+  { name: 'NULLIF', signature: 'NULLIF(value1, value2)', description: 'Returns null if two values are equal' },
+  { name: 'IFNULL', signature: 'IFNULL(value, default)', description: 'Returns alternative if null' },
+  { name: 'CONCAT', signature: 'CONCAT(string1, string2, ...)', description: 'Concatenates strings' },
+  { name: 'DATE', signature: 'DATE(date)', description: 'Extracts date part' },
+  { name: 'NOW', signature: 'NOW()', description: 'Returns current date and time' },
+];
+
+export const getSqlCompletionProvider = () => {
+  return {
+    provideCompletionItems(
+      model: monaco.editor.ITextModel,
+      position: monaco.Position,
+      _context: monaco.languages.CompletionContext,
+      _token: monaco.CancellationToken,
+    ): monaco.languages.ProviderResult<monaco.languages.CompletionList> {
+      const word = model.getWordUntilPosition(position);
+      const range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
+
+      const suggestions: monaco.languages.CompletionItem[] = [
+        ...SQL_KEYWORDS.map((keyword) => ({
+          label: keyword,
+          kind: monaco.languages.CompletionItemKind.Keyword,
+          insertText: keyword,
+          range: range,
+          sortText: '1' + keyword,
+        })),
+        ...SQL_FUNCTIONS.map((func) => ({
+          label: func.name,
+          kind: monaco.languages.CompletionItemKind.Function,
+          insertText: func.name,
+          detail: func.signature,
+          documentation: func.description,
+          range: range,
+          sortText: '2' + func.name,
+        })),
+      ];
+
+      return {
+        suggestions: suggestions,
+      };
+    },
+  };
+};

package/src/sql/index.tsx

@@ -0,0 +1,263 @@
+import React, { useEffect, useRef } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import * as monaco from 'monaco-editor';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+import { v4 as uuidv4 } from 'uuid';
+import { css } from '@emotion/css';
+
+import { language, languageConfiguration } from './sql';
+import { getSqlCompletionProvider } from './completion/getCompletionProvider';
+// import { validateSql } from './validation';
+
+interface SqlEditorProps {
+  size?: 'small' | 'middle' | 'large';
+  theme?: 'light' | 'dark';
+  value?: string;
+  placeholder?: string;
+  enableAutocomplete?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onEnter?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+}
+
+const SQL_LANG_ID = 'sql';
+const SIZE_MAP: Record<
+  string,
+  {
+    className: string;
+    top: number;
+    bottom: number;
+  }
+> = {
+  small: {
+    className: 'ant-input-sm',
+    top: 1,
+    bottom: 1,
+  },
+  middle: {
+    className: 'ant-input-md',
+    top: 1,
+    bottom: 1,
+  },
+  large: {
+    className: 'ant-input-lg',
+    top: 3,
+    bottom: 2,
+  },
+};
+
+const themeMap: Record<string, string> = {
+  light: 'sql-light',
+  dark: 'sql-dark',
+};
+
+const containerDisabledClassName = css`
+  .monaco-editor {
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+
+const containerReadOnlyClassName = css`
+  .monaco-editor .cursors-layer > .cursor {
+    opacity: 0 !important;
+  }
+`;
+
+export default function SqlEditor(props: SqlEditorProps) {
+  const id = uuidv4();
+  const {
+    size = 'middle',
+    theme = 'light',
+    value = '',
+    placeholder,
+    enableAutocomplete = true,
+    readOnly = false,
+    disabled = false,
+    onChange,
+    onEnter,
+    onBlur,
+    editorDidMount,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
+  const modelRef = useRef<monaco.editor.ITextModel | null>(null);
+  const disposablesRef = useRef<monaco.IDisposable[]>([]);
+
+  useEffect(() => {
+    // Register language
+    if (!monaco.languages.getLanguages().some((lang) => lang.id === SQL_LANG_ID)) {
+      monaco.languages.register({ id: SQL_LANG_ID });
+      monaco.languages.setMonarchTokensProvider(SQL_LANG_ID, language as any);
+      monaco.languages.setLanguageConfiguration(SQL_LANG_ID, languageConfiguration);
+    }
+
+    // Register completion provider
+    if (enableAutocomplete) {
+      const disposable = monaco.languages.registerCompletionItemProvider(SQL_LANG_ID, getSqlCompletionProvider());
+      disposablesRef.current.push(disposable);
+    }
+
+    return () => {
+      disposablesRef.current.forEach((disposable) => disposable.dispose());
+      disposablesRef.current = [];
+    };
+  }, [enableAutocomplete]);
+
+  const handleEditorMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
+    modelRef.current = editor.getModel();
+
+    monaco.editor.defineTheme('sql-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
+    monaco.editor.defineTheme('sql-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
+    const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
+    // we setup on-blur
+    editor.onDidBlurEditorWidget(() => {
+      isEditorFocused.set(false);
+      onBlur?.(editor.getValue());
+      // reset the selection to the current position
+      const position = editor.getPosition();
+      if (position) {
+        const newSelection = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+        editor.setSelection(newSelection);
+      }
+    });
+
+    editor.onDidFocusEditorText(() => {
+      isEditorFocused.set(true);
+    });
+
+    // set the height of the editor container
+    const updateElementHeight = () => {
+      const containerDiv = containerRef.current;
+      if (containerDiv !== null) {
+        const pixelHeight = editor.getContentHeight();
+        containerDiv.style.height = `${pixelHeight}px`;
+        containerDiv.style.width = '100%';
+        const pixelWidth = containerDiv.clientWidth;
+        editor.layout({ width: pixelWidth, height: pixelHeight });
+      }
+    };
+
+    editor.onDidContentSizeChange(updateElementHeight);
+    updateElementHeight();
+
+    // Fixes Monaco capturing the search key binding and displaying a useless search box within the Editor.
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+      command: null,
+    });
+
+    // 设置 Shift + Enter 为在光标位置换行
+    editor.addCommand(
+      monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+      () => {
+        // 在光标位置插入换行符
+        const position = editor.getPosition();
+        if (position) {
+          editor.executeEdits('shift-enter', [
+            {
+              range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+              text: '\n',
+            },
+          ]);
+          // 将光标移动到新行
+          editor.setPosition({
+            lineNumber: position.lineNumber + 1,
+            column: 1,
+          });
+        }
+      },
+      'isEditorFocused' + id,
+    );
+
+    // 完全阻止 Enter 键的默认行为（包括换行）
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyCode.Enter,
+      command: '-',
+      when: '!suggestWidgetVisible',
+    });
+
+    // handle: enter - 只有在没有建议窗口时才执行自定义行为
+    editor.addCommand(
+      monaco.KeyCode.Enter,
+      () => {
+        onEnter?.(editor.getValue());
+      },
+      '!suggestWidgetVisible && isEditorFocused' + id,
+    );
+
+    editorDidMount?.(editor);
+  };
+
+  const themeValue = themeMap[theme];
+
+  return (
+    <div
+      className={
+        'ant-input' +
+        (size ? ` ${SIZE_MAP[size].className}` : '') +
+        (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
+        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+      }
+    >
+      <div ref={containerRef}>
+        <MonacoEditor
+          width='100%'
+          height='100%'
+          language={SQL_LANG_ID}
+          theme={themeValue}
+          value={value}
+          onChange={onChange}
+          editorDidMount={handleEditorMount}
+          options={{
+            minimap: { enabled: false },
+            autoClosingBrackets: 'always',
+            autoClosingQuotes: 'always',
+            autoIndent: 'full',
+            formatOnPaste: true,
+            formatOnType: true,
+            readOnly: readOnly || disabled,
+            scrollBeyondLastLine: false,
+            smoothScrolling: true,
+            tabSize: 2,
+            wordWrap: 'on',
+            automaticLayout: true,
+            glyphMargin: false,
+            lineNumbers: 'off',
+            lineNumbersMinChars: 0,
+            folding: false,
+            lineDecorationsWidth: 0,
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            placeholder: placeholder,
+            renderLineHighlight: 'none',
+            occurrencesHighlight: 'off',
+          }}
+        />
+      </div>
+    </div>
+  );
+}