Add support for changing font family and font size

heyman · Jan 8, 2024 · d981658 · d981658
1 parent ff7323e
commit d981658
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 26 deletions.
diff --git a/electron/config.js b/electron/config.js
@@ -34,6 +34,8 @@ const schema = {
             "showInDock": {type: "boolean", default: true},
             "showInMenu": {type: "boolean", default: false},
             "bracketClosing": {type: "boolean", default: false},
+            "fontFamily": {type: "string"},
+            "fontSize": {type: "integer"},
         },
     },
 
@@ -62,6 +64,8 @@ const defaults = {
         showInDock: true,
         showInMenu: false,
         bracketClosing: false,
+        fontFamily: null, // we use null for the default font family and size, since we could then change
+        fontSize: null,   // the default font family and size in the future and have it apply to existing users
     },
     theme: "system",
 }

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -120,6 +120,8 @@
             :showLineNumberGutter="settings.showLineNumberGutter"
             :showFoldGutter="settings.showFoldGutter"
             :bracketClosing="settings.bracketClosing"
+            :fontFamily="settings.fontFamily"
+            :fontSize="settings.fontSize"
             class="editor"
             ref="editor"
             @openLanguageSelector="openLanguageSelector"

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -27,6 +27,8 @@
                 type: Boolean,
                 default: false,
             },
+            fontFamily: String,
+            fontSize: Number,
         },
 
         components: {},
@@ -71,6 +73,8 @@
                     showLineNumberGutter: this.showLineNumberGutter,
                     showFoldGutter: this.showFoldGutter,
                     bracketClosing: this.bracketClosing,
+                    fontFamily: this.fontFamily,
+                    fontSize: this.fontSize,
                 })
                 window._heynote_editor = this.editor
                 window.document.addEventListener("currenciesLoaded", this.onCurrenciesLoaded)
@@ -134,6 +138,13 @@
             bracketClosing(value) {
                 this.editor.setBracketClosing(value)
             },
