@fc-components/monaco-editor 0.1.10 → 0.1.12

package/dist/promql/index.d.ts

@@ -9,9 +9,10 @@ interface PromQLEditorProps {
     enableAutocomplete?: boolean;
     durationVariablesCompletion?: boolean;
     readOnly?: boolean;
+    disabled?: boolean;
     interpolateString?: (query: string) => string;
     onChange?: (value: string) => void;
-    onShiftEnter?: (value: string) => void;
+    onEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
     editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.10",
+  "version": "0.1.12",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -21,9 +21,10 @@ interface PromQLEditorProps {
   enableAutocomplete?: boolean;
   durationVariablesCompletion?: boolean;
   readOnly?: boolean;
+  disabled?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
-  onShiftEnter?: (value: string) => void;
+  onEnter?: (value: string) => void;
   onBlur?: (value: string) => void;
   editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }
@@ -54,10 +55,23 @@ const SIZE_MAP: Record<
   },
 };
 const themeMap: Record<string, string> = {
-  light: 'light',
+  light: 'n9e-light',
   dark: 'n9e-dark',
 };
 
+const containerDisabledClassName = css`
+  .monaco-editor {
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+
+const containerReadOnlyClassName = css`
+  .monaco-editor .cursors-layer > .cursor {
+    opacity: 0 !important; /* 完全透明 */
+  }
+`;
+
 const getStyles = (placeholder?: string) => {
   return {
     placeholder: css({
@@ -79,8 +93,9 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     interpolateString,
     enableAutocomplete = true,
     readOnly = false,
+    disabled = false,
     onChange,
-    onShiftEnter,
+    onEnter,
     onBlur,
     editorDidMount,
   } = props;
@@ -92,6 +107,16 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
     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,
@@ -140,15 +165,45 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       command: null,
     });
 
-    // handle: shift + enter
+    // 设置 Shift + Enter 为在光标位置换行
     editor.addCommand(
       monaco.KeyMod.Shift | monaco.KeyCode.Enter,
       () => {
-        onShiftEnter?.(editor.getValue());
+        // 在光标位置插入换行符
+        const 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,
+      () => {
+        onEnter?.(editor.getValue());
+      },
+      '!suggestWidgetVisible && isEditorFocused' + id,
+    );
+
     editor.onDidChangeModelContent(() => {
       const model = editor.getModel();
       if (model) {
@@ -279,7 +334,14 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
   ]);
 
   return (
-    <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
+    <div
+      className={
+        'ant-input' +
+        (size ? ` ${SIZE_MAP[size].className}` : '') +
+        (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
+        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+      }
+    >
       <div ref={containerRef}>
         <MonacoEditor
           width='100%'