update spellcheck UI

Author: Ripwords

package.json

@@ -12,7 +12,6 @@
     "@vueuse/core": "7.6.2",
     "file-saver": "^2.0.5",
     "pinia": "2.0.11",
-    "quill-focus": "^1.1.2",
     "quill-to-pdf": "^1.0.7",
     "quill-to-word": "^1.3.0",
     "vue": "3.2.31"

pnpm-lock.yaml

@@ -16,7 +16,6 @@ const themeColor = ref(0)
 const shortcutModal = ref(false)
 const exportModal_1 = ref(false)
 const exportModal_2 = ref(false)
-const spellcheck = ref(true)
 const exitModal = ref(false)
 const showOptions = ref(false)
 const message = useMessage()
@@ -53,6 +52,15 @@ const changeAlwaysTop = () => {
   appWindow.setAlwaysOnTop(store.alwaysTop)
 }
 
+const changeSpellcheck = () => {
+  store.spellcheck = !store.spellcheck
+  if (store.spellcheck) {
+    message.success("Spellcheck is enabled")
+  } else {
+    message.warning("Spellcheck is disabled")
+  }
+}
+
 const export2PDF = async () => {
   try {
     if (checkContent()) {
@@ -112,7 +120,7 @@ await shortcutRegister()
     @settingsClicked="settings = false"
     @exportPDF="exportModal_1 = true"
     @exportWord="exportModal_2 = true"
-    @changeSpellcheck="spellcheck = !spellcheck"
+    @changeSpellcheck="changeSpellcheck()"
   />
   <div :class="{ 'dark': store.theme === 'dark' }">
     <div v-show="settings" class="absolute z-10 w-8/10 h-20px bottom-100px transform translate-x-5vh">
@@ -142,7 +150,7 @@ await shortcutRegister()
         name="content"
         id="content"
         toolbar="#toolbar" 
-        :spellcheck="spellcheck"
+        :spellcheck="store.spellcheck"
         v-model:content="store.content.ops" 
       />
     </div>

src/components/Content.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { Quill } from '@vueup/vue-quill'
+import { mainStore } from '../store'
 
+const store = mainStore()
 const sizes: any = {
   "Normal": '16px',
   "Medium": '18.667px',
@@ -12,7 +14,6 @@ let Size = Quill.import('attributors/style/size')
 Size.whitelist = Object.values(sizes)
 Quill.register(Size, true)
 
-const spellcheck = ref(true)
 const toolbar = ref<any>(null)
 const emit = defineEmits([
   "settingsClicked",
@@ -70,7 +71,7 @@ onMounted(() => {
     <button class="ql-video"></button>
     <button class="ql-link"></button>
     <button class="ql-clean"></button>
-    <button><i-mdi:spellcheck @click="emit('changeSpellcheck'); spellcheck = !spellcheck" :class="{ 'text-red-600': !spellcheck, 'text-green-700': spellcheck }"></i-mdi:spellcheck></button>
+    <button><i-mdi:spellcheck @click="emit('changeSpellcheck')" :class="{ 'text-red-600': !store.spellcheck, 'text-green-700': store.spellcheck }"></i-mdi:spellcheck></button>
     <button><i-mdi:file-pdf @click="emit('exportPDF')"></i-mdi:file-pdf></button>
     <button><i-grommet-icons:document-word @click="emit('exportWord')"></i-grommet-icons:document-word></button>
   </div>

src/components/Toolbar.vue

@@ -13,5 +13,6 @@ export const mainStore = defineStore('mainStore', {
     theme: useLocalStorage('theme', 'dark'),
     exportName: useLocalStorage('exportName', 'export'),
     alwaysTop: useLocalStorage('alwaysTop', false),
+    spellcheck: useLocalStorage('spellcheck', true)
   })
 })