@fc-components/monaco-editor 0.3.2 → 0.3.4

package/package.json

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

package/src/sql/format.ts

@@ -5,6 +5,11 @@ export function formatSql(sql: string): string {
     return format(sql, {
       tabWidth: 2,
       keywordCase: 'upper',
+      // Treat custom $__ prefixed macros (like $__timeFilter, $__timeRange, etc.)
+      // as parameter placeholders so the formatter doesn't choke on them.
+      paramTypes: {
+        custom: [{ regex: String.raw`\$__[a-zA-Z_][a-zA-Z0-9_]*` }],
+      },
     });
   } catch {
     // If formatting fails, return the original SQL

package/src/sql/index.tsx

@@ -98,11 +98,10 @@ const formatBtnClassName = css`
   border-radius: 4px;
   cursor: pointer;
   color: inherit;
-  opacity: 0.6;
+  opacity: 1;
   transition: opacity 0.15s;
 
   &:hover {
-    opacity: 1;
     background: var(--format-btn-hover-bg, rgba(128, 128, 128, 0.15));
   }
 `;
@@ -344,19 +343,18 @@ const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>((props, ref) => {
             title='Format SQL'
             style={
               {
-                '--format-btn-hover-bg':
-                  theme === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(128,128,128,0.15)',
+                '--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'
+              width='12'
+              height='12'
               viewBox='0 0 24 24'
               fill='none'
               stroke='currentColor'
-              strokeWidth='2'
+              strokeWidth='1'
               strokeLinecap='round'
               strokeLinejoin='round'
             >