From 44e8a25114e6f95707a5deffcacf404edcd6320c Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Tue, 2 Sep 2025 12:46:16 +0530
Subject: [PATCH] fix: unwanted gap between cursor and the typed character

- Added a new CSS rule to ensure the ACE editor uses monospace fonts.
- Refactored font initialization logic in JavaScript to apply fonts globally for UI elements while maintaining monospace for the ACE editor.
- Updated comments for clarity regarding font application and ACE editor behavior.

Ref #40
---
 static/css/app.css |  5 +++++
 static/js/app.js   | 36 ++++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/static/css/app.css b/static/css/app.css
index da668b812..dd4cc3650 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -731,6 +731,11 @@ body, html {
   height: 238px;
 }
 
+/* Ensure ACE editor always uses monospace fonts */
+.ace_editor, .ace_editor * {
+  font-family: var(--pgweb-mono-font-family) !important;
+}
+
 #connection_window {
   z-index: 3;
   position: fixed;
diff --git a/static/js/app.js b/static/js/app.js
index e2059e4c7..3ba2eda36 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -139,7 +139,7 @@ function initializeFontsFromConfig() {
         var fontSize = data.size || 'inherit';
         var googleFonts = data.google_fonts;
         
-        // Load Google Fonts if specified
+        // Load Google Fonts if specified (for UI elements only)
         if (googleFonts) {
           // Convert "Space Grotesk:300,400,500,600,700" to Google Fonts API v2 format
           var fontParts = googleFonts.split(':');
@@ -152,32 +152,36 @@ function initializeFontsFromConfig() {
           link.rel = 'stylesheet';
           link.href = googleFontsUrl;
           document.head.appendChild(link);
-          
-          // Wait for font to load before applying to editor
-          link.onload = function() {
-            applyFontsToEditor(fontFamily, fontSize);
-          };
-        } else {
-          // Apply fonts immediately if no Google Fonts to load
-          applyFontsToEditor(fontFamily, fontSize);
         }
         
-        // Apply font family and size to CSS variables immediately
-        document.documentElement.style.setProperty('--pgweb-font-family', fontFamily);
-        document.documentElement.style.setProperty('--pgweb-font-size', fontSize);
+        // Apply fonts immediately - ACE editor will use monospace regardless
+        applyFontsGlobally(fontFamily, fontSize);
       }
     }
   });
 }
 
+
+function applyFontsGlobally(fontFamily, fontSize) {
+  // Apply font family and size to CSS variables for UI elements
+  document.documentElement.style.setProperty('--pgweb-font-family', fontFamily);
+  document.documentElement.style.setProperty('--pgweb-font-size', fontSize);
+  
+  // Apply font size to ACE editor (but keep monospace family)
+  applyFontsToEditor(fontFamily, fontSize);
+}
+
+
 function applyFontsToEditor(fontFamily, fontSize) {
-  // Apply font to Ace editor if it exists and force layout refresh
+  // ACE editor must always use monospace fonts for correct cursor positioning
+  // Don't apply proportional fonts to ACE - it breaks cursor alignment
   if (typeof editor !== 'undefined' && editor) {
     editor.setOptions({
-      fontFamily: fontFamily,
-      fontSize: fontSize
+      // Always use monospace fonts for ACE editor
+      fontFamily: 'Monaco, Menlo, Ubuntu Mono, monospace',
+      fontSize: fontSize  // Size can be customized, but keep monospace family
     });
-    // Force editor to recalculate character widths
+    // Force editor to recalculate character widths after any font changes
     editor.resize(true);
   }
 }