feat: worker_config

src/pages/_components/yaml-editor/editor.tsx

@@ -0,0 +1,140 @@
+import EditorWrap from '@/components/editor-wrap';
+import { LoadingOutlined } from '@ant-design/icons';
+import Editor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import { configureMonacoYaml } from 'monaco-yaml';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+
+loader.config({ monaco });
+
+interface ViewerProps {
+  ref?: any;
+  defaultLang?: string;
+  config?: any;
+  value: string;
+  height?: string | number;
+  theme?: string;
+  header?: React.ReactNode;
+  placeholder?: string;
+  variant?: 'bordered' | 'borderless';
+  schema?: any;
+}
+
+const path = 'inmemory://model/config.yaml';
+
+const EditorInner: React.FC<ViewerProps> = forwardRef((props, ref) => {
+  const {
+    value,
+    height = 380,
+    theme = 'vs-dark',
+    header,
+    variant = 'borderless',
+    schema,
+    placeholder
+  } = props;
+
+  const editorRef = useRef<any>(null);
+  const monacoRef = useRef<any>(null);
+  const monacoYamlRef = useRef<any>(null);
+
+  const handleBeforeMount = (monaco: any) => {
+    const yamlUri = monaco.Uri.parse(path);
+
+    configureMonacoYaml(monaco, {
+      schemas: [
+        {
+          uri: 'http://example.com/schema-name.json',
+          fileMatch: [yamlUri.toString()],
+          schema: schema
+        }
+      ]
+    });
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+  };
+
+  const formatCode = () => {
+    if (editorRef.current) {
+      setTimeout(() => {
+        editorRef.current
+          ?.getAction?.('editor.action.formatDocument')
+          ?.run()
+          .then(() => {
+            console.log('format success');
+          });
+      }, 100);
+    }
+  };
+
+  // Currently, do not use this function, but keep it for future validation needs
+  const getMarkers = () => {
+    const uri = editorRef.current?.getModel()?.uri;
+    const markers = monacoRef.current?.editor.getModelMarkers({
+      resource: uri
+    });
+    return markers;
+  };
+
+  useImperativeHandle(ref, () => ({
+    format: () => {
+      formatCode();
+    },
+    getValue: () => {
+      return editorRef.current?.getValue?.();
+    },
+    setValue: (val: string) => {
+      editorRef.current?.setValue?.(val);
+    },
+    dispose: () => {
+      editorRef.current?.dispose?.();
+      monacoYamlRef.current?.dispose?.();
+    },
+    validate() {
+      return getMarkers();
+    },
+    editor: editorRef.current
+  }));
+
+  useEffect(() => {
+    formatCode();
+  }, [value]);
+
+  return (
+    <EditorWrap header={header} variant={variant}>
+      <Editor
+        path={path}
+        defaultPath={path}
+        height={height}
+        theme={theme}
+        className="monaco-editor"
+        defaultLanguage={'yaml'}
+        language={'yaml'}
+        value={value}
+        options={{
+          minimap: { enabled: false },
+          quickSuggestions: true,
+          suggestOnTriggerCharacters: true,
+          fontSize: 14,
+          scrollbar: {
+            verticalScrollbarSize: 6,
+            horizontalScrollbarSize: 6
+          },
+          placeholder: placeholder
+        }}
+        loading={<LoadingOutlined style={{ fontSize: 24 }}></LoadingOutlined>}
+        beforeMount={handleBeforeMount}
+        onMount={handleEditorDidMount}
+      />
+    </EditorWrap>
+  );
+});
+
+export default EditorInner;

src/pages/_components/yaml-editor/index.tsx

@@ -0,0 +1,172 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { ImportOutlined } from '@ant-design/icons';
+import { loader } from '@monaco-editor/react';
+import { useIntl } from '@umijs/max';
+import { Button, message, Typography, Upload } from 'antd';
+import { RcFile } from 'antd/lib/upload';
+import * as monaco from 'monaco-editor';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
+import styled from 'styled-components';
+import EditorInner from './editor';
+
+const { Text } = Typography;
+
+loader.config({ monaco });
+
+const Container = styled.div`
+  position: relative;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  .monaco-editor .scroll-decoration {
+    box-shadow: none;
+  }
+`;
+
+const ErrorText = styled(Text)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 4px 6px;
+  background-color: var(--ant-color-bg-elevated);
+  border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
+`;
+
+const Header = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding-inline: 10px;
+  font-size: 14px;
+  border-bottom: 1px solid var(--ant-color-border);
+  background-color: var(--ant-color-fill-tertiary);
+`;
+
+interface ViewerProps {
+  ref?: any;
+  title?: React.ReactNode;
+  defaultLang?: string;
+  config?: any;
+  value: string;
+  height?: string | number;
+  placeholder?: string;
+  variant?: 'bordered' | 'borderless';
+  validateMessage?: React.ReactNode;
+  schema?: any;
+  onUpload?: (content: string) => void;
+}
+
+const YamlEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
+  const {
+    value,
+    height = 380,
+    variant = 'borderless',
+    schema,
+    placeholder,
+    validateMessage,
+    title,
+    onUpload
+  } = props;
+
+  const intl = useIntl();
+  const { userSettings } = useUserSettings();
+
+  const editorRef = useRef<any>(null);
+
+  const setContent = (val: string) => {
+    editorRef.current?.setValue?.(val);
+  };
+
+  const beforeUpload = (file: RcFile) => {
+    const isYaml =
+      file.type === 'application/x-yaml' ||
+      file.type === 'text/yaml' ||
+      file.name.endsWith('.yaml') ||
+      file.name.endsWith('.yml');
+    if (!isYaml) {
+      message.error('You can only upload YAML file!');
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result;
+      if (typeof content === 'string') {
+        onUpload?.(content);
+        setContent(content);
+      } else {
+        message.error('Failed to read file content!');
+      }
+    };
+    reader.readAsText(file);
+    // Prevent upload
+    return false;
+  };
+
+  const renderHeader = () => {
+    return (
+      <Header>
+        <span className="title">{title || 'YAML'}</span>
+        <Upload
+          name="file"
+          multiple={false}
+          beforeUpload={beforeUpload}
+          showUploadList={false}
+          accept=".yaml,.yml,text/yaml,application/x-yaml"
+        >
+          <Button icon={<ImportOutlined />} type="text" size="small">
+            {intl.formatMessage({ id: 'common.button.import' })}
+          </Button>
+        </Upload>
+      </Header>
+    );
+  };
+
+  useImperativeHandle(ref, () => ({
+    format: () => {
+      editorRef.current?.format();
+    },
+    getValue: () => {
+      return editorRef.current?.getValue?.();
+    },
+    setValue: (val: string) => {
+      editorRef.current?.setValue?.(val);
+    },
+    dispose: () => {
+      editorRef.current?.dispose?.();
+    },
+    validate() {
+      return editorRef.current?.validate();
+    },
+    editor: editorRef.current
+  }));
+
+  useEffect(() => {
+    editorRef.current?.format();
+  }, [value]);
+
+  return (
+    <Container>
+      <EditorInner
+        ref={editorRef}
+        header={renderHeader()}
+        variant={variant}
+        height={height}
+        theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
+        value={value}
+        placeholder={placeholder}
+        schema={schema}
+      />
+      {validateMessage && (
+        <ErrorText type="danger">{validateMessage}</ErrorText>
+      )}
+    </Container>
+  );
+});
+
+export default YamlEditor;