@asteroidcms/core-utils 0.1.6 → 0.1.7

package/dist/client.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { PropsWithChildren, ReactNode } from 'react';
 import * as _apollo_client from '@apollo/client';
 import { InMemoryCacheConfig, ApolloClientOptions, ApolloClient } from '@apollo/client';
@@ -254,7 +255,7 @@ interface RichTextContentProps {
      */
     calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
+declare const RichTextContent: react.NamedExoticComponent<RichTextContentProps>;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from

package/dist/client.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { PropsWithChildren, ReactNode } from 'react';
 import * as _apollo_client from '@apollo/client';
 import { InMemoryCacheConfig, ApolloClientOptions, ApolloClient } from '@apollo/client';
@@ -254,7 +255,7 @@ interface RichTextContentProps {
      */
     calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
+declare const RichTextContent: react.NamedExoticComponent<RichTextContentProps>;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from

package/dist/client.js

@@ -1,10 +1,10 @@
 "use client";
-import { createContext, useContext, useMemo, useRef, useState, useEffect, Fragment, createElement } from 'react';
+import { createContext, memo, useMemo, useRef, useState, useLayoutEffect, Fragment, createElement, useContext } from 'react';
 import { ApolloProvider, useQuery, useMutation } from '@apollo/client/react';
 import { gql, HttpLink, ApolloClient, InMemoryCache, ApolloLink, CombinedGraphQLErrors, CombinedProtocolErrors } from '@apollo/client';
 import { SetContextLink } from '@apollo/client/link/context';
 import { ErrorLink } from '@apollo/client/link/error';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import hljs from 'highlight.js/lib/common';
 
@@ -1044,37 +1044,38 @@ function isIconEnabled(el) {
   if (v === null) return false;
   return v !== "false" && v !== "0";
 }
-function enhanceCallouts(root) {
+function enhanceCallouts(root, calloutIcons) {
   const callouts = root.querySelectorAll("aside[data-callout]");
   callouts.forEach((el) => {
-    if (el.dataset.rtCalloutEnhanced === "1") return;
-    el.dataset.rtCalloutEnhanced = "1";
-    if (!isIconEnabled(el)) return;
     if (el.querySelector(":scope > .rt-callout-icon")) return;
+    if (!isIconEnabled(el)) return;
     const variant = calloutVariantOf(el);
     const icon = document.createElement("span");
     icon.className = "rt-callout-icon";
     icon.dataset.variant = variant;
     icon.setAttribute("aria-hidden", "true");
+    if (!calloutIcons || !(variant in calloutIcons)) {
+      icon.innerHTML = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
+    }
     el.prepend(icon);
   });
+  if (!calloutIcons) return [];
   const chips = [];
   root.querySelectorAll(
     "aside[data-callout] > .rt-callout-icon"
   ).forEach((chip) => {
-    chips.push({
-      el: chip,
-      variant: chip.dataset.variant || (chip.parentElement?.getAttribute("data-variant") ?? "default")
-    });
+    const variant = chip.dataset.variant || (chip.parentElement?.getAttribute("data-variant") ?? "default");
+    if (variant in calloutIcons) {
+      chips.push({ el: chip, variant });
+    }
   });
   return chips;
 }
 function enhanceBlockquotes(root) {
   const quotes = root.querySelectorAll("blockquote");
   quotes.forEach((bq) => {
-    if (bq.dataset.rtQuoted === "1") return;
+    if (bq.querySelector(":scope > .rt-quote-open")) return;
     if (bq.closest('figure[data-variant="pullquote"]')) return;
-    bq.dataset.rtQuoted = "1";
     const { first, last } = findQuoteBody(bq);
     if (!first || !last) return;
     const open = document.createElement("span");
@@ -1113,11 +1114,10 @@ function highlightCodeBlock(pre) {
   if (!lang) return;
   const code = pre.querySelector("code");
   if (!code) return;
-  if (code.dataset.rtHighlighted === "1") return;
+  if (code.classList.contains("hljs")) return;
   const source = code.textContent ?? "";
   code.innerHTML = highlightSource(source, lang);
   code.classList.add("hljs");
-  code.dataset.rtHighlighted = "1";
 }
 var DIFF_SEPARATOR_RE = /\n?@@---@@\n?/;
 function diffLines(a, b) {
@@ -1240,8 +1240,7 @@ function buildCodeBlockLabel(pre) {
 function enhanceCodeBlocks(root) {
   const blocks = root.querySelectorAll("pre");
   blocks.forEach((pre) => {
-    if (pre.dataset.rtEnhanced === "1") return;
-    pre.dataset.rtEnhanced = "1";
+    if (pre.classList.contains("rt-codeblock")) return;
     pre.classList.add("rt-codeblock");
     const variant = pre.dataset.variant;
     if (variant === "diff") {
@@ -1585,7 +1584,7 @@ function BuiltinCalloutIcon({ variant }) {
   const html = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
   return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } });
 }
-function RichTextContent({
+var RichTextContent = memo(function RichTextContent2({
   html,
   classMap,
   as = "div",
@@ -1603,49 +1602,58 @@ function RichTextContent({
     [html, merged]
   );
   const ref = useRef(null);
-  const [chips, setChips] = useState([]);
-  useEffect(() => {
+  const prevSafe = useRef("");
+  const chipsRef = useRef([]);
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  const contentRefStable = useRef(contentRef);
+  contentRefStable.current = contentRef;
+  const calloutIconsRef = useRef(calloutIcons);
+  calloutIconsRef.current = calloutIcons;
+  const [renderKey, setRenderKey] = useState(0);
+  useLayoutEffect(() => {
     ensureCodeBlockStyles();
     const root = ref.current;
     if (!root) return;
-    if (contentRef) contentRef.current = root;
-    const apply = () => {
-      mo.disconnect();
-      enhanceCodeBlocks(root);
-      enhanceBlockquotes(root);
-      const nextChips = enhanceCallouts(root);
-      setChips((prev) => calloutChipsEqual(prev, nextChips) ? prev : nextChips);
-      onReady?.(root);
-      mo.observe(root, { childList: true, subtree: true });
-    };
-    let raf = 0;
-    const mo = new MutationObserver(() => {
-      if (raf) return;
-      raf = requestAnimationFrame(() => {
-        raf = 0;
-        apply();
-      });
-    });
-    apply();
-    return () => {
-      mo.disconnect();
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, [safe, onReady, contentRef]);
+    if (contentRefStable.current) contentRefStable.current.current = root;
+    if (prevSafe.current === safe) return;
+    prevSafe.current = safe;
+    root.innerHTML = safe;
+    enhanceCodeBlocks(root);
+    enhanceBlockquotes(root);
+    const nextChips = enhanceCallouts(root, calloutIconsRef.current);
+    if (!calloutChipsEqual(chipsRef.current, nextChips)) {
+      chipsRef.current = nextChips;
+      if (nextChips.length > 0) setRenderKey((n) => n + 1);
+    }
+    onReadyRef.current?.(root);
+  }, [safe]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     createElement(as, {
       ref,
-      className,
-      dangerouslySetInnerHTML: { __html: safe }
+      className
     }),
-    chips.map(
+    chipsRef.current.map(
       (chip, i) => createPortal(
-        calloutIcons && chip.variant in calloutIcons ? calloutIcons[chip.variant] : /* @__PURE__ */ jsx(BuiltinCalloutIcon, { variant: chip.variant }),
+        calloutIconsRef.current && chip.variant in calloutIconsRef.current ? calloutIconsRef.current[chip.variant] : /* @__PURE__ */ jsx(BuiltinCalloutIcon, { variant: chip.variant }),
         chip.el,
         `${chip.variant}:${i}`
       )
     )
   ] });
+}, richTextPropsEqual);
+function richTextPropsEqual(prev, next) {
+  if (prev.html !== next.html) return false;
+  if (prev.classMap !== next.classMap) return false;
+  if (prev.as !== next.as) return false;
+  if (prev.className !== next.className) return false;
+  const prevKeys = prev.calloutIcons ? Object.keys(prev.calloutIcons) : [];
+  const nextKeys = next.calloutIcons ? Object.keys(next.calloutIcons) : [];
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const k of nextKeys) {
+    if (!prevKeys.includes(k)) return false;
+  }
+  return true;
 }
 
 // src/utils/extractHeadings.ts