From 2949701c7fde2817980de01a8b7fc429da9a4a5a Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 14 Apr 2021 15:20:18 -0400
Subject: [PATCH 01/12] publish: tokenise content

Fixes urbit/landscape#284
---
 pkg/interface/src/logic/lib/publish.ts        | 26 ++++++-----
 .../views/apps/permalinks/TranscludedNode.tsx |  8 ++--
 .../apps/publish/components/EditPost.tsx      | 20 ++++++++-
 .../views/apps/publish/components/Note.tsx    | 23 +++-------
 .../components/Graph/GraphContentWide.tsx     |  6 ++-
 .../components/Graph/content/text.js          | 45 ++++++++++++++-----
 6 files changed, 83 insertions(+), 45 deletions(-)

diff --git a/pkg/interface/src/logic/lib/publish.ts b/pkg/interface/src/logic/lib/publish.ts
index ec2fc05fd..a64bfa4f9 100644
--- a/pkg/interface/src/logic/lib/publish.ts
+++ b/pkg/interface/src/logic/lib/publish.ts
@@ -3,6 +3,7 @@ import { buntPost } from '~/logic/lib/post';
 import { unixToDa } from '~/logic/lib/util';
 import { BigIntOrderedMap } from './BigIntOrderedMap';
 import bigInt, { BigInteger } from 'big-integer';
