From 7a31e892de9363f996f856304fff1a8181dc7e4a Mon Sep 17 00:00:00 2001
From: Juergen Braungardt <Juergen.Braungardt@gmx.de>
Date: Fri, 17 May 2024 11:14:47 +0200
Subject: [PATCH] Add setting to render ligatures in codemirror cell editor
 (#2609)

---
 assets/js/hooks/cell_editor/live_editor.js                | 7 +++++++
 .../js/hooks/cell_editor/live_editor/codemirror/theme.js  | 1 -
 assets/js/hooks/editor_settings.js                        | 8 ++++++++
 assets/js/lib/settings.js                                 | 1 +
 lib/livebook_web/live/settings_live.ex                    | 1 +
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/assets/js/hooks/cell_editor/live_editor.js b/assets/js/hooks/cell_editor/live_editor.js
index 53f9fb92ac7..2c2cb64649a 100644
--- a/assets/js/hooks/cell_editor/live_editor.js
+++ b/assets/js/hooks/cell_editor/live_editor.js
@@ -276,6 +276,12 @@ export default class LiveEditor {
       "&": { fontSize: `${settings.editor_font_size}px` },
     });
 
+    const ligaturesTheme = EditorView.theme({
+      "&": {
+        fontVariantLigatures: `${settings.editor_ligatures ? "normal" : "none"}`,
+      },
+    });
+
     const lineWrappingEnabled =
       this.language === "markdown" && settings.editor_markdown_word_wrap;
 
@@ -319,6 +325,7 @@ export default class LiveEditor {
         EditorView.contentAttributes.of({ tabIndex: -1 }),
         fontSizeTheme,
         settings.editor_theme === "light" ? lightTheme : theme,
+        ligaturesTheme,
         collab(this.collabClient),
         collabMarkers(this.collabClient),
         autocompletion({
diff --git a/assets/js/hooks/cell_editor/live_editor/codemirror/theme.js b/assets/js/hooks/cell_editor/live_editor/codemirror/theme.js
index d096eba6735..50c3b7bd2ef 100644
--- a/assets/js/hooks/cell_editor/live_editor/codemirror/theme.js
+++ b/assets/js/hooks/cell_editor/live_editor/codemirror/theme.js
@@ -20,7 +20,6 @@ function buildEditorTheme(colors, { dark }) {
         backgroundColor: colors.background,
         fontSize: "14px",
         fontFamily: fonts.mono,
-        fontVariantLigatures: "none",
       },
 
       "&.cm-focused": {
diff --git a/assets/js/hooks/editor_settings.js b/assets/js/hooks/editor_settings.js
index 0f04c2668f1..9ff69413f32 100644
--- a/assets/js/hooks/editor_settings.js
+++ b/assets/js/hooks/editor_settings.js
@@ -20,6 +20,9 @@ const EditorSettings = {
     const editorFontSizeCheckbox = this.el.querySelector(
       `[name="editor_font_size"][value="true"]`,
     );
+    const editorLigaturesCheckbox = this.el.querySelector(
+      `[name="editor_ligatures"][value="true"]`,
+    );
     const editorLightThemeCheckbox = this.el.querySelector(
       `[name="editor_light_theme"][value="true"]`,
     );
@@ -32,6 +35,7 @@ const EditorSettings = {
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
     editorFontSizeCheckbox.checked =
       settings.editor_font_size === EDITOR_FONT_SIZE.large ? true : false;
+    editorLigaturesCheckbox.checked = settings.editor_ligatures;
     editorLightThemeCheckbox.checked =
       settings.editor_theme === EDITOR_THEME.light ? true : false;
     editorMarkdownWordWrapCheckbox.checked = settings.editor_markdown_word_wrap;
@@ -53,6 +57,10 @@ const EditorSettings = {
       });
     });
 
+    editorLigaturesCheckbox.addEventListener("change", (event) => {
+      settingsStore.update({ editor_ligatures: event.target.checked });
+    });
+
     editorLightThemeCheckbox.addEventListener("change", (event) => {
       settingsStore.update({
         editor_theme: event.target.checked
diff --git a/assets/js/lib/settings.js b/assets/js/lib/settings.js
index 35aacd2f101..07adb63d8d5 100644
--- a/assets/js/lib/settings.js
+++ b/assets/js/lib/settings.js
@@ -24,6 +24,7 @@ const DEFAULTSETTINGS = {
   editor_auto_signature: true,
   editor_font_size: EDITOR_FONT_SIZE.normal,
   editor_theme: EDITOR_THEME.default,
+  editor_ligatures: false,
   editor_markdown_word_wrap: true,
   editor_mode: EDITOR_MODE.default,
   custom_view_show_section: true,
diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex
index 35b6b28dcf0..046f668734e 100644
--- a/lib/livebook_web/live/settings_live.ex
+++ b/lib/livebook_web/live/settings_live.ex
@@ -156,6 +156,7 @@ defmodule LivebookWeb.SettingsLive do
                 value={false}
               />
               <.switch_field name="editor_font_size" label="Increase font size" value={false} />
+              <.switch_field name="editor_ligatures" label="Render ligatures" value={false} />
               <.switch_field name="editor_light_theme" label="Use light theme" value={false} />
               <.switch_field
                 name="editor_markdown_word_wrap"