@fc-components/monaco-editor 0.1.4 → 0.1.5

package/README.md

@@ -5,42 +5,59 @@ 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
-      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 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

@@ -1990,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,
@@ -2008,27 +2008,10 @@ 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,
@@ -2143,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", {
@@ -2188,7 +2197,7 @@ function PromQLEditor(props) {
       wordWrap: 'on'
     }
   })));
-}
+});
 
-exports.PromQLMonacoEditor = PromQLEditor;
+exports.PromQLMonacoEditor = index;
 //# sourceMappingURL=monaco-editor.cjs.development.js.map