Merge sprint-3/fix-editor-font — font picker now works

Author: prithaxdev

apps/web/components/review-card.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import CodeMirror from "@uiw/react-codemirror"
-import { getThemeExtension, getFontCss, cleanGutter } from "@/lib/editor-prefs"
+import { getThemeExtension, getFontExtension, cleanGutter } from "@/lib/editor-prefs"
 import { useEditorPrefs } from "@/hooks/use-editor-prefs"
 import { cn } from "@/lib/utils"
 import { getLanguageExtension, type Language } from "@/lib/languages"
@@ -96,6 +96,7 @@ export function ReviewCard({ snippet, index, total, onRate, submittingRating }:
                     ? [getLanguageExtension(snippet.language as Language)!]
                     : []),
                   cleanGutter,
+                  getFontExtension(prefs.font),
                 ]}
                 editable={false}
                 basicSetup={{
@@ -105,7 +106,6 @@ export function ReviewCard({ snippet, index, total, onRate, submittingRating }:
                   autocompletion: false,
                 }}
                 className="text-sm"
-                style={{ fontFamily: getFontCss(prefs.font) }}
               />
             </div>
           </div>

apps/web/components/snippet-detail-client.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation"
 import { useAuth } from "@clerk/nextjs"
 import { useQueryClient } from "@tanstack/react-query"
 import CodeMirror from "@uiw/react-codemirror"
-import { getThemeExtension, getFontCss, cleanGutter } from "@/lib/editor-prefs"
+import { getThemeExtension, getFontExtension, cleanGutter } from "@/lib/editor-prefs"
 import { useEditorPrefs } from "@/hooks/use-editor-prefs"
 import { EditorToolbar } from "@/components/editor-toolbar"
 import { HugeiconsIcon } from "@hugeicons/react"
@@ -253,6 +253,7 @@ function EditDialog({
                 extensions={[
                   ...(getLanguageExtension(language) ? [getLanguageExtension(language)!] : []),
                   cleanGutter,
+                  getFontExtension(prefs.font),
                 ]}
                 basicSetup={{
                   lineNumbers: true,
@@ -261,11 +262,7 @@ function EditDialog({
                   autocompletion: false,
                 }}
                 className="text-sm"
-                style={{
-                  fontFamily: getFontCss(prefs.font),
-                  maxHeight: "280px",
-                  overflowY: "auto",
-                }}
+                style={{ maxHeight: "280px", overflowY: "auto" }}
               />
             </div>
           </div>

apps/web/components/snippet-editor.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { useForm } from "@tanstack/react-form"
 import CodeMirror from "@uiw/react-codemirror"
-import { getThemeExtension, getFontCss, cleanGutter } from "@/lib/editor-prefs"
+import { getThemeExtension, getFontExtension, cleanGutter } from "@/lib/editor-prefs"
 import { useEditorPrefs } from "@/hooks/use-editor-prefs"
 import { EditorToolbar } from "@/components/editor-toolbar"
 import { cn } from "@/lib/utils"
@@ -248,6 +248,7 @@ export function SnippetEditor() {
                           ? [getLanguageExtension(language as Language)!]
                           : []),
                         cleanGutter,
+                        getFontExtension(prefs.font),
                       ]}
                       minHeight="240px"
                       basicSetup={{
@@ -257,7 +258,6 @@ export function SnippetEditor() {
                         autocompletion: true,
                       }}
                       className="text-sm"
-                      style={{ fontFamily: getFontCss(prefs.font) }}
                     />
                   )}
                 </form.Subscribe>

apps/web/lib/editor-prefs.ts

@@ -47,6 +47,18 @@ export function getFontCss(font: EditorFont): string {
   return EDITOR_FONTS.find((f) => f.value === font)?.css ?? EDITOR_FONTS[0].css
 }
 
+// CodeMirror sets font-family on .cm-scroller internally, so a wrapper style prop
+// has no effect. This extension targets the internal elements directly.
+export function getFontExtension(font: EditorFont): Extension {
+  const family = getFontCss(font)
+  return EditorView.theme({
+    "&":             { fontFamily: family },
+    ".cm-scroller":  { fontFamily: family },
+    ".cm-content":   { fontFamily: family },
+    ".cm-tooltip":   { fontFamily: family },
+  })
+}
+
 // Cleans up the line-number gutter across all themes:
 // transparent background, subtle separator, tabular-nums, muted color.
 export const cleanGutter = EditorView.theme({