@fc-components/monaco-editor 0.2.1 → 0.3.1

package/src/expr/expr.ts

@@ -0,0 +1,229 @@
+export const languageConfiguration = {
+  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
+  comments: {
+    lineComment: '//',
+    blockComment: ['/*', '*/'] as [string, string],
+  },
+  brackets: [
+    ['{', '}'],
+    ['[', ']'],
+    ['(', ')'],
+  ] as any,
+  autoClosingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+    { open: '`', close: '`' },
+  ] as any,
+  surroundingPairs: [
+    { open: '{', close: '}' },
+    { open: '[', close: ']' },
+    { open: '(', close: ')' },
+    { open: '"', close: '"' },
+    { open: "'", close: "'" },
+    { open: '`', close: '`' },
+  ] as any,
+  folding: {
+    offSide: false,
+  },
+};
+
+// Expr-lang keywords
+const keywords = ['let', 'true', 'false', 'nil', 'in', 'not', 'and', 'or', 'if', 'else'];
+
+// Expr-lang built-in functions
+const stringFunctions = [
+  'trim',
+  'trimPrefix',
+  'trimSuffix',
+  'upper',
+  'lower',
+  'split',
+  'splitAfter',
+  'replace',
+  'repeat',
+  'indexOf',
+  'lastIndexOf',
+  'hasPrefix',
+  'hasSuffix',
+  'contains',
+  'startsWith',
+  'endsWith',
+];
+
+const dateFunctions = ['now', 'duration', 'date', 'timezone'];
+
+const numberFunctions = ['max', 'min', 'abs', 'ceil', 'floor', 'round'];
+
+const arrayFunctions = [
+  'all',
+  'any',
+  'one',
+  'none',
+  'map',
+  'filter',
+  'find',
+  'findIndex',
+  'findLast',
+  'findLastIndex',
+  'groupBy',
+  'count',
+  'concat',
+  'flatten',
+  'uniq',
+  'join',
+  'reduce',
+  'sum',
+  'mean',
+  'median',
+  'first',
+  'last',
+  'take',
+  'reverse',
+  'sort',
+  'sortBy',
+];
+
+const mapFunctions = ['keys', 'values'];
+
+const typeConversionFunctions = ['type', 'int', 'float', 'string', 'toJSON', 'fromJSON', 'toBase64', 'fromBase64', 'toPairs', 'fromPairs'];
+
+const miscFunctions = ['len', 'get'];
+
+const bitwiseFunctions = ['bitand', 'bitor', 'bitxor', 'bitnand', 'bitnot', 'bitshl', 'bitshr', 'bitushr'];
+
+const builtinFunctions = [
+  ...stringFunctions,
+  ...dateFunctions,
+  ...numberFunctions,
+  ...arrayFunctions,
+  ...mapFunctions,
+  ...typeConversionFunctions,
+  ...miscFunctions,
+  ...bitwiseFunctions,
+];
+
+export const language = {
+  defaultToken: '',
+  tokenPostfix: '.expr',
+
+  brackets: [
+    { open: '(', close: ')', token: 'delimiter.parenthesis' },
+    { open: '{', close: '}', token: 'delimiter.curly' },
+    { open: '[', close: ']', token: 'delimiter.square' },
+  ],
+
+  keywords,
+
+  builtinFunctions,
+
+  operators: ['+', '-', '*', '/', '%', '^', '**', '==', '!=', '<', '>', '<=', '>=', '!', '&&', '||', '?:', '??', '.', '?.', 'in', 'matches', '..', '|'],
+
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,2}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+  digits: /\d+(_+\d+)*/,
+
+  hexdigits: /[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+
+  octdigits: /[0-7]+(_+[0-7]+)*/,
+
+  bindigits: /[01]+(_+[01]+)*/,
+
+  tokenizer: {
+    root: [
+      { include: '@whitespace' },
+      { include: '@comments' },
+      { include: '@numbers' },
+      { include: '@strings' },
+      { include: '@bytes' },
+
+      // Function calls: identifier followed by '('
+      [/[a-zA-Z_]\w*(?=\s*\()/, { cases: { '@builtinFunctions': 'keyword.function', '@default': 'identifier.function' } }],
+
+      // Keywords and identifiers
+      [/[a-zA-Z_]\w*/, { cases: { '@keywords': 'keyword', '@default': 'identifier' } }],
+
+      // Operators
+      [/[?][?:]/, 'operator'], // ??, ?:
+      [/[?][.]/, 'operator'], // ?.
+      [/[.]{2}/, 'operator'], // ..
+      [/[*]{2}/, 'operator'], // **
+      [/[|]/, 'operator'], // |
+      [/[+\-*/%^]/, 'operator'],
+      [/==|!=|<=|>=|<|>/, 'operator'],
+      [/!|&&|\|\|/, 'operator'],
+      [/[=]/, 'operator'],
+      [/[.~]/, 'operator'],
+
+      // Delimiters
+      [/[,;]/, 'delimiter'],
+      [/[{}()\[\]]/, '@brackets'],
+    ],
+
+    whitespace: [[/[ \t\r\n]+/, 'white']],
+
+    comments: [
+      [/\/\/.*$/, 'comment'],
+      [/\/\*/, { token: 'comment.quote', next: '@comment' }],
+    ],
+
+    comment: [
+      [/[^*/]+/, 'comment'],
+      [/\*\//, { token: 'comment.quote', next: '@pop' }],
+      [/./, 'comment'],
+    ],
+
+    numbers: [
+      [/0[xX]@hexdigits/, 'number.hex'],
+      [/0[oO]@octdigits/, 'number.octal'],
+      [/0[bB]@bindigits/, 'number.binary'],
+      [/(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?/, 'number'],
+    ],
+
+    strings: [
+      [/"/, { token: 'string.double', next: '@string_double' }],
+      [/'/, { token: 'string', next: '@string_single' }],
+      [/`/, { token: 'string.backtick', next: '@string_backtick' }],
+    ],
+
+    string_double: [
+      [/[^"\\]+/, 'string.double'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, { token: 'string.double', next: '@pop' }],
+    ],
+
+    string_single: [
+      [/[^'\\]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, { token: 'string', next: '@pop' }],
+    ],
+
+    string_backtick: [
+      [/[^`]+/, 'string.backtick'],
+      [/`/, { token: 'string.backtick', next: '@pop' }],
+    ],
+
+    bytes: [
+      [/[bB]"/, { token: 'string.bytes', next: '@bytes_double' }],
+      [/[bB]'/, { token: 'string.bytes', next: '@bytes_single' }],
+    ],
+
+    bytes_double: [
+      [/[^"\\]+/, 'string.bytes'],
+      [/\\(?:[abfnrtv\\"]|x[0-9A-Fa-f]{2}|[0-7]{3})/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, { token: 'string.bytes', next: '@pop' }],
+    ],
+
+    bytes_single: [
+      [/[^'\\]+/, 'string.bytes'],
+      [/\\(?:[abfnrtv\\']|x[0-9A-Fa-f]{2}|[0-7]{3})/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, { token: 'string.bytes', next: '@pop' }],
+    ],
+  },
+};

package/src/expr/index.tsx

@@ -0,0 +1,322 @@
+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 './expr';
+import { getExprCompletionProvider } from './completion/getCompletionProvider';
+import { validateExpr } from './validation';
+import type { ExprEditorProps } from './types';
+
+const EXPR_LANG_ID = 'expr';
+const SIZE_MAP: Record<
+  string,
+  {
+    className: string;
+    top: number;
+    bottom: number;
+    minHeight: number;
+  }
+> = {
+  small: {
+    className: 'ant-input-sm',
+    top: 1,
+    bottom: 1,
+    minHeight: 24,
+  },
+  middle: {
+    className: 'ant-input-md',
+    top: 1,
+    bottom: 1,
+    minHeight: 32,
+  },
+  large: {
+    className: 'ant-input-lg',
+    top: 3,
+    bottom: 2,
+    minHeight: 40,
+  },
+};
+
+const themeMap: Record<string, string> = {
+  light: 'expr-light',
+  dark: 'expr-dark',
+};
+
+const containerDisabledClassName = css`
+  .monaco-editor {
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+
+const containerReadOnlyClassName = css`
+  .monaco-editor .cursors-layer > .cursor {
+    opacity: 0 !important;
+  }
+`;
+
+export default function ExprEditor(props: ExprEditorProps) {
+  const id = uuidv4();
+  const {
+    className,
+    maxHeight,
+    fontSize,
+    size = 'middle',
+    theme = 'light',
+    value = '',
+    placeholder,
+    enableAutocomplete = true,
+    readOnly = false,
+    disabled = false,
+    onChange,
+    onEnter,
+    onBlur,
+    onFocus,
+    editorDidMount,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
+  const modelRef = useRef<monaco.editor.ITextModel | null>(null);
+  const disposablesRef = useRef<monaco.IDisposable[]>([]);
+
+  useEffect(() => {
+    // Register language
+    if (!monaco.languages.getLanguages().some((lang) => lang.id === EXPR_LANG_ID)) {
+      monaco.languages.register({ id: EXPR_LANG_ID });
+      monaco.languages.setMonarchTokensProvider(EXPR_LANG_ID, language as any);
+      monaco.languages.setLanguageConfiguration(EXPR_LANG_ID, languageConfiguration);
+    }
+
+    // Register completion provider
+    if (enableAutocomplete) {
+      const disposable = monaco.languages.registerCompletionItemProvider(EXPR_LANG_ID, getExprCompletionProvider());
+      disposablesRef.current.push(disposable);
+    }
+
+    return () => {
+      disposablesRef.current.forEach((disposable) => disposable.dispose());
+      disposablesRef.current = [];
+    };
+  }, [enableAutocomplete]);
+
+  const handleEditorMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
+    modelRef.current = editor.getModel();
+
+    monaco.editor.defineTheme('expr-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000',
+      },
+    });
+
+    monaco.editor.defineTheme('expr-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      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);
+      onFocus?.(editor.getValue());
+    });
+
+    // Auto-height
+    const updateElementHeight = () => {
+      const containerDiv = containerRef.current;
+      if (containerDiv !== null) {
+        const pixelHeight = editor.getContentHeight();
+        containerDiv.style.minHeight = `${pixelHeight}px`;
+        containerDiv.style.width = '100%';
+        const pixelWidth = containerDiv.clientWidth;
+        editor.layout({ width: pixelWidth, height: pixelHeight });
+      }
+    };
+
+    editor.onDidContentSizeChange(updateElementHeight);
+    updateElementHeight();
+
+    // Disable search box
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+      command: null,
+    });
+
+    // Shift+Enter for newline
+    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,
+    );
+
+    // Prevent default Enter
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyCode.Enter,
+      command: '-',
+      when: '!suggestWidgetVisible',
+    });
+
+    // Custom Enter handler
+    editor.addCommand(
+      monaco.KeyCode.Enter,
+      () => {
+        onEnter?.(editor.getValue());
+      },
+      '!suggestWidgetVisible && isEditorFocused' + id,
+    );
+
+    // Setup validation on content change using decorations (no marker hover clutter)
+    const model = editor.getModel();
+    let errorDecorations: string[] = [];
+
+    if (model) {
+      const updateDecorations = () => {
+        const exprValue = model.getValue();
+        const markers = validateExpr(exprValue);
+
+        const newDecorations: monaco.editor.IModelDeltaDecoration[] = markers.map((m) => ({
+          range: new monaco.Range(
+            m.startLineNumber,
+            m.startColumn,
+            m.endLineNumber,
+            m.endColumn,
+          ),
+          options: {
+            className: 'expr-error-squiggly',
+            hoverMessage: { value: m.message },
+            minimap: { color: '#e51400', position: 1 as monaco.editor.MinimapPosition },
+            overviewRuler: { color: '#e51400', position: monaco.editor.OverviewRulerLane.Right },
+          },
+        }));
+
+        errorDecorations = model.deltaDecorations(errorDecorations, newDecorations);
+      };
+
+      const validateDisposable = model.onDidChangeContent(updateDecorations);
+      disposablesRef.current.push(validateDisposable);
+
+      // Run initial validation
+      updateDecorations();
+    }
+
+    // Inject CSS for the red squiggly underline
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `
+      .expr-error-squiggly {
+        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' preserveAspectRatio='none'%3E%3Cpath d='M0,2.5 L1.5,1 L3,2.5 L4.5,1 L6,2.5' stroke='%23e51400' stroke-width='0.6' fill='none'/%3E%3C/svg%3E") repeat-x left bottom;
+        background-size: 6px 3px;
+        padding-bottom: 3px;
+      }
+    `;
+    document.head.appendChild(styleEl);
+    disposablesRef.current.push({ dispose: () => styleEl.remove() });
+
+    editorDidMount?.(editor);
+  };
+
+  const handleChange = (newValue: string, _e: monacoTypes.editor.IModelContentChangedEvent) => {
+    onChange?.(newValue);
+  };
+
+  const themeValue = themeMap[theme];
+
+  return (
+    <div
+      className={
+        'ant-input' +
+        (size ? ` ${SIZE_MAP[size].className}` : '') +
+        (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
+        (readOnly ? ` ${containerReadOnlyClassName}` : '') +
+        (className ? ` ${className}` : '')
+      }
+      style={{
+        display: 'block',
+        resize: 'vertical',
+        overflow: 'auto',
+        minHeight: SIZE_MAP[size].minHeight,
+        maxHeight,
+      }}
+    >
+      <div
+        ref={containerRef}
+        style={{
+          height: '100%',
+        }}
+      >
+        <MonacoEditor
+          language={EXPR_LANG_ID}
+          theme={themeValue}
+          value={value}
+          onChange={handleChange}
+          options={{
+            placeholder: placeholder,
+            selectOnLineNumbers: true,
+            fontSize: fontSize || 12,
+            roundedSelection: false,
+            scrollBeyondLastLine: false,
+            readOnly: readOnly || disabled,
+            minimap: { enabled: false },
+            lineNumbers: 'off',
+            lineNumbersMinChars: 0,
+            glyphMargin: false,
+            folding: false,
+            lineDecorationsWidth: 0,
+            overviewRulerLanes: 0,
+            overviewRulerBorder: false,
+            hideCursorInOverviewRuler: true,
+            hover: {
+              enabled: true,
+              delay: 200,
+            },
+            fixedOverflowWidgets: true,
+            renderLineHighlight: 'none',
+            renderValidationDecorations: 'on',
+            scrollbar: {
+              vertical: 'hidden',
+              horizontal: 'auto',
+            },
+            automaticLayout: true,
+            wordWrap: 'on',
+          }}
+          editorDidMount={handleEditorMount}
+        />
+      </div>
+    </div>
+  );
+}

package/src/expr/parser/index.ts

@@ -0,0 +1,3 @@
+export { ExprParser } from './parser';
+export { Lexer } from './lexer';
+export * from './types';