@fc-components/monaco-editor 0.1.9 → 0.1.11

package/dist/promql/index.d.ts

@@ -8,6 +8,8 @@ interface PromQLEditorProps {
     placeholder?: string;
     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.9",
+  "version": "0.1.11",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -20,6 +20,8 @@ interface PromQLEditorProps {
   placeholder?: string;
   enableAutocomplete?: boolean;
   durationVariablesCompletion?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => void;
@@ -53,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({
@@ -70,7 +85,20 @@ const getStyles = (placeholder?: string) => {
 
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
-  const { size = 'middle', theme = 'light', value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur, editorDidMount } = props;
+  const {
+    size = 'middle',
+    theme = 'light',
+    value,
+    placeholder,
+    interpolateString,
+    enableAutocomplete = true,
+    readOnly = false,
+    disabled = false,
+    onChange,
+    onShiftEnter,
+    onBlur,
+    editorDidMount,
+  } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
@@ -79,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,
@@ -94,7 +132,14 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     editor.onDidBlurEditorWidget(() => {
       isEditorFocused.set(false);
       onBlur?.(editor.getValue());
+      // reset the selection to the current position
+      const position = editor.getPosition();
+      if (position) {
+        const newSelection = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+        editor.setSelection(newSelection);
+      }
     });
+
     editor.onDidFocusEditorText(() => {
       isEditorFocused.set(true);
     });
@@ -259,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%'
@@ -270,6 +322,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
           onChange={onChange}
           editorDidMount={handleEditorDidMount}
           options={{
+            readOnly,
             codeLens: false,
             contextmenu: false,
             fixedOverflowWidgets: true,
@@ -299,6 +352,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
             suggestFontSize: 12,
             wordWrap: 'on',
             automaticLayout: true,
+            occurrencesHighlight: 'off', // Disable word highlighting
           }}
         />
       </div>