@fc-components/monaco-editor 0.3.4 → 0.3.6

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.4",
+  "version": "0.3.6",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/sql/format.ts

@@ -2,7 +2,7 @@ import { format } from 'sql-formatter';
 
 export function formatSql(sql: string): string {
   try {
-    return format(sql, {
+    const formatted = format(sql, {
       tabWidth: 2,
       keywordCase: 'upper',
       // Treat custom $__ prefixed macros (like $__timeFilter, $__timeRange, etc.)
@@ -11,6 +11,9 @@ export function formatSql(sql: string): string {
         custom: [{ regex: String.raw`\$__[a-zA-Z_][a-zA-Z0-9_]*` }],
       },
     });
+    // sql-formatter treats $__xxx as a placeholder and inserts a space before '('.
+    // Remove that extra space so $__timeFilter( stays intact as a function call.
+    return formatted.replace(/(\$__[a-zA-Z_][a-zA-Z0-9_]*)\s+\(/g, '$1(');
   } catch {
     // If formatting fails, return the original SQL
     return sql;

package/src/sql/index.tsx

@@ -335,7 +335,9 @@ const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>((props, ref) => {
       </div>
       {enableFormat &&
         (renderFormatButton ? (
-          renderFormatButton(handleFormat)
+          <div style={{ position: 'absolute', top: 4, right: 4, zIndex: 10 }} onClick={handleFormat}>
+            {renderFormatButton(handleFormat)}
+          </div>
         ) : (
           <button
             onClick={handleFormat}