@fc-components/monaco-editor 0.1.9 → 0.1.11

package/README.md

@@ -5,16 +5,23 @@ import { PromQLMonacoEditor } from '@fc-components/monaco-editor';
 
 const App = () => {
   const [value, setValue] = React.useState<string>();
-  const promQLMonacoEditorRef = React.useRef<typeof PromQLMonacoEditor | null>(null);
+  const [enableAutocomplete, setEnableAutocomplete] = React.useState<boolean>(true);
+  const [variablesNames, setVariablesNames] = React.useState<string[]>(['$job', '$instance']);
+  const [placeholder, setPlaceholder] = React.useState<string>('Enter your PromQL query here...');
+  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
+  const [readOnly, setReadOnly] = React.useState<boolean>(false);
+  const [disabled, setDisabled] = React.useState<boolean>(false);
+  const editorRef = React.useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
 
   return (
     <div style={{ padding: 16 }}>
       <PromQLMonacoEditor
-        ref={promQLMonacoEditorRef}
-        theme='light' // or 'dark'
+        readOnly={readOnly} // Set to true to make the editor read-only
+        disabled={disabled} // Set to true to disable the editor
+        theme={theme} // or 'dark'
         size='middle' // 'small', 'middle', or 'large'
-        placeholder='Enter your PromQL query here...'
-        variablesNames={['$job', '$instance']} // Example variable names
+        placeholder={placeholder}
+        variablesNames={variablesNames} // Example variable names
         apiPrefix='/api/n9e/proxy/1/api/v1'
         request={(resource, options) => {
           const params = options?.body?.toString();
@@ -27,7 +34,7 @@ const App = () => {
           });
         }}
         value={value}
-        enableAutocomplete={true} // Enable completion
+        enableAutocomplete={enableAutocomplete} // Enable completion
         durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
         interpolateString={(query) => {
           // Interpolate variables in the query string
@@ -43,12 +50,65 @@ const App = () => {
           console.log('Value changed:', value);
           setValue(value);
         }}
+        editorDidMount={(editor) => {
+          editorRef.current = editor;
+        }}
       />
+      <div style={{ marginTop: 16 }}>
+        <label>
+          <input type='checkbox' checked={enableAutocomplete} onChange={(e) => setEnableAutocomplete(e.target.checked)} /> Enable Autocomplete
+        </label>
+        <label style={{ marginLeft: 16 }}>
+          <a
+            onClick={() => {
+              setVariablesNames(['$job', '$instance', '$newVariable']);
+            }}
+          >
+            Update Variables
+          </a>
+        </label>
+        <label style={{ marginLeft: 16 }}>
+          <a
+            onClick={() => {
+              setPlaceholder('New Placeholder Text');
+            }}
+          >
+            Update Placeholder
+          </a>
+        </label>
+        <label style={{ marginLeft: 16 }}>
+          <a
+            onClick={() => {
+              setTheme(theme === 'light' ? 'dark' : 'light');
+            }}
+          >
+            Switch theme
+          </a>
+        </label>
+        <label style={{ marginLeft: 16 }}>
+          <a
+            onClick={() => {
+              setReadOnly(!readOnly);
+            }}
+          >
+            Switch Read-Only Mode
+          </a>
+        </label>
+        <label style={{ marginLeft: 16 }}>
+          <a
+            onClick={() => {
+              setDisabled(!disabled);
+            }}
+          >
+            Switch Disabled Mode
+          </a>
+        </label>
+      </div>
       <div>
         <a
           onClick={() => {
-            if (promQLMonacoEditorRef.current) {
-              const editor = promQLMonacoEditorRef.current.getEditor();
+            if (editorRef.current) {
+              const editor = editorRef.current;
               editor.trigger('keyboard', 'type', { text: 'Insert Text' });
               editor.focus();
             }

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

@@ -235,6 +235,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];
@@ -1958,6 +1961,7 @@ function isErrorBoundary(boundary) {
 }
 
 var _excluded = ["error"];
+var _templateObject, _templateObject2;
 var PROMQL_LANG_ID = monacoPromql.promLanguageDefinition.id;
 var SIZE_MAP = {
   small: {
@@ -1977,9 +1981,11 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'light',
+  light: 'n9e-light',
   dark: 'n9e-dark'
 };
+var containerDisabledClassName = /*#__PURE__*/css.css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .monaco-editor {\n    user-select: none;\n    pointer-events: none;\n  }\n"])));
+var containerReadOnlyClassName = /*#__PURE__*/css.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.css({
@@ -2001,6 +2007,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,
@@ -2012,6 +2022,15 @@ function PromQLEditor(props) {
   var styles = getStyles(placeholder);
   var handleEditorDidMount = function handleEditorDidMount(editor) {
     editorRef.current = editor;
+    monaco.editor.defineTheme('n9e-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -2026,6 +2045,12 @@ function PromQLEditor(props) {
     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);
@@ -2161,7 +2186,7 @@ function PromQLEditor(props) {
     }
   }, [enableAutocomplete, props.url, props.lookbackInterval, JSON.stringify(props.variablesNames), props.durationVariablesCompletion, props.httpMethod, props.apiPrefix, placeholder]);
   return React__default.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__default.createElement("div", {
     ref: containerRef
   }, React__default.createElement(MonacoEditor, {
@@ -2173,6 +2198,7 @@ function PromQLEditor(props) {
     onChange: onChange,
     editorDidMount: handleEditorDidMount,
     options: {
+      readOnly: readOnly,
       codeLens: false,
       contextmenu: false,
       fixedOverflowWidgets: true,
@@ -2203,7 +2229,8 @@ function PromQLEditor(props) {
       },
       suggestFontSize: 12,
       wordWrap: 'on',
-      automaticLayout: true
+      automaticLayout: true,
+      occurrencesHighlight: 'off'
     }
   })));
 }