feat: non-ascii validation check + checks status

src/components/DrawerTools.vue

@@ -1,23 +1,52 @@
 <template lang="pug">
-q-list(padding)
-  q-item-label.text-caption.text-light-blue-3(header): strong Tools
-  q-item(clickable @click='inclusiveLangCheck')
+.q-px-md.q-pt-md.q-pb-sm
+  .flex.items-center
+    .text-caption.text-light-blue-3
+      strong Validation Checks
+    q-space
+    q-btn(
+      label='Run All'
+      padding='none xs'
+      size='sm'
+      no-caps
+      outline
+      color='light-blue-3'
+      @click='runAllChecks'
+    )
+q-list
+  q-item(
+    v-for='chk of valChecks'
+    :key='chk.key'
+    clickable
+    @click='chk.click'
+    )
     q-item-section(side)
-      q-icon(name='mdi-atom-variant' size='xs' color='light-blue-4')
+      q-icon(:name='chk.icon' size='xs' color='amber')
     q-item-section
-      q-item-label Inclusive Language Check
-      q-item-label.text-light-blue-3(caption) Check for usage of non-inclusive terms
+      q-item-label {{ chk.title }}
+      q-item-label.text-amber(caption) {{ chk.description }}
+    q-item-section(side)
+      q-icon(v-if='editorStore.validationChecks[chk.key] === 0' name='mdi-circle-outline' size='xs' color='blue-grey')
+      q-icon(v-else-if='editorStore.validationChecks[chk.key] === 1' name='mdi-check-circle' size='xs' color='positive')
+      q-icon(v-else-if='editorStore.validationChecks[chk.key] === -1' name='mdi-close-circle' size='xs' color='red-5')
+q-separator.q-my-sm(inset)
+.q-px-md.q-pt-sm.q-pb-sm
+  .flex.items-center
+    .text-caption.text-light-blue-3
+      strong Tools
+q-list
   q-item(clickable @click='reindent')
     q-item-section(side)
-      q-icon(name='mdi-page-previous-outline' size='xs' color='light-blue-4')
+      q-icon(name='mdi-page-previous-outline' size='xs' color='purple-2')
     q-item-section
       q-item-label Reindent
-      q-item-label.text-light-blue-3(caption) Reformat Document Indentation
+      q-item-label.text-purple-2(caption) Reformat Document Indentation
 </template>
 
 <script setup>
 import { useQuasar } from 'quasar'
 import { checkInclusiveLanguage } from 'src/tools/inclusive-language'
+import { checkNonAscii } from 'src/tools/non-ascii'
 import { useDocsStore } from 'src/stores/docs'
 import { useEditorStore } from 'src/stores/editor'
 import { modelStore } from 'src/stores/models'
@@ -29,14 +58,79 @@ const $q = useQuasar()
 const docsStore = useDocsStore()
 const editorStore = useEditorStore()
 
