Adds an option to increase the font size of the editor (#860)

* Adds an option to increase the font size of the editor

* Update lib/livebook_web/live/settings_live.ex

Co-authored-by: José Valim <jose.valim@gmail.com>

* Editor font size options as constants

Co-authored-by: José Valim <jose.valim@gmail.com>

assets/js/cell/live_editor.js

@@ -162,7 +162,7 @@ class LiveEditor {
       renderLineHighlight: "none",
       theme: "custom",
       fontFamily: "JetBrains Mono, Droid Sans Mono, monospace",
-      fontSize: 14,
+      fontSize: settings.editor_font_size,
       tabIndex: -1,
       tabSize: 2,
       autoIndent: true,

assets/js/editor_settings/index.js

@@ -1,4 +1,8 @@
-import { loadLocalSettings, storeLocalSettings } from "../lib/settings";
+import {
+  loadLocalSettings,
+  storeLocalSettings,
+  EDITOR_FONT_SIZE,
+} from "../lib/settings";
 
 /**
  * A hook for the editor settings.
@@ -17,9 +21,14 @@ const EditorSettings = {
     const editorAutoSignatureCheckbox = this.el.querySelector(
       `[name="editor_auto_signature"][value="true"]`
     );
+    const editorFontSizeCheckbox = this.el.querySelector(
+      `[name="editor_font_size"][value="true"]`
+    );
 
     editorAutoCompletionCheckbox.checked = settings.editor_auto_completion;
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
+    editorFontSizeCheckbox.checked =
+      settings.editor_font_size === EDITOR_FONT_SIZE.large ? true : false;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
       storeLocalSettings({ editor_auto_completion: event.target.checked });
@@ -28,6 +37,14 @@ const EditorSettings = {
     editorAutoSignatureCheckbox.addEventListener("change", (event) => {
       storeLocalSettings({ editor_auto_signature: event.target.checked });
     });
+
+    editorFontSizeCheckbox.addEventListener("change", (event) => {
+      storeLocalSettings({
+        editor_font_size: event.target.checked
+          ? EDITOR_FONT_SIZE.large
+          : EDITOR_FONT_SIZE.normal,
+      });
+    });
   },
 };
 

assets/js/lib/settings.js

@@ -1,8 +1,14 @@
 const SETTINGS_KEY = "livebook:settings";
 
+export const EDITOR_FONT_SIZE = {
+  normal: 14,
+  large: 16,
+};
+
 const DEFAULT_SETTINGS = {
   editor_auto_completion: true,
   editor_auto_signature: true,
+  editor_font_size: EDITOR_FONT_SIZE.normal,
 };
 
 /**

lib/livebook_web/live/settings_live.ex

@@ -111,6 +111,10 @@ defmodule LivebookWeb.SettingsLive do
                   name="editor_auto_signature"
                   label="Show function signature while typing"
                   checked={false} />
+                <.switch_checkbox
+                  name="editor_font_size"
+                  label="Increase font size"
+                  checked={false} />
               </div>
             </div>
           </div>