diff --git a/src/renderer/services/editor.ts b/src/renderer/services/editor.ts index 62edccba..0283174c 100644 --- a/src/renderer/services/editor.ts +++ b/src/renderer/services/editor.ts @@ -4,6 +4,7 @@ import { isElectron } from '@fe/support/env' import { registerHook, triggerHook } from '@fe/core/hook' import { registerAction } from '@fe/core/action' import { Alt } from '@fe/core/command' +import store from '@fe/support/store' import { getColorScheme } from './theme' let monaco: typeof Monaco @@ -16,7 +17,7 @@ export const defaultOptions: {[key: string]: any} = { value: '', theme: getColorScheme() === 'dark' ? 'vs-dark' : 'vs', fontSize: 16, - wordWrap: false, + wordWrap: store.state.wordWrap, links: !isElectron, // wordWrapColumn: 40, // Set this to false to not auto word wrap minified files @@ -193,7 +194,7 @@ export function getSelectionInfo () { */ export function toggleWrap () { const isWrapping = getEditor().getOption(monaco.editor.EditorOption.wrappingInfo).isViewportWrapping - getEditor().updateOptions({ wordWrap: (isWrapping ? 'off' : 'on') }) + store.commit('setWordWrap', (isWrapping ? 'off' : 'on')) } registerAction({ name: 'editor.toggle-wrap', handler: toggleWrap, keys: [Alt, 'w'] }) @@ -234,3 +235,9 @@ registerHook('MONACO_CHANGE_VALUE', payload => { registerHook('THEME_CHANGE', () => { monaco?.editor.setTheme(getColorScheme() === 'dark' ? 'vs-dark' : 'vs') }) + +store.watch(state => state.wordWrap, (wordWrap) => { + whenEditorReady().then(({ editor }) => { + editor.updateOptions({ wordWrap }) + }) +}) diff --git a/src/renderer/support/store.ts b/src/renderer/support/store.ts index f7a285ce..50c30b92 100644 --- a/src/renderer/support/store.ts +++ b/src/renderer/support/store.ts @@ -7,6 +7,7 @@ import type { Components, Doc, FileItem, Repo } from '@fe/types' export const initState = { repositories: {} as Record, tree: null, + wordWrap: storage.get<'off' | 'on'>('wordWrap', 'off'), showSide: storage.get('showSide', true), showView: storage.get('showView', true), showEditor: storage.get('showEditor', true), @@ -45,6 +46,10 @@ export default createStore({ setTree (state, data) { state.tree = data }, + setWordWrap (state, data: 'off' | 'on') { + state.wordWrap = data + storage.set('wordWrap', data) + }, setShowView (state, data) { state.showView = data storage.set('showView', data)