feat: hyphenation check details list

ietf-tools · Sep 14, 2024 · d82951d · d82951d
1 parent 0195286
commit d82951d
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 18 deletions.
diff --git a/quasar.config.js b/quasar.config.js
@@ -78,8 +78,6 @@ export default configure((/* ctx */) => {
             manualChunks: (id) => {
               if (id.includes('.css') || id.includes('.scss') || id.includes('.sass')) {
                 return 'app'
-              } else if (id.includes('quasar')) {
-                return 'quasar'
               }
             }
           }

diff --git a/src/components/DrawerChecks.vue b/src/components/DrawerChecks.vue
@@ -25,23 +25,38 @@
       @click='runAllChecks'
     )
 q-list
-  q-item(
+  q-expansion-item(
     v-for='chk of valChecks'
+    group='valchecks'
+    hide-expand-icon
     :key='chk.key'
-    clickable
     @click='chk.click'
     )
-    q-item-section(side)
-      q-icon(:name='chk.icon' size='xs' color='amber')
-    q-item-section
-      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] === 2' name='mdi-information' size='xs' color='light-blue-5')
-      q-icon(v-else-if='editorStore.validationChecks[chk.key] === -1' name='mdi-close-circle' size='xs' color='red-5')
-      q-icon(v-else-if='editorStore.validationChecks[chk.key] === -2' name='mdi-alert-circle' size='xs' color='orange-5')
+    template(#header)
+      q-item-section(side)
+        q-icon(:name='chk.icon' size='xs' color='amber')
+      q-item-section
+        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] === 2' name='mdi-information' size='xs' color='light-blue-5')
+        q-icon(v-else-if='editorStore.validationChecks[chk.key] === -1' name='mdi-close-circle' size='xs' color='red-5')
+        q-icon(v-else-if='editorStore.validationChecks[chk.key] === -2' name='mdi-alert-circle' size='xs' color='orange-5')
+    .bg-dark-5.checkdetails
+      q-list(dense, separator)
+        q-item(
+          v-for='dtl of editorStore.validationChecksDetails[chk.key]'
+          :key='dtl.key'
+          clickable
+          @click='goToPosition(dtl.range)'
+          )
+          q-item-section(v-if='dtl.group', side)
+            q-badge(color='blue-9' text-color='white' :label='dtl.group')
+          q-item-section.text-caption {{ dtl.message }}
+          q-item-section(v-if='dtl.range', side)
+            q-badge(color='dark-3' text-color='white' :label='dtl.range.startLineNumber + ":" + dtl.range.startColumn')
 </template>
 
 <script setup>
@@ -113,9 +128,10 @@ function articlesCheck (silent) {
 }
 
 function hyphenationCheck (silent = false) {
-  const occurences = checkHyphenation(modelStore[docsStore.activeDocument.id].getValue())
-  if (occurences < 1) {
+  const results = checkHyphenation(modelStore[docsStore.activeDocument.id].getValue())
+  if (results.count < 1) {
     editorStore.setValidationCheckState('hyphenation', 1)
+    editorStore.setValidationCheckDetails('hyphenation', [])
     if (!silent) {
       $q.notify({
         message: 'Looks good!',
@@ -126,6 +142,7 @@ function hyphenationCheck (silent = false) {
     }
   } else {
     editorStore.setValidationCheckState('hyphenation', -2)
+    editorStore.setValidationCheckDetails('hyphenation', results.details)
   }
 }
 
@@ -184,6 +201,13 @@ function runAllChecks () {
   }
 }
 
+function goToPosition (range) {
+  EVENT_BUS.emit('revealPosition', {
+    lineNumber: range.startLineNumber,
+    column: range.startColumn
+  })
+}
+
 // MOUNTED
 
 onMounted(() => {
@@ -193,3 +217,12 @@ onBeforeUnmount(() => {
   EVENT_BUS.off('runAllChecks')
 })
 </script>
+
+<style lang="scss">
+.checkdetails {
+  border-top: 1px solid rgba(255, 255, 255, 10%);
+  border-bottom: 1px solid #000;
+  padding: 3px 0;
+  box-shadow: 0 1px 0 0 rgba(255,255,255, 10%);
+}
+</style>
diff --git a/src/stores/editor.js b/src/stores/editor.js
@@ -47,6 +47,12 @@ export const useEditorStore = defineStore('editor', {
       inclusiveLanguage: 0,
       nonAscii: 0
     },
+    validationChecksDetails: {
+      articles: [],
+      hyphenation: [],
+      inclusiveLanguage: [],
+      nonAscii: []
+    },
     wordWrap: true,
     workingDirectory: '',
     workingDirFiles: []
@@ -98,13 +104,17 @@ export const useEditorStore = defineStore('editor', {
       this.errors = []
       for (const key in this.validationChecks) {
         this.validationChecks[key] = 0
+        this.validationChecksDetails[key] = []
         decorationsStore.get(key)?.clear()
       }
       this.validationChecksDirty = false
     },
     setValidationCheckState (key, newState) {
       this.validationChecks[key] = newState
       this.validationChecksDirty = true
+    },
+    setValidationCheckDetails (key, newArr) {
+      this.validationChecksDetails[key] = newArr
     }
   },
   persist: {

diff --git a/src/tools/hyphenation.js b/src/tools/hyphenation.js
@@ -1,10 +1,12 @@
 import { decorationsStore } from 'src/stores/models'
+import { sortBy } from 'lodash-es'
 
 export function checkHyphenation (text) {
   const hyphenTermRgx = /[a-z]+(?:-[a-z]+)+/gi
   const textLines = text.split('\n')
 
   const decorations = []
+  const details = []
   const occurences = []
   const hyphenTerms = []
   const hyphenTermsOccurences = []
@@ -50,6 +52,12 @@ export function checkHyphenation (text) {
                 },
                 range: termOcc.range
               })
+              details.push({
+                key: crypto.randomUUID(),
+                group: occIdx + 1,
+                message: `${term} is alternate of ${altTerm}`,
+                range: termOcc.range
+              })
             }
           }
           decorations.push({
@@ -70,12 +78,26 @@ export function checkHyphenation (text) {
               endColumn: match.index + match[0].length
             }
           })
+          details.push({
+            key: crypto.randomUUID(),
+            group: occIdx + 1,
+            message: `${term} has alternate term(s)`,
+            range: {
+              startLineNumber: lineIdx + 1,
+              startColumn: match.index + 2,
+              endLineNumber: lineIdx + 1,
+              endColumn: match.index + match[0].length
+            }
+          })
         }
       }
     }
   }
 
   decorationsStore.get('hyphenation').set(decorations)
 
-  return occurences.length
+  return {
+    count: occurences.length,
+    details: sortBy(details, d => d.range.startLineNumber)
+  }
 }