marked extract of search on text (scrolling is not working yet

src/components/Content/EdText.vue

@@ -5,7 +5,7 @@
       class="tei"
       :class="{ active: uuid === textid }"
       :data-uuid="uuid"
-      v-html="tei"
+      v-html="teiparsed"
     />
   </div>
 </template>
@@ -25,12 +25,14 @@ export default {
     tei: String,
     uuid: String,
     textid: String,
+    extract: String,
     url: String
   },
   data: () => ({
     template: null,
     html: null,
-    pages: []
+    pages: [],
+    teiparsed: null
   }),
   watch: {
     tei: function (newtei, oldtei) {
@@ -41,7 +43,7 @@ export default {
     }
   },
   beforeMount () {
-    console.log('EdText beforeMount', this.tei)
+    // console.log('EdText beforeMount', this.tei)
     if (this.tei) {
       // this.buildTemplate()
       this.parseTei()
@@ -82,11 +84,15 @@ export default {
     //   // console.log('EdText: builded html', this.html)
     // },
     parseTei () {
+      this.teiparsed = this.tei
       this.parseLinks()
       this.parseFigures()
+      if (this.textid === this.uuid) {
+        this.parseExtract()
+      }
     },
     parseLinks () {
-      let links = this.tei.match(/<a[^<]+<\/a>/g)
+      let links = this.teiparsed.match(/<a[^<]+<\/a>/g)
       // console.log('links', links)
       if (links) {
         // let domparser = new DOMParser()
@@ -118,15 +124,15 @@ export default {
               `<sup class="mdi mdi-message-text-outline" />` +
               `</a>`
             // console.log('newlink', newlink)
-            this.tei = this.tei.replace(links[i], newlink)
+            this.teiparsed = this.teiparsed.replace(links[i], newlink)
           }
         }
         // console.log('this.html', this.html)
       }
     },
     parseFigures () {
-      console.log('parseFigures this.tei', this.tei)
+      // console.log('parseFigures this.tei', this.teiparsed)
-      let imgs = this.tei.match(/<img[^>]*>/g)
+      let imgs = this.teiparsed.match(/<img[^>]*>/g)
       console.log('imgs', imgs)
       if (imgs) {
         let imgparts, newsrc, newimg
@@ -143,11 +149,21 @@ export default {
               ` alt="${imgparts[2]}"` +
               `/>`
             // console.log('newlink', newlink)
-            this.tei = this.tei.replace(imgs[i], newimg)
+            this.teiparsed = this.teiparsed.replace(imgs[i], newimg)
           }
         }
       }
     },
+    parseExtract () {
+      console.log('Parse extract', this.extract)
+      let regexp = RegExp(this.extract, 'gim')
+      let index = 0
+      function marking (str) {
+        index++
+        return `<mark class="extract" id="mark-${index}">${str}</mark>`
+      }
+      this.teiparsed = this.teiparsed.replace(regexp, marking)
+    },
     // parsePageBreaks () {
     //   let pbs = this.html.match(/<span role="pageBreak"[^>]+><\/span>/g)
     //   console.log('pagebreaks', pbs)

src/components/Content/ResultItem.vue

@@ -33,6 +33,9 @@ export default {
     result: {
       type: Object,
       required: true
+    },
+    searchedkeys: {
+      type: String
     }
   },
   // data: () => ({
@@ -69,10 +72,11 @@ export default {
         size: this.result.size
       })
       this.$router.push({
-        name: `editiontext`,
+        name: `editiontextextract`,
         params: {
           id: this.result.textId,
-          textid: this.result.uuid
+          textid: this.result.uuid,
+          extract: this.searchedkeys
         }
       })
     }

src/components/Layouts/MainContentLayout.vue

@@ -43,6 +43,10 @@ export default {
       this.scrollToRef()
     }
   },
+  mounted () {
+    console.log('mounted')
+    this.scrollToRef()
+  },
   methods: {
     onScrollCenter (e) {
       // console.log('mainLayout onScrollCenter: e', e)

src/components/nav/Results.vue

@@ -25,7 +25,7 @@
         <div class="wrapper">
           <ul v-if="results.length">
             <li v-for="result in results" :key="result.uuid" class="result">
-              <ResultItem :result="result" />
+              <ResultItem :result="result" :searchedkeys="searchedKeys" />
             </li>
             <infinite-loading
               v-if="offset < resultsQuantity.quantity"

src/pages/Edition.vue

@@ -70,6 +70,7 @@
           :uuid="text.content.uuid"
           :url="text.content.url"
           :textid="textid"
+          :extract="extract"
           @onHoverLink="onHoverLink"
           @onLeaveLink="onLeaveLink"
         />
@@ -177,6 +178,13 @@ export default {
       if (to.params.textid) {
         // change textid when route change
         this.textid = to.params.textid
+        // change also extract if exists
+        if (to.params.extract) {
+          console.log('extract params from route', to.params.extract)
+          this.extract = to.params.extract
+          // scrolling is not working :(
+          this.reftoscrollto = '#mark-1'
+        }
       } else if (this.toc) {
         // if no textid in new route (e.g. edition front)
         // but we have toc
@@ -187,6 +195,9 @@ export default {
         this.textid = null
       }
     },
+    reftoscrollto (newref, oldref) {
+      console.log('reftoscrollto changed', oldref, newref)
+    },
     textid (newid, oldid) {
       console.log('textid watcher', this, oldid, newid)
       this.texts = []
@@ -220,6 +231,13 @@ export default {
       this.textid = this.$route.params.textid
     }
 
+    // get the searchkeys from route param (only comming from result item) for text highlighting
+    if (this.$route.params.extract) {
+      this.extract = this.$route.params.extract
+      // scrolling is not working :(
+      this.reftoscrollto = '#mark-1'
+    }
+
     // wait for editions list from Corpus Store if not already loaded
     if (!this.corpusLoaded) {
       // this.getCorpuses()

src/router/index.js

@@ -49,6 +49,11 @@ const routes = [
     path: '/edition/:id/:textid',
     component: Edition
   },
+  {
+    name: 'editiontextextract',
+    path: '/edition/:id/:textid/:extract',
+    component: Edition
+  },
   {
     name: 'indexNominum',
     path: '/nominum',