Merge pull request #4961 from urbit/mp/graph/inherit-weight

landscape: code content inherits font weight

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

@@ -13,7 +13,7 @@ import {
   Tr,
   Td
 } from '@tlon/indigo-react';
-import { Content } from '@urbit/api';
+import { Content, CodeContent } from '@urbit/api';
 import _ from 'lodash';
 import { BlockContent, Content as AstContent, Parent, Root } from 'ts-mdast';
 import React from 'react';
@@ -23,7 +23,6 @@ import { PropFunc } from '~/types';
 import { PermalinkEmbed } from '~/views/apps/permalinks/embed';
 import { Mention } from '~/views/components/MentionText';
 import RemoteContent from '~/views/components/RemoteContent';
-import CodeContent from './content/code';
 import { parseTall, parseWide } from './parse';
 
 type StitchMode = 'merge' | 'block' | 'inline';
@@ -245,6 +244,7 @@ const renderers = {
     return (
       <Text
         mono
+        fontWeight='inherit'
         p={1}
         backgroundColor="washedGray"
         fontSize={0}
@@ -309,6 +309,7 @@ const renderers = {
         className="clamp-message"
         display="block"
         borderRadius={1}
+        fontWeight='inherit'
         mono
         fontSize={0}
         backgroundColor="washedGray"

pkg/interface/src/views/landscape/components/Graph/content/code.js

@@ -1,50 +0,0 @@
-import { Box, Text } from '@tlon/indigo-react';
-import React, { Component } from 'react';
-
-export default class CodeContent extends Component {
-  render() {
-    const { props } = this;
-    const content = props.content;
-
-    const outputElement =
-      (Boolean(content.code.output) &&
-       content.code.output.length && content.code.output.length > 0) ?
-      (
-        <Text
-          display='block'
-          fontSize={0}
-          mono
-          p={1}
-          my={0}
-          borderRadius={1}
-          overflow='auto'
-          maxHeight='10em'
-          maxWidth='100%'
-          style={{ whiteSpace: 'pre' }}
-          backgroundColor='washedGray'
-        >
-          {content.code.output.join('\n')}
-        </Text>
-      ) : null;
-
-    return (
-      <Box my={2}>
-        <Text
-          display='block'
-          mono
-          my={0}
-          p={1}
-          borderRadius={1}
-          overflow='auto'
-          maxHeight='10em'
-          maxWidth='100%'
-          fontSize={0}
-          style={{ whiteSpace: 'pre' }}
-        >
-          {content.code.expression}
-        </Text>
-        {outputElement}
-      </Box>
-    );
-  }
-}

pkg/interface/src/views/landscape/components/Graph/content/text.js

@@ -1,189 +0,0 @@
-import { Anchor, Row, Text } from '@tlon/indigo-react';
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import RemarkDisableTokenizers from 'remark-disable-tokenizers';
-import urbitOb from 'urbit-ob';
-import { GroupLink } from '~/views/components/GroupLink';
-
-const DISABLED_BLOCK_TOKENS = [
-  'indentedCode',
-  'atxHeading',
-  'thematicBreak',
-  'list',
-  'setextHeading',
-  'html',
-  'definition',
-  'table'
-];
-
-const DISABLED_INLINE_TOKENS = [
-  'autoLink',
-  'url',
-  'email',
-  'reference'
-];
-
-const renderers = {
-  inlineCode: ({ language, value }) => {
-    return (
-      <Text
-        mono
-        p={1}
-        backgroundColor='washedGray'
-        fontSize={0}
-        style={{ whiteSpace: 'preWrap' }}
-      >
-        {value}
-      </Text>
-    );
-  },
-  blockquote: ({ children }) => {
-    return (
-      <Text
-        lineHeight="20px"
-        display="block"
-        borderLeft="1px solid"
-        color="black"
-        paddingLeft={2}
-      >
-        {children}
-      </Text>
-    );
-  },
-  paragraph: ({ children }) => {
-    return (
-      <Text fontSize={1} lineHeight={'20px'}>
-        {children}
-      </Text>
-    );
-  },
-  code: ({ language, value }) => {
-    return (
-      <Text
-        p={1}
-        className='clamp-message'
-        display='block'
-        borderRadius={1}
-        mono
-        fontSize={0}
-        backgroundColor='washedGray'
-        overflowX='auto'
-        style={{ whiteSpace: 'pre' }}
-      >
-        {value}
-      </Text>
-    );
-  },
-  link: (props) => {
-    return <Anchor src={props.href} borderBottom={1} color="black">{props.children}</Anchor>
-  },
-  list: ({depth, children}) => {
-    return <Text my={2} display='block' fontSize={1} ml={depth ? (2 * depth) : 0} lineHeight={'20px'}>{children}</Text>
-  }
-};
-
-const MessageMarkdown = React.memo((props) => {
-  const { source, allowHeaders, allowLists, ...rest } = props;
-  const blockCode = source.split('```');
-  const codeLines = blockCode.map((codes) => codes.split('\n'));
-  let lines = [];
-  if (allowLists) {
-    lines.push(source);
-  } else {
-    lines = codeLines.reduce((acc, val, i) => {
-        if (i % 2 === 1) {
-          return [...acc, `\`\`\`${val.join('\n')}\`\`\``];
-        } else {
-          return [...acc, ...val];
-        }
-      }, []);
-  }
-
-  const modifiedBlockTokens = DISABLED_BLOCK_TOKENS.filter(e => {
-    if (allowHeaders && allowLists) {
-      return (e in ["setextHeading", "atxHeading", "list"])
-    } else if (allowHeaders) {
-      return (e in ["setextHeading", "atxHeading"])
-    } else if (allowLists) {
-      return (e  === "list")
-    }
-  })
-
-  return lines.map((line, i) => (
-    <React.Fragment key={i}>
-      {i !== 0 && <Row height={2} />}
-      <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: modifiedBlockTokens,
-              inline: DISABLED_INLINE_TOKENS
-            }
-          ]
-        ]}
-      />
-    </React.Fragment>
-  ));
-});
-
-export default function TextContent(props) {
-  const content = props.content;
-  const allowHeaders = props.allowHeaders;
-  const allowLists = props.allowLists;
-
-  const group = content.text.trim().match(
-    /([~][/])?(~[a-z]{3,6})(-[a-z]{6})?([/])(([a-z0-9-])+([/-])?)+/
-  );
-  const isGroupLink =
-    group !== null && // matched possible chatroom
-    group[2].length > 2 && // possible ship?
-    urbitOb.isValidPatp(group[2]) && // valid patp?
-    group[0] === content.text.trim(); // entire message is room name?
-
-  if (isGroupLink) {
-    const resource = `/ship/${content.text.trim()}`;
-    return (
-      <GroupLink
-        resource={resource}
-        api={props.api}
-        pl={2}
-        my={2}
-        border={1}
-        borderRadius={2}
-        borderColor='washedGray'
-      />
-    );
-  } else {
-    return (
-      <Text
-        flexShrink={0}
-        color='black'
-        fontSize={props.fontSize ? props.fontSize : '14px'}
-        lineHeight={props.lineHeight ? props.lineHeight : '20px'}
-        style={{ overflowWrap: 'break-word' }}
-      >
-        <MessageMarkdown source={content.text} allowHeaders={allowHeaders} allowLists={allowLists} />
-      </Text>
-    );
-  }
-}