Bump react-markdown from 5.0.3 to 6.0.2 in /desktop (#2298)

Summary: Bumps [react-markdown](https://github.com/remarkjs/react-markdown) from 5.0.3 to 6.0.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/remarkjs/react-markdown/releases">react-markdown's releases</a>.</em></p> <blockquote> <h2>6.0.0</h2> <p>Please see <a href="https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15"><code>changelog.md</code></a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/remarkjs/react-markdown/blob/main/changelog.md">react-markdown's changelog</a>.</em></p> <blockquote> <h2>6.0.2 - 2021-05-06</h2> <ul> <li><a href="https://github.com/remarkjs/react-markdown/commit/cefc02d"><code>cefc02d</code></a> Add string type for <code>className</code>s</li> <li><a href="https://github.com/remarkjs/react-markdown/commit/6355e45"><code>6355e45</code></a> Fix to pass <code>vfile</code> to plugins</li> <li><a href="https://github.com/remarkjs/react-markdown/commit/5cf6e1b"><code>5cf6e1b</code></a> Fix to add warning when non-strings are given as <code>children</code></li> </ul> <h2>6.0.1 - 2021-04-23</h2> <ul> <li><a href="https://github.com/remarkjs/react-markdown/commit/2e956be"><code>2e956be</code></a> Fix whitespace in table elements</li> <li><a href="https://github.com/remarkjs/react-markdown/commit/d36048a"><code>d36048a</code></a> Add architecture section to readme</li> </ul> <h2>6.0.0 - 2021-04-15</h2> <p>Welcome to version 6. This a major release and therefore contains breaking changes.</p> <h3>Change <code>renderers</code> to <code>components</code></h3> <p><code>react-markdown</code> used to let you define components for <em>markdown</em> constructs (<code>link</code>, <code>delete</code>, <code>break</code>, etc). This proved complex as users didn’t know about those names or markdown peculiarities (such as that there are fully formed links <em>and</em> link references).</p> <p>See [<strong><a href="https://github-redirect.dependabot.com/remarkjs/react-markdown/issues/549">GH-549</a></strong>](<a href="https://github-redirect.dependabot.com/remarkjs/react-markdown/issues/549">remarkjs/react-markdown#549</a>) for more on why this changed. See <a href="https://github.com/remarkjs/react-markdown#appendix-b-components"><strong>Appendix B: Components</strong> in <code>readme.md</code></a> for more on components.</p> <p>Before (<strong>broken</strong>):</p> <pre lang="jsx"><code><Markdown renderers={{ // Use a fancy hr thematicBreak: ({node, ...props}) => <MyFancyRule {...props} /> }} >{`***`}</Markdown> </code></pre> <p>Now (<strong>fixed</strong>):</p> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="8ed18dafa8"><code>8ed18da</code></a> 6.0.2</li> <li><a href="cefc02d749"><code>cefc02d</code></a> Add string type for <code>className</code>s</li> <li><a href="6355e45179"><code>6355e45</code></a> Fix to pass <code>vfile</code> to plugins</li> <li><a href="5cf6e1b18f"><code>5cf6e1b</code></a> Fix to add warning when non-strings are given as <code>children</code></li> <li><a href="592599fda4"><code>592599f</code></a> Update dev-dependencies</li> <li><a href="15b4757082"><code>15b4757</code></a> 6.0.1</li> <li><a href="4f5e62aa13"><code>4f5e62a</code></a> Fix unneeded <code>ts-ignore</code></li> <li><a href="2e956be119"><code>2e956be</code></a> Fix whitespace in table elements</li> <li><a href="d36048a6cb"><code>d36048a</code></a> Add architecture section to readme</li> <li><a href="a2b611babc"><code>a2b611b</code></a> Update <code>react-syntax-highlighter</code> example</li> <li>Additional commits viewable in <a href="https://github.com/remarkjs/react-markdown/compare/5.0.3...6.0.2">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=react-markdown&package-manager=npm_and_yarn&previous-version=5.0.3&new-version=6.0.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `dependabot rebase` will rebase this PR - `dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `dependabot merge` will merge this PR after your CI passes on it - `dependabot squash and merge` will squash and merge this PR after your CI passes on it - `dependabot cancel merge` will cancel a previously requested merge and block automerging - `dependabot reopen` will reopen this PR if it is closed - `dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Pull Request resolved: https://github.com/facebook/flipper/pull/2298 Reviewed By: mweststrate Differential Revision: D28323791 Pulled By: cekkaewnumchai fbshipit-source-id: c5582e7cd357eb5f3c93c7c3d2df81bb2818e105
2021-05-12 15:09:31 -07:00
parent 96cbc81e63
commit 0de4f11e15
3 changed files with 135 additions and 122 deletions
--- a/desktop/app/src/ui/components/Markdown.tsx
+++ b/desktop/app/src/ui/components/Markdown.tsx
@@ -7,7 +7,7 @@
 * @format
 */

-import React, {PureComponent, CSSProperties} from 'react';
+import React, {CSSProperties, ReactNode} from 'react';
 import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
 import {colors} from './colors';
@@ -21,14 +21,15 @@ const Row = styled.div({
  marginBottom: 5,
  lineHeight: 1.34,
 });
-const Heading = styled.div<{level: number}>((props) => ({
-  fontSize: props.level === 1 ? 18 : 12,
-  textTransform: props.level > 1 ? 'uppercase' : undefined,
-  color: props.level > 1 ? '#90949c' : undefined,
+const Heading = styled.div({fontSize: 18, marginTop: 10, marginBottom: 10});
+const SubHeading = styled.div({
+  fontSize: 12,
+  textTransform: 'uppercase',
+  color: '#90949c',
  marginTop: 10,
  marginBottom: 10,
-  fontWeight: props.level > 1 ? 'bold' : 'normal',
-}));
+  fontWeight: 'bold',
+});
 const ListItem = styled.li({
  listStyleType: 'circle',
  listStylePosition: 'inside',
@@ -54,46 +55,47 @@ const Pre = styled(Row)({
  padding: 10,
  backgroundColor: '#f1f2f3',
 });
-class CodeBlock extends PureComponent<{value: string; language: string}> {
-  render() {
-    return (
-      <Pre>
-        <Code>{this.props.value}</Code>
-      </Pre>
-    );
-  }
+function CodeBlock(props: {
+  children: ReactNode[];
+  className?: string;
+  inline?: boolean;
+}) {
+  return props.inline ? (
+    <Code>{props.children}</Code>
+  ) : (
+    <Pre>
+      <Code>{props.children}</Code>
+    </Pre>
+  );
 }
 const Link = styled.span({
  color: colors.blue,
 });
-class LinkReference extends PureComponent<{href: string}> {
-  render() {
-    return (
-      <Link onClick={() => shell.openExternal(this.props.href)}>
-        {this.props.children}
-      </Link>
-    );
-  }
+function LinkReference(props: {href: string; children: Array<ReactNode>}) {
+  return (
+    <Link onClick={() => shell.openExternal(props.href)}>{props.children}</Link>
+  );
 }

 export function Markdown(props: {source: string; style?: CSSProperties}) {
  return (
    <Container style={props.style}>
      <ReactMarkdown
-        source={props.source}
-        renderers={{
-          heading: Heading,
-          listItem: ListItem,
-          paragraph: Row,
+        components={{
+          h1: Heading,
+          h2: SubHeading,
+          h3: 'h2',
+          li: ListItem,
+          p: Row,
          strong: Strong,
-          emphasis: Emphasis,
-          inlineCode: Code,
+          em: Emphasis,
          code: CodeBlock,
          blockquote: Quote,
-          link: LinkReference,
-          linkReference: LinkReference,
-        }}
-      />
+          // @ts-ignore props missing href but existing run-time
+          a: LinkReference,
+        }}>
+        {props.source}
+      </ReactMarkdown>
    </Container>
  );
 }