feat: add editor preferences (#18)

Author: antonreshetov

src/main/store/module/preferences.ts

@@ -13,6 +13,13 @@ export default new Store<PreferencesStore>({
 
   defaults: {
     storagePath: defaultPath,
-    backupPath
+    backupPath,
+    editor: {
+      wrap: 'free',
+      fontFamily: 'SF Mono, Consolas, Menlo',
+      fontSize: 12,
+      showInvisibles: false,
+      tabSize: 2
+    }
   }
 })

src/renderer/App.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import router from '@/router'
 import { ref, watch } from 'vue'
-import { ipc } from './electron'
+import { ipc, store } from './electron'
 import { useAppStore } from './store/app'
 import { repository } from '../../package.json'
 import { useSnippetStore } from './store/snippets'
@@ -31,6 +31,13 @@ const snippetStore = useSnippetStore()
 
 const isUpdateAvailable = ref(false)
 
+const init = () => {
+  const isValid = appStore.isEditorSettingsValid(
+    store.preferences.get('editor')
+  )
+  if (isValid) appStore.editor = store.preferences.get('editor')
+}
+
 const setTheme = (theme: string) => {
   document.body.dataset.theme = theme
 }
@@ -39,6 +46,8 @@ const onClickUpdate = () => {
   ipc.invoke('main:open-url', `${repository}/releases`)
 }
 
+init()
+
 watch(
   () => appStore.theme,
   () => setTheme(appStore.theme),

src/renderer/assets/scss/ace.scss

@@ -1,3 +1,13 @@
+.ace_editor {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-editor-scrollbar);
+    border-radius: 6px;
+  }
+}
 .ace_gutter {
   width: 40px !important;
   background: transparent !important;
@@ -7,4 +17,8 @@
 }
 .ace_scroller {
   left: 40px !important;
+  &.ace_scroll-left {
+    box-shadow: none;
+    border-left: 1px solid var(--color-border);
+  }
 }

src/renderer/assets/scss/variables.scss

@@ -14,7 +14,7 @@
 
   --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --font-code: Menlo, Monaco, "Courier New", monospace;
+  --font-code: 'SF Mono', 'Consolas', Menlo, Monaco, "Courier New", monospace;
 
   --text-base-size: 10px;
   --text-xs: calc(var(--text-base-size) * 1);
@@ -43,6 +43,8 @@
 
   --color-sidebar-item-selected: var(--color-contrast-low);
   --color-snippet-selected: hsl(0, 0%, 94%);
