@fc-components/monaco-editor 0.1.3 → 0.1.5

package/dist/promql/index.d.ts

@@ -12,5 +12,5 @@ interface PromQLEditorProps {
     onShiftEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
 }
-export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams): React.JSX.Element;
-export {};
+declare const _default: React.ForwardRefExoticComponent<PromQLEditorProps & DataProviderParams & React.RefAttributes<unknown>>;
+export default _default;

package/package.json

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

package/src/promql/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { promLanguageDefinition } from 'monaco-promql';
@@ -27,7 +27,6 @@ interface PromQLEditorProps {
 }
 
 const PROMQL_LANG_ID = promLanguageDefinition.id;
-const EDITOR_HEIGHT_OFFSET = 2;
 const SIZE_MAP: Record<
   string,
   {
@@ -53,8 +52,8 @@ const SIZE_MAP: Record<
   },
 };
 const themeMap: Record<string, string> = {
-  light: 'vs-light',
-  dark: 'vs-dark',
+  light: 'light',
+  dark: 'n9e-dark',
 };
 
 const getStyles = (placeholder?: string) => {
@@ -68,36 +67,26 @@ const getStyles = (placeholder?: string) => {
   };
 };
 
-export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
+export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataProviderParams, ref) {
   const id = uuidv4();
   const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
+  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
   const styles = getStyles(placeholder);
-
-  useEffect(() => {
-    // 注册 PromQL 语言
-    const { aliases, extensions, mimetypes } = promLanguageDefinition;
-    monaco.languages.register({
-      id: PROMQL_LANG_ID,
-      aliases,
-      extensions,
-      mimetypes,
+  const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
+    monaco.editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
     });
 
-    // 设置语法高亮
-    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language as any);
-
-    // 设置语言配置
-    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration as any);
-
-    return () => {
-      autocompleteDisposeFun.current?.();
-    };
-  }, []);
-
-  const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
     const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
     // we setup on-blur
     editor.onDidBlurEditorWidget(() => {
@@ -143,7 +132,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       const containerDiv = containerRef.current;
       if (containerDiv !== null) {
         const pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`;
+        containerDiv.style.height = `${pixelHeight}px`;
         containerDiv.style.width = '100%';
         const pixelWidth = containerDiv.clientWidth;
         editor.layout({ width: pixelWidth, height: pixelHeight });
@@ -219,6 +208,33 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     }
   }, [JSON.stringify(variablesNames)]);
 
+  useEffect(() => {
+    // 注册 PromQL 语言
+    const { aliases, extensions, mimetypes } = promLanguageDefinition;
+    monaco.languages.register({
+      id: PROMQL_LANG_ID,
+      aliases,
+      extensions,
+      mimetypes,
+    });
+
+    // 设置语法高亮
+    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language as any);
+
+    // 设置语言配置
+    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration as any);
+
+    return () => {
+      autocompleteDisposeFun.current?.();
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    getEditor: () => {
+      return editorRef.current;
+    },
+  }));
+
   return (
     <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
       <div ref={containerRef}>
@@ -264,4 +280,4 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       </div>
     </div>
   );
-}
+});