From 9364b2477a659c9b171de3b2edacdcc564b4642e Mon Sep 17 00:00:00 2001
From: fpdo <fpdo@gft.com>
Date: Fri, 29 Nov 2024 17:07:58 +0100
Subject: [PATCH 1/3] refactor: highlightPages prop for conditional
 highlighting needs testing

---
 packages/vue-pdf/src/components/VuePDF.vue    | 470 +++++++++---------
 .../src/components/layers/TextLayer.vue       | 169 ++++---
 2 files changed, 348 insertions(+), 291 deletions(-)

diff --git a/packages/vue-pdf/src/components/VuePDF.vue b/packages/vue-pdf/src/components/VuePDF.vue
index f6dbd31..4d984c9 100644
--- a/packages/vue-pdf/src/components/VuePDF.vue
+++ b/packages/vue-pdf/src/components/VuePDF.vue
@@ -1,73 +1,93 @@
 <!-- eslint-disable no-case-declarations -->
 <script setup lang="ts">
-import * as PDFJS from 'pdfjs-dist'
-import { computed, onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
-
-import 'pdfjs-dist/web/pdf_viewer.css'
-
-import type { PDFDocumentLoadingTask, PDFPageProxy, PageViewport, RenderTask } from 'pdfjs-dist'
-import type { GetViewportParameters, PDFDocumentProxy, RenderParameters } from 'pdfjs-dist/types/src/display/api'
-import type { AnnotationEventPayload, HighlightEventPayload, HighlightOptions, LoadedEventPayload, TextLayerLoadedEventPayload, WatermarkOptions } from './types'
-
-import AnnotationLayer from './layers/AnnotationLayer.vue'
-import TextLayer from './layers/TextLayer.vue'
-import XFALayer from './layers/XFALayer.vue'
+import * as PDFJS from "pdfjs-dist";
+import { computed, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
+
+import "pdfjs-dist/web/pdf_viewer.css";
+
+import type {
+  PDFDocumentLoadingTask,
+  PDFPageProxy,
+  PageViewport,
+  RenderTask,
+} from "pdfjs-dist";
+import type {
+  GetViewportParameters,
+  PDFDocumentProxy,
+  RenderParameters,
+} from "pdfjs-dist/types/src/display/api";
+import type {
+  AnnotationEventPayload,
+  HighlightEventPayload,
+  HighlightOptions,
+  LoadedEventPayload,
+  TextLayerLoadedEventPayload,
+  WatermarkOptions,
+} from "./types";
+
+import AnnotationLayer from "./layers/AnnotationLayer.vue";
+import TextLayer from "./layers/TextLayer.vue";
+import XFALayer from "./layers/XFALayer.vue";
 
 interface InternalProps {
-  page: PDFPageProxy | undefined
-  document: PDFDocumentProxy | undefined
-  viewport: PageViewport | undefined
+  page: PDFPageProxy | undefined;
+  document: PDFDocumentProxy | undefined;
+  viewport: PageViewport | undefined;
 }
 
-const props = withDefaults(defineProps<{
-  pdf?: PDFDocumentLoadingTask
-  page?: number
-  scale?: number
-  rotation?: number
-  fitParent?: boolean
-  width?: number
-  height?: number
-  textLayer?: boolean
-  autoDestroy?: boolean
-  imageResourcesPath?: string
-  hideForms?: boolean
-  intent?: string
-  annotationLayer?: boolean
-  annotationsFilter?: string[]
-  annotationsMap?: object
-  watermarkText?: string
-  watermarkOptions?: WatermarkOptions
-  highlightText?: string | string[]
-  highlightOptions?: HighlightOptions
-}>(), {
-  page: 1,
-  scale: 1,
-  intent: 'display',
-  autoDestroy: false
-})
+const props = withDefaults(
+  defineProps<{
+    pdf?: PDFDocumentLoadingTask;
+    page?: number;
+    scale?: number;
+    rotation?: number;
+    fitParent?: boolean;
+    width?: number;
+    height?: number;
+    textLayer?: boolean;
+    autoDestroy?: boolean;
+    imageResourcesPath?: string;
+    hideForms?: boolean;
+    intent?: string;
+    annotationLayer?: boolean;
+    annotationsFilter?: string[];
+    annotationsMap?: object;
+    watermarkText?: string;
+    watermarkOptions?: WatermarkOptions;
+    highlightText?: string | string[];
+    highlightOptions?: HighlightOptions;
+    highlightPages?: number[];
+  }>(),
+  {
+    page: 1,
+    scale: 1,
+    intent: "display",
+    autoDestroy: false,
+  }
+);
 
 const emit = defineEmits<{
-  (event: 'annotation', payload: AnnotationEventPayload): void
-  (event: 'highlight', payload: HighlightEventPayload): void
-  (event: 'loaded', payload: LoadedEventPayload): void
-  (event: 'textLoaded', payload: TextLayerLoadedEventPayload): void
-  (event: 'annotationLoaded', payload: any[]): void
-  (event: 'xfaLoaded'): void
-}>()
+  (event: "annotation", payload: AnnotationEventPayload): void;
+  (event: "highlight", payload: HighlightEventPayload): void;
+  (event: "loaded", payload: LoadedEventPayload): void;
+  (event: "textLoaded", payload: TextLayerLoadedEventPayload): void;
+  (event: "annotationLoaded", payload: any[]): void;
+  (event: "xfaLoaded"): void;
+}>();
 
 // Template Refs
-const container = ref<HTMLSpanElement>()
-const loadingLayer = ref<HTMLSpanElement>()
-const loading = ref(false)
-let renderTask: RenderTask
+const container = ref<HTMLSpanElement>();
+const loadingLayer = ref<HTMLSpanElement>();
+const loading = ref(false);
+let renderTask: RenderTask;
 
 const internalProps = computed(() => {
   return {
     viewport: undefined,
     document: undefined,
     page: undefined,
-  } as InternalProps
-})
+  } as InternalProps;
+});
 const alayerProps = computed(() => {
   return {
     annotationsMap: props.annotationsMap,
@@ -75,240 +95,246 @@ const alayerProps = computed(() => {
     imageResourcesPath: props.imageResourcesPath,
     hideForms: props.hideForms,
     intent: props.intent,
-  }
-})
+  };
+});
 const tlayerProps = computed(() => {
   return {
-    highlightText: props.highlightText,
+    highlightText: "Map",
     highlightOptions: props.highlightOptions,
-  }
-})
+    highlightPages: props.highlightPages,
+  };
+});
 
 function getWatermarkOptionsWithDefaults(): WatermarkOptions {
-  return Object.assign({}, {
-    columns: 4,
-    rows: 4,
-    rotation: 45,
-    fontSize: 18,
-    color: 'rgba(211, 210, 211, 0.4)',
-  }, props.watermarkOptions)
+  return Object.assign(
+    {},
+    {
+      columns: 4,
+      rows: 4,
+      rotation: 45,
+      fontSize: 18,
+      color: "rgba(211, 210, 211, 0.4)",
+    },
+    props.watermarkOptions
+  );
 }
 
 function getRotation(rotation: number): number {
-  if (!(typeof rotation === 'number' && rotation % 90 === 0))
-    return 0
-  const factor = rotation / 90
-  if (factor > 4)
-    return getRotation(rotation - 360)
-  else if (factor < 0)
-    return getRotation(rotation + 360)
-  return rotation
+  if (!(typeof rotation === "number" && rotation % 90 === 0)) return 0;
+  const factor = rotation / 90;
+  if (factor > 4) return getRotation(rotation - 360);
+  else if (factor < 0) return getRotation(rotation + 360);
+  return rotation;
 }
 
 function getScale(page: PDFPageProxy): number {
-  let fscale = props.scale
+  let fscale = props.scale;
   if (props.fitParent) {
-    const parentWidth: number = (container.value!.parentNode! as HTMLElement).clientWidth
-    const scale1Width = page.getViewport({ scale: 1 }).width
-    fscale = parentWidth / scale1Width
+    const parentWidth: number = (container.value!.parentNode! as HTMLElement)
+      .clientWidth;
+    const scale1Width = page.getViewport({ scale: 1 }).width;
+    fscale = parentWidth / scale1Width;
+  } else if (props.width) {
+    const scale1Width = page.getViewport({ scale: 1 }).width;
+    fscale = props.width / scale1Width;
+  } else if (props.height) {
+    const scale1Height = page.getViewport({ scale: 1 }).height;
+    fscale = props.height / scale1Height;
   }
-  else if (props.width) {
-    const scale1Width = page.getViewport({ scale: 1 }).width
-    fscale = props.width / scale1Width
-  }
-  else if (props.height) {
-    const scale1Height = page.getViewport({ scale: 1 }).height
-    fscale = props.height / scale1Height
-  }
-  return fscale
+  return fscale;
 }
 
 function paintWatermark(zoomRatio = 1.0) {
-  if (!props.watermarkText)
-    return
+  if (!props.watermarkText) return;
 
-  const canvas = getCurrentCanvas()
-  if (!canvas)
-    return
+  const canvas = getCurrentCanvas();
+  if (!canvas) return;
 
-  const ctx = canvas.getContext('2d')
-  if (!ctx)
-    return
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
 
-  const mergeOptions = getWatermarkOptionsWithDefaults()
+  const mergeOptions = getWatermarkOptionsWithDefaults();
 
-  const text = props.watermarkText
-  const columns = mergeOptions.columns!
-  const rows = mergeOptions.rows!
-  const numWatermarks = columns * rows
-  const rotation = mergeOptions.rotation!
-  const pixels = mergeOptions.fontSize! * zoomRatio
-  ctx.font = `${pixels}px Trebuchet MS`
-  ctx.fillStyle = mergeOptions.color!
+  const text = props.watermarkText;
+  const columns = mergeOptions.columns!;
+  const rows = mergeOptions.rows!;
+  const numWatermarks = columns * rows;
+  const rotation = mergeOptions.rotation!;
+  const pixels = mergeOptions.fontSize! * zoomRatio;
+  ctx.font = `${pixels}px Trebuchet MS`;
+  ctx.fillStyle = mergeOptions.color!;
 
   for (let i = 0; i < numWatermarks; i++) {
-    const x = (i % columns) * (canvas.width / columns) + canvas.width / (columns * 2)
-    const y = Math.floor(i / columns) * (canvas.height / rows) + canvas.height / (rows * 2)
-
-    const textWidth = ctx.measureText(text).width
-    ctx.save()
-    ctx.translate(x, y)
-    ctx.rotate(-rotation * (Math.PI / 180))
-    ctx.fillText(text, -textWidth / 2, pixels / 2)
-    ctx.restore()
+    const x =
+      (i % columns) * (canvas.width / columns) + canvas.width / (columns * 2);
+    const y =
+      Math.floor(i / columns) * (canvas.height / rows) +
+      canvas.height / (rows * 2);
+
+    const textWidth = ctx.measureText(text).width;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(-rotation * (Math.PI / 180));
+    ctx.fillText(text, -textWidth / 2, pixels / 2);
+    ctx.restore();
   }
 }
 
 function getCurrentCanvas(): HTMLCanvasElement | null {
-  let oldCanvas = null
+  let oldCanvas = null;
   container.value?.childNodes.forEach((el) => {
-    if ((el as HTMLElement).tagName === 'CANVAS')
-      oldCanvas = el
-  })
-  return oldCanvas
+    if ((el as HTMLElement).tagName === "CANVAS") oldCanvas = el;
+  });
+  return oldCanvas;
 }
 
 function setupCanvas(viewport: PageViewport): HTMLCanvasElement {
-  let canvas
-  const currentCanvas = getCurrentCanvas()!
-  if (currentCanvas && currentCanvas?.getAttribute('role') === 'main') {
-    canvas = currentCanvas
-  }
-  else {
-    canvas = document.createElement('canvas')
-    canvas.style.display = 'block'
-    canvas.setAttribute('dir', 'ltr')
+  let canvas;
+  const currentCanvas = getCurrentCanvas()!;
+  if (currentCanvas && currentCanvas?.getAttribute("role") === "main") {
+    canvas = currentCanvas;
+  } else {
+    canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.setAttribute("dir", "ltr");
   }
 
-  const outputScale = window.devicePixelRatio || 1
-  canvas.width = Math.floor(viewport.width * outputScale)
-  canvas.height = Math.floor(viewport.height * outputScale)
+  const outputScale = window.devicePixelRatio || 1;
+  canvas.width = Math.floor(viewport.width * outputScale);
+  canvas.height = Math.floor(viewport.height * outputScale);
 
-  canvas.style.width = `${Math.floor(viewport.width)}px`
-  canvas.style.height = `${Math.floor(viewport.height)}px`
+  canvas.style.width = `${Math.floor(viewport.width)}px`;
+  canvas.style.height = `${Math.floor(viewport.height)}px`;
 
   // --scale-factor property
-  container.value?.style.setProperty('--scale-factor', `${viewport.scale}`)
+  container.value?.style.setProperty("--scale-factor", `${viewport.scale}`);
   // Also setting dimension properties for load layer
-  loadingLayer.value!.style.width = `${Math.floor(viewport.width)}px`
-  loadingLayer.value!.style.height = `${Math.floor(viewport.height)}px`
-  loadingLayer.value!.style.top = '0'
-  loadingLayer.value!.style.left = '0'
-  loading.value = true
-  return canvas
+  loadingLayer.value!.style.width = `${Math.floor(viewport.width)}px`;
+  loadingLayer.value!.style.height = `${Math.floor(viewport.height)}px`;
+  loadingLayer.value!.style.top = "0";
+  loadingLayer.value!.style.left = "0";
+  loading.value = true;
+  return canvas;
 }
 
 function cancelRender() {
-  if (renderTask)
-    renderTask.cancel()
+  if (renderTask) renderTask.cancel();
 }
 
 function renderPage(pageNum: number) {
-  toRaw(internalProps.value.document)?.getPage(pageNum).then((page) => {
-    cancelRender()
-
-    const defaultViewport = page.getViewport()
-    const viewportParams: GetViewportParameters = {
-      scale: getScale(page),
-      rotation: getRotation((props.rotation || 0) + defaultViewport.rotation),
-    }
-    const viewport = page.getViewport(viewportParams)
-
-    const oldCanvas = getCurrentCanvas()
-    const canvas = setupCanvas(viewport)
-
-    const outputScale = window.devicePixelRatio || 1
-    const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined
-
-    // Render PDF page into canvas context
-    const renderContext: RenderParameters = {
-      canvasContext: canvas.getContext('2d')!,
-      viewport,
-      annotationMode: props.hideForms ? PDFJS.AnnotationMode.ENABLE : PDFJS.AnnotationMode.ENABLE_FORMS,
-      transform,
-      intent: props.intent,
-    }
-
-    if (canvas?.getAttribute('role') !== 'main') {
-      if (oldCanvas)
-        container.value?.replaceChild(canvas, oldCanvas)
-    }
-    else {
-      canvas.removeAttribute('role')
-    }
-
-    internalProps.value.page = page
-    internalProps.value.viewport = viewport
-    renderTask = page.render(renderContext)
-    renderTask.promise.then(() => {
-      loading.value = false
-      paintWatermark(viewport.scale)
-      emit('loaded', internalProps.value.viewport!)
-    }).catch(() => {
-      // render task cancelled
-    })
-  })
+  toRaw(internalProps.value.document)
+    ?.getPage(pageNum)
+    .then((page) => {
+      cancelRender();
+
+      const defaultViewport = page.getViewport();
+      const viewportParams: GetViewportParameters = {
+        scale: getScale(page),
+        rotation: getRotation((props.rotation || 0) + defaultViewport.rotation),
+      };
+      const viewport = page.getViewport(viewportParams);
+
+      const oldCanvas = getCurrentCanvas();
+      const canvas = setupCanvas(viewport);
+
+      const outputScale = window.devicePixelRatio || 1;
+      const transform =
+        outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;
+
+      // Render PDF page into canvas context
+      const renderContext: RenderParameters = {
+        canvasContext: canvas.getContext("2d")!,
+        viewport,
+        annotationMode: props.hideForms
+          ? PDFJS.AnnotationMode.ENABLE
+          : PDFJS.AnnotationMode.ENABLE_FORMS,
+        transform,
+        intent: props.intent,
+      };
+
+      if (canvas?.getAttribute("role") !== "main") {
+        if (oldCanvas) container.value?.replaceChild(canvas, oldCanvas);
+      } else {
+        canvas.removeAttribute("role");
+      }
+
+      internalProps.value.page = page;
+      internalProps.value.viewport = viewport;
+      renderTask = page.render(renderContext);
+      renderTask.promise
+        .then(() => {
+          loading.value = false;
+          paintWatermark(viewport.scale);
+          emit("loaded", internalProps.value.viewport!);
+        })
+        .catch(() => {
+          // render task cancelled
+        });
+    });
 }
 
 function initDoc(proxy: PDFDocumentLoadingTask) {
   proxy.promise.then(async (document) => {
-    internalProps.value.document = document
-    renderPage(props.page)
-  })
+    internalProps.value.document = document;
+    renderPage(props.page);
+  });
 }
 
