Add markdown preview to support request composer

Summary:
Adds a side-by-side markdown preview to the support form.
No time spent on UI because it makes sense to do it all together.

There also seems to be a problem with state updates not propagating when values are changed, so currently it never gets updated.

Reviewed By: passy

Differential Revision: D18638025

fbshipit-source-id: c4a49286434c7e2e85d532aef3a36924e02a4467

src/ui/components/Markdown.tsx

@@ -69,33 +69,22 @@ class LinkReference extends PureComponent<{href: string}> {
   }
 }
 
-export class Markdown extends PureComponent<{
-  source: string;
-}> {
-  containerRef: RefObject<HTMLDivElement> = React.createRef();
-
-  componentDidMount() {
-    ReactDOM.render(
-      <ReactMarkdown
-        source={this.props.source}
-        renderers={{
-          heading: Heading,
-          listItem: ListItem,
-          paragraph: Row,
-          strong: Strong,
-          emphasis: Emphasis,
-          inlineCode: Code,
-          code: CodeBlock,
-          blockquote: Quote,
-          link: LinkReference,
-          linkReference: LinkReference,
-        }}
-      />,
-      this.containerRef.current,
-    );
-  }
-
-  render() {
-    return <div ref={this.containerRef}></div>;
-  }
+export function Markdown(props: {source: string}) {
+  return (
+    <ReactMarkdown
+      source={props.source}
+      renderers={{
+        heading: Heading,
+        listItem: ListItem,
+        paragraph: Row,
+        strong: Strong,
+        emphasis: Emphasis,
+        inlineCode: Code,
+        code: CodeBlock,
+        blockquote: Quote,
+        link: LinkReference,
+        linkReference: LinkReference,
+      }}
+    />
+  );
 }