@fc-components/monaco-editor 0.1.10 → 0.1.12

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,14 +34,14 @@ 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
           return query.replace(/\$__interval/g, '10s');
         }}
-        onShiftEnter={(value) => {
-          console.log('Shift+Enter pressed, current value:', value);
+        onEnter={(value) => {
+          console.log('Enter pressed, current value:', value);
         }}
         onBlur={(value) => {
           console.log('Editor lost focus, current value:', value);
@@ -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({
@@ -2003,8 +2009,10 @@ function PromQLEditor(props) {
     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,
+    onEnter = props.onEnter,
     onBlur = props.onBlur,
     editorDidMount = props.editorDidMount;
   var autocompleteDisposeFun = React.useRef(null);
@@ -2014,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,
@@ -2059,10 +2076,32 @@ function PromQLEditor(props) {
       keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
       command: null
     });
-    // handle: shift + enter
+    // 设置 Shift + Enter 为在光标位置换行
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function () {
-      onShiftEnter == null || onShiftEnter(editor.getValue());
+      // 在光标位置插入换行符
+      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);
     editor.onDidChangeModelContent(function () {
       var model = editor.getModel();
       if (model) {
@@ -2169,7 +2208,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, {