@asteroidcms/core-utils 0.1.4 → 0.1.5

package/README.md

@@ -356,19 +356,24 @@ getContentReadTime(article.body, {
 
 ## `<RichTextContent>`
 
-Render Asteroid CMS rich-text HTML with syntax-highlighted code blocks (via `highlight.js`), self-healing enhancements (copy buttons, blockquote decorations), and slugified heading IDs out of the box.
+Render Asteroid CMS rich-text HTML with syntax-highlighted code blocks (via `highlight.js`), self-healing enhancements (copy buttons, blockquote decorations, callout chips), terminal/diff code-block variants, and slugified heading IDs out of the box.
 
 ```tsx
 import { RichTextContent } from "@asteroidcms/core-utils/client";
+import { Info } from "lucide-react";
 
 <RichTextContent
   html={article.body}
   as="article"
   className="prose"
   classMap={{ p: "my-2 leading-relaxed", h2: "text-2xl font-bold" }}
+  onReady={(root) => console.log("hydrated", root.querySelectorAll("h2").length)}
+  calloutIcons={{ info: <Info size={14} strokeWidth={2.4} /> }}
 />;
 ```
 
+Additional props: `contentRef` (forwards the wrapper element, useful for `useTableOfContents`), `onReady` (fires once enhancements have run), and `calloutIcons` (per-variant icon override for `<aside data-callout data-icon>` blocks).
+
 Or use the parser directly (server-safe, no `highlight.js`):
 
 ```ts

package/dist/client.cjs

@@ -7,8 +7,8 @@ var client = require('@apollo/client');
 var context = require('@apollo/client/link/context');
 var error = require('@apollo/client/link/error');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var hljs = require('highlight.js/lib/common');
-require('highlight.js/styles/tokyo-night-dark.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -371,7 +371,9 @@ var DEFAULT_ALLOWLIST = [
   "section",
   "article",
   "div",
-  "span"
+  "span",
+  "details",
+  "summary"
 ];
 var ALLOWED_ATTRS = {
   a: ["href", "title", "target", "rel"],
@@ -381,7 +383,8 @@ var ALLOWED_ATTRS = {
   col: ["span", "width"],
   colgroup: ["span"],
   table: ["border", "cellpadding", "cellspacing"],
-  span: ["style"]
+  span: ["style"],
+  details: ["open"]
 };
 var ALLOWED_STYLE_PROPS = {
   span: ["font-size"]
@@ -415,7 +418,8 @@ var GLOBAL_ALLOWED_ATTRS = [
   "data-title",
   "data-callout-title",
   "data-language",
-  "data-filename"
+  "data-filename",
+  "data-icon"
 ];
 var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src"]);
 function parseRichText(html, options = {}) {
@@ -829,6 +833,8 @@ function classKeyForTag(tag, attrs, openStack) {
   if (tag === "p" && "data-callout-title" in attrs) return "calloutTitle";
   if (tag === "code" && openStack[openStack.length - 1] !== "pre")
     return "inlineCode";
+  if (tag === "details") return "collapsible";
+  if (tag === "summary") return "collapsibleTitle";
   const known = [
     "p",
     "br",
@@ -995,8 +1001,6 @@ function sanitizeAndStyle(html, options) {
   }
   return out.join("");
 }
-
-// src/components/RichTextContent.tsx
 var DEFAULT_CLASS_MAP = {
   variants: {
     "figure:pullquote": "relative my-8",
@@ -1031,6 +1035,46 @@ function findQuoteBody(bq) {
   if (lastIdx < 0) return { first: null, last: null };
   return { first: children[0], last: children[lastIdx] };
 }
+var CALLOUT_ICON_SVG = {
+  info: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 16v-5"/><path d="M12 8h.01"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+  success: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`,
+  danger: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+  default: `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.6 5.4a4 4 0 0 0 2.5 2.5L21.5 12l-5.4 1.6a4 4 0 0 0-2.5 2.5L12 21.5l-1.6-5.4a4 4 0 0 0-2.5-2.5L2.5 12l5.4-1.6a4 4 0 0 0 2.5-2.5z"/></svg>`
+};
+function calloutVariantOf(el) {
+  return el.getAttribute("data-variant") ?? "default";
+}
+function isIconEnabled(el) {
+  const v = el.getAttribute("data-icon");
+  if (v === null) return false;
+  return v !== "false" && v !== "0";
+}
+function enhanceCallouts(root) {
+  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;
+    const variant = calloutVariantOf(el);
+    const icon = document.createElement("span");
+    icon.className = "rt-callout-icon";
+    icon.dataset.variant = variant;
+    icon.setAttribute("aria-hidden", "true");
+    el.prepend(icon);
+  });
+  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")
+    });
+  });
+  return chips;
+}
 function enhanceBlockquotes(root) {
   const quotes = root.querySelectorAll("blockquote");
   quotes.forEach((bq) => {
@@ -1260,6 +1304,28 @@ function enhanceCodeBlocks(root) {
     highlightCodeBlock(pre);
   });
 }
+var HLJS_THEME = `
+pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
+code.hljs { padding: 3px 5px; }
+.hljs-meta, .hljs-comment { color: #565f89; }
+.hljs-tag, .hljs-doctag, .hljs-selector-id, .hljs-selector-class,
+.hljs-regexp, .hljs-template-tag, .hljs-selector-pseudo,
+.hljs-selector-attr, .hljs-variable.language_, .hljs-deletion { color: #f7768e; }
+.hljs-variable, .hljs-template-variable, .hljs-number, .hljs-literal,
+.hljs-type, .hljs-params, .hljs-link { color: #ff9e64; }
+.hljs-built_in, .hljs-attribute { color: #e0af68; }
+.hljs-selector-tag { color: #73daca; }
+.hljs-keyword, .hljs-title.function_, .hljs-title, .hljs-title.class_,
+.hljs-title.class_.inherited__, .hljs-subst, .hljs-property { color: #7dcfff; }
+.hljs-quote, .hljs-string, .hljs-symbol, .hljs-bullet,
+.hljs-addition { color: #9ece6a; }
+.hljs-code, .hljs-formula, .hljs-section { color: #7aa2f7; }
+.hljs-name, .hljs-operator, .hljs-char.escape_, .hljs-attr { color: #bb9af7; }
+.hljs-punctuation { color: #c0caf5; }
+.hljs { background: #1a1b26; color: #9aa5ce; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: bold; }
+`;
 var CODEBLOCK_STYLE = `
 .rt-codeblock { position: relative; }
 .rt-codeblock[data-filename]:not([data-filename=""]) { padding-top: 2rem; }
@@ -1311,6 +1377,64 @@ var CODEBLOCK_STYLE = `
 }
 .rt-quote-open { margin-right: 0.15em; }
 .rt-quote-close { margin-left: 0.15em; }
