@fc-components/monaco-editor 0.1.3 → 0.1.5

package/dist/monaco-editor.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { languages, editor, KeyMod, KeyCode, Range, MarkerSeverity } from 'monaco-editor';
@@ -1953,7 +1953,6 @@ function isErrorBoundary(boundary) {
 
 var _excluded = ["error"];
 var PROMQL_LANG_ID = promLanguageDefinition.id;
-var EDITOR_HEIGHT_OFFSET = 2;
 var SIZE_MAP = {
   small: {
     className: 'ant-input-sm',
@@ -1972,8 +1971,8 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'vs-light',
-  dark: 'vs-dark'
+  light: 'light',
+  dark: 'n9e-dark'
 };
 var getStyles = function getStyles(placeholder) {
   return {
@@ -1985,7 +1984,7 @@ var getStyles = function getStyles(placeholder) {
     })
   };
 };
-function PromQLEditor(props) {
+var index = /*#__PURE__*/forwardRef(function PromQLEditor(props, ref) {
   var id = v4();
   var _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
@@ -2003,27 +2002,19 @@ function PromQLEditor(props) {
   var autocompleteDisposeFun = useRef(null);
   var containerRef = useRef(null);
   var dataProviderRef = useRef(null);
+  var editorRef = useRef(null);
   var styles = getStyles(placeholder);
-  useEffect(function () {
-    // 注册 PromQL 语言
-    var aliases = promLanguageDefinition.aliases,
-      extensions = promLanguageDefinition.extensions,
-      mimetypes = promLanguageDefinition.mimetypes;
-    languages.register({
-      id: PROMQL_LANG_ID,
-      aliases: aliases,
-      extensions: extensions,
-      mimetypes: mimetypes
-    });
-    // 设置语法高亮
-    languages.setMonarchTokensProvider(PROMQL_LANG_ID, language);
-    // 设置语言配置
-    languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
-    return function () {
-      autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
-    };
-  }, []);
   var handleEditorDidMount = function handleEditorDidMount(editor$1) {
+    editorRef.current = editor$1;
+    editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     var isEditorFocused = editor$1.createContextKey('isEditorFocused' + id, false);
     // we setup on-blur
     editor$1.onDidBlurEditorWidget(function () {
@@ -2066,7 +2057,7 @@ function PromQLEditor(props) {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
         var pixelHeight = editor$1.getContentHeight();
-        containerDiv.style.height = pixelHeight + EDITOR_HEIGHT_OFFSET + "px";
+        containerDiv.style.height = pixelHeight + "px";
         containerDiv.style.width = '100%';
         var pixelWidth = containerDiv.clientWidth;
         editor$1.layout({
@@ -2129,6 +2120,32 @@ function PromQLEditor(props) {
       dataProvider.setVariablesNames(variablesNames || []);
     }
   }, [JSON.stringify(variablesNames)]);
+  useEffect(function () {
+    // 注册 PromQL 语言
+    var aliases = promLanguageDefinition.aliases,
+      extensions = promLanguageDefinition.extensions,
+      mimetypes = promLanguageDefinition.mimetypes;
+    languages.register({
+      id: PROMQL_LANG_ID,
+      aliases: aliases,
+      extensions: extensions,
+      mimetypes: mimetypes
+    });
+    // 设置语法高亮
+    languages.setMonarchTokensProvider(PROMQL_LANG_ID, language);
+    // 设置语言配置
+    languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
+    return function () {
+      autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      getEditor: function getEditor() {
+        return editorRef.current;
+      }
+    };
+  });
   return React.createElement("div", {
     className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '')
   }, React.createElement("div", {
@@ -2174,7 +2191,7 @@ function PromQLEditor(props) {
       wordWrap: 'on'
     }
   })));
-}
+});
 
-export { PromQLEditor as PromQLMonacoEditor };
+export { index as PromQLMonacoEditor };
 //# sourceMappingURL=monaco-editor.esm.js.map