native: render interleaved content for notes

tloncorp · Jun 3, 2024 · 1af10ca · 1af10ca
1 parent a2be37d
commit 1af10ca
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/packages/shared/src/logic/utils.ts b/packages/shared/src/logic/utils.ts
@@ -268,13 +268,14 @@ export const extractContentTypes = (
   inlines: ub.Inline[];
   references: api.ContentReference[];
   blocks: ub.Block[];
+  story: api.PostContent;
 } => {
   const story = JSON.parse(content as string) as api.PostContent;
   const inlines = extractInlinesFromContent(story);
   const references = extractReferencesFromContent(story);
   const blocks = extractBlocksFromContent(story);
 
-  return { inlines, references, blocks };
+  return { inlines, references, blocks, story };
 };
 
 export const extractContentTypesFromPost = (
@@ -283,12 +284,13 @@ export const extractContentTypesFromPost = (
   inlines: ub.Inline[];
   references: api.ContentReference[];
   blocks: ub.Block[];
+  story: api.PostContent;
 } => {
-  const { inlines, references, blocks } = extractContentTypes(
+  const { inlines, references, blocks, story } = extractContentTypes(
     post.content as string
   );
 
-  return { inlines, references, blocks };
+  return { inlines, references, blocks, story };
 };
 
 export const isTextPost = (post: db.Post) => {

diff --git a/packages/ui/src/components/ContentRenderer.tsx b/packages/ui/src/components/ContentRenderer.tsx
@@ -717,7 +717,7 @@ LineRenderer.displayName = 'LineRenderer';
 
 export type PostViewMode = 'chat' | 'block' | 'note';
 
-export default function ChatContent({
+export default function ContentRenderer({
   post,
   shortened = false,
   isNotice = false,
@@ -736,7 +736,7 @@ export default function ChatContent({
   isEdited?: boolean;
   viewMode?: PostViewMode;
 }) {
-  const { inlines, blocks, references } = useMemo(
+  const { inlines, blocks, references, story } = useMemo(
     () => extractContentTypesFromPost(post),
     [post]
   );
@@ -790,6 +790,37 @@ export default function ChatContent({
     return null;
   }
 
+  if (post.type === 'note' && story) {
+    // Notes are always rendered with interleaved content
+
+    return (
+      <YStack width="100%">
+        {story.map((s, k) => {
+          if ('block' in s) {
+            return <BlockContent key={k} block={s.block} />;
+          }
+
+          if ('type' in s && s.type === 'reference') {
+            return <ContentReference key={k} reference={s} />;
+          }
+
+          if ('inline' in s) {
+            return (
+              <LineRenderer
+                key={k}
+                inlines={s.inline}
+                isNotice={isNotice}
+                onPressImage={onPressImage}
+                onLongPress={onLongPress}
+                viewMode={viewMode}
+              />
+            );
+          }
+        })}
+      </YStack>
+    );
+  }
+
   return (
     <YStack width="100%">
       {!shortened && references.length > 0 ? (