g-comments 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -1,68 +1,68 @@
 'use strict';
 
-var chunkIBNNENCZ_cjs = require('./chunk-IBNNENCZ.cjs');
+var chunkI2L3IAXL_cjs = require('./chunk-I2L3IAXL.cjs');
 
 
 
 Object.defineProperty(exports, "CommentsError", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.CommentsError; }
+  get: function () { return chunkI2L3IAXL_cjs.CommentsError; }
 });
 Object.defineProperty(exports, "PACKAGE_NAME", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.PACKAGE_NAME; }
+  get: function () { return chunkI2L3IAXL_cjs.PACKAGE_NAME; }
 });
 Object.defineProperty(exports, "clientRegistry", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.clientRegistry; }
+  get: function () { return chunkI2L3IAXL_cjs.clientRegistry; }
 });
 Object.defineProperty(exports, "createClient", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.createClient; }
+  get: function () { return chunkI2L3IAXL_cjs.createClient; }
 });
 Object.defineProperty(exports, "createClientRegistry", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.createClientRegistry; }
+  get: function () { return chunkI2L3IAXL_cjs.createClientRegistry; }
 });
 Object.defineProperty(exports, "createComposerTimer", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.createComposerTimer; }
+  get: function () { return chunkI2L3IAXL_cjs.createComposerTimer; }
 });
 Object.defineProperty(exports, "createTranslator", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.createTranslator; }
+  get: function () { return chunkI2L3IAXL_cjs.createTranslator; }
 });
 Object.defineProperty(exports, "en", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.en; }
+  get: function () { return chunkI2L3IAXL_cjs.en; }
 });
 Object.defineProperty(exports, "encodeRef", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.encodeRef; }
+  get: function () { return chunkI2L3IAXL_cjs.encodeRef; }
 });
 Object.defineProperty(exports, "isCommentsError", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.isCommentsError; }
+  get: function () { return chunkI2L3IAXL_cjs.isCommentsError; }
 });
 Object.defineProperty(exports, "isVirtualThread", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.isVirtualThread; }
+  get: function () { return chunkI2L3IAXL_cjs.isVirtualThread; }
 });
 Object.defineProperty(exports, "locales", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.locales; }
+  get: function () { return chunkI2L3IAXL_cjs.locales; }
 });
 Object.defineProperty(exports, "memoryStorage", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.memoryStorage; }
+  get: function () { return chunkI2L3IAXL_cjs.memoryStorage; }
 });
 Object.defineProperty(exports, "ptBR", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.ptBR; }