-watch(() => props.pdf, (pdf) => {
-  // For any changes on pdf, reinicialize all
-  if (pdf !== undefined)
-    initDoc(pdf)
-})
-
-watch(() => [
-  props.scale,
-  props.width,
-  props.height,
-  props.rotation,
-  props.page,
-  props.hideForms,
-  props.intent,
-], () => {
-  // Props that should dispatch an render task
-  renderPage(props.page)
-})
+watch(
+  () => props.pdf,
+  (pdf) => {
+    // For any changes on pdf, reinicialize all
+    if (pdf !== undefined) initDoc(pdf);
+  }
+);
+
+watch(
+  () => [
+    props.scale,
+    props.width,
+    props.height,
+    props.rotation,
+    props.page,
+    props.hideForms,
+    props.intent,
+  ],
+  () => {
+    // Props that should dispatch an render task
+    renderPage(props.page);
+  }
+);
 
 onMounted(() => {
-  if (props.pdf !== undefined)
-    initDoc(props.pdf)
-})
+  if (props.pdf !== undefined) initDoc(props.pdf);
+});
 
 onUnmounted(() => {
   // Abort all network process and terminates the worker
-  if (props.autoDestroy)
-    props.pdf?.destroy()
-})
+  if (props.autoDestroy) props.pdf?.destroy();
+});
 
 // Exposed method
 function destroy() {
-  props.pdf?.destroy()
+  props.pdf?.destroy();
 }
 
 function reload() {
-  renderPage(props.page)
+  renderPage(props.page);
 }
 
 function cancel() {
-  cancelRender()
+  cancelRender();
 }
 
 defineExpose({
   reload,
   cancel,
-  destroy
-})
+  destroy,
+});
 </script>
 
 <template>
