feat(editor): save the word warp state of editor

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 })
+  })
+})

src/renderer/support/store.ts

@@ -7,6 +7,7 @@ import type { Components, Doc, FileItem, Repo } from '@fe/types'
 export const initState = {
   repositories: {} as Record<string, string>,
   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)