fix rendering client component in rss feed

app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx

···
-import { UnicodeString } from "@atproto/api";
-import { PubLeafletRichtextFacet } from "lexicons/api";
-import { didToBlueskyUrl } from "src/utils/mentionUtils";
-import { AtMentionLink } from "components/AtMentionLink";
 import { ProfilePopover } from "components/ProfilePopover";
+import { TextBlockCore, TextBlockCoreProps, RichText } from "./TextBlockCore";
+import { ReactNode } from "react";
 
-type Facet = PubLeafletRichtextFacet.Main;
-export function BaseTextBlock(props: {
-  plaintext: string;
-  facets?: Facet[];
-  index: number[];
-  preview?: boolean;
-}) {
-  let children = [];
-  let richText = new RichText({
-    text: props.plaintext,
-    facets: props.facets || [],
-  });
-  let counter = 0;
-  for (const segment of richText.segments()) {
-    let id = segment.facet?.find(PubLeafletRichtextFacet.isId);
-    let link = segment.facet?.find(PubLeafletRichtextFacet.isLink);
-    let isBold = segment.facet?.find(PubLeafletRichtextFacet.isBold);
-    let isCode = segment.facet?.find(PubLeafletRichtextFacet.isCode);
-    let isStrikethrough = segment.facet?.find(
-      PubLeafletRichtextFacet.isStrikethrough,
-    );
-    let isDidMention = segment.facet?.find(
-      PubLeafletRichtextFacet.isDidMention,
-    );
-    let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention);
-    let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline);
-    let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic);
-    let isHighlighted = segment.facet?.find(
-      PubLeafletRichtextFacet.isHighlight,
-    );
-    let className = `
-      ${isCode ? "inline-code" : ""}
-      ${id ? "scroll-mt-12 scroll-mb-10" : ""}
-      ${isBold ? "font-bold" : ""}
-      ${isItalic ? "italic" : ""}
-      ${isUnderline ? "underline" : ""}
-      ${isStrikethrough ? "line-through decoration-tertiary" : ""}
-      ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " ");
+// Re-export RichText for backwards compatibility
+export { RichText };
 
-    // Split text by newlines and insert <br> tags
-    const textParts = segment.text.split("\n");
-    const renderedText = textParts.flatMap((part, i) =>
-      i < textParts.length - 1
-        ? [part, <br key={`br-${counter}-${i}`} />]
-        : [part],
-    );
-
-    if (isCode) {
-      children.push(
-        <code key={counter} className={className} id={id?.id}>
-          {renderedText}
-        </code>,
-      );
-    } else if (isDidMention) {
-      children.push(
-        <ProfilePopover
-          key={counter}
-          didOrHandle={isDidMention.did}
-          trigger={<span className="mention">{renderedText}</span>}
-        />,
-      );
-    } else if (isAtMention) {
-      children.push(
-        <AtMentionLink
-          key={counter}
-          atURI={isAtMention.atURI}
-          className={className}
-        >
-          {renderedText}
-        </AtMentionLink>,
-      );
-    } else if (link) {
-      children.push(
-        <a
-          key={counter}
-          href={link.uri}
-          className={`text-accent-contrast hover:underline ${className}`}
-          target="_blank"
-        >
-          {renderedText}
-        </a>,
-      );
-    } else {
-      children.push(
-        <span key={counter} className={className} id={id?.id}>
-          {renderedText}
-        </span>,
-      );
-    }
-
-    counter++;
-  }
-  return <>{children}</>;
+function DidMentionWithPopover(props: { did: string; children: ReactNode }) {
+  return (
+    <ProfilePopover
+      didOrHandle={props.did}
+      trigger={props.children}
+    />
+  );
 }
 
-type RichTextSegment = {
-  text: string;
-  facet?: Exclude<Facet["features"], { $type: string }>;
-};
-
-export class RichText {
-  unicodeText: UnicodeString;
-  facets?: Facet[];
-
-  constructor(props: { text: string; facets: Facet[] }) {
-    this.unicodeText = new UnicodeString(props.text);
-    this.facets = props.facets;
-    if (this.facets) {
-      this.facets = this.facets
-        .filter((facet) => facet.index.byteStart <= facet.index.byteEnd)
-        .sort((a, b) => a.index.byteStart - b.index.byteStart);
-    }
-  }
-
-  *segments(): Generator<RichTextSegment, void, void> {
-    const facets = this.facets || [];
-    if (!facets.length) {
-      yield { text: this.unicodeText.utf16 };
-      return;
-    }
-
-    let textCursor = 0;
-    let facetCursor = 0;
-    do {
-      const currFacet = facets[facetCursor];
-      if (textCursor < currFacet.index.byteStart) {
-        yield {
-          text: this.unicodeText.slice(textCursor, currFacet.index.byteStart),
-        };
-      } else if (textCursor > currFacet.index.byteStart) {
-        facetCursor++;
-        continue;
-      }
-      if (currFacet.index.byteStart < currFacet.index.byteEnd) {
-        const subtext = this.unicodeText.slice(
-          currFacet.index.byteStart,
-          currFacet.index.byteEnd,
-        );
-        if (!subtext.trim()) {
-          // dont empty string entities
-          yield { text: subtext };
-        } else {
-          yield { text: subtext, facet: currFacet.features };
-        }
-      }
-      textCursor = currFacet.index.byteEnd;
-      facetCursor++;
-    } while (facetCursor < facets.length);
-    if (textCursor < this.unicodeText.length) {
-      yield {
-        text: this.unicodeText.slice(textCursor, this.unicodeText.length),
-      };
-    }
-  }
-}
-function addFacet(facets: Facet[], newFacet: Facet, length: number) {
-  if (facets.length === 0) {
-    return [newFacet];
-  }
-
-  const allFacets = [...facets, newFacet];
-
-  // Collect all boundary positions
-  const boundaries = new Set<number>();
-  boundaries.add(0);
-  boundaries.add(length);
-
-  for (const facet of allFacets) {
-    boundaries.add(facet.index.byteStart);
-    boundaries.add(facet.index.byteEnd);
-  }
-
-  const sortedBoundaries = Array.from(boundaries).sort((a, b) => a - b);
-  const result: Facet[] = [];
-
-  // Process segments between consecutive boundaries
-  for (let i = 0; i < sortedBoundaries.length - 1; i++) {
-    const start = sortedBoundaries[i];
-    const end = sortedBoundaries[i + 1];
-
-    // Find facets that are active at the start position
-    const activeFacets = allFacets.filter(
-      (facet) => facet.index.byteStart <= start && facet.index.byteEnd > start,
-    );
-
-    // Only create facet if there are active facets (features present)
-    if (activeFacets.length > 0) {
-      const features = activeFacets.flatMap((f) => f.features);
-      result.push({
-        index: { byteStart: start, byteEnd: end },
-        features,
-      });
-    }
-  }
-
-  return result;
+export function BaseTextBlock(props: Omit<TextBlockCoreProps, "renderers">) {
+  return (
+    <TextBlockCore
+      {...props}
+      renderers={{
+        DidMention: DidMentionWithPopover,
+      }}
+    />
+  );
 }

app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx

···
   PubLeafletPagesLinearDocument,
 } from "lexicons/api";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
-import { BaseTextBlock } from "./BaseTextBlock";
+import { TextBlockCore, TextBlockCoreProps } from "./TextBlockCore";
 import { StaticMathBlock } from "./StaticMathBlock";
 import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki";
+
+function StaticBaseTextBlock(props: Omit<TextBlockCoreProps, "renderers">) {
+  return <TextBlockCore {...props} />;
+}
 
 export function StaticPostContent({
   blocks,
···
     case PubLeafletBlocksBlockquote.isMain(b.block): {
       return (
         <blockquote className={` blockquote `}>
-          <BaseTextBlock
+          <StaticBaseTextBlock
             facets={b.block.facets}
             plaintext={b.block.plaintext}
             index={[]}
···
     case PubLeafletBlocksText.isMain(b.block):
       return (
         <p>
-          <BaseTextBlock
+          <StaticBaseTextBlock
             facets={b.block.facets}
             plaintext={b.block.plaintext}
             index={[]}
···
       if (b.block.level === 1)
         return (
           <h1>
-            <BaseTextBlock {...b.block} index={[]} />
+            <StaticBaseTextBlock {...b.block} index={[]} />
           </h1>
         );
       if (b.block.level === 2)
         return (
           <h2>
-            <BaseTextBlock {...b.block} index={[]} />
+            <StaticBaseTextBlock {...b.block} index={[]} />
           </h2>
         );
       if (b.block.level === 3)
         return (
           <h3>
-            <BaseTextBlock {...b.block} index={[]} />
+            <StaticBaseTextBlock {...b.block} index={[]} />
           </h3>
         );
       // if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
       // if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
       return (
         <h6>
-          <BaseTextBlock {...b.block} index={[]} />
+          <StaticBaseTextBlock {...b.block} index={[]} />
         </h6>
       );
     }

app/lish/[did]/[publication]/[rkey]/TextBlockCore.tsx

···
+import { UnicodeString } from "@atproto/api";
+import { PubLeafletRichtextFacet } from "lexicons/api";
+import { AtMentionLink } from "components/AtMentionLink";
+import { ReactNode } from "react";
+
+type Facet = PubLeafletRichtextFacet.Main;
+
+export type FacetRenderers = {
+  DidMention?: (props: { did: string; children: ReactNode }) => ReactNode;
+};
+
+export type TextBlockCoreProps = {
+  plaintext: string;
+  facets?: Facet[];
+  index: number[];
+  preview?: boolean;
+  renderers?: FacetRenderers;
+};
+
+export function TextBlockCore(props: TextBlockCoreProps) {
+  let children = [];
+  let richText = new RichText({
+    text: props.plaintext,
+    facets: props.facets || [],
+  });
+  let counter = 0;
+  for (const segment of richText.segments()) {
+    let id = segment.facet?.find(PubLeafletRichtextFacet.isId);
+    let link = segment.facet?.find(PubLeafletRichtextFacet.isLink);
+    let isBold = segment.facet?.find(PubLeafletRichtextFacet.isBold);
+    let isCode = segment.facet?.find(PubLeafletRichtextFacet.isCode);
+    let isStrikethrough = segment.facet?.find(
+      PubLeafletRichtextFacet.isStrikethrough,
+    );
+    let isDidMention = segment.facet?.find(
+      PubLeafletRichtextFacet.isDidMention,
+    );
+    let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention);
+    let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline);
+    let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic);
+    let isHighlighted = segment.facet?.find(
+      PubLeafletRichtextFacet.isHighlight,
+    );
+    let className = `
+      ${isCode ? "inline-code" : ""}
+      ${id ? "scroll-mt-12 scroll-mb-10" : ""}
+      ${isBold ? "font-bold" : ""}
+      ${isItalic ? "italic" : ""}
+      ${isUnderline ? "underline" : ""}
+      ${isStrikethrough ? "line-through decoration-tertiary" : ""}
+      ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " ");
+
+    // Split text by newlines and insert <br> tags
+    const textParts = segment.text.split("\n");
+    const renderedText = textParts.flatMap((part, i) =>
+      i < textParts.length - 1
+        ? [part, <br key={`br-${counter}-${i}`} />]
+        : [part],
+    );
+
+    if (isCode) {
+      children.push(
+        <code key={counter} className={className} id={id?.id}>
+          {renderedText}
+        </code>,
+      );
+    } else if (isDidMention) {
+      const DidMentionRenderer = props.renderers?.DidMention;
+      if (DidMentionRenderer) {
+        children.push(
+          <DidMentionRenderer key={counter} did={isDidMention.did}>
+            <span className="mention">{renderedText}</span>
+          </DidMentionRenderer>,
+        );
+      } else {
+        // Default: render as a simple link
+        children.push(
+          <a
+            key={counter}
+            href={`https://leaflet.pub/p/${isDidMention.did}`}
+            target="_blank"
+            className="no-underline"
+          >
+            <span className="mention">{renderedText}</span>
+          </a>,
+        );
+      }
+    } else if (isAtMention) {
+      children.push(
+        <AtMentionLink
+          key={counter}
+          atURI={isAtMention.atURI}
+          className={className}
+        >
+          {renderedText}
+        </AtMentionLink>,
+      );
+    } else if (link) {
+      children.push(
+        <a
+          key={counter}
+          href={link.uri}
+          className={`text-accent-contrast hover:underline ${className}`}
+          target="_blank"
+        >
+          {renderedText}
+        </a>,
+      );
+    } else {
+      children.push(
+        <span key={counter} className={className} id={id?.id}>
+          {renderedText}
+        </span>,
+      );
+    }
+
+    counter++;
+  }
+  return <>{children}</>;
+}
+
+type RichTextSegment = {
+  text: string;
+  facet?: Exclude<Facet["features"], { $type: string }>;
+};
+
+export class RichText {
+  unicodeText: UnicodeString;
+  facets?: Facet[];
+
+  constructor(props: { text: string; facets: Facet[] }) {
+    this.unicodeText = new UnicodeString(props.text);
+    this.facets = props.facets;
+    if (this.facets) {
+      this.facets = this.facets
+        .filter((facet) => facet.index.byteStart <= facet.index.byteEnd)
+        .sort((a, b) => a.index.byteStart - b.index.byteStart);
+    }
+  }
+
+  *segments(): Generator<RichTextSegment, void, void> {
+    const facets = this.facets || [];
+    if (!facets.length) {
+      yield { text: this.unicodeText.utf16 };
+      return;
+    }
+
+    let textCursor = 0;
+    let facetCursor = 0;
+    do {
+      const currFacet = facets[facetCursor];
+      if (textCursor < currFacet.index.byteStart) {
+        yield {
+          text: this.unicodeText.slice(textCursor, currFacet.index.byteStart),
+        };
+      } else if (textCursor > currFacet.index.byteStart) {
+        facetCursor++;
+        continue;
+      }
+      if (currFacet.index.byteStart < currFacet.index.byteEnd) {
+        const subtext = this.unicodeText.slice(
+          currFacet.index.byteStart,
+          currFacet.index.byteEnd,
+        );
+        if (!subtext.trim()) {
+          // dont empty string entities
+          yield { text: subtext };
+        } else {
+          yield { text: subtext, facet: currFacet.features };
+        }
+      }
+      textCursor = currFacet.index.byteEnd;
+      facetCursor++;
+    } while (facetCursor < facets.length);
+    if (textCursor < this.unicodeText.length) {
+      yield {
+        text: this.unicodeText.slice(textCursor, this.unicodeText.length),
+      };
+    }
+  }
+}