+import tokenizeMessage from './tokenizeMessage';
 
 export function newPost(
   title: string,
@@ -19,13 +20,15 @@ export function newPost(
     signatures: []
   };
 
+  const tokenisedBody = tokenizeMessage(body);
+
   const revContainer: Post = { ...root, index: root.index + '/1' };
   const commentsContainer = { ...root, index: root.index + '/2' };
 
   const firstRevision: Post = {
     ...revContainer,
     index: revContainer.index + '/1',
-    contents: [{ text: title }, { text: body }]
+    contents: [{ text: title }, ...tokenisedBody]
   };
 
   const nodes = {
@@ -54,11 +57,12 @@ export function newPost(
 
 export function editPost(rev: number, noteId: BigInteger, title: string, body: string) {
   const now = Date.now();
+  const tokenisedBody = tokenizeMessage(body);
   const newRev: Post = {
     author: `~${window.ship}`,
     index: `/${noteId.toString()}/1/${rev}`,
     'time-sent': now,
-    contents: [{ text: title }, { text: body }],
+    contents: [{ text: title }, ...tokenisedBody],
     hash: null,
     signatures: []
   };
@@ -72,7 +76,7 @@ export function editPost(rev: number, noteId: BigInteger, title: string, body: s
   return nodes;
 }
 
-export function getLatestRevision(node: GraphNode): [number, string, string, Post] {
+export function getLatestRevision(node: GraphNode): [number, string, any, Post] {
   const revs = node.children.get(bigInt(1));
   const empty = [1, '', '', buntPost()] as [number, string, string, Post];
   if(!revs) {
@@ -82,8 +86,9 @@ export function getLatestRevision(node: GraphNode): [number, string, string, Pos
   if(!rev) {
     return empty;
   }
-  const [title, body] = rev.post.contents as TextContent[];
-  return [revNum.toJSNumber(), title.text, body.text, rev.post];
+  const title = rev.post.contents[0];
+  const body = rev.post.contents.slice(1);
+  return [revNum.toJSNumber(), title.text, body, rev.post];
 }
 
 export function getLatestCommentRevision(node: GraphNode): [number, Post] {
@@ -106,10 +111,11 @@ export function getComments(node: GraphNode): GraphNode {
   return comments;
 }
 
-export function getSnippet(body: string) {
-  const newlineIdx = body.indexOf('\n', 2);
-  const end = newlineIdx > -1 ? newlineIdx : body.length;
-  const start = body.substr(0, end);
+export function getSnippet(body: any) {
+  const firstContent = Object.values(body[0])[0];
+  const newlineIdx = firstContent.indexOf('\n', 2);
+  const end = newlineIdx > -1 ? newlineIdx : firstContent.length;
+  const start = firstContent.substr(0, end);
 
-  return (start === body || start.startsWith('![')) ? start : `${start}...`;
+  return (start === firstContent || firstContent.startsWith('![')) ? start : `${start}...`;
 }
diff --git a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
index c84630ff7..49bc44519 100644
--- a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
+++ b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
@@ -31,7 +31,7 @@ function TranscludedLinkNode(props: {
         return <PermalinkEmbed transcluded={transcluded + 1} api={api} link={permalink} association={assoc} />
 
       }
-      
+
       return (
         <Box borderRadius="2" p="2" bg="scales.black05">
           <Anchor underline={false} target="_blank" color="black" href={link.url}>
@@ -113,7 +113,7 @@ function TranscludedPublishNode(props: {
           </Text>
           <Box p="2">
             <NotePreviewContent
-              snippet={getSnippet(post?.post.contents[1]?.text)}
+              snippet={getSnippet(post?.post.contents.slice(1))}
             />
           </Box>
         </Col>
@@ -200,8 +200,8 @@ export function TranscludedNode(props: {
       <TranscludedPost
         api={props.api}
         post={node.post}
-        group={group} 
-        transcluded={transcluded} 
+        group={group}
+        transcluded={transcluded}
       />)
       ;
     default:
diff --git a/pkg/interface/src/views/apps/publish/components/EditPost.tsx b/pkg/interface/src/views/apps/publish/components/EditPost.tsx
index dd73baa5b..64d96f3ec 100644
--- a/pkg/interface/src/views/apps/publish/components/EditPost.tsx
+++ b/pkg/interface/src/views/apps/publish/components/EditPost.tsx
@@ -9,6 +9,7 @@ import { PostFormSchema, PostForm } from './NoteForm';
 import GlobalApi from '~/logic/api/global';
 import { getLatestRevision, editPost } from '~/logic/lib/publish';
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
+import { referenceToPermalink } from '~/logic/lib/permalinks';
 
 interface EditPostProps {
   ship: string;
@@ -23,10 +24,27 @@ export function EditPost(props: EditPostProps & RouteComponentProps): ReactEleme
   const [revNum, title, body] = getLatestRevision(note);
   const location = useLocation();
 
+  let editContent = null;
+  editContent = body.reduce((val, curr) => {
+      if ('text' in curr) {
+        val = val + curr.text;
+      } else if ('mention' in curr) {
+        val = val + `~${curr.mention}`;
+      } else if ('url' in curr) {
+        val = val + curr.url;
+      } else if ('code' in curr) {
+        val = val + curr.code.expression;
+      } else if ('reference' in curr) {
+        val = `${val}${referenceToPermalink(curr).link}`;
+      }
+
+      return val;
+    }, '');
+
   const waiter = useWaitForProps(props);
   const initial: PostFormSchema = {
     title,
-    body
+    body: editContent
   };
 
   const onSubmit = async (
diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index 3383b60da..b346e5c5a 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Box, Text, Col, Anchor, Row, Action } from '@tlon/indigo-react';
-import ReactMarkdown from 'react-markdown';
+import { GraphContentWide } from "~/views/landscape/components/Graph/GraphContentWide";
 import bigInt from 'big-integer';
 
 import { Link, RouteComponentProps } from 'react-router-dom';
@@ -11,7 +11,7 @@ import GlobalApi from '~/logic/api/global';
 import { getLatestRevision, getComments } from '~/logic/lib/publish';
 import { roleForShip } from '~/logic/lib/group';
 import Author from '~/views/components/Author';
-import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
+import { Contacts, GraphNode, Graph, Association, Unreads, Group, Post } from '@urbit/api';
 import {useCopy} from '~/logic/lib/useCopy';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
 import {useQuery} from '~/logic/lib/useQuery';
@@ -28,22 +28,11 @@ interface NoteProps {
   group: Group;
 }
 
-const renderers = {
-  link: ({ href, children }) => {
-    return (
-      <Anchor display="inline" target="_blank" href={href}>{children}</Anchor>
-    )
-  }
-};
-
-export function NoteContent({ body }) {
+export function NoteContent({ body, api }) {
+  const post = { contents: Object.values(body) };
   return (
-
-      <Box color="black" className="md" style={{ overflowWrap: 'break-word', overflow: 'hidden' }}>
-        <ReactMarkdown source={body} linkTarget={'_blank'} renderers={renderers} />
-      </Box>
+        <GraphContentWide transcluded={0} post={post} api={api} showOurContact={false} allowHeaders allowLists />
   );
-
 }
 
 export function Note(props: NoteProps & RouteComponentProps) {
@@ -126,7 +115,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
           </Author>
         </Row>
       </Col>
-      <NoteContent body={body} />
+      <NoteContent body={body} api={api} />
       <NoteNavigation
         notebook={notebook}
         noteId={noteId}
diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx
index c4eb5ae49..21080913a 100644
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx
@@ -17,9 +17,11 @@ function GraphContentWideInner(
     post: Post;
     api: GlobalApi;
     showOurContact: boolean;
+    allowHeaders?: boolean;
+    allowLists?: boolean;
   } & PropFunc<typeof Box>
 ) {
-  const { post, transcluded = 0, showOurContact, api, ...rest } = props;
+  const { post, transcluded = 0, showOurContact, api, allowHeaders, allowLists, ...rest } = props;
 
   return (
     <Box {...rest}>
@@ -33,6 +35,8 @@ function GraphContentWideInner(
                 fontSize={1}
                 lineHeight={"20px"}
                 content={content}
+                allowHeaders={allowHeaders}
+                allowLists={allowLists}
               />
             );
           case "code":
diff --git a/pkg/interface/src/views/landscape/components/Graph/content/text.js b/pkg/interface/src/views/landscape/components/Graph/content/text.js
index 2254704a6..faa83fb22 100644
--- a/pkg/interface/src/views/landscape/components/Graph/content/text.js
+++ b/pkg/interface/src/views/landscape/components/Graph/content/text.js
@@ -77,20 +77,38 @@ const renderers = {
   },
   link: (props) => {
     return <Anchor src={props.href} borderBottom="1" color="black">{props.children}</Anchor>
+  },
+  list: ({depth, children}) => {
+    return <Text my='2' display='block' fontSize='1' ml={depth ? (2 * depth) : 0} lineHeight={'20px'}>{children}</Text>
   }
 };
 
 const MessageMarkdown = React.memo((props) => {
-  const { source, ...rest } = props;
+  const { source, allowHeaders, allowLists, ...rest } = props;
   const blockCode = source.split('```');
   const codeLines = blockCode.map((codes) => codes.split('\n'));
-  const lines = codeLines.reduce((acc, val, i) => {
-    if (i % 2 === 1) {
-      return [...acc, `\`\`\`${val.join('\n')}\`\`\``];
-    } else {
-      return [...acc, ...val];
+  let lines = [];
+  if (allowLists) {
+    lines.push(source);
+  } else {
+    lines = codeLines.reduce((acc, val, i) => {
+        if (i % 2 === 1) {
+          return [...acc, `\`\`\`${val.join('\n')}\`\`\``];
+        } else {
+          return [...acc, ...val];
+        }
+      }, []);
+  }
+
+  const modifiedBlockTokens = DISABLED_BLOCK_TOKENS.filter(e => {
+    if (allowHeaders && allowLists) {
+      return (e in ["setextHeading", "atxHeading", "list"])
+    } else if (allowHeaders) {
+      return (e in ["setextHeading", "atxHeading"])
+    } else if (allowLists) {
+      return (e  === "list")
     }
-  }, []);
+  })
 
   return lines.map((line, i) => (
     <React.Fragment key={i}>
@@ -119,7 +137,7 @@ const MessageMarkdown = React.memo((props) => {
           [
             RemarkDisableTokenizers,
             {
-              block: DISABLED_BLOCK_TOKENS,
+              block: modifiedBlockTokens,
               inline: DISABLED_INLINE_TOKENS
             }
           ]
@@ -131,23 +149,26 @@ const MessageMarkdown = React.memo((props) => {
 
 export default function TextContent(props) {
   const content = props.content;
+  const allowHeaders = props.allowHeaders;
+  const allowLists = props.allowLists;
 
-  const group = content.text.match(
+  const group = content.text.trim().match(
     /([~][/])?(~[a-z]{3,6})(-[a-z]{6})?([/])(([a-z0-9-])+([/-])?)+/
   );
   const isGroupLink =
     group !== null && // matched possible chatroom
     group[2].length > 2 && // possible ship?
     urbitOb.isValidPatp(group[2]) && // valid patp?
-    group[0] === content.text; // entire message is room name?
+    group[0] === content.text.trim(); // entire message is room name?
 
   if (isGroupLink) {
-    const resource = `/ship/${content.text}`;
+    const resource = `/ship/${content.text.trim()}`;
     return (
       <GroupLink
         resource={resource}
         api={props.api}
         pl='2'
+        my='2'
         border='1'
         borderRadius='2'
         borderColor='washedGray'
@@ -162,7 +183,7 @@ export default function TextContent(props) {
         lineHeight={props.lineHeight ? props.lineHeight : '20px'}
         style={{ overflowWrap: 'break-word' }}
       >
-        <MessageMarkdown source={content.text} />
+        <MessageMarkdown source={content.text} allowHeaders={allowHeaders} allowLists={allowLists} />
       </Text>
     );
   }

From f64d582a4ecfe74529db53c88c8e7695f78860ab Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 22 Apr 2021 18:53:42 +1000
Subject: [PATCH 02/12] tokeniseMessage: handle linebreaks correctly

---
 .../src/logic/lib/tokenizeMessage.js          | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/pkg/interface/src/logic/lib/tokenizeMessage.js b/pkg/interface/src/logic/lib/tokenizeMessage.js
index 0e9c12d59..fecb2d8f6 100644
--- a/pkg/interface/src/logic/lib/tokenizeMessage.js
+++ b/pkg/interface/src/logic/lib/tokenizeMessage.js
@@ -17,15 +17,15 @@ const isRef = (str) => {
 
 const tokenizeMessage = (text) => {
   let messages = [];
-  let message = [];
+  // by line
+  let currTextBlock = [];
   let isInCodeBlock = false;
   let endOfCodeBlock = false;
   text.split(/\r?\n/).forEach((line, index) => {
-    if (index !== 0) {
-      message.push('\n');
-    }
+    // by space
+    let currTextLine = [];
     // A line of backticks enters and exits a codeblock
-    if (line.startsWith('```')) {
+    if (line.trim().startsWith('```')) {
       // But we need to check if we've ended a codeblock
       endOfCodeBlock = isInCodeBlock;
       isInCodeBlock = (!isInCodeBlock);
@@ -34,9 +34,11 @@ const tokenizeMessage = (text) => {
     }
 
     if (isInCodeBlock || endOfCodeBlock) {
-      message.push(line);
+      currTextLine = [line];
     } else {
-      line.split(/\s/).forEach((str) => {
+      const words = line.split(/\s/);
+      words.forEach((str, idx) => {
+        const last = words.length - 1 === idx;
         if (
           (str.startsWith('`') && str !== '`')
           || (str === '`' && !isInCodeBlock)
@@ -50,9 +52,12 @@ const tokenizeMessage = (text) => {
         }
 
         if(isRef(str) && !isInCodeBlock) {
-          if (message.length > 0) {
+          if (currTextLine.length > 0 || currTextBlock.length > 0) {
             // If we're in the middle of a message, add it to the stack and reset
-            messages.push({ text: message.join(' ') });
+            currTextLine.push('');
+            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
+            currTextBlock = last ? [''] : [];
+            currTextLine = [];
           }
           const link = parsePermalink(str);
           if(!link) {
@@ -61,34 +66,39 @@ const tokenizeMessage = (text) => {
             const reference = permalinkToReference(link);
             messages.push(reference);
           }
-          message = [];
+          currTextLine = [];
         } else if (isUrl(str) && !isInCodeBlock) {
-          if (message.length > 0) {
+          if (currTextLine.length > 0 || currTextBlock.length > 0) {
             // If we're in the middle of a message, add it to the stack and reset
-            messages.push({ text: message.join(' ') });
-            message = [];
+            currTextLine.push('');
+            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
+            currTextBlock = last ? [''] : [];
+            currTextLine = [];
           }
           messages.push({ url: str });
-          message = [];
+          currTextLine = [];
         } else if(urbitOb.isValidPatp(str) && !isInCodeBlock) {
-          if (message.length > 0) {
+          if (currTextLine.length > 0 || currTextBlock.length > 0) {
             // If we're in the middle of a message, add it to the stack and reset
-            messages.push({ text: message.join(' ') });
-            message = [];
+            currTextLine.push('');
+            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
+            currTextBlock = last ? [''] : [];
+            currTextLine = [];
           }
           messages.push({ mention: str });
-          message = [];
+          currTextLine = [];
 
         } else {
-          message.push(str);
+          currTextLine.push(str);
         }
       });
     }
+    currTextBlock.push(currTextLine.join(' '))
   });
 
-  if (message.length) {
+  if (currTextBlock.length) {
     // Add any remaining message
-    messages.push({ text: message.join(' ') });
+    messages.push({ text: currTextBlock.join('\n') });
   }
   return messages;
 };

From d8c721a4cc94174b1e130b136f0cd4dd5743ac2d Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 22 Apr 2021 18:58:04 +1000
Subject: [PATCH 03/12] publish: add GraphContentTall and use for notes

---
 pkg/interface/package.json                    |   1 +
 .../views/apps/publish/components/Note.tsx    |  18 +-
 .../components/Graph/GraphContentTall.tsx     | 361 ++++++++++++++++++
 3 files changed, 376 insertions(+), 4 deletions(-)
 create mode 100644 pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index ae2d1129c..d5ae7c51a 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -24,6 +24,7 @@
     "immer": "^8.0.1",
     "lodash": "^4.17.20",
     "markdown-to-jsx": "^6.11.4",
+    "mdast-util-from-markdown": "^0.8.5",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
     "mousetrap-global-bind": "^1.1.0",
diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index b346e5c5a..876dc1cb8 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -15,6 +15,7 @@ import { Contacts, GraphNode, Graph, Association, Unreads, Group, Post } from '@
 import {useCopy} from '~/logic/lib/useCopy';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
 import {useQuery} from '~/logic/lib/useQuery';
+import {GraphContentTall} from '~/views/landscape/components/Graph/GraphContentTall';
 
 interface NoteProps {
   ship: string;
@@ -28,10 +29,19 @@ interface NoteProps {
   group: Group;
 }
 
-export function NoteContent({ body, api }) {
-  const post = { contents: Object.values(body) };
+const renderers = {
+  link: ({ href, children }) => {
+    return (
+      <Anchor display="inline" target="_blank" href={href}>{children}</Anchor>
+    )
+  }
+};
+
+export function NoteContent({ post, api }) {
   return (
-        <GraphContentWide transcluded={0} post={post} api={api} showOurContact={false} allowHeaders allowLists />
+      <Box color="black" className="md" style={{ overflowWrap: 'break-word', overflow: 'hidden' }}>
+        <GraphContentTall post={post} showOurContact api={api} />
+      </Box>
   );
 }
 
@@ -115,7 +125,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
           </Author>
         </Row>
       </Col>
-      <NoteContent body={body} api={api} />
+      <NoteContent api={props.api} post={post} />
       <NoteNavigation
         notebook={notebook}
         noteId={noteId}
diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
new file mode 100644
index 000000000..7689e7018
--- /dev/null
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
@@ -0,0 +1,361 @@
+import React from 'react';
+import _ from 'lodash';
+import { Post, Content, ReferenceContent } from '@urbit/api';
+import {
+  Box,
+  Text,
+  Anchor,
+  H1,
+  H2,
+  H3,
+  H4,
+  Row,
+  Col,
+} from '@tlon/indigo-react';
+
+import GlobalApi from '~/logic/api/global';
+import TextContent from './content/text';
+import CodeContent from './content/code';
+import RemoteContent from '~/views/components/RemoteContent';
+import { Mention } from '~/views/components/MentionText';
+import { PermalinkEmbed } from '~/views/apps/permalinks/embed';
+import { referenceToPermalink } from '~/logic/lib/permalinks';
+import { GraphContentWide } from './GraphContentWide';
+import { PropFunc } from '~/types';
+import fromMarkdown from 'mdast-util-from-markdown';
+import Dot from '~/views/components/Dot';
+import { Root, Parent, Content as AstContent, BlockContent } from '@types/mdast';
+
+type StitchMode = 'merge' | 'block' | 'inline';
+
+// XX make better
+type GraphAstNode = any;
+
+interface GraphMentionNode {
+  type: 'graph-mention';
+  ship: string;
+}
+interface GraphRefereceNode {
+  type: 'graph-reference';
+  reference: ReferenceContent;
+}
+
+interface GraphUrl {
+  type: 'graph-url';
+  url: string;
+}
+
+function contentToMdAst(content: Content): [StitchMode, any] {
+  if ('text' in content) {
+    return ['merge', fromMarkdown(content.text)];
+  } else if ('code' in content) {
+    return [
+      'block',
+      fromMarkdown(`
+      \`\`\`
+      ${content.code.expression}
+      ${(content.code.output || []).join('\n')}
+      \`\`\`
+    `),
+    ];
+  } else if ('reference' in content) {
+    return [
+      'block',
+      {
+        type: 'root',
+        children: [
+          {
+            type: 'graph-reference',
+            reference: content.reference,
+          },
+        ],
+      },
+    ];
+  } else if ('url' in content) {
+    return [
+      'block',
+      {
+        type: 'root',
+        children: [
+          {
+            type: 'graph-url',
+            url: content.url,
+          },
+        ],
+      },
+    ];
+  } else if ('mention' in content) {
+    return [
+      'inline',
+      {
+        type: 'root',
+        children: [
+          {
+            type: 'graph-mention',
+            ship: content.mention,
+          },
+        ],
+      },
+    ];
+  }
+  return [
+    'inline',
+    {
+      type: 'root',
+      children: [],
+    },
+  ];
+}
+
+function stitchInline(a: any, b: any) {
+  if (!a?.children) {
+    throw new Error('Bad stitchInline call: missing root');
+  }
+  const lastParaIdx = a.children.length - 1;
+  const last = a.children[lastParaIdx];
+  if (last?.children) {
+    const ros = {
+      ...a,
+      children: [
+        ...a.children.slice(0, lastParaIdx),
+        stitchInline(last, b),
+        ...a.children.slice(lastParaIdx + 1),
+      ],
+    };
+    //console.log(ros);
+    return ros;
+  }
+  const res = { ...a, children: [...a.children, ...b] };
+  //console.log(res);
+  return res;
+}
+
+function last<T>(arr: T[]) {
+  return arr[arr.length - 1];
+}
+
+function getChildren<T extends any>(node: T): AstContent[] {
+  if ('children' in node) {
+    // @ts-ignore
+    return node.children;
+  }
+  return [];
+}
+
+export function asParent<T extends BlockContent>(node: T): Parent | undefined {
+  return ['paragraph', 'heading', 'list', 'listItem', 'table'].includes(
+    node.type
+  )
+    ? (node as Parent)
+    : undefined;
+}
+
+function stitchMerge(a: Root, b: Root) {
+  const aChildren = a.children;
+  const bChildren = b.children;
+  if (last(aChildren)?.type === bChildren[0]?.type) {
+    const aGrandchild = getChildren(last(aChildren));
+    const bGrandchild = getChildren(bChildren[0]);
+    const mergedPara = {
+      ...last(aChildren),
+      children: [...aGrandchild, ...bGrandchild],
+    };
+    return {
+      ...a,
+      children: [...aChildren.slice(0, -1), mergedPara, ...bChildren.slice(1)],
+    };
+  }
+  return { ...a, children: [...aChildren, ...bChildren] };
+}
+
+function stitchBlock(a: Root, b: AstContent[]) {
+  return { ...a, children: [...a.children, ...b] };
+}
+
+function stitchInlineAfterBlock(a: Root, b: GraphMentionNode[]) {
+  return {
+    ...a,
+    children: [...a.children, { type: 'paragraph', children: b }],
+  };
+}
+
+function stitchAsts(asts: [StitchMode, GraphAstNode][]) {
+  return _.reduce(
+    asts.slice(1),
+    ([prevMode, ast], [mode, val]): [StitchMode, GraphAstNode] => {
+      if (prevMode === 'block') {
+        if (mode === 'inline') {
+          return [mode, stitchInlineAfterBlock(ast, val?.children ?? [])];
+        }
+        if (mode === 'merge') {
+          return [mode, stitchBlock(ast, val?.children ?? [])];
+        }
+        if (mode === 'block') {
+          return [mode, stitchBlock(ast, val?.children ?? [])];
+        }
+      }
+      if (mode === 'inline') {
+        return [mode, stitchInline(ast, val?.children ?? [])];
+      }
+      if (mode === 'merge') {
+        return [mode, stitchMerge(ast, val)];
+      }
+      if (mode === 'block') {
+        return [mode, stitchBlock(ast, val?.children ?? [])];
+      }
+      return [mode, ast];
+    },
+    asts[0]
+  );
+}
+const header = ({ children, depth, ...rest }) => {
+  const level = depth;
+  const inner =
+    level === 1 ? (
+      <H1>{children}</H1>
+    ) : level === 2 ? (
+      <H2>{children}</H2>
+    ) : level === 3 ? (
+      <H3>{children}</H3>
+    ) : (
+      <H4>{children}</H4>
+    );
+  return (
+    <Box {...rest} mt="2" mb="4">
+      {inner}
+    </Box>
+  );
+};
+
+const tall = true;
+
+const renderers = {
+  heading: header,
+  inlineCode: ({ language, value }) => {
+    return (
+      <Text
+        mono
+        p="1"
+        backgroundColor="washedGray"
+        fontSize="0"
+        style={{ whiteSpace: 'pre-wrap' }}
+      >
+        {value}
+      </Text>
+    );
+  },
+
+  blockquote: ({ children }) => {
+    return (
+      <Text
+        lineHeight="20px"
+        display="block"
+        borderLeft="1px solid"
+        color="black"
+        paddingLeft={2}
+      >
+        {children}
+      </Text>
+    );
+  },
+  paragraph: ({ children }) => {
+    return (
+      <Text fontSize="1" lineHeight={'20px'}>
+        {children}
+      </Text>
+    );
+  },
+  listItem: ({ children }) => {
+    return (
+      <Box position="relative" alignItems="center">
+        <Dot
+          top="7px"
+          position="absolute"
+          left="0px"
+          mr="1"
+          height="20px"
+          width="20px"
+        />
+        <Box ml="2">{children}</Box>
+      </Box>
+    );
+  },
+
+  code: ({ language, value }) => {
+    const inner = (
+      <Text
+        p="1"
+        className="clamp-message"
+        display="block"
+        borderRadius="1"
+        mono
+        fontSize="0"
+        backgroundColor="washedGray"
+        overflowX="auto"
+        style={{ whiteSpace: 'pre' }}
+      >
+        {value}
+      </Text>
+    );
+    return tall ? <Box mb="2">{inner}</Box> : inner;
+  },
+  link: (props) => {
+    return (
+      <Anchor href={props.href} borderBottom="1" color="black">
+        {props.children}
+      </Anchor>
+    );
+  },
+  list: ({ depth, children }) => {
+    return (
+      <Col ml="3" gapY="2" my="2">
+        {children}
+      </Col>
+    );
+  },
+  'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />,
+  'graph-url': ({ url }) => (
+    <Box my="2" flexShrink={0}>
+      <RemoteContent key={url} url={url} />
+    </Box>
+  ),
+  'graph-reference': ({ api, reference }) => {
+    const { link } = referenceToPermalink({ reference });
+    return (
+      <PermalinkEmbed api={api} link={link} transcluded={0} showOurContact />
+    );
+  },
+  root: ({ children }) => <Col gapY="2">{children}</Col>,
+  text: ({ value }) => value,
+};
+
+export function Graphdown<T extends {} = {}>(
+  props: {
+    ast: GraphAstNode;
+  } & T
+) {
+  const { ast, ...rest } = props;
+  const { type, children = [], ...nodeRest } = ast;
+  const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`);
+
+  return (
+    <Renderer {...rest} {...nodeRest}>
+      {children.map((c) => (
+        <Graphdown {...rest} ast={c} />
+      ))}
+    </Renderer>
+  );
+}
+
+export function GraphContentTall(
+  props: {
+    transcluded?: number;
+    post: Post;
+    api: GlobalApi;
+    showOurContact: boolean;
+  } & PropFunc<typeof Box>
+) {
+  const { post, transcluded = 0, showOurContact, api, ...rest } = props;
+  const [, ast] = stitchAsts(post.contents.slice(1).map(contentToMdAst));
+  return <Graphdown api={api} ast={ast} />;
+}

From 6c5d13bce01e8edb95a4a9e3b33e64a3f87e9d70 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 22 Apr 2021 18:58:46 +1000
Subject: [PATCH 04/12] publish: bin custom markdown css

---
 .../src/views/apps/publish/css/custom.css     | 40 -------------------
 1 file changed, 40 deletions(-)

diff --git a/pkg/interface/src/views/apps/publish/css/custom.css b/pkg/interface/src/views/apps/publish/css/custom.css
index 4b2270665..5c11ec709 100644
--- a/pkg/interface/src/views/apps/publish/css/custom.css
+++ b/pkg/interface/src/views/apps/publish/css/custom.css
@@ -137,46 +137,6 @@
   display: none;
 }
 
-.md h1, .md h2, .md h3, .md h4, .md h5, .md p, .md a, .md ul, .md ol, .md blockquote,.md code,.md pre {
-  font-size: 14px;
-  margin-bottom: 16px;
-}
-
-.md ul ul {
-  margin-bottom: 0px;
-}
-
-.md h2, .md h3, .md h4, .md h5, .md p, .md a, .md ul {
-  font-weight: 400;
-}
-
-.md h1 {
-  font-weight: 600;
-}
-
-.md h2, .md h3, .md h4, .md h5 {
-  color:var(--gray);
-}
-
-.md {
-  line-height: 1.5;
-}
-.md code, .md pre {
-  font-family: "Source Code Pro", mono;
-  white-space: pre-wrap;
-}
-.md ul>li, .md ol>li {
-  line-height: 1.5;
-}
-.md a {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-
-.md img {
-  margin-bottom: 8px;
-}
-
 @media all and (prefers-color-scheme: dark) {
   .options.open {
     background-color: #4d4d4d;

From c74ad3170e991f27860452b5df1f269a478532ce Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 29 Apr 2021 14:12:15 +1000
Subject: [PATCH 05/12] GraphContent: unify rendering

---
 .../components/Graph/GraphContentTall.tsx     | 86 +++++++++++++------
 .../views/landscape/components/Graph/parse.ts | 33 +++++++
 2 files changed, 93 insertions(+), 26 deletions(-)
 create mode 100644 pkg/interface/src/views/landscape/components/Graph/parse.ts

diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
index 7689e7018..614f85d2b 100644
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
@@ -24,7 +24,13 @@ import { GraphContentWide } from './GraphContentWide';
 import { PropFunc } from '~/types';
 import fromMarkdown from 'mdast-util-from-markdown';
 import Dot from '~/views/components/Dot';
-import { Root, Parent, Content as AstContent, BlockContent } from '@types/mdast';
+import {
+  Root,
+  Parent,
+  Content as AstContent,
+  BlockContent,
+} from '@types/mdast';
+import { parseTall, parseWide } from './parse';
 
 type StitchMode = 'merge' | 'block' | 'inline';
 
@@ -44,19 +50,33 @@ interface GraphUrl {
   type: 'graph-url';
   url: string;
 }
+const codeToMdAst = (content: CodeContent) => {
+  return {
+    type: 'root',
+    children: [
+      {
+        type: 'code',
+        value: content.code.expression
+      },
+      {
+        type: 'code',
+        value: (content.code.output || []).join('\n')
+      }
+    ]
+  };
+      
 
-function contentToMdAst(content: Content): [StitchMode, any] {
+}
+
+const contentToMdAst = (tall: boolean) => (
+  content: Content
+): [StitchMode, any] => {
   if ('text' in content) {
-    return ['merge', fromMarkdown(content.text)];
+    return ['merge', tall ? parseTall(content.text) : parseWide(content.text)] as [StitchMode, any];
   } else if ('code' in content) {
     return [
       'block',
-      fromMarkdown(`
-      \`\`\`
-      ${content.code.expression}
-      ${(content.code.output || []).join('\n')}
-      \`\`\`
-    `),
+      codeToMdAst(content)
     ];
   } else if ('reference' in content) {
     return [
@@ -105,7 +125,7 @@ function contentToMdAst(content: Content): [StitchMode, any] {
       children: [],
     },
   ];
-}
+};
 
 function stitchInline(a: any, b: any) {
   if (!a?.children) {
@@ -122,11 +142,9 @@ function stitchInline(a: any, b: any) {
         ...a.children.slice(lastParaIdx + 1),
       ],
     };
-    //console.log(ros);
     return ros;
   }
   const res = { ...a, children: [...a.children, ...b] };
-  //console.log(res);
   return res;
 }
 
@@ -134,7 +152,7 @@ function last<T>(arr: T[]) {
   return arr[arr.length - 1];
 }
 
-function getChildren<T extends any>(node: T): AstContent[] {
+function getChildren<T extends {}>(node: T): AstContent[] {
   if ('children' in node) {
     // @ts-ignore
     return node.children;
@@ -227,8 +245,6 @@ const header = ({ children, depth, ...rest }) => {
   );
 };
 
-const tall = true;
-
 const renderers = {
   heading: header,
   inlineCode: ({ language, value }) => {
@@ -245,7 +261,7 @@ const renderers = {
     );
   },
 
-  blockquote: ({ children }) => {
+  blockquote: ({ children, tall, ...rest }) => {
     return (
       <Text
         lineHeight="20px"
@@ -253,6 +269,7 @@ const renderers = {
         borderLeft="1px solid"
         color="black"
         paddingLeft={2}
+        py="1"
       >
         {children}
       </Text>
@@ -281,7 +298,8 @@ const renderers = {
     );
   },
 
-  code: ({ language, value }) => {
+  code: ({ language, tall, value, ...rest }) => {
+    console.log(rest);
     const inner = (
       <Text
         p="1"
@@ -332,30 +350,46 @@ const renderers = {
 export function Graphdown<T extends {} = {}>(
   props: {
     ast: GraphAstNode;
+    tall?: boolean;
+    depth?: number;
   } & T
 ) {
-  const { ast, ...rest } = props;
+  const { ast, depth = 0, ...rest } = props;
   const { type, children = [], ...nodeRest } = ast;
   const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`);
 
   return (
-    <Renderer {...rest} {...nodeRest}>
+    <Renderer depth={depth} {...rest} {...nodeRest}>
       {children.map((c) => (
-        <Graphdown {...rest} ast={c} />
+        <Graphdown depth={depth+1} {...rest} ast={c} />
       ))}
     </Renderer>
   );
 }
 
-export function GraphContentTall(
+export const GraphContent = React.memo(function GraphContent(
   props: {
+    tall?: boolean;
     transcluded?: number;
-    post: Post;
+    contents: Content[];
     api: GlobalApi;
     showOurContact: boolean;
   } & PropFunc<typeof Box>
 ) {
-  const { post, transcluded = 0, showOurContact, api, ...rest } = props;
-  const [, ast] = stitchAsts(post.contents.slice(1).map(contentToMdAst));
-  return <Graphdown api={api} ast={ast} />;
-}
+  const {
+    post,
+    contents,
+    tall = false,
+    transcluded = 0,
+    showOurContact,
+    api,
+    ...rest
+  } = props;
+  const [,ast] = stitchAsts(contents.map(contentToMdAst(tall)));
+  return (
+    <Box {...rest}>
+      <Graphdown api={api} ast={ast} />
+    </Box>
+  );
+});
+
diff --git a/pkg/interface/src/views/landscape/components/Graph/parse.ts b/pkg/interface/src/views/landscape/components/Graph/parse.ts
new file mode 100644
index 000000000..9633090e2
--- /dev/null
+++ b/pkg/interface/src/views/landscape/components/Graph/parse.ts
@@ -0,0 +1,33 @@
+import remark from 'remark';
+import RemarkDisableTokenizers from 'remark-disable-tokenizers';
+
+const DISABLED_BLOCK_TOKENS = [
+  'indentedCode',
+  'atxHeading',
+  'thematicBreak',
+  'list',
+  'setextHeading',
+  'html',
+  'definition',
+  'table',
+];
+
+const DISABLED_INLINE_TOKENS = ['autoLink', 'url', 'email', 'reference'];
+
+const tallParser = remark().freeze();
+
+export const parseTall = (text: string) => tallParser.parse(text);
+
+const wideParser = remark()
+  .use([
+    [
+      RemarkDisableTokenizers,
+      {
+        block: DISABLED_BLOCK_TOKENS,
+        inline: DISABLED_INLINE_TOKENS,
+      },
+    ],
+  ])
+  .freeze();
+
+export const parseWide = (text: string) => wideParser.parse(text);

From 3cda34d0fa177c0853199fe74f44510e2476d778 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 29 Apr 2021 14:12:51 +1000
Subject: [PATCH 06/12] GraphContent: rename and cleanup

---
 ...{GraphContentTall.tsx => GraphContent.tsx} |  0
 .../components/Graph/GraphContentWide.tsx     | 86 -------------------
 2 files changed, 86 deletions(-)
 rename pkg/interface/src/views/landscape/components/Graph/{GraphContentTall.tsx => GraphContent.tsx} (100%)
 delete mode 100644 pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx

diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
similarity index 100%
rename from pkg/interface/src/views/landscape/components/Graph/GraphContentTall.tsx
rename to pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx
deleted file mode 100644
index 21080913a..000000000
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import { Post, ReferenceContent } from "@urbit/api";
-import { Box } from "@tlon/indigo-react";
-
-import GlobalApi from "~/logic/api/global";
-import TextContent from "./content/text";
-import CodeContent from "./content/code";
-import RemoteContent from "~/views/components/RemoteContent";
-import { Mention } from "~/views/components/MentionText";
-import { PermalinkEmbed } from "~/views/apps/permalinks/embed";
-import { referenceToPermalink } from "~/logic/lib/permalinks";
-import { PropFunc } from "~/types";
-
-function GraphContentWideInner(
-  props: {
-    transcluded?: number;
-    post: Post;
-    api: GlobalApi;
-    showOurContact: boolean;
-    allowHeaders?: boolean;
-    allowLists?: boolean;
-  } & PropFunc<typeof Box>
-) {
-  const { post, transcluded = 0, showOurContact, api, allowHeaders, allowLists, ...rest } = props;
-
-  return (
-    <Box {...rest}>
-      {post.contents.map((content, i) => {
-        switch (Object.keys(content)[0]) {
-          case "text":
-            return (
-              <TextContent
-                key={i}
-                api={api}
-                fontSize={1}
-                lineHeight={"20px"}
-                content={content}
-                allowHeaders={allowHeaders}
-                allowLists={allowLists}
-              />
-            );
-          case "code":
-            return <CodeContent key={i} content={content} />;
-          case "reference":
-            const { link } = referenceToPermalink(content as ReferenceContent);
-            return (
-              <PermalinkEmbed
-                link={link}
-                api={api}
-                transcluded={transcluded}
-                showOurContact={showOurContact}
-              />
-            );
-          case "url":
-            return (
-              <Box
-                key={i}
-                flexShrink={0}
-                fontSize={1}
-                lineHeight="20px"
-                color="black"
-                width="fit-content"
-                maxWidth="min(500px, 100%)"
-              >
-                <RemoteContent key={content.url} url={content.url} />
-              </Box>
-            );
-          case "mention":
-            const first = (i) => i === 0;
-            return (
-              <Mention
-                key={i}
-                first={first(i)}
-                ship={content.mention}
-                api={api}
-              />
-            );
-          default:
-            return null;
-        }
-      })}
-    </Box>
-  );
-}
-
-export const GraphContentWide = React.memo(GraphContentWideInner);

From 80a5612fdae12e78a92b415997cddd4a0acbbe2a Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 29 Apr 2021 14:19:30 +1000
Subject: [PATCH 07/12] interface: use new GraphContent

---
 .../src/views/apps/chat/components/ChatMessage.tsx          | 6 +++---
 pkg/interface/src/views/apps/publish/components/Note.tsx    | 4 ++--
 pkg/interface/src/views/components/CommentItem.tsx          | 6 +++---
 .../landscape/components/Home/Post/PostItem/PostContent.js  | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 306d221ef..be73292ee 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -42,7 +42,7 @@ import useContactState from '~/logic/state/contact';
 import { useIdlingState } from '~/logic/lib/idling';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
 import {useCopy} from '~/logic/lib/useCopy';
-import {GraphContentWide} from '~/views/landscape/components/Graph/GraphContentWide';
+import { GraphContent} from  '~/views/landscape/components/Graph/GraphContent';
 
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
@@ -530,10 +530,10 @@ export const Message = ({
       ) : (
         <></>
       )}
-      <GraphContentWide
+      <GraphContent
         {...bind}
         width="100%"
-        post={msg}
+        contents={msg.contents}
         transcluded={transcluded}
         api={api}
         showOurContact={showOurContact}
diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index 876dc1cb8..96e08b361 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -15,7 +15,7 @@ import { Contacts, GraphNode, Graph, Association, Unreads, Group, Post } from '@
 import {useCopy} from '~/logic/lib/useCopy';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
 import {useQuery} from '~/logic/lib/useQuery';
-import {GraphContentTall} from '~/views/landscape/components/Graph/GraphContentTall';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
 interface NoteProps {
   ship: string;
@@ -40,7 +40,7 @@ const renderers = {
 export function NoteContent({ post, api }) {
   return (
       <Box color="black" className="md" style={{ overflowWrap: 'break-word', overflow: 'hidden' }}>
-        <GraphContentTall post={post} showOurContact api={api} />
+        <GraphContent tall contents={post.contents.slice(1)} showOurContact api={api} />
       </Box>
   );
 }
diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx
index f65273189..e98780c39 100644
--- a/pkg/interface/src/views/components/CommentItem.tsx
+++ b/pkg/interface/src/views/components/CommentItem.tsx
@@ -15,7 +15,7 @@ import { getLatestCommentRevision } from '~/logic/lib/publish';
 import {useCopy} from '~/logic/lib/useCopy';
 import { getPermalinkForGraph} from '~/logic/lib/permalinks';
 import useMetadataState from '~/logic/state/metadata';
-import {GraphContentWide} from '../landscape/components/Graph/GraphContentWide';
+import {GraphContent } from '../landscape/components/Graph/GraphContent';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -102,14 +102,14 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           </Row>
         </Author>
       </Row>
-      <GraphContentWide
+      <GraphContent
         borderRadius="1"
         p="1"
         mb="1"
         backgroundColor={props.highlighted ? 'washedBlue' : 'white'}
         transcluded={0}
         api={api}
-        post={post}
+        contents={post.contents}
         showOurContact
       />
     </Box>
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
index 681e5dfc9..a9a19ff2b 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Col, Box } from '@tlon/indigo-react';
-import { GraphContentWide } from "~/views/landscape/components/Graph/GraphContentWide";
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import styled from 'styled-components';
 
 const TruncatedBox = styled(Col)`
@@ -23,9 +23,9 @@ export function PostContent(props) {
       textOverflow="ellipsis"
       overflow="hidden"
      >
-      <GraphContentWide
+      <GraphContent
         transcluded={0}
-        post={post}
+        contents={post.contents}
         api={api}
         showOurContact
       />

From 1735c1d6a5bea9d0ed174c41340a55ea3b01f958 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 29 Apr 2021 14:20:06 +1000
Subject: [PATCH 08/12] interface: update package.json

---
 pkg/interface/package.json | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index d5ae7c51a..925ac9359 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -23,8 +23,6 @@
     "formik": "^2.1.5",
     "immer": "^8.0.1",
     "lodash": "^4.17.20",
-    "markdown-to-jsx": "^6.11.4",
-    "mdast-util-from-markdown": "^0.8.5",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
     "mousetrap-global-bind": "^1.1.0",
@@ -36,18 +34,19 @@
     "react-codemirror2": "^6.0.1",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
-    "react-markdown": "^4.3.1",
     "react-oembed-container": "^1.0.0",
     "react-router-dom": "^5.2.0",
     "react-virtuoso": "^0.20.3",
     "react-visibility-sensor": "^5.1.1",
+    "remark": "^12.0.0",
     "remark-breaks": "^2.0.1",
-    "remark-disable-tokenizers": "^1.0.24",
+    "remark-disable-tokenizers": "1.1.0",
     "stacktrace-js": "^2.0.2",
     "style-loader": "^1.3.0",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "suncalc": "^1.8.0",
+    "unist-util-visit": "^3.0.0",
     "urbit-ob": "^5.0.1",
     "workbox-core": "^6.0.2",
     "workbox-precaching": "^6.0.2",

From 42be76b5c2b6b6bb67653b5d4f8936ab76920058 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 29 Apr 2021 14:22:25 +1000
Subject: [PATCH 09/12] publish: temporarily disable tokenizing publish

---
 pkg/interface/src/logic/lib/publish.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/logic/lib/publish.ts b/pkg/interface/src/logic/lib/publish.ts
index a64bfa4f9..1930edaca 100644
--- a/pkg/interface/src/logic/lib/publish.ts
+++ b/pkg/interface/src/logic/lib/publish.ts
@@ -20,7 +20,8 @@ export function newPost(
     signatures: []
   };
 
-  const tokenisedBody = tokenizeMessage(body);
+  // re-enable on mainnet deploy
+  //const tokenisedBody = tokenizeMessage(body);
 
   const revContainer: Post = { ...root, index: root.index + '/1' };
   const commentsContainer = { ...root, index: root.index + '/2' };
@@ -28,7 +29,8 @@ export function newPost(
   const firstRevision: Post = {
     ...revContainer,
     index: revContainer.index + '/1',
-    contents: [{ text: title }, ...tokenisedBody]
+    contents: [{ text: title }, { text: body }]
+    //contents: [{ text: title }, { text: body } ...tokenisedBody]
   };
 
   const nodes = {
@@ -57,12 +59,14 @@ export function newPost(
 
 export function editPost(rev: number, noteId: BigInteger, title: string, body: string) {
   const now = Date.now();
-  const tokenisedBody = tokenizeMessage(body);
+  // reenable
+  //const tokenisedBody = tokenizeMessage(body);
   const newRev: Post = {
     author: `~${window.ship}`,
     index: `/${noteId.toString()}/1/${rev}`,
     'time-sent': now,
-    contents: [{ text: title }, ...tokenisedBody],
+    //contents: [{ text: title }, ...tokenisedBody],
+    contents: [{ text: title }, { text: body }],
     hash: null,
     signatures: []
   };

From 0925d9a2013df9126bf30c9d4de9415181dfa8e8 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Wed, 5 May 2021 12:13:05 +1000
Subject: [PATCH 10/12] interface: fix dependencies

---
 pkg/interface/package-lock.json | 367 ++++++++++++++++++++++++++++----
 pkg/interface/package.json      |   1 +
 2 files changed, 324 insertions(+), 44 deletions(-)

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index eb9e97a95..d61ff87c9 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1606,6 +1606,11 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -2899,6 +2904,11 @@
       "integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==",
       "dev": true
     },
+    "ccount": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
+      "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg=="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2924,6 +2934,11 @@
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
       "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
     },
+    "character-entities-html4": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
+      "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g=="
+    },
     "character-entities-legacy": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
@@ -3745,9 +3760,9 @@
       }
     },
     "dom-serializer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
-      "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.1.tgz",
+      "integrity": "sha512-Pv2ZluG5ife96udGgEDovOOOA5UELkltfJpnIExPrAk1LTvecolUGn6lIaoLh86d83GiB86CjzciMd9BuRB71Q==",
       "requires": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.0.0",
@@ -3755,11 +3770,11 @@
       },
       "dependencies": {
         "domhandler": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
-          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
           "requires": {
-            "domelementtype": "^2.1.0"
+            "domelementtype": "^2.2.0"
           }
         }
       }
@@ -3777,9 +3792,9 @@
       "dev": true
     },
     "domelementtype": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
-      "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
     },
     "domhandler": {
       "version": "3.3.0",
@@ -3790,21 +3805,21 @@
       }
     },
     "domutils": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
-      "integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.6.0.tgz",
+      "integrity": "sha512-y0BezHuy4MDYxh6OvolXYsH+1EMGmFbwv5FKW7ovwMG6zTPWqNPq3WF9ayZssFq+UlKdffGLbOEaghNdaOm1WA==",
       "requires": {
         "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0"
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
       },
       "dependencies": {
         "domhandler": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
-          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
           "requires": {
-            "domelementtype": "^2.1.0"
+            "domelementtype": "^2.2.0"
           }
         }
       }
@@ -5742,6 +5757,11 @@
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
       "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
     },
+    "is-alphanumeric": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz",
+      "integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ="
+    },
     "is-alphanumerical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
@@ -6129,6 +6149,11 @@
       "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
       "dev": true
     },
+    "longest-streak": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
+      "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6184,13 +6209,12 @@
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
-    "markdown-to-jsx": {
-      "version": "6.11.4",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
-      "integrity": "sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==",
+    "markdown-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
+      "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
       "requires": {
-        "prop-types": "^15.6.2",
-        "unquote": "^1.1.0"
+        "repeat-string": "^1.0.0"
       }
     },
     "md5.js": {
@@ -6212,6 +6236,35 @@
         "unist-util-visit-parents": "1.1.2"
       }
     },
+    "mdast-util-compact": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz",
+      "integrity": "sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==",
+      "requires": {
+        "unist-util-visit": "^2.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+          "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+          "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0"
+          }
+        }
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7643,6 +7696,29 @@
         "unified": "^6.1.5",
         "unist-util-visit": "^1.3.0",
         "xtend": "^4.0.1"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+        },
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
       }
     },
     "react-oembed-container": {
@@ -7831,15 +7907,146 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remark": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.1.tgz",
+      "integrity": "sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==",
+      "requires": {
+        "remark-parse": "^8.0.0",
+        "remark-stringify": "^8.0.0",
+        "unified": "^9.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        },
+        "is-plain-obj": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
+        },
+        "parse-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+          "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+          "requires": {
+            "character-entities": "^1.0.0",
+            "character-entities-legacy": "^1.0.0",
+            "character-reference-invalid": "^1.0.0",
+            "is-alphanumerical": "^1.0.0",
+            "is-decimal": "^1.0.0",
+            "is-hexadecimal": "^1.0.0"
+          }
+        },
+        "remark-parse": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
+          "integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
+          "requires": {
+            "ccount": "^1.0.0",
+            "collapse-white-space": "^1.0.2",
+            "is-alphabetical": "^1.0.0",
+            "is-decimal": "^1.0.0",
+            "is-whitespace-character": "^1.0.0",
+            "is-word-character": "^1.0.0",
+            "markdown-escapes": "^1.0.0",
+            "parse-entities": "^2.0.0",
+            "repeat-string": "^1.5.4",
+            "state-toggle": "^1.0.0",
+            "trim": "0.0.1",
+            "trim-trailing-lines": "^1.0.0",
+            "unherit": "^1.0.4",
+            "unist-util-remove-position": "^2.0.0",
+            "vfile-location": "^3.0.0",
+            "xtend": "^4.0.1"
+          }
+        },
+        "unified": {
+          "version": "9.2.1",
+          "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.1.tgz",
+          "integrity": "sha512-juWjuI8Z4xFg8pJbnEZ41b5xjGUWGHqXALmBZ3FC3WX0PIx1CZBIIJ6mXbYMcf6Yw4Fi0rFUTA1cdz/BglbOhA==",
+          "requires": {
+            "bail": "^1.0.0",
+            "extend": "^3.0.0",
+            "is-buffer": "^2.0.0",
+            "is-plain-obj": "^2.0.0",
+            "trough": "^1.0.0",
+            "vfile": "^4.0.0"
+          }
+        },
+        "unist-util-remove-position": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
+          "integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
+          "requires": {
+            "unist-util-visit": "^2.0.0"
+          }
+        },
+        "unist-util-stringify-position": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+          "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+          "requires": {
+            "@types/unist": "^2.0.2"
+          }
+        },
+        "unist-util-visit": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+          "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+          "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0"
+          }
+        },
+        "vfile": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+          "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "is-buffer": "^2.0.0",
+            "unist-util-stringify-position": "^2.0.0",
+            "vfile-message": "^2.0.0"
+          }
+        },
+        "vfile-location": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
+          "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA=="
+        },
+        "vfile-message": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+          "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-stringify-position": "^2.0.0"
+          }
+        }
+      }
+    },
     "remark-breaks": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-2.0.1.tgz",
       "integrity": "sha512-CZKI8xdPUnvMqPxYEIBBUg8C0B0kyn14lkW0abzhfh/P71YRIxCC3wvBh6AejQL602OxF6kNRl1x4HAZA07JyQ=="
     },
     "remark-disable-tokenizers": {
-      "version": "1.0.24",
-      "resolved": "https://registry.npmjs.org/remark-disable-tokenizers/-/remark-disable-tokenizers-1.0.24.tgz",
-      "integrity": "sha512-HsAmBY5cNliHYAzba4zuskZzkDdp6sG+tRelDb4AoPo2YHNGHnxYsatShzTIsnRNLgCbsxycW5Ge6KigHn701A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remark-disable-tokenizers/-/remark-disable-tokenizers-1.1.0.tgz",
+      "integrity": "sha512-49cCg4uSVKVmDHWKT5w+2mpDQ3G+xvt/GjypOqjlS0qTSs6/aBxE3iNWgX6ls2upXY17EKVlU0UpGcZjmGWI6A==",
       "requires": {
         "clone": "^2.1.2"
       }
@@ -7866,6 +8073,42 @@
         "xtend": "^4.0.1"
       }
     },
+    "remark-stringify": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.1.1.tgz",
+      "integrity": "sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==",
+      "requires": {
+        "ccount": "^1.0.0",
+        "is-alphanumeric": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "longest-streak": "^2.0.1",
+        "markdown-escapes": "^1.0.0",
+        "markdown-table": "^2.0.0",
+        "mdast-util-compact": "^2.0.0",
+        "parse-entities": "^2.0.0",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "stringify-entities": "^3.0.0",
+        "unherit": "^1.0.4",
+        "xtend": "^4.0.1"
+      },
+      "dependencies": {
+        "parse-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+          "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+          "requires": {
+            "character-entities": "^1.0.0",
+            "character-entities-legacy": "^1.0.0",
+            "character-reference-invalid": "^1.0.0",
+            "is-alphanumerical": "^1.0.0",
+            "is-decimal": "^1.0.0",
+            "is-hexadecimal": "^1.0.0"
+          }
+        }
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -9001,6 +9244,16 @@
         }
       }
     },
+    "stringify-entities": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
+      "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
+      "requires": {
+        "character-entities-html4": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
@@ -9586,9 +9839,9 @@
       }
     },
     "unist-util-is": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+      "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="
     },
     "unist-util-remove-position": {
       "version": "1.1.4",
@@ -9596,6 +9849,29 @@
       "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
       "requires": {
         "unist-util-visit": "^1.1.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+        },
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
       }
     },
     "unist-util-stringify-position": {
@@ -9604,19 +9880,27 @@
       "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
     },
     "unist-util-visit": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.0.1.tgz",
+      "integrity": "sha512-DHyYg2LPkrzcdlhs2CJTWB1TWRRvah+CLiGjw5Ul9k13xPSEi+bK5EMFHVgSiyFNH2AS2/EinkWGZ05HKcXM1w==",
       "requires": {
-        "unist-util-visit-parents": "^2.0.0"
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^4.0.0"
       },
       "dependencies": {
+        "unist-util-is": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.0.0.tgz",
+          "integrity": "sha512-G4p13DhfdUNmlnJxd0uy5Skx1FG58LSDhX8h1xgpeSq0omOQ4ZN5BO54ToFlNX55NDTbRHMdwTOJXqAieInSEA=="
+        },
         "unist-util-visit-parents": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.0.0.tgz",
+          "integrity": "sha512-QyATSx30wHguIzI82+GVeuXGnFlh3AUVcyeZPOo5Paz2Z52zfRe3/0WLlBv6XlMWcr5xEdFqox6PteUL6hzEFA==",
           "requires": {
-            "unist-util-is": "^3.0.0"
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0"
           }
         }
       }
@@ -9632,11 +9916,6 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
-    "unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
-    },
     "unset-value": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-0.1.2.tgz",
diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 925ac9359..2a27ec096 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -34,6 +34,7 @@
     "react-codemirror2": "^6.0.1",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
+    "react-markdown": "^4.3.1",
     "react-oembed-container": "^1.0.0",
     "react-router-dom": "^5.2.0",
     "react-virtuoso": "^0.20.3",

From 6c653e7ab92185c27fff38c62926f937ae0d150c Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 6 May 2021 10:45:15 +1000
Subject: [PATCH 11/12] interface: fix merge errors

---
 pkg/interface/package-lock.json                      | 12 ++++++------
 .../src/views/apps/chat/components/ChatMessage.tsx   |  1 -
 pkg/interface/src/views/apps/notifications/graph.tsx |  4 ++--
 .../src/views/apps/permalinks/TranscludedNode.tsx    |  6 +++---
 .../src/views/apps/publish/components/Note.tsx       |  1 -
 .../components/Home/Post/PostItem/PostContent.tsx    |  6 +++---
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index 69f020b6c..2cf5c498c 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1966,7 +1966,7 @@
           "bundled": true
         },
         "onchange": {
-          "version": "https://registry.npmjs.org/onchange/-/onchange-7.1.0.tgz",
+          "version": "7.1.0",
           "bundled": true,
           "requires": {
             "@blakeembrey/deque": "^1.0.5",
@@ -2144,7 +2144,7 @@
           "bundled": true
         },
         "@typescript-eslint/eslint-plugin": {
-          "version": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.1.tgz",
+          "version": "4.22.1",
           "bundled": true,
           "requires": {
             "@typescript-eslint/experimental-utils": "4.22.1",
@@ -2170,7 +2170,7 @@
           }
         },
         "@typescript-eslint/parser": {
-          "version": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.22.1.tgz",
+          "version": "4.22.1",
           "bundled": true,
           "requires": {
             "@typescript-eslint/scope-manager": "4.22.1",
@@ -2245,7 +2245,7 @@
           }
         },
         "babel-eslint": {
-          "version": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+          "version": "10.1.0",
           "bundled": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
@@ -2377,7 +2377,7 @@
           "bundled": true
         },
         "eslint-plugin-react": {
-          "version": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz",
+          "version": "7.23.2",
           "bundled": true,
           "requires": {
             "array-includes": "^3.1.3",
@@ -2868,7 +2868,7 @@
           }
         },
         "typescript": {
-          "version": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
+          "version": "4.2.4",
           "bundled": true
         },
         "unbox-primitive": {
diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 1f6b1192d..32abc59cc 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -22,7 +22,6 @@ import useLocalState from '~/logic/state/local';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import { Dropdown } from '~/views/components/Dropdown';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
-import {useCopy} from '~/logic/lib/useCopy';
 import { GraphContent} from  '~/views/landscape/components/Graph/GraphContent';
 
 
diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx
index 202f3d3be..e8f8e8045 100644
--- a/pkg/interface/src/views/apps/notifications/graph.tsx
+++ b/pkg/interface/src/views/apps/notifications/graph.tsx
@@ -19,7 +19,7 @@ import {
   GraphNotificationContents, GraphNotifIndex
 } from '~/types';
 import Author from '~/views/components/Author';
-import { GraphContentWide } from '~/views/landscape/components/Graph/GraphContentWide';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import { PermalinkEmbed } from '../permalinks/embed';
 import { Header } from './header';
 
@@ -150,7 +150,7 @@ export const GraphNodeContent = ({ post, mod, index, hidden, association }) => {
   }
   return (
     <TruncBox truncate={8}>
-      <GraphContentWide api={{} as any} post={post} showOurContact />
+      <GraphContent api={{} as any} contents={post.contents} showOurContact />
     </TruncBox>
   );
 };
diff --git a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
index 9d58515c9..a2f219809 100644
--- a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
+++ b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
@@ -8,7 +8,7 @@ import { getSnippet } from '~/logic/lib/publish';
 import { useGroupForAssoc } from '~/logic/state/group';
 import Author from '~/views/components/Author';
 import { MentionText } from '~/views/components/MentionText';
-import { GraphContentWide } from '~/views/landscape/components/Graph/GraphContentWide';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import ChatMessage from '../chat/components/ChatMessage';
 import { NotePreviewContent } from '../publish/components/NotePreview';
 import { PermalinkEmbed } from './embed';
@@ -72,10 +72,10 @@ function TranscludedComment(props: {
         group={group}
       />
       <Box p="2">
-        <GraphContentWide
+        <GraphContent
           api={api}
           transcluded={transcluded}
-          post={comment.post}
+          contents={comment.post.contents}
           showOurContact={false}
         />
       </Box>
diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index c5d59f41b..9bf6792ba 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -6,7 +6,6 @@ import GlobalApi from '~/logic/api/global';
 import { roleForShip } from '~/logic/lib/group';
 import { Contacts, GraphNode, Graph, Association, Unreads, Group, Post } from '@urbit/api';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
-import {useQuery} from '~/logic/lib/useQuery';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import { getComments, getLatestRevision } from '~/logic/lib/publish';
 import { useCopy } from '~/logic/lib/useCopy';
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
index 6e8237769..a69501e96 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
@@ -3,7 +3,7 @@ import { Post } from '@urbit/api';
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import GlobalApi from '~/logic/api/global';
-import { GraphContentWide } from '~/views/landscape/components/Graph/GraphContentWide';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
 const TruncatedBox = styled(Col)`
   display: -webkit-box;
@@ -31,9 +31,9 @@ const PostContent = (props: PostContentProps): ReactElement => {
       textOverflow="ellipsis"
       overflow="hidden"
     >
-      <GraphContentWide
+      <GraphContent
         transcluded={0}
-        post={post}
+        contents={post.contents}
         api={api}
         showOurContact
       />

From be34223a6e13c22b6a2ab2fc25d3aef3d3b24a9d Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 6 May 2021 11:30:30 +1000
Subject: [PATCH 12/12] tokenizeMessage: expand group links

---
 pkg/interface/src/logic/lib/tokenizeMessage.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/logic/lib/tokenizeMessage.js b/pkg/interface/src/logic/lib/tokenizeMessage.js
index a707e474c..f648b70ac 100644
--- a/pkg/interface/src/logic/lib/tokenizeMessage.js
+++ b/pkg/interface/src/logic/lib/tokenizeMessage.js
@@ -3,6 +3,8 @@ import { parsePermalink, permalinkToReference } from '~/logic/lib/permalinks';
 
 const URL_REGEX = new RegExp(String(/^(([\w\-\+]+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+\w)/.source));
 
+const GROUP_REGEX = new RegExp(String(/^~[-a-z_]+\/[-a-z]+/.source));
+
 const isUrl = (string) => {
   try {
     return URL_REGEX.test(string);
@@ -15,6 +17,16 @@ const isRef = (str) => {
   return isUrl(str) && str.startsWith('web+urbitgraph://');
 };
 
+const isGroup = str => {
+  try {
+    return GROUP_REGEX.test(str);
+  } catch (e) {
+    return false;
+  }
+}
+
+const convertToGroupRef = (group) => `web+urbitgraph://group/${group}`;
+
 const tokenizeMessage = (text) => {
   let messages = [];
   // by line
@@ -37,7 +49,9 @@ const tokenizeMessage = (text) => {
       currTextLine = [line];
     } else {
       const words = line.split(/\s/);
-      words.forEach((str, idx) => {
+      words.forEach((word, idx) => {
+        const str = isGroup(word) ?  convertToGroupRef(word) : word;
+
         const last = words.length - 1 === idx;
         if (
           (str.startsWith('`') && str !== '`')