-  <div ref="container" style="position: relative; display: block;">
+  <div ref="container" style="position: relative; display: block">
     <canvas dir="ltr" style="display: block" role="main" />
     <AnnotationLayer
       v-if="annotationLayer"
@@ -317,16 +343,12 @@ defineExpose({
       @annotation-loaded="emit('annotationLoaded', $event)"
     />
     <TextLayer
-      v-if="textLayer"
       v-bind="{ ...internalProps, ...tlayerProps }"
       @highlight="emit('highlight', $event)"
       @text-loaded="emit('textLoaded', $event)"
     />
-    <XFALayer
-      v-bind="{ ...internalProps }"
-      @xfa-loaded="emit('xfaLoaded')"
-    />
-    <div v-show="loading" ref="loadingLayer" style="position: absolute;">
+    <XFALayer v-bind="{ ...internalProps }" @xfa-loaded="emit('xfaLoaded')" />
+    <div v-show="loading" ref="loadingLayer" style="position: absolute">
       <slot />
     </div>
   </div>
diff --git a/packages/vue-pdf/src/components/layers/TextLayer.vue b/packages/vue-pdf/src/components/layers/TextLayer.vue
index d287c60..c0e9a20 100644
--- a/packages/vue-pdf/src/components/layers/TextLayer.vue
+++ b/packages/vue-pdf/src/components/layers/TextLayer.vue
@@ -1,103 +1,138 @@
 <script setup lang="ts">
-import * as PDFJS from 'pdfjs-dist'
-import { onMounted, ref, watch } from 'vue'
+import * as PDFJS from "pdfjs-dist";
+import { onMounted, ref, watch } from "vue";
 
-import type { PDFPageProxy, PageViewport } from 'pdfjs-dist'
-import type { HighlightEventPayload, HighlightOptions, TextLayerLoadedEventPayload } from '../types'
-import { findMatches, highlightMatches, resetDivs } from '../utils/highlight'
+import type { PDFPageProxy, PageViewport } from "pdfjs-dist";
+import type {
+  HighlightEventPayload,
+  HighlightOptions,
+  TextLayerLoadedEventPayload,
+} from "../types";
+import { findMatches, highlightMatches, resetDivs } from "../utils/highlight";
 
 const props = defineProps<{
-  page?: PDFPageProxy
-  viewport?: PageViewport
-  highlightText?: string | string[]
-  highlightOptions?: HighlightOptions
-}>()
+  page?: PDFPageProxy;
+  viewport?: PageViewport;
+  highlightText?: string | string[];
+  highlightOptions?: HighlightOptions;
+  hightlightPages?: number[];
+}>();
 
 const emit = defineEmits<{
-  (event: 'highlight', payload: HighlightEventPayload): void
-  (event: 'textLoaded', payload: TextLayerLoadedEventPayload): void
-}>()
+  (event: "highlight", payload: HighlightEventPayload): void;
+  (event: "textLoaded", payload: TextLayerLoadedEventPayload): void;
+}>();
 
