add fulltext highligh to snuippets

src/components/Article.vue

@@ -92,6 +92,9 @@ export default {
         return {bm: 'nob', nn: 'nno'}[this.dictionary]
       }
     },
+    fulltext: function() {
+      return this.$store.state.fulltext
+    },
     collapsable: function() {
       if (this.$parent.$options.name != 'SearchResults') {
         this.is_collapsed = false
@@ -228,10 +231,28 @@ export default {
         definitionTexts = []
       }
 
-      let definitions = definitionTexts.join("\u00A0•\u00A0")
-      return definitions
+      let snippet = definitionTexts.join("\u00A0•\u00A0")
+      return snippet
 
     },
+    highlight_hits: function(text, type) {
+      if (text != "" && this.fulltext) {
+        let regex_split = new RegExp("([a-zà-ÿ]?"+this.fulltext+"[a-zà-ÿ]?)", "i")
+        let regex_include = new RegExp("^"+this.fulltext+"$", "i")
+        if (regex_split.test(text)) {
+          let components = text.split(regex_split)
+        return components.map(item => {
+          if (regex_include.test(item)) {
+            return {text: item, type: "highlighted"+(type?' '+type:'')}
+          }
+          else {
+            return {text: item, type}
+          }
+        })
+        }
+      }
+      return [{text, type}]
+    },
     toggle_collapse: function() {
       this.$plausible.trackEvent('toggle collapse', {props: {from: this.collapsed, to: !this.collapsed}})
       this.collapsed = !this.collapsed

src/components/Header.vue

@@ -59,7 +59,7 @@
     
 
         <span v-if="!lemma_groups[1] && $parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
-    {{$parent.snippet}}
+    <span v-for="(subitem, index) in $parent.highlight_hits($parent.snippet)" :key="index" :class="subitem.type">{{subitem.text}}</span>
     </span> 
 
     </div>