@fc-components/monaco-editor 0.3.1 → 0.3.2

package/dist/monaco-editor.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, forwardRef, useCallback, useImperativeHandle } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { languages, Range, editor, Selection, KeyMod, KeyCode, MarkerSeverity } from 'monaco-editor';
@@ -6,6 +6,7 @@ import { promLanguageDefinition } from 'monaco-promql';
 import { parser as parser$1, LabelName, UnquotedLabelMatcher, LabelMatchers, VectorSelector, PromQL, Identifier, FunctionCallBody, StringLiteral, BinaryExpr, NumberDurationLiteralInDurationContext, MatrixSelector, GroupingLabels, WithExpr, WithAssignment, AggregateModifier, AggregateExpr, MatchOp, EqlSingle, EqlRegex, Neq, NeqRegex } from '@fc-components/lezer-metricsql';
 import { v4 } from 'uuid';
 import { css } from '@emotion/css';
+import { format } from 'sql-formatter';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -3659,7 +3660,19 @@ var getSqlCompletionProvider = function getSqlCompletionProvider() {
   };
 };
 
-var _templateObject$2, _templateObject2$2;
+function formatSql(sql) {
+  try {
+    return format(sql, {
+      tabWidth: 2,
+      keywordCase: 'upper'
+    });
+  } catch (_unused) {
+    // If formatting fails, return the original SQL
+    return sql;
+  }
+}
+
+var _templateObject$2, _templateObject2$2, _templateObject3;
 var SQL_LANG_ID = 'sql';
 var SIZE_MAP$2 = {
   small: {
@@ -3687,7 +3700,8 @@ var themeMap$2 = {
 };
 var containerDisabledClassName$2 = /*#__PURE__*/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(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor .cursors-layer > .cursor {\n    opacity: 0 !important;\n  }\n"])));
-function SqlEditor(props) {
+var formatBtnClassName = /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n\n  &:hover {\n    opacity: 1;\n    background: var(--format-btn-hover-bg, rgba(128, 128, 128, 0.15));\n  }\n"])));
+var SqlEditor = /*#__PURE__*/forwardRef(function (props, ref) {
   var id = v4();
   var className = props.className,
     maxHeight = props.maxHeight,
@@ -3699,6 +3713,8 @@ function SqlEditor(props) {
     _props$value = props.value,
     value = _props$value === void 0 ? '' : _props$value,
     placeholder = props.placeholder,
+    _props$enableFormat = props.enableFormat,
+    enableFormat = _props$enableFormat === void 0 ? false : _props$enableFormat,
     _props$enableAutocomp = props.enableAutocomplete,
     enableAutocomplete = _props$enableAutocomp === void 0 ? true : _props$enableAutocomp,
     _props$readOnly = props.readOnly,
@@ -3709,7 +3725,8 @@ function SqlEditor(props) {
     onEnter = props.onEnter,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
-    editorDidMount = props.editorDidMount;
+    editorDidMount = props.editorDidMount,
+    renderFormatButton = props.renderFormatButton;
   var containerRef = useRef(null);
   var editorRef = useRef(null);
   var modelRef = useRef(null);
@@ -3823,6 +3840,18 @@ function SqlEditor(props) {
     }, '!suggestWidgetVisible && isEditorFocused' + id);
     editorDidMount == null || editorDidMount(editor$1);
   };
+  var handleFormat = useCallback(function () {
+    var editor = editorRef.current;
+    if (!editor) return;
+    var currentValue = editor.getValue();
+    var formatted = formatSql(currentValue);
+    editor.setValue(formatted);
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      format: handleFormat
+    };
+  });
   var themeValue = themeMap$2[theme];
   return React.createElement("div", {
     className: 'ant-input' + (size ? " " + SIZE_MAP$2[size].className : '') + (disabled ? " ant-input-disabled " + containerDisabledClassName$2 : '') + (readOnly ? " " + containerReadOnlyClassName$2 : '') + (className ? " " + className : ''),
@@ -3830,6 +3859,7 @@ function SqlEditor(props) {
       display: 'block',
       resize: 'vertical',
       overflow: 'auto',
+      position: 'relative',
       minHeight: SIZE_MAP$2[size].minHeight,
       maxHeight: maxHeight
     }
@@ -3879,8 +3909,41 @@ function SqlEditor(props) {
         alwaysConsumeMouseWheel: false
       }
     }
-  })));
-}
+  })), enableFormat && (renderFormatButton ? renderFormatButton(handleFormat) : React.createElement("button", {
+    onClick: handleFormat,
+    className: formatBtnClassName,
+    title: 'Format SQL',
+    style: {
+      '--format-btn-hover-bg': theme === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(128,128,128,0.15)'
+    }
+  }, React.createElement("svg", {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '16',
+    height: '16',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, React.createElement("path", {
+    d: 'm21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72'
+  }), React.createElement("path", {
+    d: 'm14 7 3 3'
+  }), React.createElement("path", {
+    d: 'M5 6v4'
+  }), React.createElement("path", {
+    d: 'M19 14v4'
+  }), React.createElement("path", {
+    d: 'M10 2v2'
+  }), React.createElement("path", {
+    d: 'M7 8H3'
+  }), React.createElement("path", {
+    d: 'M21 16h-4'
+  }), React.createElement("path", {
+    d: 'M11 3H9'
+  })))));
+});
 
 var languageConfiguration$3 = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,