@fc-components/monaco-editor 0.1.12 → 0.1.14

package/src/yaml/index.tsx

@@ -0,0 +1,385 @@
+import React, { useEffect, useRef } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import * as monaco from 'monaco-editor';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
+import { v4 as uuidv4 } from 'uuid';
+import { css } from '@emotion/css';
+
+import { language, languageConfiguration } from './yaml';
+import { getYamlCompletionProvider } from './completion/getCompletionProvider';
+import { validateYaml } from './validation';
+import type { YamlEditorSchema } from './types';
+
+interface YamlEditorProps {
+  size?: 'small' | 'middle' | 'large';
+  theme?: 'light' | 'dark';
+  value?: string;
+  placeholder?: string;
+  enableAutocomplete?: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  schemas?: YamlEditorSchema[];
+  onChange?: (value: string) => void;
+  onEnter?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+}
+
+const YAML_LANG_ID = 'yaml';
+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: 'yaml-light',
+  dark: 'yaml-dark',
+};
+
+const containerDisabledClassName = css`
+  .monaco-editor {
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+
+const containerReadOnlyClassName = css`
+  .monaco-editor .cursors-layer > .cursor {
+    opacity: 0 !important;
+  }
+`;
+
+const getStyles = (placeholder?: string) => {
+  return {
+    placeholder: css({
+      '::after': {
+        content: `'${placeholder}'`,
+        opacity: 0.6,
+      },
+    }),
+  };
+};
+
+export default function YamlEditor(props: YamlEditorProps) {
+  const id = uuidv4();
+  const {
+    size = 'middle',
+    theme = 'light',
+    value,
+    placeholder,
+    enableAutocomplete = true,
+    readOnly = false,
+    disabled = false,
+    schemas = [],
+    onChange,
+    onEnter,
+    onBlur,
+    editorDidMount,
+  } = props;
+
+  const autocompleteDisposeFun = useRef<(() => void) | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
+  const styles = getStyles(placeholder);
+
+  const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
+
+    // 定义主题
+    monaco.editor.defineTheme('yaml-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [
+        { token: 'key', foreground: '0000FF' },
+        { token: 'string', foreground: '008000' },
+        { token: 'number', foreground: '098658' },
+        { token: 'comment', foreground: '008000', fontStyle: 'italic' },
+        { token: 'delimiter', foreground: '000000' },
+        { token: 'tag', foreground: '800080' },
+        { token: 'keyword', foreground: '0000FF', fontStyle: 'bold' },
+      ],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
+    monaco.editor.defineTheme('yaml-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [
+        { token: 'key', foreground: '9CDCFE' },
+        { token: 'string', foreground: 'CE9178' },
+        { token: 'number', foreground: 'B5CEA8' },
+        { token: 'comment', foreground: '6A9955', fontStyle: 'italic' },
+        { token: 'delimiter', foreground: 'D4D4D4' },
+        { token: 'tag', foreground: 'C586C0' },
+        { token: 'keyword', foreground: '569CD6', fontStyle: 'bold' },
+      ],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
+    const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
+
+    // 设置焦点状态
+    editor.onDidBlurEditorWidget(() => {
+      isEditorFocused.set(false);
+      onBlur?.(editor.getValue());
+      const position = editor.getPosition();
+      if (position) {
+        const newSelection = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
+        editor.setSelection(newSelection);
+      }
+    });
+
+    editor.onDidFocusEditorText(() => {
+      isEditorFocused.set(true);
+    });
+
+    // 设置编辑器高度自适应
+    const updateElementHeight = () => {
+      const containerDiv = containerRef.current;
+      if (containerDiv !== null) {
+        const pixelHeight = Math.max(editor.getContentHeight(), 20);
+        containerDiv.style.height = `${pixelHeight}px`;
+        containerDiv.style.width = '100%';
+        const pixelWidth = containerDiv.clientWidth;
+        editor.layout({ width: pixelWidth, height: pixelHeight });
+      }
+    };
+
+    editor.onDidContentSizeChange(updateElementHeight);
+    updateElementHeight();
+
+    // 禁用默认的搜索快捷键
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+      command: null,
+    });
+
+    // Shift + Enter 换行
+    editor.addCommand(
+      monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+      () => {
+        const position = editor.getPosition();
+        if (position) {
+          editor.executeEdits('shift-enter', [
+            {
+              range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+              text: '\n',
+            },
+          ]);
+          editor.setPosition({
+            lineNumber: position.lineNumber + 1,
+            column: 1,
+          });
+        }
+      },
+      'isEditorFocused' + id,
+    );
+
+    // Enter 键处理 - 移除阻止默认行为的规则，允许正常换行
+    // 只有当提供了 onEnter 回调且没有建议窗口时才触发回调
+    if (onEnter) {
+      editor.addCommand(
+        monaco.KeyCode.Enter,
+        () => {
+          onEnter(editor.getValue());
+        },
+        '!suggestWidgetVisible && isEditorFocused' + id,
+      );
+    }
+
+    // 内容变化时进行验证
+    editor.onDidChangeModelContent(() => {
+      const model = editor.getModel();
+      if (model) {
+        const content = model.getValue();
+        const errors = validateYaml(content, schemas);
+        const markers = errors.map((error) => ({
+          message: error.message,
+          severity: error.severity === 'error' ? monaco.MarkerSeverity.Error : error.severity === 'warning' ? monaco.MarkerSeverity.Warning : monaco.MarkerSeverity.Info,
+          startLineNumber: error.startLineNumber,
+          endLineNumber: error.endLineNumber,
+          startColumn: error.startColumn,
+          endColumn: error.endColumn,
+        }));
+
+        monaco.editor.setModelMarkers(model, 'yaml', markers);
+      }
+    });
+
+    editorDidMount?.(editor);
+  };
+
+  useEffect(() => {
+    // 注册 YAML 语言
+    monaco.languages.register({
+      id: YAML_LANG_ID,
+      aliases: ['YAML', 'yaml'],
+      extensions: ['.yaml', '.yml'],
+      mimetypes: ['application/x-yaml', 'text/x-yaml'],
+    });
+
+    // 设置语法高亮
+    monaco.languages.setMonarchTokensProvider(YAML_LANG_ID, language as any);
+
+    // 设置语言配置
+    monaco.languages.setLanguageConfiguration(YAML_LANG_ID, languageConfiguration as any);
+
+    return () => {
+      autocompleteDisposeFun.current?.();
+    };
+  }, []);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // 清理之前的自动补全提供器
+    if (autocompleteDisposeFun.current) {
+      autocompleteDisposeFun.current();
+      autocompleteDisposeFun.current = null;
+    }
+
+    // 如果启用自动补全，设置新的补全提供器
+    if (enableAutocomplete) {
+      const completionProvider = getYamlCompletionProvider(monaco, schemas);
+
+      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(YAML_LANG_ID, filteringCompletionProvider);
+      autocompleteDisposeFun.current = dispose;
+    }
+
+    // 处理占位符
+    const model = editor.getModel();
+    if (model) {
+      model.deltaDecorations(
+        model.getAllDecorations().map((d) => d.id),
+        [],
+      );
+    }
+
+    if (placeholder) {
+      const placeholderDecorators = [
+        {
+          range: new monaco.Range(1, 1, 1, 1),
+          options: {
+            className: styles.placeholder,
+            isWholeLine: true,
+          },
+        },
+      ];
+
+      let decorators: string[] = [];
+
+      const checkDecorators = () => {
+        const model = editor.getModel();
+        if (!model) return;
+
+        const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
+        decorators = model.deltaDecorations(decorators, newDecorators);
+      };
+
+      checkDecorators();
+      editor.onDidChangeModelContent(checkDecorators);
+    }
+  }, [enableAutocomplete, JSON.stringify(schemas), placeholder]);
+
+  return (
+    <div
+      className={
+        'ant-input' +
+        (size ? ` ${SIZE_MAP[size].className}` : '') +
+        (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
+        (readOnly ? ` ${containerReadOnlyClassName}` : '')
+      }
+    >
+      <div ref={containerRef}>
+        <MonacoEditor
+          width='100%'
+          height='100%'
+          language={YAML_LANG_ID}
+          theme={themeMap[theme]}
+          value={value}
+          onChange={onChange}
+          editorDidMount={handleEditorDidMount}
+          options={{
+            readOnly,
+            codeLens: false,
+            contextmenu: false,
+            fixedOverflowWidgets: true,
+            folding: true,
+            fontSize: 12,
+            lineDecorationsWidth: 0,
+            lineNumbers: 'on',
+            minimap: { enabled: false },
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            padding: {
+              top: SIZE_MAP[size].top,
+              bottom: SIZE_MAP[size].bottom,
+            },
+            renderLineHighlight: 'line',
+            scrollbar: {
+              vertical: 'auto',
+              verticalScrollbarSize: 8,
+              horizontal: 'auto',
+              horizontalScrollbarSize: 8,
+              alwaysConsumeMouseWheel: false,
+            },
+            scrollBeyondLastLine: false,
+            suggest: {
+              showWords: true,
+              filterGraceful: true,
+              snippetsPreventQuickSuggestions: false,
+              shareSuggestSelections: false,
+            },
+            quickSuggestions: {
+              other: true,
+              comments: false,
+              strings: true,
+            },
+            quickSuggestionsDelay: 0,
+            suggestFontSize: 12,
+            wordWrap: 'on',
+            automaticLayout: true,
+            occurrencesHighlight: 'off',
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/yaml/types.ts

@@ -0,0 +1,44 @@
+export interface YamlCompletionItem {
+  label: string;
+  insertText: string;
+  detail?: string;
+  documentation?: string;
+  type: YamlCompletionType;
+  triggerOnInsert?: boolean;
+}
+
+export type YamlCompletionType = 'KEYWORD' | 'VALUE' | 'KEY' | 'BOOLEAN' | 'NUMBER' | 'STRING';
+
+export interface YamlSchema {
+  properties?: Record<string, YamlSchemaProperty>;
+  required?: string[];
+  type?: string;
+  enum?: string[];
+  items?: YamlSchema;
+}
+
+export interface YamlSchemaProperty {
+  type?: string | string[];
+  description?: string;
+  enum?: string[];
+  enumDescriptions?: string[];
+  properties?: Record<string, YamlSchemaProperty>;
+  items?: YamlSchema;
+  required?: string[];
+  default?: any;
+}
+
+export interface YamlEditorSchema {
+  schema: YamlSchema;
+  name?: string;
+  description?: string;
+}
+
+export interface YamlValidationError {
+  message: string;
+  startLineNumber: number;
+  endLineNumber: number;
+  startColumn: number;
+  endColumn: number;
+  severity?: 'error' | 'warning' | 'info';
+}

package/src/yaml/validation.ts

@@ -0,0 +1,127 @@
+import { YamlValidationError, YamlEditorSchema } from './types';
+
+export function validateYaml(content: string, schemas: YamlEditorSchema[] = []): YamlValidationError[] {
+  const errors: YamlValidationError[] = [];
+
+  if (!content.trim()) {
+    return errors;
+  }
+
+  try {
+    // 基础 YAML 语法验证
+    const lines = content.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const lineNumber = i + 1;
+
+      // 检查缩进一致性
+      if (line.trim() && !isValidIndentation(line)) {
+        errors.push({
+          message: 'Invalid indentation. YAML requires consistent indentation.',
+          startLineNumber: lineNumber,
+          endLineNumber: lineNumber,
+          startColumn: 1,
+          endColumn: line.length + 1,
+          severity: 'error',
+        });
+      }
+
+      // 检查冒号后是否有空格
+      const colonMatch = line.match(/^(\s*)([^:\s]+)(:)(\S)/);
+      if (colonMatch) {
+        const startColumn = colonMatch[1].length + colonMatch[2].length + 2;
+        errors.push({
+          message: 'Missing space after colon. Use ": " instead of ":"',
+          startLineNumber: lineNumber,
+          endLineNumber: lineNumber,
+          startColumn: startColumn,
+          endColumn: startColumn + 1,
+          severity: 'error',
+        });
+      }
+
+      // 检查列表项格式
+      const listMatch = line.match(/^(\s*)-(\S)/);
+      if (listMatch) {
+        const startColumn = listMatch[1].length + 2;
+        errors.push({
+          message: 'Missing space after dash. Use "- " instead of "-"',
+          startLineNumber: lineNumber,
+          endLineNumber: lineNumber,
+          startColumn: startColumn,
+          endColumn: startColumn + 1,
+          severity: 'error',
+        });
+      }
+    }
+
+    // Schema 验证
+    if (schemas.length > 0) {
+      const schemaErrors = validateAgainstSchemas(content, schemas);
+      errors.push(...schemaErrors);
+    }
+  } catch (error) {
+    errors.push({
+      message: `YAML parsing error: ${error}`,
+      startLineNumber: 1,
+      endLineNumber: 1,
+      startColumn: 1,
+      endColumn: 1,
+      severity: 'error',
+    });
+  }
+
+  return errors;
+}
+
+function isValidIndentation(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed) return true;
+
+  const leadingSpaces = line.length - line.trimLeft().length;
+  // YAML 通常使用 2 或 4 个空格缩进
+  return leadingSpaces % 2 === 0;
+}
+
+function validateAgainstSchemas(_content: string, _schemas: YamlEditorSchema[]): YamlValidationError[] {
+  const errors: YamlValidationError[] = [];
+
+  // TODO: 实现更复杂的 schema 验证逻辑
+  // 目前提供基础的结构验证
+  // 可以在这里添加对 content 和 schemas 的具体验证
+
+  return errors;
+}
+
+export function parseYamlValue(value: string): any {
+  const trimmed = value.trim();
+
+  // Boolean values
+  if (['true', 'True', 'TRUE', 'yes', 'Yes', 'YES', 'on', 'On', 'ON'].includes(trimmed)) {
+    return true;
+  }
+  if (['false', 'False', 'FALSE', 'no', 'No', 'NO', 'off', 'Off', 'OFF'].includes(trimmed)) {
+    return false;
+  }
+
+  // Null values
+  if (['null', 'Null', 'NULL', '~'].includes(trimmed)) {
+    return null;
+  }
+
+  // Number values
+  if (/^-?\d+$/.test(trimmed)) {
+    return parseInt(trimmed, 10);
+  }
+  if (/^-?\d+\.\d+$/.test(trimmed)) {
+    return parseFloat(trimmed);
+  }
+
+  // String values (remove quotes if present)
+  if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+    return trimmed.slice(1, -1);
+  }
+
+  return trimmed;
+}

package/src/yaml/yaml.ts

@@ -0,0 +1,150 @@
+export const languageConfiguration = {
+  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
+  comments: {
+    lineComment: '#',
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+  ],
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  surroundingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+  ],
+  folding: {
+    offSide: true,
+  },
+};
+
+// YAML keywords
+const keywords = ['true', 'false', 'null', 'True', 'False', 'Null', 'TRUE', 'FALSE', 'NULL', 'yes', 'no', 'Yes', 'No', 'YES', 'NO', 'on', 'off', 'On', 'Off', 'ON', 'OFF'];
+
+// YAML operators and special characters (for future use)
+// const operators = [':', '-', '|', '>', '&', '*', '!', '%', '@'];
+
+export const language = {
+  tokenPostfix: '.yaml',
+  brackets: [
+    { token: 'delimiter.bracket', open: '{', close: '}' },
+    { token: 'delimiter.square', open: '[', close: ']' },
+  ],
+  keywords: keywords,
+  numberInteger: /(?:0|[+-]?[0-9]+)/,
+  numberFloat: /(?:0|[+-]?[0-9]+)(?:\.[0-9]+)?(?:e[-+][1-9][0-9]*)?/,
+  numberOctal: /0o[0-7]+/,
+  numberHex: /0x[0-9a-fA-F]+/,
+  numberInfinity: /[+-]?\.(?:inf|Inf|INF)/,
+  numberNaN: /\.(?:nan|Nan|NAN)/,
+  numberDate: /\d{4}-\d{2}-\d{2}(?:[Tt ]\d{1,2}:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d{1,2}(?::\d{2})?))?)?/,
+  escapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
+
+  tokenizer: {
+    root: [
+      { include: '@whitespace' },
+      { include: '@comment' },
+
+      // Document markers
+      [/^---/, 'meta.document'],
+      [/^\.{3}/, 'meta.document'],
+
+      // Keys (property names)
+      [/^(\s*)([^:\s]+)(\s*)(:)/, ['white', 'key', 'white', 'delimiter']],
+      [/(\s*)([^:\s]+)(\s*)(:)/, ['white', 'key', 'white', 'delimiter']],
+
+      // Flow collections
+      [/\{/, '@brackets', '@flowMap'],
+      [/\[/, '@brackets', '@flowSequence'],
+
+      // Block scalars
+      [/[|>][-+]?(\d+)?/, 'string.block', '@blockScalar'],
+
+      // Numbers
+      [/@numberInfinity/, 'number.infinity'],
+      [/@numberNaN/, 'number.nan'],
+      [/@numberDate/, 'number.date'],
+      [/@numberHex/, 'number.hex'],
+      [/@numberOctal/, 'number.octal'],
+      [/@numberFloat/, 'number.float'],
+      [/@numberInteger/, 'number'],
+
+      // Strings
+      [/"([^"\\]|\\.)*$/, 'string.invalid'],
+      [/'([^'\\]|\\.)*$/, 'string.invalid'],
+      [/"/, 'string', '@doubleQuotedString'],
+      [/'/, 'string', '@singleQuotedString'],
+
+      // Anchors and aliases
+      [/&\w+/, 'tag.anchor'],
+      [/\*\w+/, 'tag.alias'],
+
+      // Tags
+      [/![\w\-\/]+/, 'tag'],
+
+      // Keywords
+      [
+        /[^\s\[\{\,]+/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'string.unquoted',
+          },
+        },
+      ],
+
+      // List items
+      [/^(\s*)(-\s)/, ['white', 'delimiter']],
+      [/(\s*)(-\s)/, ['white', 'delimiter']],
+    ],
+
+    whitespace: [[/[ \t\r\n]+/, 'white']],
+
+    comment: [[/#.*$/, 'comment']],
+
+    doubleQuotedString: [
+      [/[^\\"]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, 'string', '@pop'],
+    ],
+
+    singleQuotedString: [
+      [/[^\\']+/, 'string'],
+      [/''/, 'string.escape'],
+      [/'/, 'string', '@pop'],
+    ],
+
+    blockScalar: [
+      [/^(\s*).+$/, 'string.block'],
+      [/^(?!\s)/, '', '@pop'],
+    ],
+
+    flowMap: [
+      { include: '@whitespace' },
+      { include: '@comment' },
+      [/\}/, '@brackets', '@pop'],
+      [/,/, 'delimiter'],
+      [/:/, 'delimiter'],
+      [/"/, 'string', '@doubleQuotedString'],
+      [/'/, 'string', '@singleQuotedString'],
+      [/[^\s\,\}\:]+/, 'string.unquoted'],
+    ],
+
+    flowSequence: [
+      { include: '@whitespace' },
+      { include: '@comment' },
+      [/\]/, '@brackets', '@pop'],
+      [/,/, 'delimiter'],
+      [/"/, 'string', '@doubleQuotedString'],
+      [/'/, 'string', '@singleQuotedString'],
+      [/[^\s\,\]]+/, 'string.unquoted'],
+    ],
+  },
+};