@fileverse-dev/ddoc 2.1.4-patch-20 → 2.1.4-patch-21

package/dist/index.es.js

@@ -140175,71 +140175,86 @@ else {
 }
 const rF = ({
   link: t,
-  metadataProxyUrl: e
+  metadataProxyUrl: e,
+  hoverEvent: n
 }) => {
-  const [n, r] = Pe(null), [i, a] = Pe(!0), s = Ge(/* @__PURE__ */ new Map());
-  return ze(() => {
-    if (!t) return;
-    if (r(null), a(!0), s.current.has(t)) {
-      r(s.current.get(t)), a(!1);
-      return;
-    }
-    (async () => {
+  const [r, i] = Pe(null), [a, s] = Pe(!1), o = Ge(/* @__PURE__ */ new Map()), l = async (c) => {
+    if (c) {
+      if (o.current.has(c)) {
+        i(o.current.get(c)), s(!1);
+        return;
+      }
+      s(!0);
       try {
-        a(!0);
-        const l = await fetch(
-          `${e}/${encodeURIComponent(t)}`
-        ), { metadata: c } = await l.json(), u = {
-          title: c.title,
-          description: c.description,
-          image: c.image,
-          favicon: c.favicon,
-          link: t
+        const u = await fetch(
+          `${e}/${encodeURIComponent(c)}`
+        ), { metadata: f } = await u.json(), d = {
+          title: f.title,
+          description: f.description,
+          image: f.image,
+          favicon: f.favicon,
+          link: c
         };
-        s.current.set(t, u), r(u), setTimeout(() => {
-          a(!1);
-        }, 1e3);
-      } catch (l) {
-        console.error("Error fetching link preview:", l), r(null), a(!1);
+        o.current.set(c, d), i(d);
+      } catch (u) {
+        console.error("Error fetching link preview:", u), i(null);
+      } finally {
+        s(!1);
       }
-    })();
-  }, [t]), /* @__PURE__ */ A.jsx("div", { className: "w-[250px] border color-border-default shadow-elevation-3 rounded p-3 flex flex-col gap-2 justify-center hover-link-popup color-bg-default", children: i ? /* @__PURE__ */ A.jsx("p", { className: "text-helper-text-sm color-text-secondary", children: "Loading preview..." }) : n ? /* @__PURE__ */ A.jsxs(A.Fragment, { children: [
-    n.image && /* @__PURE__ */ A.jsx(
+    }
+  };
+  return ze(() => {
+    t && l(t);
+  }, [t]), ze(() => {
+    const c = (u) => {
+      u.detail ? o.current.has(t) ? (i(o.current.get(t)), s(!1)) : l(t) : i(null);
+    };
+    return n.addEventListener(
+      "hoverStateChange",
+      c
+    ), () => {
+      n.removeEventListener(
+        "hoverStateChange",
+        c
+      );
+    };
+  }, [n, t]), /* @__PURE__ */ A.jsx("div", { className: "w-[250px] border color-border-default shadow-elevation-3 rounded p-3 flex flex-col gap-2 justify-center hover-link-popup color-bg-default", children: a ? /* @__PURE__ */ A.jsx("p", { className: "text-helper-text-sm color-text-secondary", children: "Loading preview..." }) : r ? /* @__PURE__ */ A.jsxs(A.Fragment, { children: [
+    r.image && /* @__PURE__ */ A.jsx(
       "img",
       {
-        src: n.image,
+        src: r.image,
         className: "w-[225px] h-[125px] object-contain rounded",
         alt: "Preview",
-        onError: (o) => {
-          o.currentTarget.style.display = "none";
+        onError: (c) => {
+          c.currentTarget.style.display = "none";
         }
       }
     ),
     /* @__PURE__ */ A.jsxs("div", { className: "flex flex-col gap-2", children: [
-      (n.title || n.description) && /* @__PURE__ */ A.jsxs("div", { className: "flex flex-col gap-[2px]", children: [
-        n.title && /* @__PURE__ */ A.jsx("p", { className: "text-heading-xsm w-full truncate color-text-default select-text", children: n.title }),
-        n.description && /* @__PURE__ */ A.jsx("p", { className: "text-helper-text-sm color-text-secondary w-full truncate select-text", children: n.description })
+      (r.title || r.description) && /* @__PURE__ */ A.jsxs("div", { className: "flex flex-col gap-[2px]", children: [
+        r.title && /* @__PURE__ */ A.jsx("p", { className: "text-heading-xsm w-full truncate color-text-default select-text", children: r.title }),
+        r.description && /* @__PURE__ */ A.jsx("p", { className: "text-helper-text-sm color-text-secondary w-full truncate select-text", children: r.description })
       ] }),
       /* @__PURE__ */ A.jsxs("div", { className: "flex gap-2", children: [
-        n.favicon && /* @__PURE__ */ A.jsx(
+        r.favicon && /* @__PURE__ */ A.jsx(
           "img",
           {
-            src: n.favicon,
+            src: r.favicon,
             className: "w-[18px] aspect-square rounded",
             alt: "Favicon",
-            onError: (o) => {
-              o.currentTarget.style.display = "none";
+            onError: (c) => {
+              c.currentTarget.style.display = "none";
             }
           }
         ),
-        n.link && /* @__PURE__ */ A.jsx(
+        r.link && /* @__PURE__ */ A.jsx(
           "a",
           {
-            href: n.link,
+            href: r.link,
             target: "_blank",
             rel: "noopener noreferrer",
             className: "text-helper-text-sm color-text-link w-full truncate hover:underline hover:cursor-pointer",
-            children: n.link
+            children: r.link
           }
         )
       ] })
@@ -140252,28 +140267,32 @@ const rF = ({
       return [];
     const t = new Cn("link-preview");
     let e = null, n = null, r = null, i = null;
+    const a = new EventTarget();
     return [
       new hn({
         key: t,
         props: {
           handleDOMEvents: {
-            mouseover: (a, s) => {
-              const l = s.target.closest("a");
-              if (l) {
-                const c = l.getAttribute("href");
-                if (!c) return !1;
-                e || (e = document.createElement("div"), e.className = "hover-link-popup", e.style.position = "absolute", e.style.zIndex = "999", document.body.appendChild(e)), r === l && setTimeout(() => {
+            mouseover: (s, o) => {
+              const c = o.target.closest("a");
+              if (c) {
+                const u = c.getAttribute("href");
+                if (!u) return !1;
+                e || (e = document.createElement("div"), e.className = "hover-link-popup", e.style.position = "absolute", e.style.zIndex = "999", document.body.appendChild(e)), r === c && setTimeout(() => {
                   if (e)
-                    return e.style.display = "block", !1;
-                }, 600), r = l;
-                const u = l.getBoundingClientRect();
-                e.style.left = `${u.left}px`, e.style.top = `${u.bottom + 5}px`, setTimeout(() => {
+                    return e.style.display = "block", a.dispatchEvent(
+                      new CustomEvent("hoverStateChange", { detail: !0 })
+                    ), !1;
+                }, 600), r = c;
+                const f = c.getBoundingClientRect();
+                e.style.left = `${f.left}px`, e.style.top = `${f.bottom + 5}px`, setTimeout(() => {
                   e && (e.style.display = "block", n || (n = P8(e))), n && n.render(
                     /* @__PURE__ */ A.jsx(
                       rF,
                       {
-                        link: c,
-                        metadataProxyUrl: this.options.metadataProxyUrl
+                        link: u,
+                        metadataProxyUrl: this.options.metadataProxyUrl,
+                        hoverEvent: a
                       }
                     )
                   );
@@ -140281,28 +140300,33 @@ const rF = ({
               }
               return !1;
             },
-            mouseout: (a, s) => {
-              const o = s.relatedTarget;
+            mouseout: (s, o) => {
+              const l = o.relatedTarget;
               return i && clearTimeout(i), i = setTimeout(() => {
-                e && !e.contains(o) && !(o != null && o.closest(".hover-link-popup")) && (e.style.display = "none");
-              }, 300), !1;
+                e && !e.contains(l) && !(l != null && l.closest(".hover-link-popup")) && (e.style.display = "none", a.dispatchEvent(
+                  new CustomEvent("hoverStateChange", { detail: !1 })
+                ));
+              }, 100), !1;
             },
-            touchstart: (a, s) => {
-              const l = s.target.closest("a");
-              if (l) {
-                const c = l.getAttribute("href");
-                if (!c) return !1;
-                e || (e = document.createElement("div"), e.className = "hover-link-popup", e.style.position = "absolute", e.style.zIndex = "999", document.body.appendChild(e)), r = l;
-                const u = l.getBoundingClientRect();
-                e.style.left = `${u.left}px`, e.style.top = `${u.bottom + 5}px`, setTimeout(() => {
+            touchstart: (s, o) => {
+              const c = o.target.closest("a");
+              if (c) {
+                const u = c.getAttribute("href");
+                if (!u) return !1;
+                e || (e = document.createElement("div"), e.className = "hover-link-popup", e.style.position = "absolute", e.style.zIndex = "999", document.body.appendChild(e)), r = c;
+                const f = c.getBoundingClientRect();
+                e.style.left = `${f.left}px`, e.style.top = `${f.bottom + 5}px`, setTimeout(() => {
                   e && (e.style.display = "block", n || (n = P8(e)), n.render(
                     /* @__PURE__ */ A.jsx(
                       rF,
                       {
-                        link: c,
-                        metadataProxyUrl: this.options.metadataProxyUrl
+                        link: u,
+                        metadataProxyUrl: this.options.metadataProxyUrl,
+                        hoverEvent: a
                       }
                     )
+                  ), a.dispatchEvent(
+                    new CustomEvent("hoverStateChange", { detail: !0 })
                   ));
                 }, 600);
               }

package/dist/package/components/link-preview-card.d.ts

@@ -5,7 +5,8 @@ export interface LinkPreviewData {
     favicon: string;
     link: string;
 }
-export declare const LinkPreviewCard: ({ link, metadataProxyUrl, }: {
+export declare const LinkPreviewCard: ({ link, metadataProxyUrl, hoverEvent, }: {
     link: string;
     metadataProxyUrl: string;
+    hoverEvent: EventTarget;
 }) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fileverse-dev/ddoc",
   "private": false,
   "description": "DDoc",
-  "version": "2.1.4-patch-20",
+  "version": "2.1.4-patch-21",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "exports": {