@qkix/better-blocks-react-renderer 0.18.0 → 0.18.2

package/dist/index.mjs

@@ -98,17 +98,17 @@ function CodeBlock({
 }) {
   const [html, setHtml] = useState(null);
   useEffect(() => {
-    let cancelled = false;
+    let canceled = false;
     setHtml(null);
     if (!plainText) return;
     const lang = normalizeCodeLang(language);
     loadHighlighter(theme, lang).then((highlighter) => highlighter.codeToHtml(plainText, { lang, theme })).then((highlighted) => {
-      if (!cancelled) setHtml(highlighted);
+      if (!canceled) setHtml(highlighted);
     }).catch(() => {
-      if (!cancelled) setHtml(null);
+      if (!canceled) setHtml(null);
     });
     return () => {
-      cancelled = true;
+      canceled = true;
     };
   }, [plainText, language, theme]);
   return /* @__PURE__ */ jsxs("div", { className: "bb-code", children: [
@@ -135,16 +135,16 @@ var renderCount = 0;
 function MermaidDiagram({ value }) {
   const [svg, setSvg] = useState2(null);
   useEffect2(() => {
-    let cancelled = false;
+    let canceled = false;
     setSvg(null);
     if (!value) return;
     loadMermaid().then((mermaid) => mermaid.render(`bb-mermaid-${renderCount++}`, value)).then(({ svg: svg2 }) => {
-      if (!cancelled) setSvg(svg2);
+      if (!canceled) setSvg(svg2);
     }).catch(() => {
-      if (!cancelled) setSvg(null);
+      if (!canceled) setSvg(null);
     });
     return () => {
-      cancelled = true;
+      canceled = true;
     };
   }, [value]);
   if (svg) {
@@ -326,14 +326,14 @@ function SocialEmbed({
     });
     const widget = WIDGET_SCRIPTS[platform];
     if (!widget) return;
-    let cancelled = false;
+    let canceled = false;
     void loadWidgetScript(widget.src, platform).then(() => {
       const container = containerRef.current;
-      if (cancelled || !container) return;
+      if (canceled || !container) return;
       if (!widget.process(container)) reinjectWidgetScript(widget.src, platform);
     });
     return () => {
-      cancelled = true;
+      canceled = true;
     };
   }, [platform, html]);
   const providerName = (_a = oembed == null ? void 0 : oembed.providerName) != null ? _a : PLATFORM_LABELS[platform];
@@ -397,12 +397,12 @@ function Video({
       setMuxDefined(true);
       return;
     }
-    let cancelled = false;
+    let canceled = false;
     void window.customElements.whenDefined("mux-player").then(() => {
-      if (!cancelled) setMuxDefined(true);
+      if (!canceled) setMuxDefined(true);
     });
     return () => {
-      cancelled = true;
+      canceled = true;
     };
   }, [wantsMux]);
   const isHls = HLS_MANIFEST.test(url);
@@ -624,44 +624,63 @@ function renderTable(block, key, blocks, modifiers) {
 function isHeaderRow(row) {
   return !!row && row.children.length > 0 && row.children.every((c) => c.type === "table-header-cell");
 }
+function renderCustomBlock(plugin, block, key, blocks, modifiers, options) {
+  const { component: Component, content = "void" } = plugin;
+  const children = Array.isArray(block.children) ? block.children : [];
+  if (content === "blocks") {
+    return /* @__PURE__ */ jsx5(Component, { node: block, children: children.map(
+      (child, index) => renderBlock(child, index, blocks, modifiers, options)
+    ) }, key);
+  }
+  if (content === "inline") {
+    return /* @__PURE__ */ jsx5(Component, { node: block, children: renderInlineContent(children, blocks, modifiers) }, key);
+  }
+  return /* @__PURE__ */ jsx5(Component, { node: block }, key);
+}
 function renderBlock(block, key, blocks, modifiers, options) {
-  switch (block.type) {
+  var _a;
+  const plugin = (_a = options == null ? void 0 : options.plugins) == null ? void 0 : _a.get(block.type);
+  if (plugin) {
+    return renderCustomBlock(plugin, block, key, blocks, modifiers, options);
+  }
+  const builtIn = block;
+  switch (builtIn.type) {
     case "paragraph":
-      return renderParagraph(block, key, blocks, modifiers);
+      return renderParagraph(builtIn, key, blocks, modifiers);
     case "heading":
-      return renderHeading(block, key, blocks, modifiers);
+      return renderHeading(builtIn, key, blocks, modifiers);
     case "list":
-      return renderList(block, key, blocks, modifiers);
+      return renderList(builtIn, key, blocks, modifiers);
     case "quote":
-      return renderQuote(block, key, blocks, modifiers);
+      return renderQuote(builtIn, key, blocks, modifiers);
     case "code":
-      return renderCode(block, key, blocks, options);
+      return renderCode(builtIn, key, blocks, options);
     case "image":
-      return renderImage(block, key, blocks);
+      return renderImage(builtIn, key, blocks);
     case "horizontal-line":
-      return renderHorizontalLine(block, key, blocks);
+      return renderHorizontalLine(builtIn, key, blocks);
     case "table":
-      return renderTable(block, key, blocks, modifiers);
+      return renderTable(builtIn, key, blocks, modifiers);
     case "media-embed":
-      return renderMediaEmbed(block, key, blocks);
+      return renderMediaEmbed(builtIn, key, blocks);
     case "embed":
-      return renderEmbed(block, key, blocks);
+      return renderEmbed(builtIn, key, blocks);
     case "video":
-      return renderVideo(block, key, blocks);
+      return renderVideo(builtIn, key, blocks);
     case "math":
-      return renderMath(block, key, blocks);
+      return renderMath(builtIn, key, blocks);
     case "diagram":
-      return renderDiagram(block, key, blocks);
+      return renderDiagram(builtIn, key, blocks);
     case "callout":
-      return renderCallout(block, key, blocks, modifiers, options);
+      return renderCallout(builtIn, key, blocks, modifiers, options);
     case "details":
-      return renderDetails(block, key, blocks, modifiers, options);
+      return renderDetails(builtIn, key, blocks, modifiers, options);
     case "button":
-      return renderButton(block, key, blocks);
+      return renderButton(builtIn, key, blocks);
     case "social-embed":
-      return renderSocialEmbed(block, key, blocks);
+      return renderSocialEmbed(builtIn, key, blocks);
     case "audio":
-      return renderAudio(block, key, blocks);
+      return renderAudio(builtIn, key, blocks);
     default:
       return null;
   }
@@ -1242,6 +1261,7 @@ function BlocksRenderer({
   content,
   blocks,
   modifiers,
+  blockPlugins,
   codeTheme = DEFAULT_CODE_THEME,
   codeCopyButton = false
 }) {
@@ -1253,7 +1273,11 @@ function BlocksRenderer({
   const needsTableCss = !(blocks == null ? void 0 : blocks.table) && contentHasBlock(content, "table");
   const needsQuoteCss = !(blocks == null ? void 0 : blocks.quote) && contentHasBlock(content, "quote");
   const needsCodeCss = !(blocks == null ? void 0 : blocks.code) && contentHasBlock(content, "code");
-  const options = { codeTheme, codeCopyButton };
+  const options = {
+    codeTheme,
+    codeCopyButton,
+    plugins: (blockPlugins == null ? void 0 : blockPlugins.length) ? new Map(blockPlugins.map((plugin) => [plugin.type, plugin])) : void 0
+  };
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     needsButtonCss && /* @__PURE__ */ jsx5("style", { children: BUTTON_HOVER_CSS }),
     needsEmbedCss && /* @__PURE__ */ jsx5("style", { children: EMBED_FRAME_CSS }),