Add setting to render ligatures in codemirror cell editor (#2609)

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({

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": {

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

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,

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"