@meistrari/tela-build 1.22.0 → 1.23.0

package/components/tela/preview/preview-content.vue

@@ -16,10 +16,19 @@ const props = withDefaults(
         /** Load PDF document from URL. Required for PDF preview. */
         pdfLoader?: (url: string) => Promise<PdfDocumentHandle | null>
         labels?: PreviewContentLabels
+        /** Text to highlight on the PDF pages. When set, a text layer is rendered with yellow highlights. */
+        highlightText?: string | null
+        /** The page to scroll to and highlight on. When set, scrolls to this page and restricts highlights to it. */
+        highlightPage?: number | null
+        /** When true, uses exact matching instead of fuzzy word-based matching for highlights. */
+        highlightExact?: boolean
     }>(),
     {
         variant: 'default',
         segmentTab: undefined,
+        highlightText: undefined,
+        highlightPage: undefined,
+        highlightExact: false,
     },
 )
 
@@ -80,7 +89,11 @@ const pdfDocHandle = ref<PdfDocumentHandle | null>(null)
 const pdfLoadError = ref<string | null>(null)
 
 const pageRefs = ref<Map<number, HTMLElement>>(new Map())
+const textLayerRefs = ref<Map<number, HTMLDivElement>>(new Map())
 const renderedPages = ref<Set<number>>(new Set())
