@fc-components/monaco-editor 0.1.17 → 0.1.19

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 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/dist/monaco-editor.cjs.development.js

@@ -3214,6 +3214,465 @@ function YamlEditor(props) {
   })));
 }
 
+var languageConfiguration$2 = {
+  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
+  comments: {
+    lineComment: '--',
+    blockComment: ['/*', '*/']
+  },
+  brackets: [['{', '}'], ['[', ']'], ['(', ')']],
+  autoClosingPairs: [{
+    open: '{',
+    close: '}'
+  }, {
+    open: '[',
+    close: ']'
+  }, {
+    open: '(',
+    close: ')'
+  }, {
+    open: '"',
+    close: '"'
+  }, {
+    open: "'",
+    close: "'"
+  }, {
+    open: '`',
+    close: '`'
+  }],
+  surroundingPairs: [{
+    open: '{',
+    close: '}'
+  }, {
+    open: '[',
+    close: ']'
+  }, {
+    open: '(',
+    close: ')'
+  }, {
+    open: '"',
+    close: '"'
+  }, {
+    open: "'",
+    close: "'"
+  }, {
+    open: '`',
+    close: '`'
+  }],
+  folding: {
+    offSide: false
+  }
+};
+// SQL keywords
+var keywords$2 = ['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'];
+var language$2 = {
+  defaultToken: '',
+  tokenPostfix: '.sql',
+  ignoreCase: true,
+  brackets: [{
+    open: '(',
+    close: ')',
+    token: 'delimiter.parenthesis'
+  }, {
+    open: '{',
+    close: '}',
+    token: 'delimiter.curly'
+  }, {
+    open: '[',
+    close: ']',
+    token: 'delimiter.square'
+  }],
+  keywords: keywords$2,
+  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'
+    }]]
+  }
+};
+
+var 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'];
+var 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'
+}];
+var getSqlCompletionProvider = function getSqlCompletionProvider() {
+  return {
+    provideCompletionItems: function provideCompletionItems(model, position, _context, _token) {
+      var word = model.getWordUntilPosition(position);
+      var range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
+      var suggestions = [].concat(SQL_KEYWORDS.map(function (keyword) {
+        return {
+          label: keyword,
+          kind: monaco.languages.CompletionItemKind.Keyword,
+          insertText: keyword,
+          range: range,
+          sortText: '1' + keyword
+        };
+      }), SQL_FUNCTIONS.map(function (func) {
+        return {
+          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
+      };
+    }
+  };
+};
+
+var _templateObject$2, _templateObject2$2;
+var SQL_LANG_ID = 'sql';
+var SIZE_MAP$2 = {
+  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
+  }
+};
+var themeMap$2 = {
+  light: 'sql-light',
+  dark: 'sql-dark'
+};
+var containerDisabledClassName$2 = /*#__PURE__*/css.css(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor {\n    user-select: none;\n    pointer-events: none;\n  }\n"])));
+var containerReadOnlyClassName$2 = /*#__PURE__*/css.css(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor .cursors-layer > .cursor {\n    opacity: 0 !important;\n  }\n"])));
+function SqlEditor(props) {
+  var id = uuid.v4();
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    placeholder = props.placeholder,
+    _props$enableAutocomp = props.enableAutocomplete,
+    enableAutocomplete = _props$enableAutocomp === void 0 ? true : _props$enableAutocomp,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    onChange = props.onChange,
+    onEnter = props.onEnter,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    editorDidMount = props.editorDidMount;
+  var containerRef = React.useRef(null);
+  var editorRef = React.useRef(null);
+  var modelRef = React.useRef(null);
+  var disposablesRef = React.useRef([]);
+  React.useEffect(function () {
+    // Register language
+    if (!monaco.languages.getLanguages().some(function (lang) {
+      return lang.id === SQL_LANG_ID;
+    })) {
+      monaco.languages.register({
+        id: SQL_LANG_ID
+      });
+      monaco.languages.setMonarchTokensProvider(SQL_LANG_ID, language$2);
+      monaco.languages.setLanguageConfiguration(SQL_LANG_ID, languageConfiguration$2);
+    }
+    // Register completion provider
+    if (enableAutocomplete) {
+      var disposable = monaco.languages.registerCompletionItemProvider(SQL_LANG_ID, getSqlCompletionProvider());
+      disposablesRef.current.push(disposable);
+    }
+    return function () {
+      disposablesRef.current.forEach(function (disposable) {
+        return disposable.dispose();
+      });
+      disposablesRef.current = [];
+    };
+  }, [enableAutocomplete]);
+  var handleEditorMount = function handleEditorMount(editor) {
+    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'
+      }
+    });
+    var isEditorFocused = editor.createContextKey('isEditorFocused' + id, false);
+    // we setup on-blur
+    editor.onDidBlurEditorWidget(function () {
+      isEditorFocused.set(false);
+      onBlur == null || onBlur(editor.getValue());
+      // reset the selection to the current position
+      var position = editor.getPosition();
+      if (position) {
+        var newSelection = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+        editor.setSelection(newSelection);
+      }
+    });
+    editor.onDidFocusEditorText(function () {
+      isEditorFocused.set(true);
+      onFocus == null || onFocus(editor.getValue());
+    });
+    // set the height of the editor container
+    var updateElementHeight = function updateElementHeight() {
+      var containerDiv = containerRef.current;
+      if (containerDiv !== null) {
+        var pixelHeight = editor.getContentHeight();
+        containerDiv.style.height = pixelHeight + "px";
+        containerDiv.style.width = '100%';
+        var 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, function () {
+      // 在光标位置插入换行符
+      var 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, function () {
+      onEnter == null || onEnter(editor.getValue());
+    }, '!suggestWidgetVisible && isEditorFocused' + id);
+    editorDidMount == null || editorDidMount(editor);
+  };
+  var themeValue = themeMap$2[theme];
+  return React__default.createElement("div", {
+    className: 'ant-input' + (size ? " " + SIZE_MAP$2[size].className : '') + (disabled ? " ant-input-disabled " + containerDisabledClassName$2 : '') + (readOnly ? " " + containerReadOnlyClassName$2 : '')
+  }, React__default.createElement("div", {
+    ref: containerRef
+  }, React__default.createElement(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'
+    }
+  })));
+}
+
 exports.PromQLMonacoEditor = PromQLEditor;
+exports.SqlMonacoEditor = SqlEditor;
 exports.YamlMonacoEditor = YamlEditor;
 //# sourceMappingURL=monaco-editor.cjs.development.js.map