docs updated

docs/.vuepress/client.js

@@ -17,6 +17,8 @@ import TextLayer from '../components/TextLayer.vue'
 import XFALayer from '../components/XFALayer.vue'
 import Watermark from '../components/Watermark.vue'
 import TOC from '../components/TOC.vue'
+import HighlightText from "../components/HighlightText.vue";
+import TextHighlight from "../components/TextHighlight.vue";
 
 
 export default defineClientConfig({
@@ -37,5 +39,7 @@ export default defineClientConfig({
         app.component('AnnoLinks', AnnoLinks)
         app.component('Loaded', Loaded)
         app.component('TOC', TOC)
+        app.component("HighlightText", HighlightText);
+        app.component("TextHighlight", TextHighlight);
     }
 })

docs/.vuepress/config.js

@@ -71,6 +71,7 @@ export default defineUserConfig({
           text: 'Advanced usages',
           children: [
             '/examples/advanced/watermark.md',
+            '/examples/advanced/highlight_text.md',
             '/examples/advanced/fit_parent.md',
             '/examples/advanced/annotation_filter.md',
             '/examples/advanced/multiple_pdf.md',
@@ -81,6 +82,7 @@ export default defineUserConfig({
           text: 'Events',
           children: [
             '/examples/loaded_events/loaded.md',
+            '/examples/text_events/text_highlight.md',
             {
               text: 'Annotation Events',
               children: [

docs/.vuepress/styles/index.scss

@@ -12,6 +12,11 @@
   background-color: var(--c-brand-light);
 }
 
+.checkbox-example {
+  width: 15px;
+  height: 15px;
+}
+
 .input-example {
   appearance: none;
   padding: 7px 15px;

docs/components/HighlightText.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import '@tato30/vue-pdf/style.css';
+import { ref } from 'vue';
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+const highlightText = ref('javascript')
+const highlightOptions = ref({
+  completeWords: false,
+  ignoreCase: true,
+})
+</script>
+
+<template>
+  <div class="container">
+    <table>
+      <tr>
+        <td colspan="2">
+          Text
+        </td>
+        <td colspan="2">
+          <input v-model="highlightText" class="input-example">
+        </td>
+      </tr>
+      <tr>
+        <td>Complete words</td>
+        <td><input v-model="highlightOptions.completeWords" type="checkbox" class="checkbox-example"></td>
+        <td>Ignore case</td>
+        <td><input v-model="highlightOptions.ignoreCase" type="checkbox" class="checkbox-example"></td>
+      </tr>
+    </table>
+
+    <VuePDF :scale="1.1" :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" />
+  </div>
+</template>

docs/components/TOC.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, triggerRef, watchEffect } from 'vue';
-import { VuePDF, getPDFDestination, usePDF } from '@tato30/vue-pdf';
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
 import { withBase } from '@vuepress/client';
 import ChaptersList from './ChaptersList.vue';
 
-const { pdf, info } = usePDF(withBase('/example_045.pdf'))
+const { pdf, info, getPDFDestination } = usePDF(withBase('/example_045.pdf'))
 const eventValue = ref({})
 const outlineTree = ref([])
 
@@ -13,7 +13,7 @@ watchEffect(() => {
     outlineTree.value = info.value.outline.map(function convert(node) {
       return {
         title: node.title,
-        destination: getPDFDestination(info.value.document, node.dest),
+        destination: getPDFDestination(node.dest),
         items: node.items.map((item) => {
           return convert(item)
         }),

docs/components/TextHighlight.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import '@tato30/vue-pdf/style.css';
+import { ref } from 'vue';
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+const highlightText = ref('Trace-based')
+const highlightOptions = ref({
+  completeWords: false,
+  ignoreCase: true,
+})
+
+const eventValue = ref({})
+function onHighlight(value) {
+  console.log(value)
+  eventValue.value = value
+}
+</script>
+
+<template>
+  <div class="container">
+    <table>
+      <tr>
+        <td colspan="2">
+          Text
+        </td>
+        <td colspan="2">
+          <input v-model="highlightText" class="input-example">
+        </td>
+      </tr>
+    </table>
+
+    <VuePDF :scale="1.1" :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" @highlight="onHighlight" />
+  </div>
+</template>

docs/examples/advanced/highlight_text.md

@@ -0,0 +1,31 @@
+# Highlight Text
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import '@tato30/vue-pdf/style.css';
+import { ref } from 'vue';
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const highlightText = ref('javascript')
+const highlightOptions = ref({
+  completeWords: false,
+  ignoreCase: true,
+})
+</script>
+
+<template>
+  <div>
+    <div>
+      <input v-model="highlightText">
+      <input v-model="highlightOptions.completeWords" type="checkbox">
+      <input v-model="highlightOptions.ignoreCase" type="checkbox">
+    </div>
+    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" />
+  </div>
+</template>
+```
+<ClientOnly>
+  <HighlightText />
+</ClientOnly>

docs/examples/text_events/text_highlight.md

@@ -0,0 +1,36 @@
+# Highlight Event
+
+::: warning
+Highlight event payload has too much data to display on screen, open the console instead.
+:::
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+import { ref } from 'vue'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const highlightText = ref('Trace-based')
+const highlightOptions = ref({
+  completeWords: false,
+  ignoreCase: true,
+})
+
+function onHighlight(value) {
+  console.log(value)
+}
+</script>
+
+<template>
+  <div>
+    <input v-model="highlightText">
+    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" @highlight="onHighlight" />
+  </div>
+</template>
+```
+
+<ClientOnly>
+  <TextHighlight />
+</ClientOnly>

docs/guide/events.md

@@ -22,6 +22,18 @@ Value example:
 }
 ```
 
+## highlight
+
+```vue
+<VuePDF :pdf="pdf" @highlight="onHighlight" />
+```
+
+Emitted when a text has been searched in page using [highlight-text](/guide/props.md#highlight-text) and [highlight-options](/guide/props.md#highlight-options), this event return a list of matches and the page where the text was found with its `textDivs` and `textContent`.
+
+Check the example: [Highlight Event](/examples/text_events/text_highlight.md)
+
+
+
 ## annotation
 
 ```vue

docs/guide/introduction.md

@@ -57,8 +57,7 @@ You can also create your own custom styles and set them in your project, use thi
 - [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
 - [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)
 
-### XFA Forms <badge type="tip" text="v1.7" vertical="middle" />
-
+### XFA Forms
 XFA forms also can be supported by enabling them from `usePDF`.
 
 ```vue

docs/guide/props.md

@@ -41,12 +41,36 @@ Type: `boolean` <br />
 Required: `false` <br />
 Default: `false`
 
-Fit page with parent width, this prop replace `scale` in width calculation
+Fit page with the parent width. This prop replace [scale](#scale) in size calculation and has more precedence than [width](#width)
 
 ```vue
 <VuePDF :pdf="pdf" fit-parent />
 ```
 
+## width
+
+Type: `number` <br /> 
+Required: `false` <br />
+Default: `null`
+
+Scale the page with a `width` in px. This prop replace [scale](#scale) in size calculation and has more precedence than [height](#height)
+
+```vue
+<VuePDF :pdf="pdf" :width="500" />
+```
+
+## height
+
+Type: `number` <br /> 
+Required: `false` <br />
+Default: `null`
+
+Scale the page with a `height` in px. This prop replace [scale](#scale) in size calculation.
+
+```vue
+<VuePDF :pdf="pdf" :height="500" />
+```
+
 ## rotation
 
 Type: `int` <br />
@@ -71,6 +95,40 @@ Enable text selection in page
 <VuePDF :pdf="pdf" text-layer />
 ```
 
+## highlight-text  <badge type="tip" text="v1.9" vertical="middle" />
+
+Type: `string` <br />
+Required: `false` <br />
+Default: `null`
+
+Highlight on the page the searched text
+
+```vue
+<VuePDF :pdf="pdf" text-layer hightlight-text="javascript" />
+```
+
+## highlight-options  <badge type="tip" text="v1.9" vertical="middle" />
+
+Type: `object` <br />
+Required: `false` <br />
+Default: 
+```
+{
+  completeWords: false,
+  ignoreCase: true
+}
+```
+
+Settings for how to search the [highlight-text](#highlight-text)
+
+```vue
+<VuePDF :pdf="pdf" text-layer hightlight-text="javascript" :highlight-options="{
+    completeWords: true,
+    ignoreCase: false
+  }"
+/>
+```
+
 ## annotation-layer
 
 Type: `boolean` <br />
@@ -95,7 +153,7 @@ Prints a watermark pattern over canvas.
 <VuePDF :pdf="pdf" watermark-text="Sample" />
 ```
 
-## watermark-options <badge type="tip" text="v1.8" vertical="middle" />
+## watermark-options
 
 Type: `object` <br />
 Required: `false` <br />

docs/package.json

@@ -15,6 +15,6 @@
     "vuepress": "2.0.0-beta.62"
   },
   "dependencies": {
-    "@tato30/vue-pdf": "1.8.1"
+    "@tato30/vue-pdf": "^1.9.0"
   }
 }

docs/yarn.lock

@@ -229,10 +229,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@tato30/vue-pdf@1.8.1":
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.8.1.tgz#8640613aa7ad4b1abd9d913066a58273bc341371"
-  integrity sha512-EC2fZVQjYQ21kFVDUYaQEJfu5oz6W/qpfk7RNJ8LIM65u17sWyjYRzK5AjoqLYVzynHBE2suDgKEmCiOUzNyeA==
+"@tato30/vue-pdf@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.9.0.tgz#d97335fd5f83b34248fdeb29545041601cc0f843"
+  integrity sha512-bVSAj8lRk63U04NLG3jG0MReXaBy/9zTnRalMINYg19YPxfCo0Pl8SWYcAa8vmtx8MP6aJKEN53Xqqi6H6BPTQ==
   dependencies:
     pdfjs-dist "3.7.107"