@pallasoft/ps-file-components 2.3.0 → 2.4.0

package/dist/esm/components/ps-text-viewer.js

@@ -8,31 +8,24 @@ import { PsCsvService } from '../services/ps-csv-service';
 import { PsFileTypeService } from '../services/ps-file-type-service';
 import { PsTextSearchService } from '../services/ps-text-search-service';
 import { PsHighlightedText } from './ps-highlighted-text';
+import { PsTableView } from './ps-table-view';
 export const PsTextViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
     const { hasFailed, text } = usePsFileText(file.url);
     const container = useRef(null);
     const isCsv = PsFileTypeService.kindOf(file.contentType, file.name) === PsFileKind.csv;
     const rows = useMemo(() => (isCsv && text !== null ? PsCsvService.parse(text) : []), [isCsv, text]);
-    const cells = useMemo(() => {
-        let offset = 0;
-        return rows.map((row) => row.map((cell) => {
-            const matches = PsTextSearchService.find(cell, query);
-            const segments = PsTextSearchService.segments(cell, matches, offset);
-            offset += matches.length;
-            return segments;
-        }));
-    }, [rows, query]);
     const segments = useMemo(() => isCsv || text === null
         ? []
         : PsTextSearchService.segments(text, PsTextSearchService.find(text, query)), [isCsv, text, query]);
