chat: resolving conflicts

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

@@ -4,16 +4,17 @@ import _ from 'lodash';
 import bigInt, { BigInteger } from 'big-integer';
 
 import { Col } from '@tlon/indigo-react';
-import { Patp, Contacts, Association, Associations, Group, Groups, Graph } from '@urbit/api';
+import {
+  Patp,
+  Contacts,
+  Association,
+  Associations,
+  Group,
+  Groups,
+  Graph
+} from '@urbit/api';
 
 import GlobalApi from '~/logic/api/global';
-import { Patp, Path } from '~/types/noun';
-import { Contacts } from '~/types/contact-update';
-import { Association, Associations } from '~/types/metadata-update';
-import { Group, Groups } from '~/types/group-update';
-import { Envelope, IMessage } from '~/types/chat-update';
-import { Graph } from '~/types';
-
 
 import VirtualScroller from '~/views/components/VirtualScroller';
 
@@ -172,10 +173,8 @@ export default class ChatWindow extends Component<
 
   dismissUnread() {
     const { association } = this.props;
-    if (this.state.fetchPending)
-return;
-    if (this.props.unreadCount === 0)
-return;
+    if (this.state.fetchPending) return;
+    if (this.props.unreadCount === 0) return;
     this.props.api.hark.markCountAsRead(association, '/', 'message');
     this.props.api.hark.markCountAsRead(association, '/', 'mention');
   }
@@ -224,13 +223,10 @@ return;
   }
 
   dismissIfLineVisible() {
-    if (this.props.unreadCount === 0)
-return;
-    if (!this.unreadMarkerRef.current || !this.virtualList?.window)
-return;
+    if (this.props.unreadCount === 0) return;
+    if (!this.unreadMarkerRef.current || !this.virtualList?.window) return;
     const parent = this.unreadMarkerRef.current.parentElement?.parentElement;
-    if (!parent)
-return;
+    if (!parent) return;
     const { scrollTop, scrollHeight, offsetHeight } = this.virtualList.window;
     if (
       scrollHeight - parent.offsetTop > scrollTop &&
@@ -299,8 +295,7 @@ return;
           size={graph.size}
           renderer={({ index, measure, scrollWindow }) => {
             const msg = graph.get(index)?.post;
-            if (!msg)
-return null;
+            if (!msg) return null;
             if (!this.state.initialized) {
               return (
                 <MessagePlaceholder

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

@@ -65,32 +65,54 @@ 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;