From 49fbdc9236c16fbc150d720070cbfa01c0d91793 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 25 Nov 2020 00:19:17 -0500
Subject: [PATCH] publish: snippets allow image previews

---
 pkg/interface/src/logic/lib/publish.ts                     | 2 +-
 .../src/views/apps/publish/components/NotePreview.tsx      | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/logic/lib/publish.ts b/pkg/interface/src/logic/lib/publish.ts
index fc8a1389b..fc9136a20 100644
--- a/pkg/interface/src/logic/lib/publish.ts
+++ b/pkg/interface/src/logic/lib/publish.ts
@@ -113,6 +113,6 @@ export function getComments(node: GraphNode): GraphNode {
 
 export function getSnippet(body: string) {
   const start = body.slice(0, body.indexOf('\n', 2));
-  return start === body ? start : `${start}...`;
+  return (start === body || start.startsWith("![")) ? start : `${start}...`;
 }
 
diff --git a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
index fc9a5cb83..e63221c6d 100644
--- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
@@ -3,7 +3,7 @@ import moment from "moment";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import ReactMarkdown from "react-markdown";
-import { Col, Box, Text } from "@tlon/indigo-react";
+import { Col, Box, Text, Image } from "@tlon/indigo-react";
 
 import { cite } from "~/logic/lib/util";
 import { Contact } from "~/types/contact-update";
@@ -67,7 +67,10 @@ export function NotePreview(props: NotePreviewProps) {
           <Text fontSize='14px'>
           <ReactMarkdown
             unwrapDisallowed
-            allowedTypes={["text", "root", "break", "paragraph"]}
+            allowedTypes={["text", "root", "break", "paragraph", "image"]}
+            renderers={{
+              image: (props) => <Image src={props.src} maxHeight='300px' style={{ objectFit: 'cover' }}/>
+            }}
             source={snippet}
           />
           </Text>