-    const count = isCsv
-        ? cells.reduce((total, row) => total + row.reduce((sum, cell) => sum + cell.filter((part) => part.isMatch).length, 0), 0)
-        : segments.filter((part) => part.isMatch).length;
-    useEffect(() => onMatchCount(count), [count]);
+    const count = segments.filter((part) => part.isMatch).length;
+    useEffect(() => {
+        if (!isCsv)
+            onMatchCount(count);
+    }, [isCsv, count]);
     usePsActiveMatchScroll(container, activeMatch, query);
     if (hasFailed)
         return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
     if (text === null)
         return _jsx(PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
-    return (_jsx("div", { className: 'h-full w-full overflow-auto', ref: container, children: _jsx("div", { className: 'mx-auto w-full max-w-5xl rounded-lg bg-surface p-5 text-ink shadow-2xl', style: { fontSize: `${zoom * 0.875}rem` }, children: isCsv ? (_jsx("table", { className: 'w-full border-collapse text-left', children: _jsx("tbody", { children: cells.map((row, rowIndex) => (_jsx("tr", { className: rowIndex === 0 ? 'bg-primary-soft/50 font-semibold' : 'border-t border-line', children: row.map((cell, cellIndex) => (_jsx("td", { className: 'whitespace-nowrap px-3 py-1.5 align-top', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: cell }) }, cellIndex))) }, rowIndex))) }) })) : (_jsx("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
+    return (_jsx("div", { className: 'h-full w-full overflow-auto', ref: container, children: _jsx("div", { className: 'mx-auto w-full max-w-5xl rounded-lg bg-surface p-5 text-ink shadow-2xl', style: { fontSize: `${zoom * 0.875}rem` }, children: isCsv ? (_jsx(PsTableView, { activeMatch: activeMatch, onMatchCount: onMatchCount, query: query, rows: rows })) : (_jsx("pre", { className: 'whitespace-pre-wrap break-words font-mono leading-relaxed', children: _jsx(PsHighlightedText, { activeMatch: activeMatch, segments: segments }) })) }) }));
 };

package/dist/esm/components/ps-word-viewer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSpinner } from '@pallasoft/ps-core-components';
+import { usePsLoadedFile } from '../hooks/use-ps-loaded-file';
+import { PsWordService } from '../services/ps-word-service';
+import { PsHtmlDocument } from './ps-html-document';
+export const PsWordViewer = ({ activeMatch, file, labels, onMatchCount, query, zoom, }) => {
+    const { hasFailed, value } = usePsLoadedFile(file.url, PsWordService.load);
+    if (hasFailed)
+        return _jsx("p", { className: 'm-auto text-sm text-white/70', children: labels.loadFailed });
+    if (value === null)
+        return _jsx(PsSpinner, { className: 'm-auto', color: 'current', size: 'large' });
+    return (_jsx(PsHtmlDocument, { activeMatch: activeMatch, html: value, onMatchCount: onMatchCount, query: query, zoom: zoom }));
+};

package/dist/esm/constants/ps-file-kind-icons.js

@@ -3,9 +3,12 @@ import { PsFileKind } from './ps-file-kind';
 export const PsFileKindIcons = {
     [PsFileKind.audio]: PsIconKey.Audio,
     [PsFileKind.csv]: PsIconKey.Sheet,
+    [PsFileKind.html]: PsIconKey.Text,
     [PsFileKind.image]: PsIconKey.Image,
     [PsFileKind.other]: PsIconKey.File,
     [PsFileKind.pdf]: PsIconKey.Doc,
+    [PsFileKind.sheet]: PsIconKey.Sheet,
     [PsFileKind.text]: PsIconKey.Text,
     [PsFileKind.video]: PsIconKey.Video,
+    [PsFileKind.word]: PsIconKey.Doc,
 };

package/dist/esm/constants/ps-file-kind.js

@@ -1,9 +1,12 @@
 export const PsFileKind = {
     audio: 'audio',
     csv: 'csv',
+    html: 'html',
     image: 'image',
     other: 'other',
     pdf: 'pdf',
+    sheet: 'sheet',
     text: 'text',
     video: 'video',
+    word: 'word',
 };

package/dist/esm/constants/ps-file-type-config.js

@@ -1,26 +1,40 @@
 import { PsFileKind } from './ps-file-kind';
 export const PsFileTypeConfig = {
-    csvTypes: ['text/csv', 'application/csv', 'application/vnd.ms-excel'],
+    csvTypes: ['text/csv', 'application/csv'],
+    excelLegacyType: 'application/vnd.ms-excel',
     extensionKinds: {
+        aac: PsFileKind.audio,
+        avif: PsFileKind.image,
+        bmp: PsFileKind.image,
         csv: PsFileKind.csv,
+        docx: PsFileKind.word,
         gif: PsFileKind.image,
-        heic: PsFileKind.image,
+        htm: PsFileKind.html,
+        html: PsFileKind.html,
         jpeg: PsFileKind.image,
         jpg: PsFileKind.image,
         json: PsFileKind.text,
         log: PsFileKind.text,
+        m4a: PsFileKind.audio,
         md: PsFileKind.text,
         mov: PsFileKind.video,
         mp3: PsFileKind.audio,
         mp4: PsFileKind.video,
+        ogg: PsFileKind.audio,
         pdf: PsFileKind.pdf,
         png: PsFileKind.image,
         svg: PsFileKind.image,
+        tsv: PsFileKind.text,
         txt: PsFileKind.text,
         wav: PsFileKind.audio,
         webm: PsFileKind.video,
         webp: PsFileKind.image,
+        xlsx: PsFileKind.sheet,
         xml: PsFileKind.text,
     },
+    htmlTypes: ['text/html', 'application/xhtml+xml'],
+    sheetTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
     textTypes: ['application/json', 'application/xml'],
+    unsupportedImageTypes: ['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence'],
+    wordTypes: ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
 };

package/dist/esm/constants/ps-file-viewer-config.js

@@ -1,5 +1,6 @@
 export const PsFileViewerConfig = {
     dragActivationDistance: 4,
+    maxSheetRows: 2000,
     maxZoom: 4,
     minZoom: 0.25,
     pdfBaseScale: 1.4,

package/dist/esm/constants/ps-file-viewer-kinds.js

@@ -1,6 +1,21 @@
 import { PsFileKind } from './ps-file-kind';
 export const PsFileViewerKinds = {
     rotatable: [PsFileKind.image, PsFileKind.pdf],
-    searchable: [PsFileKind.csv, PsFileKind.pdf, PsFileKind.text],
-    zoomable: [PsFileKind.csv, PsFileKind.image, PsFileKind.pdf, PsFileKind.text],
+    searchable: [
+        PsFileKind.csv,
+        PsFileKind.html,
+        PsFileKind.pdf,
+        PsFileKind.sheet,
+        PsFileKind.text,
+        PsFileKind.word,
+    ],
+    zoomable: [
+        PsFileKind.csv,
+        PsFileKind.html,
+        PsFileKind.image,
+        PsFileKind.pdf,
+        PsFileKind.sheet,
+        PsFileKind.text,
+        PsFileKind.word,
+    ],
 };

package/dist/esm/constants/ps-file-viewer-labels.js

@@ -1,11 +1,13 @@
 export const PsFileViewerLabels = {
     close: 'Close',
+    closeSearch: 'Close search',
     delete: 'Delete',
     deleteConfirm: 'Delete file',
     deleteConfirmBody: 'will be deleted. You cannot undo this.',
     deleteCancel: 'Cancel',
     download: 'Download',
     loadFailed: 'This file could not be opened.',
+    matchCount: '{current} of {total}',
     next: 'Next file',
     nextMatch: 'Next match',
     noMatches: 'No matches',
@@ -14,6 +16,7 @@ export const PsFileViewerLabels = {
     previousMatch: 'Previous match',
     rotate: 'Rotate',
     search: 'Search in file',
+    sheetTruncated: 'Showing the first {count} rows',
     unsupported: 'This file type cannot be previewed here. Download it to open it.',
     zoomIn: 'Zoom in',
     zoomOut: 'Zoom out',

package/dist/esm/constants/ps-html-sanitize-config.js

@@ -0,0 +1,23 @@
+export const PsHtmlSanitizeConfig = {
+    anchorRel: 'noopener noreferrer',
+    anchorTarget: '_blank',
+    blockSelector: 'p,li,td,th,tr,h1,h2,h3,h4,h5,h6,div,pre,blockquote,section,article,caption',
+    forbiddenAttributes: ['style', 'srcset'],
+    forbiddenTags: [
+        'style',
+        'form',
+        'input',
+        'button',
+        'textarea',
+        'select',
+        'iframe',
+        'frame',
+        'object',
+        'embed',
+        'link',
+        'meta',
+        'base',
+        'script',
+    ],
+    mediaTags: ['img', 'picture', 'source', 'video', 'audio', 'track'],
+};

package/dist/esm/hooks/use-ps-file-search.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePsDebouncedValue } from '@pallasoft/ps-core-components';
+import { PsFileViewerConfig } from '../constants/ps-file-viewer-config';
+export const usePsFileSearch = (resetKey) => {
+    const [search, setSearch] = useState('');
+    const [activeMatch, setActiveMatch] = useState(0);
+    const [matchCount, setMatchCount] = useState(0);
+    const inputRef = useRef(null);
+    const query = usePsDebouncedValue(search, PsFileViewerConfig.searchDebounceMs);
+    const reset = useCallback(() => {
+        setSearch('');
+        setActiveMatch(0);
+        setMatchCount(0);
+    }, []);
+    useEffect(reset, [resetKey]);
+    useEffect(() => setActiveMatch(0), [query]);
+    const focus = useCallback(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const step = useCallback((delta) => {
+        if (matchCount > 0)
+            setActiveMatch((current) => (current + delta + matchCount) % matchCount);
+    }, [matchCount]);
+    return {
+        activeMatch,
+        focus,
+        inputRef,
+        matchCount,
+        query,
+        reset,
+        search,
+        setMatchCount,
+        setSearch,
+        step,
+    };
+};

package/dist/esm/hooks/use-ps-file-text.js

@@ -1,21 +1,6 @@
-import { useEffect, useState } from 'react';
+import { PsFileFetchService } from '../services/ps-file-fetch-service';
+import { usePsLoadedFile } from './use-ps-loaded-file';
 export const usePsFileText = (url) => {
-    const [state, setState] = useState({ hasFailed: false, text: null });
-    useEffect(() => {
-        const controller = new AbortController();
-        setState({ hasFailed: false, text: null });
-        fetch(url, { credentials: 'include', signal: controller.signal })
-            .then((response) => {
-            if (!response.ok)
-                throw new Error(response.statusText);
-            return response.text();
-        })
-            .then((text) => setState({ hasFailed: false, text }))
-            .catch(() => {
-            if (!controller.signal.aborted)
-                setState({ hasFailed: true, text: null });
-        });
-        return () => controller.abort();
-    }, [url]);
-    return state;
+    const { hasFailed, value } = usePsLoadedFile(url, PsFileFetchService.text);
+    return { hasFailed, text: value };
 };

package/dist/esm/hooks/use-ps-find-shortcut.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { PsFileSearchService } from '../services/ps-file-search-service';
+export const usePsFindShortcut = (scope, isEnabled, onFind) => {
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        const onKey = (event) => {
+            if (!PsFileSearchService.isFindShortcut(event))
+                return;
+            if (scope !== null) {
+                const node = scope.current;
+                if (node === null)
+                    return;
+                if (!node.contains(document.activeElement) && !node.matches(':hover'))
+                    return;
+            }
+            event.preventDefault();
+            onFind();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [scope, isEnabled, onFind]);
+};

package/dist/esm/hooks/use-ps-loaded-file.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+export const usePsLoadedFile = (url, load) => {
+    const [state, setState] = useState({ hasFailed: false, value: null });
+    useEffect(() => {
+        const controller = new AbortController();
+        setState({ hasFailed: false, value: null });
+        load(url, controller.signal)
+            .then((value) => {
+            if (!controller.signal.aborted)
+                setState({ hasFailed: false, value });
+        })
+            .catch(() => {
+            if (!controller.signal.aborted)
+                setState({ hasFailed: true, value: null });
+        });
+        return () => controller.abort();
+    }, [url, load]);
+    return state;
+};

package/dist/esm/index.js

@@ -18,6 +18,13 @@ export * from './components/ps-text-viewer';
 export * from './components/ps-unsupported-viewer';
 export * from './components/ps-upload-modal';
 export * from './components/ps-upload-row';
+export * from './components/ps-file-search-bar';
+export * from './components/ps-html-document';
+export * from './components/ps-html-viewer';
+export * from './components/ps-image-text-highlights';
+export * from './components/ps-sheet-viewer';
+export * from './components/ps-table-view';
+export * from './components/ps-word-viewer';
 export * from './constants/ps-file-icon-button-classes';
 export * from './constants/ps-file-kind-icons';
 export * from './constants/ps-file-kind';
@@ -33,6 +40,7 @@ export * from './constants/ps-upload-messages';
 export * from './constants/ps-upload-queue-config';
 export * from './constants/ps-upload-status-tones';
 export * from './constants/ps-upload-status';
+export * from './constants/ps-html-sanitize-config';
 export * from './models/ps-drag-pan-handlers';
 export * from './models/ps-drag-pan-options';
 export * from './models/ps-file-icon-button-tone';
@@ -59,6 +67,20 @@ export * from './models/ps-viewer-file';
 export * from './models/ps-xhr-response-type';
 export * from './models/ps-xhr-upload-request';
 export * from './models/ps-xhr-upload-response';
+export * from './models/ps-file-search-state';
+export * from './models/ps-html-highlight-result';
+export * from './models/ps-image-match';
+export * from './models/ps-image-text-box';
+export * from './models/ps-image-text-layer';
+export * from './models/ps-image-text-word';
+export * from './models/ps-item-match';
+export * from './models/ps-item-match-part';
+export * from './models/ps-loaded-file-state';
+export * from './models/ps-normalized-text';
+export * from './models/ps-pdf-text-item';
+export * from './models/ps-pdf-viewport-like';
+export * from './models/ps-search-item';
+export * from './models/ps-sheet-data';
 export * from './services/ps-csv-service';
 export * from './services/ps-file-selection-service';
 export * from './services/ps-file-size-service';
@@ -67,11 +89,22 @@ export * from './services/ps-pdf-service';
 export * from './services/ps-text-search-service';
 export * from './services/ps-upload-queue-service';
 export * from './services/ps-xhr-upload-service';
+export * from './services/ps-file-fetch-service';
+export * from './services/ps-file-search-service';
+export * from './services/ps-html-file-service';
+export * from './services/ps-html-service';
+export * from './services/ps-image-text-service';
+export * from './services/ps-label-service';
+export * from './services/ps-sheet-service';
+export * from './services/ps-word-service';
 export * from './hooks/use-ps-active-match-scroll';
 export * from './hooks/use-ps-drag-pan';
 export * from './hooks/use-ps-file-text';
 export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
+export * from './hooks/use-ps-file-search';
+export * from './hooks/use-ps-find-shortcut';
+export * from './hooks/use-ps-loaded-file';
 export * from './components/ps-document-scanner';
 export * from './constants/ps-document-scanner-labels';
 export * from './constants/ps-scan-format';

package/dist/esm/models/ps-file-search-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-html-highlight-result.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-html-text-node.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-match.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-box.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-layer.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-image-text-word.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-item-match-part.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-item-match.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-loaded-file-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-normalized-text.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-pdf-text-item.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-pdf-viewport-like.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-search-item.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-sheet-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-file-fetch-service.js

@@ -0,0 +1,14 @@
+export class PsFileFetchService {
+    static async response(url, signal) {
+        const response = await fetch(url, { credentials: 'include', signal });
+        if (!response.ok)
+            throw new Error(response.statusText);
+        return response;
+    }
+    static async text(url, signal) {
+        return (await PsFileFetchService.response(url, signal)).text();
+    }
+    static async buffer(url, signal) {
+        return (await PsFileFetchService.response(url, signal)).arrayBuffer();
+    }
+}

package/dist/esm/services/ps-file-search-service.js

@@ -0,0 +1,15 @@
+import { PsFileKind } from '../constants/ps-file-kind';
+import { PsFileViewerKinds } from '../constants/ps-file-viewer-kinds';
+export class PsFileSearchService {
+    static canSearch(kind, hasTextLayer) {
+        if (PsFileViewerKinds.searchable.includes(kind))
+            return true;
+        return kind === PsFileKind.image && hasTextLayer;
+    }
+    static isFindShortcut(event) {
+        return ((event.metaKey || event.ctrlKey) &&
+            !event.altKey &&
+            !event.shiftKey &&
+            event.key.toLowerCase() === 'f');
+    }
+}

package/dist/esm/services/ps-file-type-service.js

@@ -7,10 +7,21 @@ export class PsFileTypeService {
     }
     static kindOf(contentType, name) {
         const type = contentType.toLowerCase();
+        const extension = PsFileTypeService.extension(name);
         if (type === 'application/pdf')
             return PsFileKind.pdf;
         if (PsFileTypeConfig.csvTypes.includes(type))
             return PsFileKind.csv;
+        if (type === PsFileTypeConfig.excelLegacyType)
+            return extension === 'xls' || extension === 'xlsb' ? PsFileKind.other : PsFileKind.csv;
+        if (PsFileTypeConfig.sheetTypes.includes(type))
+            return PsFileKind.sheet;
+        if (PsFileTypeConfig.wordTypes.includes(type))
+            return PsFileKind.word;
+        if (PsFileTypeConfig.htmlTypes.includes(type))
+            return PsFileKind.html;
+        if (PsFileTypeConfig.unsupportedImageTypes.includes(type))
+            return PsFileKind.other;
         if (type.startsWith('image/'))
             return PsFileKind.image;
         if (type.startsWith('video/'))
@@ -20,7 +31,7 @@ export class PsFileTypeService {
         if (type.startsWith('text/') ||
             PsFileTypeConfig.textTypes.includes(type))
             return PsFileKind.text;
-        const byExtension = PsFileTypeConfig.extensionKinds[PsFileTypeService.extension(name)];
+        const byExtension = PsFileTypeConfig.extensionKinds[extension];
         return byExtension === undefined ? PsFileKind.other : byExtension;
     }
     static isAccepted(file, accept) {

package/dist/esm/services/ps-html-file-service.js

@@ -0,0 +1,7 @@
+import { PsFileFetchService } from './ps-file-fetch-service';
+import { PsHtmlService } from './ps-html-service';
+export class PsHtmlFileService {
+    static async load(url, signal) {
+        return PsHtmlService.sanitize(await PsFileFetchService.text(url, signal), false);
+    }
+}

package/dist/esm/services/ps-html-service.js

@@ -0,0 +1,83 @@
+import { PsHtmlSanitizeConfig } from '../constants/ps-html-sanitize-config';
+import { PsTextSearchService } from './ps-text-search-service';
+export class PsHtmlService {
+    static async sanitize(html, allowImages) {
+        const library = await import('dompurify');
+        const forbidden = [...PsHtmlSanitizeConfig.forbiddenTags];
+        if (!allowImages)
+            forbidden.push(...PsHtmlSanitizeConfig.mediaTags);
+        const clean = library.default.sanitize(html, {
+            FORBID_ATTR: [...PsHtmlSanitizeConfig.forbiddenAttributes],
+            FORBID_TAGS: forbidden,
+            USE_PROFILES: { html: true },
+        });
+        return PsHtmlService.harden(clean);
+    }
+    static harden(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        template.content.querySelectorAll('a').forEach((anchor) => {
+            anchor.setAttribute('target', PsHtmlSanitizeConfig.anchorTarget);
+            anchor.setAttribute('rel', PsHtmlSanitizeConfig.anchorRel);
+        });
+        template.content.querySelectorAll('img').forEach((image) => {
+            const source = image.getAttribute('src');
+            if (source === null || !source.startsWith('data:'))
+                image.remove();
+        });
+        return template.innerHTML;
+    }
+    static highlight(html, query) {
+        if (query.trim().length === 0)
+            return { count: 0, html };
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        const nodes = [];
+        const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_TEXT);
+        let full = '';
+        let previousBlock = null;
+        let current = walker.nextNode();
+        while (current !== null) {
+            const node = current;
+            const block = node.parentElement === null
+                ? null
+                : node.parentElement.closest(PsHtmlSanitizeConfig.blockSelector);
+            if (nodes.length > 0 && block !== previousBlock)
+                full += '\n';
+            nodes.push({ node, offset: full.length });
+            full += node.data;
+            previousBlock = block;
+            current = walker.nextNode();
+        }
+        const matches = PsTextSearchService.find(full, query);
+        if (matches.length === 0)
+            return { count: 0, html };
+        nodes.forEach(({ node, offset }) => PsHtmlService.wrap(node, offset, matches));
+        return { count: matches.length, html: template.innerHTML };
+    }
+    static wrap(node, offset, matches) {
+        const end = offset + node.data.length;
+        const fragment = document.createDocumentFragment();
+        let cursor = 0;
+        let hasMark = false;
+        matches.forEach((match, matchIndex) => {
+            const start = Math.max(match.start, offset) - offset;
+            const stop = Math.min(match.end, end) - offset;
+            if (stop <= start || match.start >= end || match.end <= offset)
+                return;
+            if (start > cursor)
+                fragment.append(node.data.slice(cursor, start));
+            const mark = document.createElement('mark');
+            mark.setAttribute('data-ps-match', String(matchIndex));
+            mark.textContent = node.data.slice(start, stop);
+            fragment.append(mark);
+            cursor = stop;
+            hasMark = true;
+        });
+        if (!hasMark)
+            return;
+        if (cursor < node.data.length)
+            fragment.append(node.data.slice(cursor));
+        node.replaceWith(fragment);
+    }
+}

package/dist/esm/services/ps-image-text-service.js

@@ -0,0 +1,28 @@
+import { PsTextSearchService } from './ps-text-search-service';
+export class PsImageTextService {
+    static matches(layer, query) {
+        if (layer.width <= 0 || layer.height <= 0)
+            return [];
+        const items = layer.words.map((word, index) => ({
+            isBreakAfter: index < layer.words.length - 1,
+            text: word.text,
+        }));
+        const rects = [];
+        PsTextSearchService.findInItems(items, query).forEach((match, matchIndex) => {
+            match.parts.forEach((part) => {
+                const word = layer.words[part.itemIndex];
+                const length = word.text.length;
+                const left = word.box.left + (word.box.width * part.start) / length;
+                const width = (word.box.width * (part.end - part.start)) / length;
+                rects.push({
+                    height: word.box.height / layer.height,
+                    left: left / layer.width,
+                    matchIndex,
+                    top: word.box.top / layer.height,
+                    width: width / layer.width,
+                });
+            });
+        });
+        return rects;
+    }
+}

package/dist/esm/services/ps-label-service.js

@@ -0,0 +1,5 @@
+export class PsLabelService {
+    static fill(template, values) {
+        return Object.keys(values).reduce((text, key) => text.split(`{${key}}`).join(String(values[key])), template);
+    }
+}