@fc-components/monaco-editor 0.2.1 → 0.3.2

package/src/expr/validation.ts

@@ -0,0 +1,209 @@
+import * as monaco from 'monaco-editor';
+import { ExprParser } from './parser';
+
+const EXPR_LANG_ID = 'expr';
+
+const parser = new ExprParser();
+
+/**
+ * Validate an expr-lang expression and return Monaco editor markers.
+ * Uses the recursive descent parser for syntax errors,
+ * plus regex-based checks for structural issues like unbalanced quotes/brackets.
+ */
+export const validateExpr = (expr: string): Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] => {
+  const markers: Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] = [];
+
+  if (!expr || expr.trim().length === 0) {
+    return markers;
+  }
+
+  // 1. Parser-based syntax validation
+  const parseErrors = parser.parse(expr);
+  for (const err of parseErrors) {
+    markers.push({
+      severity: monaco.MarkerSeverity.Error,
+      startLineNumber: err.startLine,
+      startColumn: err.startColumn,
+      endLineNumber: err.endLine,
+      endColumn: err.endColumn,
+      message: err.message,
+    });
+  }
+
+  // 2. Line-level structural checks (fallback for issues the parser might miss)
+  const structuralMarkers = validateLineLevel(expr);
+  markers.push(...structuralMarkers);
+
+  return markers;
+};
+
+/**
+ * Basic line-level validation for quotes and bracket balancing.
+ */
+function validateLineLevel(expr: string): Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] {
+  const markers: Omit<monaco.editor.IMarker, 'owner' | 'resource'>[] = [];
+  const lines = expr.split('\n');
+  let inBlockComment = false;
+
+  lines.forEach((line, index) => {
+    const lineNumber = index + 1;
+
+    // Track block comment state
+    if (!inBlockComment) {
+      const blockCommentStart = line.indexOf('/*');
+      if (blockCommentStart !== -1) {
+        const blockCommentEnd = line.indexOf('*/', blockCommentStart + 2);
+        if (blockCommentEnd === -1) {
+          inBlockComment = true;
+        }
+      }
+    } else {
+      const blockCommentEnd = line.indexOf('*/');
+      if (blockCommentEnd !== -1) {
+        inBlockComment = false;
+      }
+      if (inBlockComment || line.trim().startsWith('/*')) {
+        return;
+      }
+    }
+
+    const trimmedLine = line.trim();
+    if (trimmedLine.startsWith('//') || trimmedLine.startsWith('/*')) {
+      return;
+    }
+
+    // Check for unclosed quotes
+    const singleQuotes = countQuotesOutsideBlockComments(line);
+    if (singleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: "Unclosed single quote '",
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const doubleQuotes = countDoubleQuotesOutsideBlockComments(line);
+    if (doubleQuotes % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed double quote "',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const backticks = (line.match(/`/g) || []).length;
+    if (backticks % 2 !== 0) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unclosed backtick `',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    // Check for unbalanced brackets
+    const openParens = (line.match(/\(/g) || []).length;
+    const closeParens = (line.match(/\)/g) || []).length;
+    if (openParens > closeParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening parenthesis',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeParens > openParens) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing parenthesis',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const openBrackets = (line.match(/\[/g) || []).length;
+    const closeBrackets = (line.match(/\]/g) || []).length;
+    if (openBrackets > closeBrackets) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening bracket',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeBrackets > openBrackets) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing bracket',
+        source: EXPR_LANG_ID,
+      });
+    }
+
+    const openBraces = (line.match(/\{/g) || []).length;
+    const closeBraces = (line.match(/\}/g) || []).length;
+    if (openBraces > closeBraces) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched opening curly brace',
+        source: EXPR_LANG_ID,
+      });
+    } else if (closeBraces > openBraces) {
+      markers.push({
+        severity: monaco.MarkerSeverity.Warning,
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: line.length + 1,
+        message: 'Unmatched closing curly brace',
+        source: EXPR_LANG_ID,
+      });
+    }
+  });
+
+  return markers;
+}
+
+function countQuotesOutsideBlockComments(line: string): number {
+  const withoutBlockComments = line.replace(/\/\*[\s\S]*?\*\//g, '');
+  return (withoutBlockComments.match(/'/g) || []).length;
+}
+
+function countDoubleQuotesOutsideBlockComments(line: string): number {
+  const withoutBlockComments = line.replace(/\/\*[\s\S]*?\*\//g, '');
+  return (withoutBlockComments.match(/"/g) || []).length;
+}
+
+/**
+ * Validate an expr-lang expression and return a plain array of human-readable error messages.
+ * Returns an empty array if the expression is valid.
+ */
+export function checkExpr(expr: string): string[] {
+  const errors = parser.parse(expr);
+  return errors.map((e) => `${e.startLine}:${e.startColumn}: ${e.message}`);
+}

package/src/index.tsx

@@ -1,7 +1,9 @@
 import promql from './promql';
 import yaml from './yaml';
 import sql from './sql';
+import expr from './expr';
 
 export { promql as PromQLMonacoEditor };
 export { yaml as YamlMonacoEditor };
 export { sql as SqlMonacoEditor };
+export { expr as ExprMonacoEditor };

package/src/sql/format.ts

@@ -0,0 +1,13 @@
+import { format } from 'sql-formatter';
+
+export function formatSql(sql: string): string {
+  try {
+    return format(sql, {
+      tabWidth: 2,
+      keywordCase: 'upper',
+    });
+  } catch {
+    // If formatting fails, return the original SQL
+    return sql;
+  }
+}

package/src/sql/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, 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';
@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { css } from '@emotion/css';
 import { language, languageConfiguration } from './sql';
 import { getSqlCompletionProvider } from './completion/getCompletionProvider';
+import { formatSql } from './format';
 
 interface SqlEditorProps {
   className?: string;
@@ -23,6 +24,14 @@ interface SqlEditorProps {
   onBlur?: (value: string) => void;
   onFocus?: (value: string) => void;
   editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+  /** Whether to show the format button. Default: false */
+  enableFormat?: boolean;
+  /** Custom format button renderer */
+  renderFormatButton?: (handleFormat: () => void) => React.ReactNode;
+}
+
+export interface SqlEditorHandle {
+  format: () => void;
 }
 
 const SQL_LANG_ID = 'sql';
@@ -73,7 +82,32 @@ const containerReadOnlyClassName = css`
   }
 `;
 
-export default function SqlEditor(props: SqlEditorProps) {
+const formatBtnClassName = css`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 1;
+    background: var(--format-btn-hover-bg, rgba(128, 128, 128, 0.15));
+  }
+`;
+
+const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>((props, ref) => {
   const id = uuidv4();
   const {
     className,
@@ -83,6 +117,7 @@ export default function SqlEditor(props: SqlEditorProps) {
     theme = 'light',
     value = '',
     placeholder,
+    enableFormat = false,
     enableAutocomplete = true,
     readOnly = false,
     disabled = false,
@@ -91,6 +126,7 @@ export default function SqlEditor(props: SqlEditorProps) {
     onBlur,
     onFocus,
     editorDidMount,
+    renderFormatButton,
   } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -223,6 +259,18 @@ export default function SqlEditor(props: SqlEditorProps) {
     editorDidMount?.(editor);
   };
 
+  const handleFormat = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const currentValue = editor.getValue();
+    const formatted = formatSql(currentValue);
+    editor.setValue(formatted);
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    format: handleFormat,
+  }));
+
   const themeValue = themeMap[theme];
 
   return (
@@ -238,6 +286,7 @@ export default function SqlEditor(props: SqlEditorProps) {
         display: 'block',
         resize: 'vertical',
         overflow: 'auto',
+        position: 'relative',
         minHeight: SIZE_MAP[size].minHeight,
         maxHeight,
       }}
@@ -285,6 +334,45 @@ export default function SqlEditor(props: SqlEditorProps) {
           }}
         />
       </div>
+      {enableFormat &&
+        (renderFormatButton ? (
+          renderFormatButton(handleFormat)
+        ) : (
+          <button
+            onClick={handleFormat}
+            className={formatBtnClassName}
+            title='Format SQL'
+            style={
+              {
+                '--format-btn-hover-bg':
+                  theme === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(128,128,128,0.15)',
+              } as React.CSSProperties
+            }
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              width='16'
+              height='16'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            >
+              <path d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72' />
+              <path d='m14 7 3 3' />
+              <path d='M5 6v4' />
+              <path d='M19 14v4' />
+              <path d='M10 2v2' />
+              <path d='M7 8H3' />
+              <path d='M21 16h-4' />
+              <path d='M11 3H9' />
+            </svg>
+          </button>
+        ))}
     </div>
   );
-}
+});
+
+export default SqlEditor;