From 022174c0f52332ca9ed8d19cd343a90cff9ecace Mon Sep 17 00:00:00 2001
From: maelstrom <maelstrom@maelstrom.dev>
Date: Sat, 2 May 2026 19:57:48 +0200
Subject: [PATCH] plumbing for rich text

---
 src/components/FeedPost.tsx  | 48 ++++++++++++++++++++++++++++++------
 src/lib/post.ts              |  2 ++
 src/lib/query/feed.ts        |  1 +
 src/lib/richtext/render.tsx  | 32 ++++++++++++++++++++++--
 src/lib/richtext/richtext.ts |  4 +++
 5 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/richtext/richtext.ts

diff --git a/src/components/FeedPost.tsx b/src/components/FeedPost.tsx
index 655b9a2..e840df8 100644
--- a/src/components/FeedPost.tsx
+++ b/src/components/FeedPost.tsx
@@ -8,6 +8,7 @@ import { PostInteractionButtons, PostNotesIndicator } from "./PostInteraction";
 import { Text } from "./primitive/Text";
 import Fontawesome from "@expo/vector-icons/FontAwesome";
 import StyledPressable from "./primitive/StyledPressable";
+import RichTextBody from "../lib/richtext/render";
 
 const styles = StyleSheet.create({
   postHeader: {
@@ -74,11 +75,11 @@ const styles = StyleSheet.create({
 function PostHeader({
   post,
   reblogParent,
-  compact
+  compact,
 }: {
   post: Post;
   reblogParent?: Post;
-  compact?: boolean
+  compact?: boolean;
 }) {
   const router = useRouter();
 
@@ -123,19 +124,45 @@ function InlineAuthorHeader({ post }: { post: Post }) {
         style={{ width: 20, height: 20 }}
         source={require("@/assets/images/avatar-default.svg")}
       />
-      <Fontawesome name={"retweet"} size={13} style={[styles.reblogIcon, { left: -18 }]} />
+      <Fontawesome
+        name={"retweet"}
+        size={13}
+        style={[styles.reblogIcon, { left: -18 }]}
+      />
       <Text>{post.author.handle}</Text>
     </StyledPressable>
   );
 }
 
-function PostBody({ post, showAuthor, compact }: { post: Post; showAuthor?: boolean, compact?: boolean }) {
+function PostBody({
+  post,
+  showAuthor,
+  compact,
+}: {
+  post: Post;
+  showAuthor?: boolean;
+  compact?: boolean;
+}) {
   return (
-    post.text !== "" && (
+    (post.text !== "" || post.content.length !== 0) && (
       <>
         {showAuthor && <InlineAuthorHeader post={post} />}
-        <View style={[styles.postBody, (showAuthor) && { paddingTop: 2 }, compact && { borderBottomWidth: 0, paddingTop: 2, paddingBottom: 2 }]}>
-          <Text>{post.text}</Text>
+        <View
+          style={[
+            styles.postBody,
+            showAuthor && { paddingTop: 2 },
+            compact && {
+              borderBottomWidth: 0,
+              paddingTop: 2,
+              paddingBottom: 2,
+            },
+          ]}
+        >
+          {post.text !== "" ? (
+            <Text>{post.text}</Text>
+          ) : (
+            <RichTextBody richText={post.content} />
+          )}
         </View>
       </>
     )
@@ -165,7 +192,12 @@ export default function FeedPost({ thread }: { thread: ThreadPost[] }) {
         compact={thread.length === 1}
       />
       {thread.map((post) => (
-        <PostBody key={post.uri} post={post} showAuthor={thread.length > 1} compact={thread.length === 1} />
+        <PostBody
+          key={post.uri}
+          post={post}
+          showAuthor={thread.length > 1}
+          compact={thread.length === 1}
+        />
       ))}
       <PostFooter post={topPost} />
     </View>
diff --git a/src/lib/post.ts b/src/lib/post.ts
index d2869c9..b354c53 100644
--- a/src/lib/post.ts
+++ b/src/lib/post.ts
@@ -2,12 +2,14 @@ import { AtUriString, CidString } from "@atproto/lex";
 import { dev } from "../lexicons";
 import { Profile } from "./profile";
 import { strongRef } from "../lexicons/com/atproto/repo";
+import { RichTextBlocks } from "./richtext/richtext";
 
 export type Post = {
   author: Profile;
   uri: AtUriString;
   cid: CidString;
   text: string;
+  content: RichTextBlocks;
 
   reblog?: {
     root: strongRef.Main;
diff --git a/src/lib/query/feed.ts b/src/lib/query/feed.ts
index e0225c4..e243b35 100644
--- a/src/lib/query/feed.ts
+++ b/src/lib/query/feed.ts
@@ -22,6 +22,7 @@ function parsePost(
     uri: uri,
     cid: cid,
     text: record.text ?? "",
+    content: record.content ?? [],
     reblog: record.reblog
       ? {
           root: record.reblog.root,
diff --git a/src/lib/richtext/render.tsx b/src/lib/richtext/render.tsx
index 7936a74..35d228d 100644
--- a/src/lib/richtext/render.tsx
+++ b/src/lib/richtext/render.tsx
@@ -1,3 +1,31 @@
-export default function RichTextBody() {
+import { ReactElement, useCallback } from "react";
+import { RichTextBlocks, RichTextFacet } from "./richtext";
+import { dev } from "@/src/lexicons";
+import { Text } from "@/src/components/primitive/Text";
 
-}
\ No newline at end of file
+function TextBlock({ text, format, facets }: { text: string, format?: string, facets?: RichTextFacet[] }) {
+  return <Text>{text}</Text>
+}
+
+function renderRichText(richTextBlocks: RichTextBlocks) {
+  const paragraphs: ReactElement[] = []
+
+  for (const [i, block] of richTextBlocks.entries()) {
+    if (block.$type === "dev.maelstrom.bramblr.richtext.block#text") {
+      const textBlock = block as dev.maelstrom.bramblr.richtext.block.Text
+      paragraphs.push(<TextBlock key={i} text={textBlock.text} format={textBlock.format} facets={textBlock.facets} />)
+    }
+  }
+
+  return paragraphs
+}
+
+export default function RichTextBody({
+  richText,
+}: {
+  richText: RichTextBlocks;
+}) {
+  const render = useCallback(() => renderRichText(richText), [richText]);
+
+  return <>{render()}</>;
+}
diff --git a/src/lib/richtext/richtext.ts b/src/lib/richtext/richtext.ts
new file mode 100644
index 0000000..a540687
--- /dev/null
+++ b/src/lib/richtext/richtext.ts
@@ -0,0 +1,4 @@
+import { dev } from "@/src/lexicons";
+
+export type RichTextBlocks = dev.maelstrom.bramblr.richtext.block.Content
+export type RichTextFacet = dev.maelstrom.bramblr.richtext.facet.Main
\ No newline at end of file
-- 
2.51.2