Merge branch 'release/next-js' of https://github.com/urbit/urbit into npm-packages

pkg/interface/src/views/apps/chat/components/content/code.js

@@ -23,7 +23,7 @@ export default class CodeContent extends Component {
           style={{ whiteSpace: 'pre' }}
           backgroundColor='washedGray'
         >
-          {content.code.output[0].join('\n')}
+          {content.code.output.join('\n')}
         </Text>
       ) : null;
 

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -2,7 +2,6 @@ import React, { Component, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
-import RemarkBreaks from 'remark-breaks';
 import urbitOb from 'urbit-ob';
 import { Text } from '@tlon/indigo-react';
 import { GroupLink } from "~/views/components/GroupLink";
@@ -49,30 +48,49 @@ const renderers = {
   }
 };
 
-const MessageMarkdown = React.memo(props => (
-  <ReactMarkdown
-    {...props}
-    unwrapDisallowed={true}
-    renderers={renderers}
-    // shim until we uncover why RemarkBreaks and
-    // RemarkDisableTokenizers can't be loaded simultaneously
-    disallowedTypes={['heading', 'list', 'listItem', 'link']}
-    allowNode={(node, index, parent) => {
-      if (
-        node.type === 'blockquote'
-        && parent.type === 'root'
-        && node.children.length
-        && node.children[0].type === 'paragraph'
-        && node.children[0].position.start.offset < 2
-      ) {
-        node.children[0].children[0].value = '>' + node.children[0].children[0].value;
-        return false;
-      }
+const MessageMarkdown = React.memo(props => {
+  const { source, ...rest } = props;
+  const blockCode = source.split('```');
+  const codeLines = blockCode.map(codes => codes.split("\n"));
+  const lines = codeLines.reduce((acc, val, i) => {
+    if((i % 2) === 1) {
+      return [...acc, `\`\`\`${val.join('\n')}\`\`\``];
+    } else {
+      return [...acc, ...val];
+    }
+  }, []);
 
-      return true;
-    }}
-    plugins={[RemarkBreaks]} />
-));
+
+  return lines.map((line, i) => (
+    <>
+      { i !== 0 && <br />}
+      <ReactMarkdown
+        {...rest}
+        source={line}
+        unwrapDisallowed={true}
+        renderers={renderers}
+        allowNode={(node, index, parent) => {
+          if (
+            node.type === 'blockquote'
+            && parent.type === 'root'
+            && node.children.length
+            && node.children[0].type === 'paragraph'
+            && node.children[0].position.start.offset < 2
+          ) {
+            node.children[0].children[0].value = '>' + node.children[0].children[0].value;
+            return false;
+          }
+
+          return true;
+        }}
+        plugins={[[RemarkDisableTokenizers, {
+          block: DISABLED_BLOCK_TOKENS,
+          inline: DISABLED_INLINE_TOKENS
+        }]]}
+       />
+    </>
+    ))
+});
 
 export default function TextContent(props) {
   const content = props.content;