enhance(ui): support global mode for the custom font family (#12226)

src/main/frontend/components/container.cljs

@@ -406,7 +406,7 @@
   (let [current-repo (state/sub :git/current-repo)
         theme (state/sub :ui/theme)
         accent-color (some-> (state/sub :ui/radix-color) (name))
-        editor-font (some-> (state/sub :ui/editor-font) (name))
+        editor-font (state/sub :ui/editor-font)
         system-theme? (state/sub :ui/system-theme?)
         light? (= "light" (state/sub :ui/theme))
         sidebar-open? (state/sub :ui/sidebar-open?)

src/main/frontend/components/settings.cljs

@@ -241,25 +241,31 @@
      [:div {:style {:text-align "right"}}
       (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-wide-mode))])])
 
-(defn editor-font-family-row [t font]
+(defn editor-font-family-row [t {:keys [type global]}]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for "font_family"}
     (t :settings-page/editor-font)]
-   [:div.col-span-2.flex.gap-2
-    (for [t [:default :serif :mono]
-          :let [t (name t)
-                tt (string/capitalize t)
-                active? (= font t)]]
-      (shui/button
-       {:variant :secondary
-        :class (when active? " border-primary border-[2px]")
-        :style {:width "4.4rem"}
-        :on-click #(state/set-editor-font! t)}
-       [:span.flex.flex-col
-        {:class (str "ls-font-" t)}
-        [:strong "Ag"]
-        [:small tt]]))]])
+   [:div.flex.flex-col.col-span-2
+    [:div.flex.gap-2
+     (for [t [:default :serif :mono]
+           :let [t (name t)
+                 tt (string/capitalize t)
+                 active? (= (or type "default") t)]]
+       (shui/button
+         {:variant :secondary
+          :class (when active? " border-primary border-[2px]")
+          :style {:width "4.4rem"}
+          :on-click #(state/set-editor-font! {:type t})}
+         [:span.flex.flex-col
+          {:class (str "ls-font-" t)}
+          [:strong "Ag"]
+          [:small tt]]))]
+    [:div.pt-3
+     [:label.w-full.flex.items-center.cursor-pointer
+      (shui/checkbox {:checked (boolean global)
+                      :on-checked-change #(state/set-editor-font! {:global %})})
+      [:span.pl-1.text-sm.opacity-70 "Set as global font family"]]]]])
 
 (rum/defcs switch-spell-check-row < rum/reactive
   [state t]

src/main/frontend/components/theme.cljs

@@ -63,9 +63,12 @@
      [accent-color])
 
     (hooks/use-effect!
-     #(some-> js/document.documentElement
-              (.setAttribute "data-font" (or editor-font "default")))
-     [editor-font])
+      (fn []
+        (when-let [{:keys [type global]} editor-font]
+          (doto js/document.documentElement
+            (.setAttribute "data-font" (or type "default"))
+            (.setAttribute "data-font-global" (boolean global)))))
+      [editor-font])
 
     (hooks/use-effect!
      #(let [doc js/document.documentElement]

src/main/frontend/components/theme.css

@@ -16,7 +16,7 @@
   }
 }
 
-.visible-scrollbar , html.custom-scrollbar {
+.visible-scrollbar, html.custom-scrollbar {
   ::-webkit-scrollbar-thumb {
     background-color: var(--lx-gray-05, var(--ls-scrollbar-foreground-color, var(--rx-gray-05)));
   }
@@ -89,7 +89,8 @@ html[data-theme='light'] .theme-container {
   }
 }
 
-html[data-theme='dark'] .theme-container {}
+html[data-theme='dark'] .theme-container {
+}
 
 html.locked-scroll {
   overflow: hidden !important;
@@ -181,6 +182,14 @@ html[data-font='serif'] .ls-block, .ls-font-serif {
   font-family: Lyon-Text, Georgia, ui-serif, serif;
 }
 
+html[data-font='serif'][data-font-global='true'] {
+  --ls-font-family: Lyon-Text, Georgia, ui-serif, serif;
+}
+
 html[data-font='mono'] .ls-block, .ls-font-mono {
   font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;
 }
+
+html[data-font='mono'][data-font-global='true'] {
+  --ls-font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;
+}

src/main/frontend/state.cljs

@@ -2287,10 +2287,11 @@ Similar to re-frame subscriptions"
   (swap! state assoc :ui/radix-color color)
   (storage/set :ui/radix-color color))
 
-(defn set-editor-font! [font]
-  (let [font (if (keyword? font) (name font) (str font))]
-    (swap! state assoc :ui/editor-font font)
-    (storage/set :ui/editor-font font)))
+(defn set-editor-font! [config]
+  (let [config' (:ui/editor-font @state)
+        config (if (map? config') (merge config' config) {})]
+    (swap! state assoc :ui/editor-font config)
+    (storage/set :ui/editor-font config)))
 
 (defn handbook-open?
   []