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,