@fc-components/monaco-editor 0.1.9 → 0.1.11

package/dist/monaco-editor.esm.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
-import { languages, Range, editor, KeyMod, KeyCode, MarkerSeverity } from 'monaco-editor';
+import { languages, Range, editor, Selection, KeyMod, KeyCode, MarkerSeverity } from 'monaco-editor';
 import { promLanguageDefinition } from 'monaco-promql';
 import { parser, LabelMatchers, VectorSelector, PromQL, FunctionCallBody, StringLiteral, UnquotedLabelMatcher, BinaryExpr, NumberDurationLiteralInDurationContext, MatrixSelector, GroupingLabels, AggregateModifier, AggregateExpr, Identifier, LabelName, MatchOp, EqlSingle, EqlRegex, Neq, NeqRegex } from '@fc-components/lezer-metricsql';
 import { v4 } from 'uuid';
@@ -229,6 +229,9 @@ function _setPrototypeOf(t, e) {
     return t.__proto__ = e, t;
   }, _setPrototypeOf(t, e);
 }
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -1952,6 +1955,7 @@ function isErrorBoundary(boundary) {
 }
 
 var _excluded = ["error"];
+var _templateObject, _templateObject2;
 var PROMQL_LANG_ID = promLanguageDefinition.id;
 var SIZE_MAP = {
   small: {
@@ -1971,9 +1975,11 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'light',
+  light: 'n9e-light',
   dark: 'n9e-dark'
 };
+var containerDisabledClassName = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor {\n    user-select: none;\n    pointer-events: none;\n  }\n"])));
+var containerReadOnlyClassName = /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor .cursors-layer > .cursor {\n    opacity: 0 !important; /* \u5B8C\u5168\u900F\u660E */\n  }\n"])));
 var getStyles = function getStyles(placeholder) {
   return {
     placeholder: css({
@@ -1995,6 +2001,10 @@ function PromQLEditor(props) {
     interpolateString = props.interpolateString,
     _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,
     onShiftEnter = props.onShiftEnter,
     onBlur = props.onBlur,
@@ -2006,6 +2016,15 @@ function PromQLEditor(props) {
   var styles = getStyles(placeholder);
   var handleEditorDidMount = function handleEditorDidMount(editor$1) {
     editorRef.current = editor$1;
+    editor.defineTheme('n9e-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -2020,6 +2039,12 @@ function PromQLEditor(props) {
     editor$1.onDidBlurEditorWidget(function () {
       isEditorFocused.set(false);
       onBlur == null || onBlur(editor$1.getValue());
+      // reset the selection to the current position
+      var position = editor$1.getPosition();
+      if (position) {
+        var newSelection = new Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+        editor$1.setSelection(newSelection);
+      }
     });
     editor$1.onDidFocusEditorText(function () {
       isEditorFocused.set(true);
@@ -2155,7 +2180,7 @@ function PromQLEditor(props) {
     }
   }, [enableAutocomplete, props.url, props.lookbackInterval, JSON.stringify(props.variablesNames), props.durationVariablesCompletion, props.httpMethod, props.apiPrefix, placeholder]);
   return React.createElement("div", {
-    className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '')
+    className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '') + (disabled ? " ant-input-disabled " + containerDisabledClassName : '') + (readOnly ? " " + containerReadOnlyClassName : '')
   }, React.createElement("div", {
     ref: containerRef
   }, React.createElement(MonacoEditor, {
@@ -2167,6 +2192,7 @@ function PromQLEditor(props) {
     onChange: onChange,
     editorDidMount: handleEditorDidMount,
     options: {
+      readOnly: readOnly,
       codeLens: false,
       contextmenu: false,
       fixedOverflowWidgets: true,
@@ -2197,7 +2223,8 @@ function PromQLEditor(props) {
       },
       suggestFontSize: 12,
       wordWrap: 'on',
-      automaticLayout: true
+      automaticLayout: true,
+      occurrencesHighlight: 'off'
     }
   })));
 }