urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 08:32:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

GraphContent: make links inline

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-05-10 12:14:05 +10:00
parent 13285f03f7
commit 47210c63ed
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
View File

@ -230,28 +230,24 @@ const header = ({ children, depth, ...rest }) => {
const level = depth; const level = depth;
const inner = const inner =
level === 1 ? ( level === 1 ? (
<H1 display='block'>{children}</H1> <H1 display="block">{children}</H1>
) : level === 2 ? ( ) : level === 2 ? (
<H2 display='block'>{children}</H2> <H2 display="block">{children}</H2>
) : level === 3 ? ( ) : level === 3 ? (
<H3 display='block'>{children}</H3> <H3 display="block">{children}</H3>
) : ( ) : (
<H4 display='block'>{children}</H4> <H4 display="block">{children}</H4>
); );
return ( return <Box {...rest}>{inner}</Box>;
<Box {...rest}>
{inner}
</Box>
);
}; };
const renderers = { const renderers = {
heading: header, heading: header,
break: () => { break: () => {
return <Box display='block' width='100%' height={2}></Box> return <Box display="block" width="100%" height={2}></Box>;
}, },
thematicBreak: () => { thematicBreak: () => {
return <Box display='block' width='100%' height={2}></Box> return <Box display="block" width="100%" height={2}></Box>;
}, },
inlineCode: ({ language, value }) => { inlineCode: ({ language, value }) => {
return ( return (
@ -268,23 +264,23 @@ const renderers = {
}, },
strong: ({ children }) => { strong: ({ children }) => {
return ( return (
<Text fontWeight="bold" lineHeight='1'> <Text fontWeight="bold" lineHeight="1">
{children} {children}
</Text> </Text>
); );
}, },
emphasis: ({ children }) => { emphasis: ({ children }) => {
return ( return (
<Text fontStyle="italic" fontSize="1" lineHeight="tall"> <Text fontStyle="italic" fontSize="1" lineHeight="tall">
{children} {children}
</Text> </Text>
) );
}, },
blockquote: ({ children, depth, tall, ...rest }) => { blockquote: ({ children, depth, tall, ...rest }) => {
if(depth > 1) { if (depth > 1) {
return children; return children;
} }
return ( return (
<Text <Text
lineHeight="tall" lineHeight="tall"
@ -342,7 +338,13 @@ const renderers = {
}, },
link: (props) => { link: (props) => {
return ( return (
<Anchor href={props.url} borderBottom="1" color="black" target="_blank"> <Anchor
display="inline"
href={props.url}
borderBottom="1"
color="black"
target="_blank"
>
{props.children} {props.children}
</Anchor> </Anchor>
); );
@ -355,7 +357,7 @@ const renderers = {
); );
}, },
'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />, 'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />,
'image': ({ url }) => ( image: ({ url }) => (
<Box mt="1" mb="2" flexShrink={0}> <Box mt="1" mb="2" flexShrink={0}>
<RemoteContent key={url} url={url} /> <RemoteContent key={url} url={url} />
</Box> </Box>
@ -379,17 +381,19 @@ const renderers = {
); );
}, },
root: ({ tall, children }) => root: ({ tall, children }) =>
tall tall ? (
? <Box <Box
display='grid' display="grid"
style={{ 'gridTemplateColumns': 'minmax(0,1fr)', 'rowGap': '1rem' }} style={{ gridTemplateColumns: 'minmax(0,1fr)', rowGap: '1rem' }}
> >
{children} {children}
</Box> </Box>
: <Box>{children}</Box>, ) : (
<Box>{children}</Box>
),
text: ({ value }) => ( text: ({ value }) => (
<> <>
{value.split('\n').map((v,idx) => ( {value.split('\n').map((v, idx) => (
<React.Fragment key={idx}> <React.Fragment key={idx}>
{idx !== 0 ? <br /> : null} {idx !== 0 ? <br /> : null}
{v} {v}
@ -412,7 +416,13 @@ export function Graphdown<T extends {} = {}>(
const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`); const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`);
return ( return (
<Renderer transcluded={transcluded} depth={depth} {...rest} {...nodeRest} tall={tall}> <Renderer
transcluded={transcluded}
depth={depth}
{...rest}
{...nodeRest}
tall={tall}
>
{children.map((c) => ( {children.map((c) => (
<Graphdown <Graphdown
transcluded={transcluded} transcluded={transcluded}