g-comments 0.2.0 → 0.2.2

package/dist/react.js

@@ -1,5 +1,5 @@
 "use client";
-import { createTranslator, PACKAGE_NAME, currentUrlWithoutHash, findComment, createComposerTimer, normalizeForum, resolveLocale, clientRegistry, STORAGE_PREFIX, isCommentsError, CommentsError, encodeRef, defaultPageUrl } from './chunk-WACVXJHD.js';
+import { createTranslator, PACKAGE_NAME, currentUrlWithoutHash, findComment, findByNumber, createComposerTimer, normalizeForum, resolveLocale, clientRegistry, STORAGE_PREFIX, isCommentsError, CommentsError, encodeRef, defaultPageUrl } from './chunk-EWWBVJ2B.js';
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, Fragment as Fragment$1, useId, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -351,12 +351,15 @@ function forumThemeCss(theme) {
 }
 function forumFontFacesCss(theme) {
   let css = "";
+  const seen = /* @__PURE__ */ new Set();
   for (const font of Object.values(theme.fonts)) {
     for (const face of font?.faces ?? []) {
       const weight = String(face.weight);
-      if (SAFE_FAMILY.test(face.family) && FONT_SOURCE.test(face.src) && FONT_WEIGHT.test(weight)) {
-        css += `@font-face{font-family:"${face.family}";src:${face.src};font-weight:${weight};font-display:swap;}
+      const rule = `@font-face{font-family:"${face.family}";src:${face.src};font-weight:${weight};font-display:swap;}
 `;
+      if (SAFE_FAMILY.test(face.family) && FONT_SOURCE.test(face.src) && FONT_WEIGHT.test(weight) && !seen.has(rule)) {
+        seen.add(rule);
+        css += rule;
       }
     }
   }
@@ -378,6 +381,14 @@ function forumStylesheetUrls(theme, forum) {
   }
   return urls;
 }
+function forumThemeStyleText(theme, forum) {
+  const imports = forumStylesheetUrls(theme, forum).map((href) => `@import url(${JSON.stringify(href)}) layer(gc-forum);
+`).join("");
+  return `@layer gc-defaults, gc-forum;
+${imports}@layer gc-forum{
+${forumThemeCss(theme)}}
+`;
+}
 function documentOf(root) {
   return root.nodeType === 9 ? root : root.ownerDocument;
 }
@@ -402,15 +413,8 @@ function applyForumTheme(root, theme, forum) {
   replaceNodes(container, STYLE_ATTRIBUTE, forum, key, () => {
     const style = doc.createElement("style");
     style.setAttribute(STYLE_ATTRIBUTE, key);
-    style.textContent = forumThemeCss(theme);
-    const links = forumStylesheetUrls(theme, forum).map((href) => {
-      const link = doc.createElement("link");
-      link.rel = "stylesheet";
-      link.href = href;
-      link.setAttribute(STYLE_ATTRIBUTE, key);
-      return link;
-    });
-    return [style, ...links];
+    style.textContent = forumThemeStyleText(theme, forum);
+    return [style];
   });
   const faces = forumFontFacesCss(theme);
   if (faces) {
@@ -1655,7 +1659,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsx("span", { className: cx("gc-avatar", "gc-avatar--placeholder", className), "aria-hidden": "true", children: initial3 });
 }
 function Meta({ className }) {
-  const { comment } = useItemContext("Comments.Meta");
+  const { comment, depth } = useItemContext("Comments.Meta");
   const { t, locale, client, elements } = useRootContext("Comments.Meta");
   const author = comment.author;
   const name = author ? author.name || author.username : null;
@@ -1676,9 +1680,31 @@ function Meta({ className }) {
       t("pinned")
     ] }),
     /* @__PURE__ */ jsx("a", { className: "gc-comment__time", href: `#gc-${comment.id}`, children: /* @__PURE__ */ jsx(RelativeTime, { iso: comment.created_at, locale }) }),
-    comment.edited && /* @__PURE__ */ jsx("span", { className: "gc-comment__edited", title: formatAbsolute(comment.updated_at, locale), children: t("edited") })
+    comment.edited && /* @__PURE__ */ jsx("span", { className: "gc-comment__edited", title: formatAbsolute(comment.updated_at, locale), children: t("edited") }),
+    comment.reply_to && depth === 0 && /* @__PURE__ */ jsx(ReplyReference, { reference: comment.reply_to })
   ] });
 }
+function ReplyReference({ reference }) {
+  const { t, snapshot, focusComment } = useRootContext("Comments.Meta");
+  const label = t("replyingTo", { username: reference.username ?? "" });
+  const parent = snapshot ? findByNumber(snapshot.comments, reference.number) : null;
+  if (!parent) {
+    return /* @__PURE__ */ jsx("span", { className: "gc-comment__reply-to", children: label });
+  }
+  const id = parent.node.id;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "gc-comment__reply-to",
+      href: `#gc-${id}`,
+      onClick: (event) => {
+        event.preventDefault();
+        focusComment(id, { scroll: true });
+      },
+      children: label
+    }
+  );
+}
 function RelativeTime({ iso, locale }) {
   const [now, setNow] = useState(Date.now);
   useEffect(() => onMinuteTick(() => setNow(Date.now())), []);