-function inclusiveLangCheck () {
+const valChecks = [
+  {
+    key: 'inclusiveLanguage',
+    title: 'Inclusive Language Check',
+    description: 'Check for usage of non-inclusive terms',
+    icon: 'mdi-atom-variant',
+    click: () => inclusiveLangCheck()
+  },
+  {
+    key: 'nonAscii',
+    title: 'Non-ASCII Check',
+    description: 'Check for non-ASCII characters',
+    icon: 'mdi-translate',
+    click: () => nonAsciiCheck()
+  }
+]
+
+// METHODS
+
+function inclusiveLangCheck (silent = false) {
   editorStore.errors = checkInclusiveLanguage(modelStore[docsStore.activeDocument.id].getValue())
+  if (editorStore.errors.length < 1) {
+    editorStore.setValidationCheckState('inclusiveLanguage', 1)
+    if (!silent) {
+      $q.notify({
+        message: 'Looks good!',
+        caption: 'No non-inclusive terms found.',
+        color: 'positive',
+        icon: 'mdi-atom-variant'
+      })
+    }
+  } else {
+    editorStore.setValidationCheckState('inclusiveLanguage', -1)
+    if (!silent) {
+      setTimeout(() => {
+        EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
+      })
+    }
+  }
+}
+
+function nonAsciiCheck (silent = false) {
+  editorStore.errors = checkNonAscii(modelStore[docsStore.activeDocument.id].getValue())
+  if (editorStore.errors.length < 1) {
+    editorStore.setValidationCheckState('nonAscii', 1)
+    if (!silent) {
+      $q.notify({
+        message: 'Looks good!',
+        caption: 'No non-ASCII characters found.',
+        color: 'positive',
+        icon: 'mdi-translate'
+      })
+    }
+  } else {
+    editorStore.setValidationCheckState('nonAscii', -1)
+    if (!silent) {
+      setTimeout(() => {
+        EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
+      })
+    }
+  }
+}
+
+function runAllChecks () {
+  inclusiveLangCheck(true)
+  nonAsciiCheck(true)
+
   if (editorStore.errors.length < 1) {
     $q.notify({
       message: 'Looks good!',
-      caption: 'No non-inclusive terms found.',
+      caption: 'No non-ASCII characters found.',
       color: 'positive',
-      icon: 'mdi-check'
+      icon: 'mdi-translate'
     })
   } else {
     setTimeout(() => {

src/components/FooterToolbar.vue

@@ -24,7 +24,7 @@ q-footer
         no-caps
         color='white'
         label='Clear'
-        @click='clearErrors'
+        @click='editorStore.clearErrors'
         )
     template(v-else)
       q-icon.q-mr-sm(name='mdi-check' size='14px')
@@ -68,9 +68,6 @@ const docType = computed(() => {
 function showNextError () {
   EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
 }
-function clearErrors () {
-  editorStore.errors = []
-}
 </script>
 
 <style lang="scss">

src/pages/EditorMain.vue

@@ -169,8 +169,9 @@ onMounted(async () => {
     // -> Handle content change
     editor.onDidChangeModelContent((ev) => {
       // console.info(ev)
-      if (editorStore.errors.length > 0) {
-        editorStore.errors = []
+      if (editorStore.errors.length > 0 || editorStore.validationChecksDirty) {
+        console.info('BOB')
+        editorStore.clearErrors()
       }
       updateContentStore(ev)
       window.ipcBridge.emit('lspSendNotification', {
@@ -486,7 +487,9 @@ onMounted(async () => {
   document.getElementById('app-loading')?.remove()
 })
 EVENT_BUS.on('editorCommand', cmd => {
-  editor.trigger('drawer', cmd)
+  if (editor) {
+    editor.trigger('drawer', cmd)
+  }
 })
 EVENT_BUS.on('lspCommand', async cmd => {
   switch (cmd) {

src/stores/editor.js

@@ -30,6 +30,11 @@ export const useEditorStore = defineStore('editor', {
     previewPaneShown: true,
     tabSize: 2,
     theme: 'ietf-dark',
+    validationChecksDirty: false,
+    validationChecks: {
+      inclusiveLanguage: 0,
+      nonAscii: 0
+    },
     wordWrap: true,
     workingDirectory: '',
     workingDirFiles: []
@@ -76,6 +81,17 @@ export const useEditorStore = defineStore('editor', {
     },
     async fetchRemotes () {
       this.gitRemotes = await window.ipcBridge.gitListRemotes(this.workingDirectory)
+    },
+    async clearErrors () {
+      this.errors = []
+      for (const key in this.validationChecks) {
+        this.validationChecks[key] = 0
+      }
+      this.validationChecksDirty = false
+    },
+    setValidationCheckState (key, newState) {
+      this.validationChecks[key] = newState
+      this.validationChecksDirty = true
     }
   },
   persist: {

src/tools/non-ascii.js

@@ -0,0 +1,24 @@
+import { MarkerSeverity } from 'monaco-editor/esm/vs/editor/editor.api'
+
+export function checkNonAscii (text) {
+  // eslint-disable-next-line no-control-regex
+  const matchRgx = /[^\x00-\x7F]+/gi
+  const textLines = text.split('\n')
+
+  const occurences = []
+  for (const [lineIdx, line] of textLines.entries()) {
+    for (const match of line.matchAll(matchRgx)) {
+      occurences.push({
+        message: 'Non-ASCII character(s) detected.',
+        severity: MarkerSeverity.Error,
+        startLineNumber: lineIdx + 1,
+        startColumn: match.index + 1,
+        endLineNumber: lineIdx + 1,
+        endColumn: match.index + 1 + match[0].length,
+        source: 'non-ascii'
+      })
+    }
+  }
+
+  return occurences
+}