+  get: function () { return chunkI2L3IAXL_cjs.ptBR; }
 });
 Object.defineProperty(exports, "resolveLocale", {
   enumerable: true,
-  get: function () { return chunkIBNNENCZ_cjs.resolveLocale; }
+  get: function () { return chunkI2L3IAXL_cjs.resolveLocale; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,3 +1,3 @@
-export { CommentsError, PACKAGE_NAME, clientRegistry, createClient, createClientRegistry, createComposerTimer, createTranslator, en, encodeRef, isCommentsError, isVirtualThread, locales, memoryStorage, ptBR, resolveLocale } from './chunk-WACVXJHD.js';
+export { CommentsError, PACKAGE_NAME, clientRegistry, createClient, createClientRegistry, createComposerTimer, createTranslator, en, encodeRef, isCommentsError, isVirtualThread, locales, memoryStorage, ptBR, resolveLocale } from './chunk-EWWBVJ2B.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react.cjs

@@ -1,16 +1,16 @@
 "use client";
 'use strict';
 
-var chunkIBNNENCZ_cjs = require('./chunk-IBNNENCZ.cjs');
+var chunkI2L3IAXL_cjs = require('./chunk-I2L3IAXL.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 function toCommentsError(error) {
-  if (chunkIBNNENCZ_cjs.isCommentsError(error)) {
+  if (chunkI2L3IAXL_cjs.isCommentsError(error)) {
     return error;
   }
-  return new chunkIBNNENCZ_cjs.CommentsError("unknown", error instanceof Error ? error.message : String(error), {
+  return new chunkI2L3IAXL_cjs.CommentsError("unknown", error instanceof Error ? error.message : String(error), {
     cause: error
   });
 }
@@ -87,12 +87,12 @@ function formatAbsolute(iso, locale) {
 
 // src/react/context.ts
 var CommentsContext = react.createContext(null);
-var defaultTranslator = chunkIBNNENCZ_cjs.createTranslator();
+var defaultTranslator = chunkI2L3IAXL_cjs.createTranslator();
 function useCommentsContext(forum) {
   const value = useOptionalCommentsContext(forum);
   if (!value) {
     throw new Error(
-      `${chunkIBNNENCZ_cjs.PACKAGE_NAME}: render this inside <DiscourseComments forum="\u2026"> or pass a \`forum\` prop`
+      `${chunkI2L3IAXL_cjs.PACKAGE_NAME}: render this inside <DiscourseComments forum="\u2026"> or pass a \`forum\` prop`
     );
   }
   return value;
@@ -100,13 +100,13 @@ function useCommentsContext(forum) {
 function useOptionalCommentsContext(forum) {
   const context = react.useContext(CommentsContext);
   const standalone = react.useMemo(() => {
-    if (forum === void 0 || context && chunkIBNNENCZ_cjs.normalizeForum(forum).base === context.client.forum) {
+    if (forum === void 0 || context && chunkI2L3IAXL_cjs.normalizeForum(forum).base === context.client.forum) {
       return null;
     }
     return {
-      client: chunkIBNNENCZ_cjs.clientRegistry.acquire({ forum }),
+      client: chunkI2L3IAXL_cjs.clientRegistry.acquire({ forum }),
       t: context?.t ?? defaultTranslator,
-      locale: context?.locale ?? chunkIBNNENCZ_cjs.resolveLocale(void 0),
+      locale: context?.locale ?? chunkI2L3IAXL_cjs.resolveLocale(void 0),
       messages: context?.messages,
       theme: context?.theme ?? "auto",
       appearance: context?.appearance,
@@ -119,7 +119,7 @@ function useOptionalCommentsContext(forum) {
 function useClient() {
   const context = react.useContext(CommentsContext);
   if (!context) {
-    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: useClient() needs a <DiscourseComments> provider`);
+    throw new Error(`${chunkI2L3IAXL_cjs.PACKAGE_NAME}: useClient() needs a <DiscourseComments> provider`);
   }
   return context.client;
 }
@@ -138,11 +138,11 @@ function DiscourseComments(props) {
     debug
   };
   const client = react.useMemo(
-    () => explicitClient ?? chunkIBNNENCZ_cjs.clientRegistry.acquire(creation),
+    () => explicitClient ?? chunkI2L3IAXL_cjs.clientRegistry.acquire(creation),
     [explicitClient, forum]
   );
   const messagesKey = messages ? JSON.stringify(messages) : "";
-  const t = react.useMemo(() => chunkIBNNENCZ_cjs.createTranslator(locale, messages), [locale, messagesKey]);
+  const t = react.useMemo(() => chunkI2L3IAXL_cjs.createTranslator(locale, messages), [locale, messagesKey]);
   const onEventRef = react.useRef(onEvent);
   react.useEffect(() => {
     onEventRef.current = onEvent;
@@ -151,7 +151,7 @@ function DiscourseComments(props) {
     () => ({
       client,
       t,
-      locale: chunkIBNNENCZ_cjs.resolveLocale(locale),
+      locale: chunkI2L3IAXL_cjs.resolveLocale(locale),
       messages,
       theme,
       appearance,
@@ -353,12 +353,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;
       }
     }
   }
@@ -380,6 +383,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;
 }
@@ -404,15 +415,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) {
@@ -545,7 +549,7 @@ function useThreadFor(client, { identifier, url, title, sort }, onOpenError) {
   const [opened, setOpened] = react.useState(
     { thread: null, error: null }
   );
-  const pageKey = url === void 0 ? chunkIBNNENCZ_cjs.currentUrlWithoutHash() ?? "" : "";
+  const pageKey = url === void 0 ? chunkI2L3IAXL_cjs.currentUrlWithoutHash() ?? "" : "";
   const latest = react.useRef({ title, sort, onOpenError });
   latest.current = { title, sort, onOpenError };
   const requestedSort = react.useRef(sort);
@@ -611,14 +615,14 @@ var RootContext = react.createContext(null);
 function useRootContext(component = "This component") {
   const value = react.useContext(RootContext);
   if (!value) {
-    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Root>`);
+    throw new Error(`${chunkI2L3IAXL_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Root>`);
   }
   return value;
 }
 function Root(props) {
   const context = useOptionalCommentsContext(props.forum);
   if (!context) {
-    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cx("gc-root", "gc-root--unconfigured", props.className), "data-gc-unconfigured": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-notice", children: `${chunkIBNNENCZ_cjs.PACKAGE_NAME}: render <Comments> inside <DiscourseComments forum="\u2026"> or pass a forum prop.` }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cx("gc-root", "gc-root--unconfigured", props.className), "data-gc-unconfigured": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-notice", children: `${chunkI2L3IAXL_cjs.PACKAGE_NAME}: render <Comments> inside <DiscourseComments forum="\u2026"> or pass a forum prop.` }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ConfiguredRoot, { ...props });
 }
@@ -647,10 +651,10 @@ function ConfiguredRoot(props) {
   const { client, emit } = context;
   const rootRef = react.useRef(null);
   const t = react.useMemo(
-    () => localeProp ? chunkIBNNENCZ_cjs.createTranslator(localeProp, context.messages) : context.t,
+    () => localeProp ? chunkI2L3IAXL_cjs.createTranslator(localeProp, context.messages) : context.t,
     [localeProp, context.messages, context.t]
   );
-  const locale = localeProp ? chunkIBNNENCZ_cjs.resolveLocale(localeProp) : context.locale;
+  const locale = localeProp ? chunkI2L3IAXL_cjs.resolveLocale(localeProp) : context.locale;
   const theme = themeProp ?? context.theme;
   const { variables, elements } = react.useMemo(
     () => mergeAppearance(context.appearance, appearance),
@@ -779,7 +783,7 @@ function ConfiguredRoot(props) {
     const id = requestedHighlight;
     const request = ++viewRequest.current;
     void (async () => {
-      let location = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, id);
+      let location = chunkI2L3IAXL_cjs.findComment(thread.snapshot().comments, id);
       if (!location) {
         try {
           await thread.context(id);
@@ -789,7 +793,7 @@ function ConfiguredRoot(props) {
           }
           return;
         }
-        location = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, id);
+        location = chunkI2L3IAXL_cjs.findComment(thread.snapshot().comments, id);
       }
       if (!location || request !== viewRequest.current) {
         return;
@@ -797,7 +801,7 @@ function ConfiguredRoot(props) {
       if (location.depth > maxDepth) {
         const cut = location.depth - maxDepth;
         const tree = thread.snapshot().comments;
-        const ancestors = location.path.slice(0, cut).map((ancestorId) => chunkIBNNENCZ_cjs.findComment(tree, ancestorId)?.node).filter((node) => node !== void 0);
+        const ancestors = location.path.slice(0, cut).map((ancestorId) => chunkI2L3IAXL_cjs.findComment(tree, ancestorId)?.node).filter((node) => node !== void 0);
         setFocusView({ id: location.path[cut], ancestors, truncated: false });
       } else {
         setFocusView(null);
@@ -824,7 +828,7 @@ function ConfiguredRoot(props) {
   }, [client, signInMode]);
   const threadKey = snapshot?.thread.key;
   const draftKey = react.useCallback(
-    (scope) => threadKey === void 0 ? null : `${chunkIBNNENCZ_cjs.STORAGE_PREFIX}:${client.forum}:draft:${threadKey}:${scope}`,
+    (scope) => threadKey === void 0 ? null : `${chunkI2L3IAXL_cjs.STORAGE_PREFIX}:${client.forum}:draft:${threadKey}:${scope}`,
     [client.forum, threadKey]
   );
   const value = {
@@ -1068,7 +1072,7 @@ function ComposerForm({
   const textareaRef = react.useRef(null);
   const fileRef = react.useRef(null);
   const pendingSelection = react.useRef(null);
-  const [timer] = react.useState(chunkIBNNENCZ_cjs.createComposerTimer);
+  const [timer] = react.useState(chunkI2L3IAXL_cjs.createComposerTimer);
   const draftKey = editing ? null : root.draftKey(replyTo ? `reply:${replyTo.id}` : "root");
   const [value, setValueState] = react.useState(() => draftKey ? readDraft(draftKey) : "");
   const valueRef = react.useRef(value);
@@ -1628,7 +1632,7 @@ var ItemContext = react.createContext(null);
 function useItemContext(component) {
   const value = react.useContext(ItemContext);
   if (!value) {
-    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Item>`);
+    throw new Error(`${chunkI2L3IAXL_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Item>`);
   }
   return value;
 }
@@ -1657,7 +1661,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsxRuntime.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;
@@ -1678,9 +1682,31 @@ function Meta({ className }) {
       t("pinned")
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("a", { className: "gc-comment__time", href: `#gc-${comment.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { iso: comment.created_at, locale }) }),
-    comment.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gc-comment__edited", title: formatAbsolute(comment.updated_at, locale), children: t("edited") })
+    comment.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gc-comment__edited", title: formatAbsolute(comment.updated_at, locale), children: t("edited") }),
+    comment.reply_to && depth === 0 && /* @__PURE__ */ jsxRuntime.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 ? chunkI2L3IAXL_cjs.findByNumber(snapshot.comments, reference.number) : null;
+  if (!parent) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gc-comment__reply-to", children: label });
+  }
+  const id = parent.node.id;
+  return /* @__PURE__ */ jsxRuntime.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] = react.useState(Date.now);
   react.useEffect(() => onMinuteTick(() => setNow(Date.now())), []);
@@ -1749,7 +1775,7 @@ function Actions({ className }) {
       key: "copy",
       label: t("copyLink"),
       onSelect: () => {
-        const href = `${chunkIBNNENCZ_cjs.currentUrlWithoutHash() ?? ""}#gc-${comment.id}`;
+        const href = `${chunkI2L3IAXL_cjs.currentUrlWithoutHash() ?? ""}#gc-${comment.id}`;
         const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
         if (!clipboard) {
           window.location.hash = `gc-${comment.id}`;
@@ -2091,7 +2117,7 @@ function DevPanel({ className }) {
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx("gc-devpanel", "gc-devpanel--ok", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "gc-devpanel__title", children: [
-        chunkIBNNENCZ_cjs.PACKAGE_NAME,
+        chunkI2L3IAXL_cjs.PACKAGE_NAME,
         " diagnostics"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "gc-devpanel__details", children: [
@@ -2120,10 +2146,10 @@ function DevPanel({ className }) {
     "aside",
     {
       className: cx("gc-devpanel", className),
-      "aria-label": `${chunkIBNNENCZ_cjs.PACKAGE_NAME} setup diagnostics`,
+      "aria-label": `${chunkI2L3IAXL_cjs.PACKAGE_NAME} setup diagnostics`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "gc-devpanel__title", children: [
-          chunkIBNNENCZ_cjs.PACKAGE_NAME,
+          chunkI2L3IAXL_cjs.PACKAGE_NAME,
           " could not load comments"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-devpanel__summary", children: summary }),
@@ -2301,7 +2327,7 @@ function List({ children, className }) {
   const listClass = cx("gc-list", elements.list, className);
   if (focusView) {
     const tree = snapshot.comments;
-    const target = chunkIBNNENCZ_cjs.findComment(tree, focusView.id)?.node;
+    const target = chunkI2L3IAXL_cjs.findComment(tree, focusView.id)?.node;
     return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: render, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gc-focus", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -2319,7 +2345,7 @@ function List({ children, className }) {
       focusView.ancestors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gc-context", children: focusView.ancestors.map((ancestor) => /* @__PURE__ */ jsxRuntime.jsx(
         Item,
         {
-          comment: chunkIBNNENCZ_cjs.findComment(tree, ancestor.id)?.node ?? ancestor,
+          comment: chunkI2L3IAXL_cjs.findComment(tree, ancestor.id)?.node ?? ancestor,
           showReplies: false
         },
         ancestor.id
@@ -2472,7 +2498,7 @@ function Replies() {
       root.reportError("loadReplies", error);
       return;
     }
-    const loaded3 = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
+    const loaded3 = chunkI2L3IAXL_cjs.findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
     const first = loaded3.find((child) => !before.has(child.id));
     if (first) {
       root.focusComment(first.id);
@@ -2717,7 +2743,7 @@ function useCommentCount(ref, options = {}) {
 }
 function safeEncode(ref) {
   try {
-    return chunkIBNNENCZ_cjs.encodeRef(ref);
+    return chunkI2L3IAXL_cjs.encodeRef(ref);
   } catch {
     return null;
   }
@@ -2732,7 +2758,7 @@ function CommentCount({
   className
 }) {
   const context = useOptionalCommentsContext(forum);
-  const pageUrl = url ?? chunkIBNNENCZ_cjs.defaultPageUrl();
+  const pageUrl = url ?? chunkI2L3IAXL_cjs.defaultPageUrl();
   const ref = topicId !== void 0 ? { topicId } : identifier !== void 0 ? { identifier, host } : pageUrl ? { url: pageUrl } : null;
   const { count } = useCommentCount(ref, { forum });
   if (!context) {