-const layer = ref<HTMLDivElement>()
-const endContent = ref<HTMLDivElement>()
-let textDivs: HTMLElement[] = []
+const layer = ref<HTMLDivElement>();
+const endContent = ref<HTMLDivElement>();
+let textDivs: HTMLElement[] = [];
 
 function getHighlightOptionsWithDefaults(): HighlightOptions {
-  return Object.assign({}, {
-    ignoreCase: true,
-    completeWords: false,
-  }, props.highlightOptions)
+  return Object.assign(
+    {},
+    {
+      ignoreCase: true,
+      completeWords: false,
+    },
+    props.highlightOptions
+  );
 }
 
 async function findAndHighlight(reset = false) {
-  const page = props.page
-  const textContent = await page?.getTextContent()
-
-  if (!textContent)
-    return
-
-  if (reset)
-    resetDivs(textContent, textDivs)
-
-  if (props.highlightText) {
-    const queries = typeof props.highlightText === 'string' ? [props.highlightText] : props.highlightText
-    const matches = findMatches(queries, textContent!, getHighlightOptionsWithDefaults())
-    highlightMatches(matches, textContent!, textDivs)
-    emit('highlight', {
+  const page = props.page;
+  const textContent = await page?.getTextContent();
+  console.log("highlightText", props.highlightText);
+
+  if (!textContent) return;
+
+  if (reset) resetDivs(textContent, textDivs);
+
+  if (
+    props.highlightText &&
+    (!props.hightlightPages || props.hightlightPages.includes(page!.pageNumber))
+  ) {
+    const queries =
+      typeof props.highlightText === "string"
+        ? [props.highlightText]
+        : props.highlightText;
+    const matches = findMatches(
+      queries,
+      textContent!,
+      getHighlightOptionsWithDefaults()
+    );
+    highlightMatches(matches, textContent!, textDivs);
+    console.log("emitted page", page?.pageNumber);
+    emit("highlight", {
       matches,
       textContent,
       textDivs,
       page: page?.pageNumber || 1,
-    })
+    });
   }
 }
 
 function render() {
-  layer.value!.replaceChildren?.()
-
-  const page = props.page
-  const viewport = props.viewport
-  const textStream = page?.streamTextContent({ includeMarkedContent: true, disableNormalization: true })
-  const textLayer = new PDFJS.TextLayer({ container: layer.value!, textContentSource: textStream!, viewport: viewport! })
+  layer.value!.replaceChildren?.();
+
+  const page = props.page;
+  const viewport = props.viewport;
+  const textStream = page?.streamTextContent({
+    includeMarkedContent: true,
+    disableNormalization: true,
+  });
+  const textLayer = new PDFJS.TextLayer({
+    container: layer.value!,
+    textContentSource: textStream!,
+    viewport: viewport!,
+  });
   textLayer.render().then(async () => {
-    textDivs = textLayer.textDivs
-    const textContent = await page?.getTextContent()
-    emit('textLoaded', { textDivs, textContent })
-    const endOfContent = document.createElement('div')
-    endOfContent.className = 'endOfContent'
-    layer.value?.appendChild(endOfContent)
-    endContent.value = endOfContent
-    findAndHighlight()
-  })
+    textDivs = textLayer.textDivs;
+    const textContent = await page?.getTextContent();
+    emit("textLoaded", { textDivs, textContent });
+    const endOfContent = document.createElement("div");
+    endOfContent.className = "endOfContent";
+    layer.value?.appendChild(endOfContent);
+    endContent.value = endOfContent;
+    findAndHighlight();
+  });
 }
 
 function onMouseDown() {
-  if (!endContent.value)
-    return
-  endContent.value.classList.add('active')
+  if (!endContent.value) return;
+  endContent.value.classList.add("active");
 }
 
 function onMouseUp() {
-  if (!endContent.value)
-    return
-  endContent.value.classList.remove('active')
+  if (!endContent.value) return;
+  endContent.value.classList.remove("active");
 }
 
