@fc-components/monaco-editor 0.1.1

package/src/promql/index.tsx

@@ -0,0 +1,263 @@
+import React, { useEffect, useRef } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import * as monaco from 'monaco-editor';
+import { promLanguageDefinition } from 'monaco-promql';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+import { parser } from '@fc-components/lezer-metricsql';
+import { v4 as uuidv4 } from 'uuid';
+import { css } from '@emotion/css';
+
+import { language, languageConfiguration } from './promql';
+import { DataProvider } from './completion/DataProvider';
+import { getCompletionProvider } from './completion/getCompletionProvider';
+import type { DataProviderParams } from './types';
+import { validateQuery } from './validation';
+
+interface PromQLEditorProps {
+  size?: 'small' | 'middle' | 'large';
+  theme?: 'light' | 'dark';
+  value?: string;
+  placeholder?: string;
+  interpolateString?: (query: string) => string;
+  onChange?: (value: string) => void;
+  onShiftEnter?: (value: string) => void;
+  onBlur?: (value: string) => void;
+}
+
+const PROMQL_LANG_ID = promLanguageDefinition.id;
+const EDITOR_HEIGHT_OFFSET = 2;
+const SIZE_MAP: Record<
+  string,
+  {
+    className: string;
+    top: number;
+    bottom: number;
+  }
+> = {
+  small: {
+    className: 'ant-input-sm',
+    top: 1,
+    bottom: 1,
+  },
+  middle: {
+    className: 'ant-input-md',
+    top: 1,
+    bottom: 1,
+  },
+  large: {
+    className: 'ant-input-lg',
+    top: 3,
+    bottom: 2,
+  },
+};
+const themeMap: Record<string, string> = {
+  light: 'vs-light',
+  dark: 'vs-dark',
+};
+
+const getStyles = (placeholder?: string) => {
+  return {
+    placeholder: css({
+      '::after': {
+        content: `'${placeholder}'`,
+        opacity: 0.6,
+      },
+    }),
+  };
+};
+
+export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
+  const id = uuidv4();
+  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, onChange, onShiftEnter, onBlur } = props;
+  const autocompleteDisposeFun = useRef<(() => void) | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dataProviderRef = useRef<DataProvider | null>(null);
+  const styles = getStyles(placeholder);
+
+  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?.();
+    };
+  }, []);
+
+  const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
+    // we setup on-blur
+    editor.onDidBlurEditorWidget(() => {
+      isEditorFocused.set(false);
+      onBlur?.(editor.getValue());
+    });
+    editor.onDidFocusEditorText(() => {
+      isEditorFocused.set(true);
+    });
+
+    const dataProvider = new DataProvider({
+      url: props.url,
+      lookbackInterval: props.lookbackInterval,
+      variablesNames: props.variablesNames,
+      request: props.request,
+      httpMethod: props.httpMethod,
+      apiPrefix: props.apiPrefix,
+      httpErrorHandler: props.httpErrorHandler,
+    });
+    dataProviderRef.current = dataProvider;
+    dataProvider.start();
+
+    const completionProvider = getCompletionProvider(monaco, dataProvider);
+
+    const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
+      ...completionProvider,
+      provideCompletionItems: (model, position, context, token) => {
+        if (editor.getModel()?.id !== model.id) {
+          return { suggestions: [] };
+        }
+        return completionProvider.provideCompletionItems(model, position, context, token);
+      },
+    };
+
+    const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
+
+    autocompleteDisposeFun.current = dispose;
+
+    const updateElementHeight = () => {
+      const containerDiv = containerRef.current;
+      if (containerDiv !== null) {
+        const pixelHeight = editor.getContentHeight();
+        containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`;
+        containerDiv.style.width = '100%';
+        const pixelWidth = containerDiv.clientWidth;
+        editor.layout({ width: pixelWidth, height: pixelHeight });
+      }
+    };
+
+    editor.onDidContentSizeChange(updateElementHeight);
+    updateElementHeight();
+
+    // Fixes Monaco capturing the search key binding and displaying a useless search box within the Editor.
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+      command: null,
+    });
+
+    // handle: shift + enter
+    editor.addCommand(
+      monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+      () => {
+        console.log(22222);
+        onShiftEnter?.(editor.getValue());
+      },
+      'isEditorFocused' + id,
+    );
+
+    if (placeholder) {
+      const placeholderDecorators = [
+        {
+          range: new monaco.Range(1, 1, 1, 1),
+          options: {
+            className: styles.placeholder,
+            isWholeLine: true,
+          },
+        },
+      ];
+
+      let decorators: string[] = [];
+
+      const checkDecorators: () => void = () => {
+        const model = editor.getModel();
+
+        if (!model) {
+          return;
+        }
+
+        const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
+        decorators = model.deltaDecorations(decorators, newDecorators);
+      };
+
+      checkDecorators();
+      editor.onDidChangeModelContent(checkDecorators);
+    }
+
+    editor.onDidChangeModelContent(() => {
+      const model = editor.getModel();
+      if (model) {
+        const query = model.getValue();
+        const errors = validateQuery(query, interpolateString ? interpolateString(query) : query, model.getLinesContent(), parser) || [];
+        const markers = errors.map(({ error, ...boundary }) => ({
+          message: `${error ? `Error parsing "${error}"` : 'Parse error'}. The query appears to be incorrect and could fail to be executed.`,
+          severity: monaco.MarkerSeverity.Error,
+          ...boundary,
+        }));
+
+        monaco.editor.setModelMarkers(model, 'owner', markers);
+      }
+    });
+  };
+
+  useEffect(() => {
+    const dataProvider = dataProviderRef.current;
+    if (dataProvider) {
+      dataProvider.setVariablesNames(variablesNames || []);
+    }
+  }, [JSON.stringify(variablesNames)]);
+
+  return (
+    <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
+      <div ref={containerRef}>
+        <MonacoEditor
+          width='100%'
+          height='100%'
+          language='promql'
+          theme={themeMap[theme]}
+          value={value}
+          onChange={onChange}
+          editorDidMount={handleEditorDidMount}
+          options={{
+            codeLens: false,
+            contextmenu: false,
+            fixedOverflowWidgets: true,
+            folding: false,
+            fontSize: 12,
+            lineDecorationsWidth: 0,
+            lineNumbers: 'off',
+            minimap: { enabled: false },
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            padding: {
+              top: SIZE_MAP[size].top,
+              bottom: SIZE_MAP[size].bottom,
+            },
+            renderLineHighlight: 'none',
+            scrollbar: {
+              vertical: 'hidden',
+              verticalScrollbarSize: 8,
+              horizontal: 'hidden',
+              horizontalScrollbarSize: 0,
+              alwaysConsumeMouseWheel: false,
+            },
+            scrollBeyondLastLine: false,
+            suggest: {
+              showWords: false,
+            },
+            suggestFontSize: 12,
+            wordWrap: 'on',
+          }}
+        />
+      </div>
+    </div>
+  );
+}