+
+            fontFamily() {
+                this.editor.setFont(this.fontFamily, this.fontSize)
+            },
+            fontSize() {
+                this.editor.setFont(this.fontFamily, this.fontSize)
+            },
         },
 
         methods: {

diff --git a/src/components/settings/Settings.vue b/src/components/settings/Settings.vue
@@ -2,6 +2,7 @@
     import KeyboardHotkey from "./KeyboardHotkey.vue"
     import TabListItem from "./TabListItem.vue"
     import TabContent from "./TabContent.vue"
+    import { defaultFontFamily, defaultFontSize } from "@/src/editor/theme/font-theme.js"
 
     export default {
         props: {
@@ -33,14 +34,22 @@
                 bracketClosing: this.initialSettings.bracketClosing,
                 autoUpdate: this.initialSettings.autoUpdate,
                 bufferPath: this.initialSettings.bufferPath,
+                fontFamily: this.initialSettings.fontFamily || defaultFontFamily,
+                fontSize: this.initialSettings.fontSize || defaultFontSize,
 
                 activeTab: "general",
                 isWebApp: window.heynote.isWebApp,
                 customBufferLocation: !!this.initialSettings.bufferPath,
+                systemFonts: ["Hack"],
+                defaultFontSize: defaultFontSize,
             }
         },
 
-        mounted() {
+        async mounted() {
+            let localFonts = [... new Set((await window.queryLocalFonts()).map(f => f.family))].filter(f => f !== "Hack")
+            localFonts = [...new Set(localFonts)].map(f => [f, f])
+            this.systemFonts = [["Hack", "Hack (default)"], ...localFonts]
+
             window.addEventListener("keydown", this.onKeyDown);
             this.$refs.keymapSelector.focus()
         },
@@ -69,6 +78,8 @@
                     autoUpdate: this.autoUpdate,
                     bracketClosing: this.bracketClosing,
                     bufferPath: this.bufferPath,
+                    fontFamily: this.fontFamily === defaultFontFamily ? undefined : this.fontFamily,
+                    fontSize: this.fontSize === defaultFontSize ? undefined : this.fontSize,
                 })
                 if (!this.showInDock) {
                     this.showInMenu = true
@@ -253,6 +264,28 @@
                                 </label>
                             </div>
                         </div>
+                        <div class="row font-settings">
+                            <div class="entry">
+                                <h2>Font Family</h2>
+                                <select v-model="fontFamily" @change="updateSettings" class="font-family">
+                                    <option
+                                        v-for="[font, label] in systemFonts"
+                                        :selected="font === fontFamily"
+                                        :value="font"
+                                    >{{ label }}</option>
+                                </select>
+                            </div>
+                            <div class="entry" v-if="keymap === 'emacs' && isMac">
+                                <h2>Font Size</h2>
+                                <select v-model="fontSize" @change="updateSettings" class="font-size">
+                                    <option
+                                        v-for="size in [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
+                                        :selected="size === fontSize"
+                                        :value="size"
+                                    >{{ size }}px{{ size === defaultFontSize ? " (default)" : "" }}</option>
+                                </select>
+                            </div>
+                        </div>
                     </TabContent>
 
                     <TabContent tab="updates" :activeTab="activeTab" v-if="!isWebApp">
@@ -359,6 +392,8 @@
                     flex-grow: 1
                     padding: 40px
                     overflow-y: auto
+                    select
+                        height: 22px
                     .row
                         display: flex
                         .entry
@@ -383,27 +418,34 @@
                                     position: relative
                                     top: 2px
                                     left: -3px
-                    .buffer-location 
-                        width: 100%
-                        .file-path
+                        &.font-settings
                             display: flex
-                            > button
-                                flex-shrink: 0
-                                padding: 3px 8px
-                            .path
-                                flex-grow: 1
-                                margin-left: 10px
-                                font-size: 12px
-                                font-family: "Hack"
-                                padding: 5px 8px
-                                border-radius: 3px
-                                background: #f1f1f1
-                                color: #555
-                                white-space: nowrap
-                                overflow-x: auto
-                                +dark-mode
-                                    background: #222
-                                    color: #aaa
+                            .font-family
+                                width: 280px
+                            .font-size
+                                width: 120px
+                        
+                        .buffer-location 
+                            width: 100%
+                            .file-path
+                                display: flex
+                                > button
+                                    flex-shrink: 0
+                                    padding: 3px 8px
+                                .path
+                                    flex-grow: 1
+                                    margin-left: 10px
+                                    font-size: 12px
+                                    font-family: "Hack"
+                                    padding: 5px 8px
+                                    border-radius: 3px
+                                    background: #f1f1f1
+                                    color: #555
+                                    white-space: nowrap
+                                    overflow-x: auto
+                                    +dark-mode
+                                        background: #222
+                                        color: #aaa
             .bottom-bar
                 border-radius: 0 0 5px 5px
                 background: #eee

diff --git a/src/editor/editor.js b/src/editor/editor.js
@@ -7,6 +7,7 @@ import { closeBrackets } from "@codemirror/autocomplete";
 import { heynoteLight } from "./theme/light.js"
 import { heynoteDark } from "./theme/dark.js"
 import { heynoteBase } from "./theme/base.js"
+import { getFontTheme } from "./theme/font-theme.js";
 import { customSetup } from "./setup.js"
 import { heynoteLang } from "./lang-heynote/heynote.js"
 import { noteBlockExtension, blockLineNumbers, blockState } from "./block/block.js"
@@ -44,6 +45,8 @@ export class HeynoteEditor {
         showLineNumberGutter=true, 
         showFoldGutter=true,
         bracketClosing=false,
+        fontFamily,
+        fontSize,
     }) {
         this.element = element
         this.themeCompartment = new Compartment
@@ -55,6 +58,7 @@ export class HeynoteEditor {
         this.closeBracketsCompartment = new Compartment
         this.deselectOnCopy = keymap === "emacs"
         this.emacsMetaKey = emacsMetaKey
+        this.fontTheme = new Compartment
 
         const state = EditorState.create({
             doc: content || "",
@@ -73,6 +77,7 @@ export class HeynoteEditor {
 
                 this.themeCompartment.of(theme === "dark" ? heynoteDark : heynoteLight),
                 heynoteBase,
+                this.fontTheme.of(getFontTheme(fontFamily, fontSize)),
                 indentUnit.of("    "),
                 EditorView.scrollMargins.of(f => {
                     return {top: 80, bottom: 80}
@@ -155,6 +160,12 @@ export class HeynoteEditor {
         })
     }
 
+    setFont(fontFamily, fontSize) {
+        this.view.dispatch({
+            effects: this.fontTheme.reconfigure(getFontTheme(fontFamily, fontSize)),
+        })
+    }
+
     setTheme(theme) {
         this.view.dispatch({
             effects: this.themeCompartment.reconfigure(theme === "dark" ? heynoteDark : heynoteLight),

diff --git a/src/editor/theme/base.js b/src/editor/theme/base.js
@@ -58,9 +58,6 @@ export const heynoteBase = EditorView.theme({
     ".cm-content": {
         paddingTop: 4,
     },
-    '.cm-scroller': {
-        fontFamily: "Hack, Menlo, Monaco, 'Courier New', monospace",
-    },
     '.cm-gutters': {
         padding: '0 2px 0 4px',
         userSelect: 'none',
@@ -77,8 +74,8 @@ export const heynoteBase = EditorView.theme({
     },
     '.cm-cursor, .cm-dropCursor': {
         borderLeftWidth:'2px', 
-        height:'19px !important', 
-        marginTop:'-2px !important'
+        paddingTop: '4px',
+        marginTop: '-2px',
     },
     '.heynote-blocks-layer': {
         width: '100%',

diff --git a/src/editor/theme/font-theme.js b/src/editor/theme/font-theme.js
@@ -0,0 +1,15 @@
+import { EditorView } from "@codemirror/view"
+
+export const defaultFontFamily = "Hack"
+export const defaultFontSize = 12
+
+
+export function getFontTheme(fontFamily, fontSize) {
+    fontSize = fontSize || defaultFontSize
+    return EditorView.theme({
+        '.cm-scroller': {
+            fontFamily: fontFamily || defaultFontFamily,
+            fontSize: (fontSize) +  "px",
+        },
+    })
+}