-watch(() => props.viewport, (_) => {
-  if (props.page && props.viewport && layer.value)
-    render()
-})
+watch(
+  () => props.viewport,
+  (_) => {
+    if (props.page && props.viewport && layer.value) render();
+  }
+);
 
-watch(() => [props.highlightText, props.highlightOptions], (_) => {
-  findAndHighlight(true)
-}, { deep: true })
+watch(
+  () => [props.highlightText, props.highlightOptions],
+  (_) => {
+    findAndHighlight(true);
+  },
+  { deep: true }
+);
 
 onMounted(() => {
-  if (props.page && props.viewport && layer.value)
-    render()
-})
+  if (props.page && props.viewport && layer.value) render();
+});
 </script>
 
 <template>
-  <div ref="layer" class="textLayer" style="display: block;" @mousedown="onMouseDown" @mouseup="onMouseUp" />
+  <div
+    ref="layer"
+    class="textLayer"
+    style="display: block"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+  />
 </template>

From eae33070da0f83d8fd9a8c24c697d47820c4a6ba Mon Sep 17 00:00:00 2001
From: fpdo <fpdo@gft.com>
Date: Fri, 29 Nov 2024 17:11:10 +0100
Subject: [PATCH 2/3] fix: update highlightText prop to use dynamic value and
 conditionally render text layer

