mirror of
https://github.com/heyman/heynote.git
synced 2025-01-26 07:49:16 +01:00
Add support for changing font family and font size
This commit is contained in:
Jonatan Heyman
parent
fb62652847
commit
a56a267e06
@ -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",
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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
15
src/editor/theme/font-theme.js
Normal 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",
|
||||
},
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user