GraphContent: make links inline

pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx

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