Skip to content

Commit

Permalink
Refactor editior instance creation and settings management
Browse files Browse the repository at this point in the history 
- Refactor settings management into separate pinia store
- Move creation of editor instances into editorCacheStore
- Read settings directly from the settingsStore instead of passing it from App to Editor to the editor instance
  • Loading branch information
@heyman
heyman committed Jan 7, 2025
1 parent 574dcfd commit aa2a9b9
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 173 deletions.
63 changes: 10 additions & 53 deletions src/components/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script>
import { mapState, mapActions } from 'pinia'
import { mapWritableState } from 'pinia'
import { mapWritableState, mapStores } from 'pinia'
import { useHeynoteStore } from "../stores/heynote-store"
import { useErrorStore } from "../stores/error-store"
import { useSettingsStore } from "../stores/settings-store"
import { OPEN_SETTINGS_EVENT, SETTINGS_CHANGE_EVENT } from '@/src/common/constants'
Expand All @@ -30,40 +31,22 @@
data() {
return {
theme: window.heynote.themeMode.initial,
initialTheme: window.heynote.themeMode.initial,
themeSetting: 'system',
development: window.location.href.indexOf("dev=1") !== -1,
showSettings: false,
settings: window.heynote.settings,
}
},
mounted() {
window.heynote.themeMode.get().then((mode) => {
this.theme = mode.computed
this.themeSetting = mode.theme
})
const onThemeChange = (theme) => {
this.theme = theme
if (theme === "system") {
document.documentElement.setAttribute("theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
} else {
document.documentElement.setAttribute("theme", theme)
}
}
onThemeChange(window.heynote.themeMode.initial)
window.heynote.themeMode.onChange(onThemeChange)
window.heynote.mainProcess.on(SETTINGS_CHANGE_EVENT, (event, settings) => {
this.settings = settings
})
this.settingsStore.setUp()
window.heynote.mainProcess.on(OPEN_SETTINGS_EVENT, () => {
this.showSettings = true
})
},
beforeUnmount() {
window.heynote.themeMode.removeListener()
this.settingsStore.tearDown()
},
watch: {
Expand All @@ -83,6 +66,7 @@
},
computed: {
...mapStores(useSettingsStore),
...mapState(useHeynoteStore, [
"currentBufferPath",
"currentBufferName",
Expand Down Expand Up @@ -131,24 +115,6 @@
this.focusEditor()
},
toggleTheme() {
let newTheme
// when the "system" theme is used, make sure that the first click always results in amn actual theme change
if (this.initialTheme === "light") {
newTheme = this.themeSetting === "system" ? "dark" : (this.themeSetting === "dark" ? "light" : "system")
} else {
newTheme = this.themeSetting === "system" ? "light" : (this.themeSetting === "light" ? "dark" : "system")
}
window.heynote.themeMode.set(newTheme)
this.themeSetting = newTheme
this.$refs.editor.focus()
},
setTheme(theme) {
window.heynote.themeMode.set(theme)
this.themeSetting = theme
},
onSelectLanguage(language) {
this.closeDialog()
this.$refs.editor.setLanguage(language)
Expand All @@ -165,18 +131,9 @@
<template>
<div class="container">
<Editor
:theme="theme"
:theme="settingsStore.theme"
:development="development"
:debugSyntaxTree="false"
:keymap="settings.keymap"
:emacsMetaKey="settings.emacsMetaKey"
:showLineNumberGutter="settings.showLineNumberGutter"
:showFoldGutter="settings.showFoldGutter"
:bracketClosing="settings.bracketClosing"
:fontFamily="settings.fontFamily"
:fontSize="settings.fontSize"
:defaultBlockLanguage="settings.defaultBlockLanguage || 'text'"
:defaultBlockLanguageAutoDetect="settings.defaultBlockLanguageAutoDetect === undefined ? true : settings.defaultBlockLanguageAutoDetect"
:inert="editorInert"
class="editor"
ref="editor"
Expand Down Expand Up @@ -204,10 +161,10 @@
/>
<Settings
v-if="showSettings"
:initialSettings="settings"
:themeSetting="themeSetting"
:initialSettings="settingsStore.settings"
:themeSetting="settingsStore.themeSetting"
@closeSettings="closeSettings"
@setTheme="setTheme"
@setTheme="settingsStore.setTheme"
/>
<NewBuffer
v-if="showCreateBuffer"
Expand Down
124 changes: 9 additions & 115 deletions src/components/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { HeynoteEditor } from '../editor/editor.js'
import { syntaxTree } from "@codemirror/language"
import { toRaw } from 'vue';
import { mapState, mapWritableState, mapActions } from 'pinia'
import { mapState, mapWritableState, mapActions, mapStores } from 'pinia'
import { useErrorStore } from "../stores/error-store"
import { useHeynoteStore } from "../stores/heynote-store.js"
import { useEditorCacheStore } from "../stores/editor-cache"
Expand All @@ -12,33 +12,8 @@
export default {
props: {
theme: String,
development: Boolean,
debugSyntaxTree: Boolean,
keymap: {
type: String,
default: "default",
},
emacsMetaKey: {
type: String,
default: "alt",
},
showLineNumberGutter: {
type: Boolean,
default: true,
},
showFoldGutter: {
type: Boolean,
default: true,
},
bracketClosing: {
type: Boolean,
default: false,
},
fontFamily: String,
fontSize: Number,
defaultBlockLanguage: String,
defaultBlockLanguageAutoDetect: Boolean,
},
components: {},
Expand Down Expand Up @@ -70,7 +45,9 @@
window.heynote.mainProcess.on(WINDOW_CLOSE_EVENT, this.onWindowClose)
window.heynote.mainProcess.on(REDO_EVENT, this.onRedo)
window.document.addEventListener("currenciesLoaded", this.onCurrenciesLoaded)
// initialize editorCacheStore (sets up watchers for settings changes, propagating them to all editors)
this.editorCacheStore.setUp();
// if debugSyntaxTree prop is set, display syntax tree for debugging
if (this.debugSyntaxTree) {
Expand All @@ -95,74 +72,18 @@
beforeUnmount() {
window.heynote.mainProcess.off(WINDOW_CLOSE_EVENT, this.onWindowClose)
window.heynote.mainProcess.off(REDO_EVENT, this.onRedo)
window.document.removeEventListener("currenciesLoaded", this.onCurrenciesLoaded)
this.editorCacheStore.tearDown();
},
watch: {
loadNewEditor() {
//console.log("currentBufferPath changed to", path)
this.loadBuffer(this.currentBufferPath)
},
theme(newTheme) {
this.eachEditor(editor => {
editor.setTheme(newTheme)
})
},
keymap() {
this.eachEditor(editor => {
editor.setKeymap(this.keymap, this.emacsMetaKey)
})
},
emacsMetaKey() {
this.eachEditor(editor => {
editor.setKeymap(this.keymap, this.emacsMetaKey)
})
},
showLineNumberGutter(show) {
this.eachEditor(editor => {
editor.setLineNumberGutter(show)
})
},
showFoldGutter(show) {
this.eachEditor(editor => {
editor.setFoldGutter(show)
})
},
bracketClosing(value) {
this.eachEditor(editor => {
editor.setBracketClosing(value)
})
},
fontFamily() {
this.eachEditor(editor => {
editor.setFont(this.fontFamily, this.fontSize)
})
},
fontSize() {
this.eachEditor(editor => {
editor.setFont(this.fontFamily, this.fontSize)
})
},
defaultBlockLanguage() {
this.eachEditor(editor => {
editor.setDefaultBlockLanguage(this.defaultBlockLanguage, this.defaultBlockLanguageAutoDetect)
})
},
defaultBlockLanguageAutoDetect() {
this.eachEditor(editor => {
editor.setDefaultBlockLanguage(this.defaultBlockLanguage, this.defaultBlockLanguageAutoDetect)
})
},
},
computed: {
...mapStores(useEditorCacheStore),
...mapState(useHeynoteStore, [
"currentBufferPath",
"libraryId",
Expand All @@ -178,42 +99,21 @@
},
methods: {
...mapActions(useErrorStore, ["addError"]),
...mapActions(useEditorCacheStore, ["getEditor", "addEditor", "eachEditor"]),
loadBuffer(path) {
//console.log("loadBuffer", path)
if (this.editor) {
this.editor.hide()
}
let cachedEditor = this.getEditor(path)
let cachedEditor = this.editorCacheStore.getEditor(path)
if (cachedEditor) {
//console.log("show cached editor")
this.editor = cachedEditor
toRaw(this.editor).show()
} else {
//console.log("create new editor")
try {
this.editor = new HeynoteEditor({
element: this.$refs.editor,
path: path,
theme: this.theme,
keymap: this.keymap,
emacsMetaKey: this.emacsMetaKey,
showLineNumberGutter: this.showLineNumberGutter,
showFoldGutter: this.showFoldGutter,
bracketClosing: this.bracketClosing,
fontFamily: this.fontFamily,
fontSize: this.fontSize,
defaultBlockToken: this.defaultBlockLanguage,
defaultBlockAutoDetect: this.defaultBlockLanguageAutoDetect,
})
} catch (e) {
this.addError("Error! " + e.message)
throw e
}
this.addEditor(path, toRaw(this.editor))
this.editor = this.editorCacheStore.createEditor(path, this.$refs.editor)
this.editorCacheStore.addEditor(path, toRaw(this.editor))
}
this.currentEditor = toRaw(this.editor)
Expand All @@ -236,12 +136,6 @@
editor.focus()
},
onCurrenciesLoaded() {
if (this.editor) {
toRaw(this.editor).currenciesLoaded()
}
},
focus() {
toRaw(this.editor).focus()
},
Expand Down
8 changes: 4 additions & 4 deletions src/editor/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,8 +274,8 @@ export class HeynoteEditor {
this.notesStore.openBufferSelector()
}

openCreateBuffer(createMode) {
this.notesStore.openCreateBuffer(createMode)
openMoveToBufferSelector() {
this.notesStore.openMoveToBufferSelector()
}

async createNewBuffer(path, name) {
Expand Down Expand Up @@ -330,8 +330,8 @@ export class HeynoteEditor {
}

setDefaultBlockLanguage(token, autoDetect) {
this.defaultBlockToken = token
this.defaultBlockAutoDetect = autoDetect
this.defaultBlockToken = token || "text"
this.defaultBlockAutoDetect = autoDetect === undefined ? true : autoDetect
}

formatCurrentBlock() {
Expand Down
Loading

0 comments on commit aa2a9b9

Please sign in to comment.