+let isRendering = false
+let pendingReRender = false
+let pendingScrollPage: number | null = null
 
 function zoomIn() {
     if (scale.value < 3) {
@@ -185,6 +198,15 @@ function setPageRef(pageNum: number, el: HTMLElement | null) {
     }
 }
 
+function setTextLayerRef(pageNum: number, el: HTMLDivElement | null) {
+    if (el) {
+        textLayerRefs.value.set(pageNum, el)
+    }
+    else {
+        textLayerRefs.value.delete(pageNum)
+    }
+}
+
 async function renderPdfPage(pageNum: number) {
     const handle = pdfDocHandle.value
 
@@ -201,10 +223,16 @@ async function renderPdfPage(pageNum: number) {
     if (!canvas)
         return
 
+    const textLayer = textLayerRefs.value.get(pageNum) ?? null
+
     await handle.renderPage({
         pageNum,
         canvas: canvas as HTMLCanvasElement,
         scale: scale.value,
+        textLayer,
+        highlight: props.highlightText,
+        highlightPage: props.highlightPage,
+        highlightExact: props.highlightExact,
     })
 
     renderedPages.value.add(pageNum)
@@ -222,9 +250,32 @@ async function renderAllPdfPages() {
 }
 
 async function reRenderAllPdfPages() {
-    renderedPages.value.clear()
-    await nextTick()
-    await renderAllPdfPages()
+    if (isRendering) {
+        pendingReRender = true
+        return
+    }
+    isRendering = true
+    try {
+        renderedPages.value.clear()
+        await nextTick()
+        await renderAllPdfPages()
+    }
+    finally {
+        isRendering = false
+        if (pendingReRender) {
+            pendingReRender = false
+            void reRenderAllPdfPages().then(() => {
+                if (pendingScrollPage !== null) {
+                    scrollToPage(pendingScrollPage)
+                    pendingScrollPage = null
+                }
+            })
+        }
+        else if (pendingScrollPage !== null) {
+            scrollToPage(pendingScrollPage)
+            pendingScrollPage = null
+        }
+    }
 }
 
 watch(() => props.file, async (newFile) => {
@@ -275,6 +326,15 @@ watch(() => props.file, async (newFile) => {
 
             await nextTick()
             await renderAllPdfPages()
+
+            const scrollTarget = (props.highlightPage && props.highlightPage > 0)
+                ? props.highlightPage
+                : pendingScrollPage
+            if (scrollTarget) {
+                pendingScrollPage = null
+                await nextTick()
+                scrollToPage(scrollTarget)
+            }
         }
         else {
             pdfLoadError.value = labels.value.failedToLoadFile
@@ -392,6 +452,20 @@ function handleHotkey(e: KeyboardEvent) {
 }
 
 useEventListener('keydown', handleHotkey)
+
+watch([() => props.highlightText, () => props.highlightPage, () => props.highlightExact], async () => {
+    if (props.highlightPage && props.highlightPage > 0) {
+        pendingScrollPage = props.highlightPage
+    }
+    else {
+        pendingScrollPage = null
+    }
+    if (pdfDocHandle.value) {
+        await reRenderAllPdfPages()
+    }
+    // When doc isn't loaded yet, keep pendingScrollPage — it will be
+    // consumed by reRenderAllPdfPages().finally once the PDF renders.
+})
 </script>
 
 <template>
@@ -615,6 +689,12 @@ useEventListener('keydown', handleHotkey)
                                     :class="cn(variant === 'minimal' && 'w-256px pdf-page-card--minimal')"
                                 >
                                     <canvas />
+                                    <div
+                                        :ref="(el) => setTextLayerRef(pageNum, el as HTMLDivElement)"
+                                        data-text-layer
+                                        class="absolute top-0 left-0 w-full h-full z-1"
+                                        style="pointer-events: none; mix-blend-mode: multiply; line-height: 1; opacity: 0.4;"
+                                    />
                                     <div
                                         data-pdf-page-badge
                                         absolute z-2 top-8px left-8px

package/components/tela/preview/preview.vue

@@ -29,6 +29,12 @@ const props = withDefaults(
         pdfLoader?: (url: string) => Promise<import('./types').PdfDocumentHandle | null>
         /** Labels for PreviewContent (failedToLoadFile, page, download, etc.) */
         contentLabels?: import('./types').PreviewContentLabels
+        /** Text to highlight on the PDF pages. Passed to PreviewContent. */
+        highlightText?: string | null
+        /** Page to scroll to and highlight on. Passed to PreviewContent. */
+        highlightPage?: number | null
+        /** When true, uses exact matching instead of fuzzy word-based matching. */
+        highlightExact?: boolean
     }>(),
     {
         variant: 'default',
@@ -120,6 +126,9 @@ const fileReaderKey = computed(() => {
                     :pdf-loader="pdfLoader"
                     :labels="contentLabels"
                     :variant="variant"
+                    :highlight-text="highlightText"
+                    :highlight-page="highlightPage"
+                    :highlight-exact="highlightExact"
                     class="h-full"
                     @fullscreen="emit('fullscreen')"
                 />

package/components/tela/preview/types.ts

@@ -60,6 +60,14 @@ export interface PreviewSelectVariableLabels {
 
 export interface PdfDocumentHandle {
     numPages: number
-    renderPage: (opts: { pageNum: number, canvas: HTMLCanvasElement, scale: number }) => Promise<void>
+    renderPage: (opts: {
+        pageNum: number
+        canvas: HTMLCanvasElement
+        scale: number
+        textLayer?: HTMLDivElement | null
+        highlight?: string | null
+        highlightPage?: number | null
+        highlightExact?: boolean
+    }) => Promise<void>
     destroy: () => void
 }

package/composables/citation-navigation.ts

@@ -0,0 +1,88 @@
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { nextTick, ref, toValue } from 'vue'
+
+export interface CitationTarget {
+    file: string
+    page: number
+}
+
+export function useCitationNavigation(options: {
+    citations: MaybeRefOrGetter<Record<string, any> | null | undefined>
+}) {
+    const highlightText = ref<string | null>(null)
+    const highlightPage = ref<number | null>(null)
+    const highlightExact = ref(false)
+    const activeFile = ref<string | null>(null)
+
+    function lookupCitation(path: string): CitationTarget | null {
+        const citations = toValue(options.citations)
+        if (!citations)
+            return null
+
+        const parts = path.split('.')
+        let current: any = citations
+
+        for (const part of parts) {
+            if (current == null)
+                return null
+            if (Array.isArray(current)) {
+                const idx = Number.parseInt(part, 10)
+                if (Number.isNaN(idx))
+                    return null
+                current = current[idx]
+            }
+            else {
+                current = current[part]
+            }
+        }
+
+        if (!current || typeof current !== 'object' || !('page' in current))
+            return null
+
+        if ('file' in current && current.file)
+            return { file: current.file, page: current.page }
+
+        return null
+    }
+
+    function navigateToCitation(path: string, value?: any): void {
+        const citation = lookupCitation(path)
+        if (!citation) {
+            clearCitation()
+            return
+        }
+
+        // Reset then set via nextTick to force watchers to re-trigger
+        // even when clicking the same citation field twice
+        highlightText.value = null
+        highlightPage.value = null
+        highlightExact.value = false
+        activeFile.value = null
+
+        nextTick(() => {
+            activeFile.value = citation.file
+            highlightPage.value = citation.page
+            highlightText.value = value != null
+                ? (typeof value === 'string' ? value : String(value))
+                : null
+            highlightExact.value = true
+        })
+    }
+
+    function clearCitation(): void {
+        highlightText.value = null
+        highlightPage.value = null
+        highlightExact.value = false
+        activeFile.value = null
+    }
+
+    return {
+        highlightText: highlightText as Ref<string | null>,
+        highlightPage: highlightPage as Ref<number | null>,
+        highlightExact: highlightExact as Ref<boolean>,
+        activeFile: activeFile as Ref<string | null>,
+        lookupCitation,
+        navigateToCitation,
+        clearCitation,
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "type": "module",
   "files": [
     "app.config.ts",