@fc-components/monaco-editor 0.1.3 → 0.1.5

package/README.md

@@ -4,37 +4,60 @@
 import { PromQLMonacoEditor } from '@fc-components/monaco-editor';
 
 const App = () => {
+  const [value, setValue] = React.useState<string>();
+  const promQLMonacoEditorRef = React.useRef<typeof PromQLMonacoEditor | null>(null);
+
   return (
-    <PromQLMonacoEditor
-      placeholder='Enter your PromQL query here...'
-      variablesNames={['$job', '$instance']} // Example variable names
-      apiPrefix='/api/n9e/proxy/1/api/v1'
-      request={(resource, options) => {
-        const params = options?.body?.toString();
-        const search = params ? `?${params}` : '';
-        return fetch(resource + search, {
-          method: 'Get',
-          headers: new Headers({
-            Authorization: `Bearer ${localStorage.getItem('access_token') || ''}`,
-          }),
-        });
-      }}
-      enableAutocomplete={true} // Enable completion
-      durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
-      interpolateString={(query) => {
-        // Interpolate variables in the query string
-        return query.replace(/\$__interval/g, '10s');
-      }}
-      onShiftEnter={(value) => {
-        console.log('Shift+Enter pressed, current value:', value);
-      }}
-      onBlur={(value) => {
-        console.log('Editor lost focus, current value:', value);
-      }}
-      onChange={(value) => {
-        console.log('Value changed:', value);
-      }}
-    />
+    <div style={{ padding: 16 }}>
+      <PromQLMonacoEditor
+        ref={promQLMonacoEditorRef}
+        theme='light' // or 'dark'
+        size='middle' // 'small', 'middle', or 'large'
+        placeholder='Enter your PromQL query here...'
+        variablesNames={['$job', '$instance']} // Example variable names
+        apiPrefix='/api/n9e/proxy/1/api/v1'
+        request={(resource, options) => {
+          const params = options?.body?.toString();
+          const search = params ? `?${params}` : '';
+          return fetch(resource + search, {
+            method: 'Get',
+            headers: new Headers({
+              Authorization: `Bearer ${localStorage.getItem('access_token') || ''}`,
+            }),
+          });
+        }}
+        value={value}
+        enableAutocomplete={true} // Enable completion
+        durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
+        interpolateString={(query) => {
+          // Interpolate variables in the query string
+          return query.replace(/\$__interval/g, '10s');
+        }}
+        onShiftEnter={(value) => {
+          console.log('Shift+Enter pressed, current value:', value);
+        }}
+        onBlur={(value) => {
+          console.log('Editor lost focus, current value:', value);
+        }}
+        onChange={(value) => {
+          console.log('Value changed:', value);
+          setValue(value);
+        }}
+      />
+      <div>
+        <a
+          onClick={() => {
+            if (promQLMonacoEditorRef.current) {
+              const editor = promQLMonacoEditorRef.current.getEditor();
+              editor.trigger('keyboard', 'type', { text: 'Insert Text' });
+              editor.focus();
+            }
+          }}
+        >
+          Click to insert text after the cursor
+        </a>
+      </div>
+    </div>
   );
 };
 

package/dist/monaco-editor.cjs.development.js

@@ -1959,7 +1959,6 @@ function isErrorBoundary(boundary) {
 
 var _excluded = ["error"];
 var PROMQL_LANG_ID = monacoPromql.promLanguageDefinition.id;
-var EDITOR_HEIGHT_OFFSET = 2;
 var SIZE_MAP = {
   small: {
     className: 'ant-input-sm',
@@ -1978,8 +1977,8 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'vs-light',
-  dark: 'vs-dark'
+  light: 'light',
+  dark: 'n9e-dark'
 };
 var getStyles = function getStyles(placeholder) {
   return {
@@ -1991,7 +1990,7 @@ var getStyles = function getStyles(placeholder) {
     })
   };
 };
-function PromQLEditor(props) {
+var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
   var id = uuid.v4();
   var _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
@@ -2009,27 +2008,19 @@ function PromQLEditor(props) {
   var autocompleteDisposeFun = React.useRef(null);
   var containerRef = React.useRef(null);
   var dataProviderRef = React.useRef(null);
+  var editorRef = React.useRef(null);
   var styles = getStyles(placeholder);
-  React.useEffect(function () {
-    // 注册 PromQL 语言
-    var aliases = monacoPromql.promLanguageDefinition.aliases,
-      extensions = monacoPromql.promLanguageDefinition.extensions,
-      mimetypes = monacoPromql.promLanguageDefinition.mimetypes;
-    monaco.languages.register({
-      id: PROMQL_LANG_ID,
-      aliases: aliases,
-      extensions: extensions,
-      mimetypes: mimetypes
-    });
-    // 设置语法高亮
-    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language);
-    // 设置语言配置
-    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
-    return function () {
-      autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
-    };
-  }, []);
   var handleEditorDidMount = function handleEditorDidMount(editor) {
+    editorRef.current = editor;
+    monaco.editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     var isEditorFocused = editor.createContextKey('isEditorFocused' + id, false);
     // we setup on-blur
     editor.onDidBlurEditorWidget(function () {
@@ -2072,7 +2063,7 @@ function PromQLEditor(props) {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
         var pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = pixelHeight + EDITOR_HEIGHT_OFFSET + "px";
+        containerDiv.style.height = pixelHeight + "px";
         containerDiv.style.width = '100%';
         var pixelWidth = containerDiv.clientWidth;
         editor.layout({
@@ -2135,6 +2126,32 @@ function PromQLEditor(props) {
       dataProvider.setVariablesNames(variablesNames || []);
     }
   }, [JSON.stringify(variablesNames)]);
+  React.useEffect(function () {
+    // 注册 PromQL 语言
+    var aliases = monacoPromql.promLanguageDefinition.aliases,
+      extensions = monacoPromql.promLanguageDefinition.extensions,
+      mimetypes = monacoPromql.promLanguageDefinition.mimetypes;
+    monaco.languages.register({
+      id: PROMQL_LANG_ID,
+      aliases: aliases,
+      extensions: extensions,
+      mimetypes: mimetypes
+    });
+    // 设置语法高亮
+    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language);
+    // 设置语言配置
+    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
+    return function () {
+      autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
+    };
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      getEditor: function getEditor() {
+        return editorRef.current;
+      }
+    };
+  });
   return React__default.createElement("div", {
     className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '')
   }, React__default.createElement("div", {
@@ -2180,7 +2197,7 @@ function PromQLEditor(props) {
       wordWrap: 'on'
     }
   })));
-}
+});
 
-exports.PromQLMonacoEditor = PromQLEditor;
+exports.PromQLMonacoEditor = index;
 //# sourceMappingURL=monaco-editor.cjs.development.js.map