From c0cf898c10effe88f3f2a103f610b8151d9641f1 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 2 Apr 2025 16:36:52 +1100
Subject: [PATCH] FEATURE: when rich-editor is enabled use Jetbrains Mono as
 code font (#32122)

This change forces consistency around code font in Discourse once the
new
rich-editor is enabled

- This means all code blocks in Discourse will render with this font
- Additionally the markdown mode composer will render with this font

Additionally we make 3 small adjustments:

1. We disable ligatures which conflict with typographer
2. We add support for custom ligature settings
3. We adjust down font size, cause 14px ends up matching visually with a
16px non monospace font, this change is already in place previously on
posts

Example:


![image](https://github.com/user-attachments/assets/eca0b544-f3a4-4172-b2af-b39a3c0208e7)
---
 Gemfile.lock                                  |  4 +--
 app/assets/stylesheets/common/d-editor.scss   |  2 ++
 .../stylesheets/common/foundation/base.scss   |  3 --
 lib/stylesheet/importer.rb                    | 28 +++++++++++++++++++
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 613a3f39b2a..eb446456c8f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -127,7 +127,7 @@ GEM
     digest (3.2.0)
     digest-xxhash (0.2.9)
     discourse-emojis (1.0.38)
-    discourse-fonts (0.0.18)
+    discourse-fonts (0.0.19)
     discourse-seed-fu (2.3.12)
       activerecord (>= 3.1)
       activesupport (>= 3.1)
@@ -851,7 +851,7 @@ CHECKSUMS
   digest (3.2.0) sha256=fa2e7092ec683f65d82fadde5ff4ca3b32e23ee0b19f1fc1a5e09993ad2d3991
   digest-xxhash (0.2.9) sha256=a989d8309c03c4136a4bea9981ec0a146a2750de7f3dfb7b5624a3038aa598d7
   discourse-emojis (1.0.38) sha256=4f9cfcbc7ea8aef69e1210e8796233ad9923ae908ee7696424f3ad92e51d6c51
-  discourse-fonts (0.0.18) sha256=a7d25c13edd3325ae40010ca277530d69fc7952a05aa7b2ff07c1d07412b72a1
+  discourse-fonts (0.0.19) sha256=78d4ddd671615908303a675427039d8d787c935e6deae184c6e143c18c6e0033
   discourse-seed-fu (2.3.12) sha256=4f61d95c11ed54609046cd04eb3a51b531c5fa863fa86d1bea7d74264e5c75e4
   discourse_dev_assets (0.0.5) sha256=a09a801a210aa3f7247dd382dfd73b389d4bd02be86be675eca2d451f9898285
   docile (1.4.1) sha256=96159be799bfa73cdb721b840e9802126e4e03dfc26863db73647204c727f21e
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 5e44e8ba990..b161fd504d6 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -5,6 +5,8 @@
 
   &--rich-editor-enabled .d-editor-textarea-wrapper textarea.d-editor-input {
     font-family: var(--d-font-family--monospace);
+    font-size: var(--font-down-1);
+    font-variant-ligatures: none;
   }
 }
 
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 485948c7253..87b8c8172c7 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -11,9 +11,6 @@
   --d-button-border-radius: 2px;
   --d-input-border-radius: 2px;
   --d-content-background: initial;
-  --d-font-family--monospace:
-    ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo,
-    monaco, consolas, monospace;
   --d-button-transition: none;
 }
 
diff --git a/lib/stylesheet/importer.rb b/lib/stylesheet/importer.rb
index 07410faf608..fad0b522779 100644
--- a/lib/stylesheet/importer.rb
+++ b/lib/stylesheet/importer.rb
@@ -64,9 +64,31 @@ module Stylesheet
 
         CSS
 
+      if SiteSetting.rich_editor
+        contents << <<~CSS
+          #{font_css(jetbrains_mono)}
+          #{render_font_special_properties(jetbrains_mono, "body")}
+          :root {
+            --d-font-family--monospace: #{jetbrains_mono[:stack]};
+          }
+
+        CSS
+      else
+        contents << <<~CSS
+          :root {
+            --d-font-family--monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace;
+          }
+
+        CSS
+      end
+
       contents
     end
 
+    def jetbrains_mono
+      @@jetbrains_mono ||= DiscourseFonts.fonts.find { |f| f[:key] == "jet_brains_mono" }
+    end
+
     def wizard_fonts
       contents = +""
 
@@ -262,6 +284,12 @@ module Stylesheet
       else
         contents << "#{" " * indent}font-feature-settings: normal;\n"
       end
+
+      # avoiding adding normal to the CSS cause it is not needed in this case
+      if font[:font_variant_ligatures].present?
+        contents << "#{" " * indent}font-variant-ligatures: #{font[:font_variant_ligatures]};\n"
+      end
+
       contents
     end
   end