+
+/* Callout chip ----------------------------------------------------------- */
+/* Layout: when a callout opts into an icon, use a 2-column grid so the chip
+   sits left of the title + body. Consumers can override via classMap. */
+aside[data-callout][data-icon]:not([data-icon="false"]):not([data-icon="0"]) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.85rem;
+  align-items: start;
+}
+aside[data-callout][data-icon]:not([data-icon="false"]):not([data-icon="0"]) > .rt-callout-icon {
+  grid-row: 1 / span 99;
+  margin-top: 0.05rem;
+}
+.rt-callout-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 0.4rem;
+  color: #fff;
+  background: #475569;
+  flex-shrink: 0;
+}
+.rt-callout-icon[data-variant="info"]    { background: #2563eb; }
+.rt-callout-icon[data-variant="warning"] { background: #d97706; }
+.rt-callout-icon[data-variant="success"] { background: #16a34a; }
+.rt-callout-icon[data-variant="danger"]  { background: #dc2626; }
+.rt-callout-icon[data-variant="default"] { background: #475569; }
+
+/* Collapsible (FAQ accordion) ------------------------------------------ */
+/* Native <details>/<summary> with a rotating chevron. Only structural
+   styling lives here \u2014 colors, padding, and typography belong to
+   consumers via the \`collapsible\` and \`collapsibleTitle\` classMap keys. */
+details[data-collapsible] > summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+details[data-collapsible] > summary::-webkit-details-marker { display: none; }
+details[data-collapsible] > summary::after {
+  content: "";
+  width: 0.55rem;
+  height: 0.55rem;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg) translate(-0.1rem, 0.05rem);
+  transition: transform 0.18s ease;
+  opacity: 0.55;
+  flex-shrink: 0;
+}
+details[data-collapsible][open] > summary::after {
+  transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+}
 /* highlight.js theme handles .hljs-* color classes; we only override the
    default .hljs background so the per-block chrome (dark bg, terminal,
    diff red/green rows) wins. */
@@ -1452,17 +1576,29 @@ function ensureCodeBlockStyles() {
   }
   const tag = document.createElement("style");
   tag.id = "rt-codeblock-style";
-  tag.textContent = CODEBLOCK_STYLE;
+  tag.textContent = HLJS_THEME + "\n" + CODEBLOCK_STYLE;
   document.head.appendChild(tag);
   styleInjected = true;
 }
+function calloutChipsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].el !== b[i].el || a[i].variant !== b[i].variant) return false;
+  }
+  return true;
+}
+function BuiltinCalloutIcon({ variant }) {
+  const html = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: html } });
+}
 function RichTextContent({
   html,
   classMap,
   as = "div",
   className,
   onReady,
-  contentRef
+  contentRef,
+  calloutIcons
 }) {
   const merged = react.useMemo(
     () => mergeClassMap(DEFAULT_CLASS_MAP, classMap),
@@ -1473,6 +1609,7 @@ function RichTextContent({
     [html, merged]
   );
   const ref = react.useRef(null);
+  const [chips, setChips] = react.useState([]);
   react.useEffect(() => {
     ensureCodeBlockStyles();
     const root = ref.current;
@@ -1482,6 +1619,8 @@ function RichTextContent({
       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 });
     };
@@ -1499,11 +1638,20 @@ function RichTextContent({
       if (raf) cancelAnimationFrame(raf);
     };
   }, [safe, onReady, contentRef]);
-  return react.createElement(as, {
-    ref,
-    className,
-    dangerouslySetInnerHTML: { __html: safe }
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    react.createElement(as, {
+      ref,
+      className,
+      dangerouslySetInnerHTML: { __html: safe }
+    }),
+    chips.map(
+      (chip, i) => reactDom.createPortal(
+        calloutIcons && chip.variant in calloutIcons ? calloutIcons[chip.variant] : /* @__PURE__ */ jsxRuntime.jsx(BuiltinCalloutIcon, { variant: chip.variant }),
+        chip.el,
+        `${chip.variant}:${i}`
+      )
+    )
+  ] });
 }
 
 // src/utils/extractHeadings.ts