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

GraphContent: rendering fixes
2024-12-15 01:52:42 +03:00 · 2021-05-10 19:19:44 -04:00 · 2021-05-10 19:19:44 -04:00 · faf643adaf
commit faf643adaf
parent 8cc9aa1de4 8ff050dd9a
5 changed files with 91 additions and 37 deletions
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@ -9133,9 +9133,38 @@
      }
    },
    "remark-breaks": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-2.0.1.tgz",
-      "integrity": "sha512-CZKI8xdPUnvMqPxYEIBBUg8C0B0kyn14lkW0abzhfh/P71YRIxCC3wvBh6AejQL602OxF6kNRl1x4HAZA07JyQ=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-2.0.2.tgz",
+      "integrity": "sha512-LsQnPPQ7Fzp9RTjj4IwdEmjPOr9bxe9zYKWhs9ZQOg9hMg8rOfeeqQ410cvVdIK87Famqza1CKRxNkepp2EvUA==",
+      "requires": {
+        "unist-util-visit": "^2.0.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+          "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="
+        },
+        "unist-util-visit": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+          "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+          "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0"
+          }
+        }
+      }
    },
    "remark-disable-tokenizers": {
      "version": "1.1.0",
--- a/pkg/interface/package.json
+++ b/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",
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/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
        >
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
+++ b/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}
--- a/pkg/interface/src/views/landscape/components/Graph/parse.ts
+++ b/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();