@fc-components/monaco-editor 0.3.1 → 0.3.2

package/dist/sql/format.d.ts

@@ -0,0 +1 @@
+export declare function formatSql(sql: string): string;

package/dist/sql/index.d.ts

@@ -16,6 +16,13 @@ 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 default function SqlEditor(props: SqlEditorProps): React.JSX.Element;
-export {};
+export interface SqlEditorHandle {
+    format: () => void;
+}
+declare const SqlEditor: React.ForwardRefExoticComponent<SqlEditorProps & React.RefAttributes<SqlEditorHandle>>;
+export default SqlEditor;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",
@@ -58,6 +58,7 @@
     "monaco-promql": "^1.7.4",
     "pluralize": "^8.0.0",
     "react-monaco-editor": "^0.58.0",
+    "sql-formatter": "^15.8.0",
     "uuidv4": "^6.2.13"
   }
 }

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;