extern
/
heynote
mirror of https://github.com/heyman/heynote.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add support for changing font family and font size

This commit is contained in:
Jonatan Heyman 2024-01-08 21:16:56 +01:00
parent fb62652847
commit a56a267e06
7 changed files with 108 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
electron/config.js
View File

@ -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",
}

2
src/components/App.vue
View File

@ -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"

11
src/components/Editor.vue
View File

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

84
src/components/settings/Settings.vue
View File

@ -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

11
src/editor/editor.js
View File

@ -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),

7
src/editor/theme/base.js
View File

@ -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%',

15
src/editor/theme/font-theme.js Normal file
View File

@ -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",
},
})
}