@fc-components/monaco-editor 0.3.1 → 0.3.3

package/dist/monaco-editor.cjs.development.js

@@ -12,6 +12,7 @@ var monacoPromql = require('monaco-promql');
 var lezerMetricsql = require('@fc-components/lezer-metricsql');
 var uuid = require('uuid');
 var css = require('@emotion/css');
+var sqlFormatter = require('sql-formatter');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -3665,7 +3666,19 @@ var getSqlCompletionProvider = function getSqlCompletionProvider() {
   };
 };
 
-var _templateObject$2, _templateObject2$2;
+function formatSql(sql) {
+  try {
+    return sqlFormatter.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: {
@@ -3693,7 +3706,8 @@ var themeMap$2 = {
 };
 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 formatBtnClassName = /*#__PURE__*/css.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: 1;\n  transition: opacity 0.15s;\n\n  &:hover {\n    background: var(--format-btn-hover-bg, rgba(128, 128, 128, 0.15));\n  }\n"])));
+var SqlEditor = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = uuid.v4();
   var className = props.className,
     maxHeight = props.maxHeight,
@@ -3705,6 +3719,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,
@@ -3715,7 +3731,8 @@ function SqlEditor(props) {
     onEnter = props.onEnter,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
-    editorDidMount = props.editorDidMount;
+    editorDidMount = props.editorDidMount,
+    renderFormatButton = props.renderFormatButton;
   var containerRef = React.useRef(null);
   var editorRef = React.useRef(null);
   var modelRef = React.useRef(null);
@@ -3829,6 +3846,18 @@ function SqlEditor(props) {
     }, '!suggestWidgetVisible && isEditorFocused' + id);
     editorDidMount == null || editorDidMount(editor);
   };
+  var handleFormat = React.useCallback(function () {
+    var editor = editorRef.current;
+    if (!editor) return;
+    var currentValue = editor.getValue();
+    var formatted = formatSql(currentValue);
+    editor.setValue(formatted);
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      format: handleFormat
+    };
+  });
   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 : '') + (className ? " " + className : ''),
@@ -3836,6 +3865,7 @@ function SqlEditor(props) {
       display: 'block',
       resize: 'vertical',
       overflow: 'auto',
+      position: 'relative',
       minHeight: SIZE_MAP$2[size].minHeight,
       maxHeight: maxHeight
     }
@@ -3885,8 +3915,41 @@ function SqlEditor(props) {
         alwaysConsumeMouseWheel: false
       }
     }
-  })));
-}
+  })), enableFormat && (renderFormatButton ? renderFormatButton(handleFormat) : React__default.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__default.createElement("svg", {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '12',
+    height: '12',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: '1',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, React__default.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__default.createElement("path", {
+    d: 'm14 7 3 3'
+  }), React__default.createElement("path", {
+    d: 'M5 6v4'
+  }), React__default.createElement("path", {
+    d: 'M19 14v4'
+  }), React__default.createElement("path", {
+    d: 'M10 2v2'
+  }), React__default.createElement("path", {
+    d: 'M7 8H3'
+  }), React__default.createElement("path", {
+    d: 'M21 16h-4'
+  }), React__default.createElement("path", {
+    d: 'M11 3H9'
+  })))));
+});
 
 var languageConfiguration$3 = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,