@fc-components/monaco-editor 0.1.10 → 0.1.11

package/dist/promql/index.d.ts

@@ -9,6 +9,7 @@ interface PromQLEditorProps {
     enableAutocomplete?: boolean;
     durationVariablesCompletion?: boolean;
     readOnly?: boolean;
+    disabled?: boolean;
     interpolateString?: (query: string) => string;
     onChange?: (value: string) => void;
     onShiftEnter?: (value: string) => void;

package/package.json

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

package/src/promql/index.tsx

@@ -21,6 +21,7 @@ interface PromQLEditorProps {
   enableAutocomplete?: boolean;
   durationVariablesCompletion?: boolean;
   readOnly?: boolean;
+  disabled?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => 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,6 +93,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     interpolateString,
     enableAutocomplete = true,
     readOnly = false,
+    disabled = false,
     onChange,
     onShiftEnter,
     onBlur,
@@ -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,
@@ -279,7 +304,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%'