@fc-components/monaco-editor 0.1.4 → 0.1.6

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

@@ -2004,30 +2004,12 @@ function PromQLEditor(props) {
     enableAutocomplete = _props$enableAutocomp === void 0 ? true : _props$enableAutocomp,
     onChange = props.onChange,
     onShiftEnter = props.onShiftEnter,
-    onBlur = props.onBlur;
+    onBlur = props.onBlur,
+    editorDidMount = props.editorDidMount;
   var autocompleteDisposeFun = React.useRef(null);
   var containerRef = React.useRef(null);
   var dataProviderRef = 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) {
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
@@ -2136,7 +2118,27 @@ function PromQLEditor(props) {
         monaco.editor.setModelMarkers(model, 'owner', markers);
       }
     });
+    editorDidMount == null || editorDidMount(editor);
   };
+  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.useEffect(function () {
     var dataProvider = dataProviderRef.current;
     if (dataProvider) {