@xyne/workflow-ui 1.3.17 → 1.3.19

package/dist/components/shared/viewers/useDomAnchor.js

@@ -0,0 +1,125 @@
+/**
+ * Scroll to a cited passage and highlight it — for any viewer that renders its
+ * content into the DOM (text, markdown, json, docx, csv, xlsx).
+ *
+ * One hook serves all of them because, once rendered, those formats are just
+ * text in a subtree. Only PDF (canvas + its own text layer) and images need
+ * bespoke handling. So "support a new format" means *render it and stamp a few
+ * data attributes* — not write new anchoring logic.
+ *
+ * The resolution ladder is deliberately the same everywhere:
+ *   locator (structural, exact) → quote (fuzzy text search) → nothing
+ * and "nothing" is a real outcome: the document still opens, just unhighlighted.
+ * Guessing a location would be worse than admitting we couldn't find it.
+ */
+import { useEffect, useState } from 'react';
+import { findRange } from './anchor-match.js';
+const LAYER_ATTR = 'data-wui-anchor-layer';
+/** The element a structural locator addresses, via attributes viewers stamp. */
+function findByLocator(root, locator) {
+    switch (locator.at) {
+        case 'cell':
+            return root.querySelector(`[data-row="${String(locator.row)}"][data-col="${String(locator.col)}"]`);
+        case 'line':
+            return root.querySelector(`[data-line="${String(locator.from)}"]`);
+        case 'page':
+            // Paged rendering is pdf.js's own concern; DOM viewers have no pages.
+            return null;
+    }
+}
+function clearOverlay(container) {
+    container.querySelectorAll(`[${LAYER_ATTR}]`).forEach((n) => { n.remove(); });
+}
+/**
+ * Paint highlight rectangles over a range.
+ *
+ * An overlay rather than wrapping the match in `<mark>`: several viewers render
+ * content they own (docx-preview rebuilds its subtree, tables re-render), and
+ * mutating that DOM corrupts it and gets wiped on the next paint. Rectangles
+ * layered on top are non-destructive and behave identically everywhere.
+ */
+function paintOverlay(container, rects) {
+    if (rects.length === 0)
+        return;
+    // The layer is positioned against the container's padding box, so the
+    // container must establish a containing block.
+    if (getComputedStyle(container).position === 'static') {
+        container.style.position = 'relative';
+    }
+    const base = container.getBoundingClientRect();
+    const layer = document.createElement('div');
+    layer.setAttribute(LAYER_ATTR, 'true');
+    layer.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:5;';
+    for (const r of rects) {
+        if (r.width === 0 || r.height === 0)
+            continue;
+        const mark = document.createElement('div');
+        mark.style.cssText = [
+            'position:absolute',
+            `left:${String(r.left - base.left + container.scrollLeft)}px`,
+            `top:${String(r.top - base.top + container.scrollTop)}px`,
+            `width:${String(r.width)}px`,
+            `height:${String(r.height)}px`,
+            'background:color-mix(in srgb, var(--wui-primary) 26%, transparent)',
+            'border-radius:2px',
+            'mix-blend-mode:multiply',
+        ].join(';');
+        layer.appendChild(mark);
+    }
+    container.appendChild(layer);
+}
+/**
+ * The container must render its content as React children or be written
+ * imperatively (as docx-preview does). A container using
+ * `dangerouslySetInnerHTML` re-applies that HTML on re-render and would discard
+ * the overlay — a property of that API, not of this hook.
+ *
+ * @param containerRef the element wrapping the viewer's rendered content
+ * @param anchor       what to locate; `undefined` ⇒ do nothing at all
+ * @param ready        re-runs the search when this changes — pass whatever
+ *                     signals the content has painted (parsed rows, loaded text).
+ *                     Searching before paint finds nothing.
+ */
+export function useDomAnchor(containerRef, anchor, ready) {
+    const [hit, setHit] = useState(false);
+    const quote = anchor?.quote;
+    const locator = anchor?.locator;
+    // Locators are small and flat; a stable string keeps the effect from re-running
+    // on every render just because the object identity changed.
+    const locatorKey = locator ? JSON.stringify(locator) : '';
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        clearOverlay(container);
+        if (!quote && !locator) {
+            setHit(false);
+            return;
+        }
+        let target = null;
+        if (locator) {
+            const el = findByLocator(container, locator);
+            if (el)
+                target = { scrollTo: el, rects: [el.getBoundingClientRect()] };
+        }
+        if (!target && quote) {
+            const range = findRange(container, quote);
+            if (range) {
+                const rects = Array.from(range.getClientRects());
+                const first = range.startContainer.parentElement;
+                if (first)
+                    target = { scrollTo: first, rects };
+            }
+        }
+        if (!target) {
+            setHit(false);
+            return;
+        }
+        paintOverlay(container, target.rects);
+        target.scrollTo.scrollIntoView({ block: 'center', inline: 'nearest' });
+        setHit(true);
+        return () => { clearOverlay(container); };
+    }, [containerRef, quote, locatorKey, ready]);
+    return { hit };
+}
+//# sourceMappingURL=useDomAnchor.js.map

package/dist/components/shared/viewers/useDomAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDomAnchor.js","sourceRoot":"","sources":["../../../../src/components/shared/viewers/useDomAnchor.ts"],"names":[],"mappings":"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"}