+
+  --color-editor-scrollbar: rgba(121, 121, 121, 0.4);
 }
 
 [data-theme='dark'] {

src/renderer/components/editor/TheEditor.vue

@@ -103,9 +103,12 @@ const init = async () => {
   editor = ace.edit(editorRef.value, {
     theme: `ace/theme/${props.theme}`,
     useWorker: false,
-    fontSize: 12,
+    fontSize: appStore.editor.fontSize,
+    fontFamily: appStore.editor.fontFamily,
     printMargin: false,
-    tabSize: 2
+    tabSize: appStore.editor.tabSize,
+    wrap: appStore.editor.wrap,
+    showInvisibles: appStore.editor.showInvisibles
   })
 
   setValue()
@@ -153,6 +156,12 @@ const setLang = () => {
 const setTheme = () => {
   editor.session.setMode(`ace/theme/${props.theme}`)
 }
+const setOption = <T extends keyof Ace.EditSessionOptions>(
+  name: T,
+  value: Ace.EditSessionOptions[T]
+) => {
+  editor.session.setOption(name, value)
+}
 
 const resetUndoStack = () => {
   editor.getSession().setUndoManager(new ace.UndoManager())
@@ -204,6 +213,10 @@ watch(
   }
 )
 
+appStore.$subscribe(mutation => {
+  console.log(mutation)
+})
+
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })

src/renderer/components/preferences/EditorPreferences.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="editor-preferences">
+    <AppForm>
+      <AppFormItem label="Font Size">
+        <AppInput
+          v-model="appStore.editor.fontSize"
+          type="number"
+          style="width: 100px"
+        />
+      </AppFormItem>
+      <AppFormItem label="Font Family">
+        <AppInput v-model="appStore.editor.fontFamily" />
+      </AppFormItem>
+      <AppFormItem label="Wrap">
+        <AppSelect
+          v-model="appStore.editor.wrap"
+          :options="wrapOptions"
+        />
+      </AppFormItem>
+      <AppFormItem label="Tab Size">
+        <AppInput
+          v-model="appStore.editor.tabSize"
+          type="number"
+          style="width: 100px"
+        />
+      </AppFormItem>
+      <AppFormItem label="Show Invisibles">
+        <AppCheckbox
+          v-model="appStore.editor.showInvisibles"
+          name="showInvisibles"
+        />
+      </AppFormItem>
+    </AppForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { store } from '@/electron'
+import { useAppStore } from '@/store/app'
+import { watch } from 'vue'
+
+const appStore = useAppStore()
+
+const wrapOptions = [
+  { label: 'Word Wrap', value: 'free' },
+  { label: 'Off', value: 'off' }
+]
+
+watch(
+  () => appStore.editor,
+  v => {
+    store.preferences.set('editor', { ...v })
+  },
+  { deep: true }
+)
+</script>
+
+<style lang="scss" scoped></style>

src/renderer/components/ui/AppCheckbox.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-checkbox">
+    <label>
+      <input
+        :id="'id-' + Math.random()"
+        type="checkbox"
+        :name="name"
+        _value="localValue"
+        @change="onChange"
+      >
+      <div class="inner">
+        <UniconsCheck v-if="modelValue" />
+      </div>
+      <div
+        v-if="label"
+        class="label"
+      >
+        {{ label }}
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  name: string
+  label?: string
+  modelValue: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = defineProps<Props>()
+
+const onChange = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style lang="scss" scoped>
+.app-checkbox {
+  input {
+    display: none;
+  }
+  .inner {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    :deep(svg) {
+      position: relative;
+    }
+  }
+}
+</style>

src/renderer/components/ui/AppInput.vue

@@ -11,11 +11,11 @@
 import { computed } from 'vue'
 
 interface Props {
-  modelValue: string
+  modelValue: string | number
 }
 
 interface Emits {
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: string | number): void
 }
 
 const emit = defineEmits<Emits>()
@@ -32,10 +32,11 @@ const localValue = computed({
 
 <style lang="scss" scoped>
 .input {
-  min-width: 300px;
+  width: 300px;
   height: 32px;
   outline: none;
   border: 1px solid var(--color-border);
   border-radius: 3px;
+  padding: 0 var(--spacing-xs);
 }
 </style>

src/renderer/components/ui/AppSelect.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-select">
+    <select
+      v-model="localValue"
+      class="inner"
+      v-bind="$attrs"
+    >
+      <option
+        v-for="i in options"
+        :key="i.value"
+        :value="i.value"
+      >
+        {{ i.label }}
+      </option>
+    </select>
+    <UniconsAngleDown />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  options: { label: string; value: string }[]
+  modelValue: any
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: any): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = defineProps<Props>()
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
+</script>
+
+<style lang="scss" scoped>
+.app-select {
+  position: relative;
+  .inner {
+    height: 32px;
+    outline: none;
+    border: 1px solid var(--color-border);
+    border-radius: 3px;
+    padding: 0 var(--spacing-xs);
+    -webkit-appearance: none;
+    width: 300px;
+  }
+  :deep(svg) {
+    position: absolute;
+    right: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+</style>

src/renderer/components/ui/form/AppForm.vue

@@ -8,7 +8,7 @@
 
 <style lang="scss" scoped>
 .form {
-  width: 650px;
+  width: 700px;
   display: flex;
   flex-flow: column;
   gap: var(--spacing-md);