Merge pull request #4886 from urbit/lf/graphdown-fixes

GraphContent: rendering fixes

pkg/interface/package.json

@@ -42,7 +42,7 @@
     "react-virtuoso": "^0.20.3",
     "react-visibility-sensor": "^5.1.1",
     "remark": "^12.0.0",
-    "remark-breaks": "^2.0.1",
+    "remark-breaks": "^2.0.2",
     "remark-disable-tokenizers": "1.1.0",
     "stacktrace-js": "^2.0.2",
     "style-loader": "^1.3.0",

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -495,7 +495,8 @@ export const Message = React.memo(({
           width='36px'
           textAlign='right'
           left='0'
-          top='3px'
+          top='2px'
+          lineHeight="tall"
           fontSize={0}
           gray
         >

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>
+      <H4 display="block">{children}</H4>
     );
-  return (
-    <Box {...rest}>
-      {inner}
-    </Box>
-  );
+  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,27 +264,30 @@ const renderers = {
   },
   strong: ({ children }) => {
     return (
-      <Text fontWeight="bold" lineHeight='1'>
+      <Text fontWeight="bold" lineHeight="1">
         {children}
       </Text>
     );
   },
   emphasis: ({ children }) => {
     return (
-    <Text fontStyle="italic" fontSize="1" lineHeight={'20px'}>
+      <Text fontStyle="italic" fontSize="1" lineHeight="tall">
         {children}
-    </Text>
-    )
+      </Text>
+    );
   },
-  blockquote: ({ children, tall, ...rest }) => {
+  blockquote: ({ children, depth, tall, ...rest }) => {
+    if (depth > 1) {
+      return children;
+    }
+
     return (
       <Text
-        lineHeight="20px"
+        lineHeight="tall"
         display="block"
         borderLeft="1px solid"
         color="black"
         paddingLeft={2}
-        py="1"
         mb="1"
       >
         {children}
@@ -297,7 +296,7 @@ const renderers = {
   },
   paragraph: ({ children }) => {
     return (
-      <Text fontSize="1" lineHeight={'20px'}>
+      <Text fontSize="1" lineHeight="tall">
         {children}
       </Text>
     );
@@ -339,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>
     );
@@ -352,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>
@@ -376,15 +381,26 @@ const renderers = {
     );
   },
   root: ({ tall, children }) =>
-    tall
-      ? <Box
-          display='grid'
-          style={{ 'gridTemplateColumns': 'minmax(0,1fr)', 'rowGap': '1rem' }}
-         >
-           {children}
-        </Box>
-      : <Box>{children}</Box>,
-  text: ({ value }) => value,
+    tall ? (
+      <Box
+        display="grid"
+        style={{ gridTemplateColumns: 'minmax(0,1fr)', rowGap: '1rem' }}
+      >
+        {children}
+      </Box>
+    ) : (
+      <Box>{children}</Box>
+    ),
+  text: ({ value }) => (
+    <>
+      {value.split('\n').map((v, idx) => (
+        <React.Fragment key={idx}>
+          {idx !== 0 ? <br /> : null}
+          {v}
+        </React.Fragment>
+      ))}
+    </>
+  ),
 };
 
 export function Graphdown<T extends {} = {}>(
@@ -400,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}

pkg/interface/src/views/landscape/components/Graph/parse.ts

@@ -1,5 +1,6 @@
 import remark from 'remark';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
+import RemarkBreaks from 'remark-breaks';
 
 const DISABLED_BLOCK_TOKENS = [
   'indentedCode',
@@ -12,7 +13,7 @@ const DISABLED_BLOCK_TOKENS = [
   'table',
 ];
 
-const DISABLED_INLINE_TOKENS = ['autoLink', 'url', 'email', 'reference'];
+const DISABLED_INLINE_TOKENS = ['autoLink', 'url', 'email', 'reference', 'html'];
 
 const tallParser = remark().freeze();
 
@@ -27,6 +28,7 @@ const wideParser = remark()
         inline: DISABLED_INLINE_TOKENS,
       },
     ],
+    RemarkBreaks,
   ])
   .freeze();