diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
index 9a15b57f15..334a3c0c5b 100644
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
@@ -1,16 +1,22 @@
import {
- Anchor, Box,
- Col, H1,
+ Anchor,
+ Box,
+ Col,
+ H1,
H2,
H3,
- H4, Text,
- Li, Ol, Ul
+ H4,
+ Text,
+ Li,
+ Ol,
+ Ul,
+ Table,
+ Tr,
+ Td,
} from '@tlon/indigo-react';
import { Content, ReferenceContent } from '@urbit/api';
import _ from 'lodash';
-import {
- BlockContent, Content as AstContent, Parent, Root
-} from 'ts-mdast';
+import { BlockContent, Content as AstContent, Parent, Root } from 'ts-mdast';
import React from 'react';
import GlobalApi from '~/logic/api/global';
import { referenceToPermalink } from '~/logic/lib/permalinks';
@@ -22,7 +28,6 @@ import RemoteContent from '~/views/components/RemoteContent';
import CodeContent from './content/code';
import { parseTall, parseWide } from './parse';
-
type StitchMode = 'merge' | 'block' | 'inline';
// XX make better
@@ -196,14 +201,14 @@ function stitchInlineAfterBlock(a: Root, b: GraphMentionNode[]) {
function stitchAsts(asts: [StitchMode, GraphAstNode][]) {
return _.reduce(
- asts.slice(1),
+ asts,
([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 ?? [])];
+ return [mode, stitchMerge(ast, val)];
}
if (mode === 'block') {
return [mode, stitchBlock(ast, val?.children ?? [])];
@@ -220,7 +225,7 @@ function stitchAsts(asts: [StitchMode, GraphAstNode][]) {
}
return [mode, ast];
},
- asts[0]
+ ['block', { type: 'root', children: [] }]
);
}
const header = ({ children, depth, ...rest }) => {
@@ -241,7 +246,7 @@ const header = ({ children, depth, ...rest }) => {
const renderers = {
heading: header,
break: () => {
- return
+ return
;
},
thematicBreak: () => {
return ;
@@ -345,23 +350,25 @@ const renderers = {
image: ({ url }) => (
),
'graph-url': ({ url }) => (
),
'graph-reference': ({ api, reference, transcluded }) => {
const { link } = referenceToPermalink({ reference });
return (
-
+
(
);
}
+export type GraphContentProps = PropFunc & {
+ tall?: boolean;
+ transcluded?: number;
+ contents: Content[];
+ api: GlobalApi;
+ showOurContact: boolean;
+};
+
export const GraphContent = React.memo(function GraphContent(
- props: {
- tall?: boolean;
- transcluded?: number;
- contents: Content[];
- api: GlobalApi;
- showOurContact: boolean;
- } & PropFunc
+ props: GraphContentProps
) {
const {
post,