@fc-components/monaco-editor 0.1.16 → 0.1.18

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>
+  );
+}

package/src/sql/sql.ts

@@ -0,0 +1,250 @@
+export const languageConfiguration = {
+  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
+  comments: {
+    lineComment: '--',
+    blockComment: ['/*', '*/'] as [string, string],
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')'],
+  ] as any,
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+    { open: '`', close: '`' },
+  ] as any,
+  surroundingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+    { open: '`', close: '`' },
+  ] as any,
+  folding: {
+    offSide: false,
+  },
+};
+
+// SQL keywords
+const 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',
+];
+
+export const language = {
+  defaultToken: '',
+  tokenPostfix: '.sql',
+  ignoreCase: true,
+
+  brackets: [
+    { open: '(', close: ')', token: 'delimiter.parenthesis' },
+    { open: '{', close: '}', token: 'delimiter.curly' },
+    { open: '[', close: ']', token: 'delimiter.square' },
+  ],
+
+  keywords,
+
+  operators: ['=', '>', '<', '!', '%', '&', '|', '^', '~', '?', ':', '+', '-', '*', '/'],
+
+  builtinFunctions: [
+    'COUNT',
+    'SUM',
+    'AVG',
+    'MIN',
+    'MAX',
+    'UPPER',
+    'LOWER',
+    'LENGTH',
+    'SUBSTRING',
+    'TRIM',
+    'ROUND',
+    'ABS',
+    'COALESCE',
+    'NULLIF',
+    'IFNULL',
+    'CONCAT',
+    'DATE',
+    'NOW',
+    'YEAR',
+    'MONTH',
+    'DAY',
+    'HOUR',
+    'MINUTE',
+    'SECOND',
+  ],
+
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+  digits: /\d+(_+\d+)*/,
+
+  octaldigits: /[0-7]+(_+[0-7]+)*/,
+
+  hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+
+  regexpctl: /[(){}\[\]\|;,.?*+^$\\]/,
+
+  regexpattern: /(\{[0-9]+\})|(\{[0-9]*,[0-9]*\})|(\?(?:\?)?|[*+]|\^|\$|\|\\)/,
+
+  tokenizer: {
+    root: [
+      { include: '@comments' },
+      { include: '@whitespace' },
+      { include: '@pseudo-columns' },
+      [/[;,.]/, 'delimiter'],
+      [/[{}()\[\]]/, '@brackets'],
+      { include: '@builtinVariables' },
+      { include: '@numbers' },
+      { include: '@strings' },
+      [/[a-zA-Z_#][a-zA-Z0-9_$#@]*(?=\s*\()/, { cases: { '@builtinFunctions': 'keyword.function', '@default': 'identifier.function' } }],
+      [
+        /[a-zA-Z_#][a-zA-Z0-9_$#@]*/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'identifier',
+          },
+        },
+      ],
+      [/[<>=!%&+\-*/|~^]/, 'operator'],
+    ],
+
+    whitespace: [[/\s+/, 'white']],
+
+    comments: [
+      [/--+.*/, 'comment'],
+      [/\/\*/, { token: 'comment.quote', next: '@comment' }],
+    ],
+
+    comment: [
+      [/[^*/]+/, 'comment'],
+      [/\*\//, { token: 'comment.quote', next: '@pop' }],
+      [/./, 'comment'],
+    ],
+
+    'pseudo-columns': [
+      [
+        /[$][A-Za-z_][A-Za-z0-9_]*/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'variable',
+          },
+        },
+      ],
+      [
+        /@[A-Za-z_][A-Za-z0-9_]*/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'variable',
+          },
+        },
+      ],
+    ],
+
+    builtinVariables: [
+      [
+        /@@?[a-zA-Z_][a-zA-Z0-9_]*/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'variable',
+          },
+        },
+      ],
+    ],
+
+    numbers: [
+      [/0[xX][0-9a-fA-F]*[0-9a-fA-F]/, 'number.hex'],
+      [/0[0-7]+(?!\d)/, 'number.octal'],
+      [/(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?/, 'number'],
+    ],
+
+    strings: [
+      [/'/, { token: 'string', next: '@string' }],
+      [/"/, { token: 'string.double', next: '@string_double' }],
+      [/`/, { token: 'string.backtick', next: '@string_backtick' }],
+    ],
+
+    string: [
+      [/[^'\\]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, { token: 'string', next: '@pop' }],
+    ],
+
+    string_double: [
+      [/[^"\\]+/, 'string.double'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, { token: 'string.double', next: '@pop' }],
+    ],
+
+    string_backtick: [
+      [/[^`\\]+/, 'string.backtick'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/`/, { token: 'string.backtick', next: '@pop' }],
+    ],
+  },
+};

package/src/sql/types.ts

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

package/src/sql/validation.ts

@@ -0,0 +1,92 @@
+import * as monaco from 'monaco-editor';
+
+const SQL_LANG_ID = 'sql';
+
+export const validateSql = (sql: string): Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] => {
+  const markers: Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] = [];
+
+  if (!sql || sql.trim().length === 0) {
+    return markers;
+  }
+
+  // Basic SQL validation - check for common syntax issues
+  const lines = sql.split('\n');
+
+  lines.forEach((line, index) => {
+    const lineNumber = index + 1;
+
+    // Check for incomplete quotes
+    const singleQuotes = (line.match(/'/g) || []).length;
+    const doubleQuotes = (line.match(/"/g) || []).length;
+    const backticks = (line.match(/`/g) || []).length;
+
+    if (singleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: "Unclosed single quote '",
+        code: 'SQL001',
+        source: SQL_LANG_ID,
+      });
+    }
+
+    if (doubleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed double quote "',
+        code: 'SQL002',
+        source: SQL_LANG_ID,
+      });
+    }
+
+    if (backticks % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed backtick `',
+        code: 'SQL003',
+        source: SQL_LANG_ID,
+      });
+    }
+
+    // Check for unmatched parentheses (basic check)
+    const openParens = (line.match(/\(/g) || []).length;
+    const closeParens = (line.match(/\)/g) || []).length;
+
+    if (openParens > closeParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening parenthesis',
+        code: 'SQL004',
+        source: SQL_LANG_ID,
+      });
+    } else if (closeParens > openParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing parenthesis',
+        code: 'SQL005',
+        source: SQL_LANG_ID,
+      });
+    }
+  });
+
+  return markers;
+};