---
 packages/vue-pdf/src/components/VuePDF.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vue-pdf/src/components/VuePDF.vue b/packages/vue-pdf/src/components/VuePDF.vue
index 4d984c9..207ffcd 100644
--- a/packages/vue-pdf/src/components/VuePDF.vue
+++ b/packages/vue-pdf/src/components/VuePDF.vue
@@ -99,7 +99,7 @@ const alayerProps = computed(() => {
 });
 const tlayerProps = computed(() => {
   return {
-    highlightText: "Map",
+    highlightText: props.highlightText,
     highlightOptions: props.highlightOptions,
     highlightPages: props.highlightPages,
   };
@@ -343,6 +343,7 @@ defineExpose({
       @annotation-loaded="emit('annotationLoaded', $event)"
     />
     <TextLayer
+      v-if="textLayer"
       v-bind="{ ...internalProps, ...tlayerProps }"
       @highlight="emit('highlight', $event)"
       @text-loaded="emit('textLoaded', $event)"

From 9ba93c28a1be9ed5f33b51cd9e47f40acf2aeb8a Mon Sep 17 00:00:00 2001
From: fpdo <fpdo@gft.com>
Date: Fri, 29 Nov 2024 17:11:27 +0100
Subject: [PATCH 3/3] chore: remove debug console logs from findAndHighlight
 function

---
 packages/vue-pdf/src/components/layers/TextLayer.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vue-pdf/src/components/layers/TextLayer.vue b/packages/vue-pdf/src/components/layers/TextLayer.vue
index c0e9a20..f388df1 100644
--- a/packages/vue-pdf/src/components/layers/TextLayer.vue
+++ b/packages/vue-pdf/src/components/layers/TextLayer.vue
@@ -41,7 +41,6 @@ function getHighlightOptionsWithDefaults(): HighlightOptions {
 async function findAndHighlight(reset = false) {
   const page = props.page;
   const textContent = await page?.getTextContent();
-  console.log("highlightText", props.highlightText);
 
   if (!textContent) return;
 
@@ -61,7 +60,6 @@ async function findAndHighlight(reset = false) {
       getHighlightOptionsWithDefaults()
     );
     highlightMatches(matches, textContent!, textDivs);
-    console.log("emitted page", page?.pageNumber);
     emit("highlight", {
       matches,
       textContent,