[CORL-129] Render Community Guidelines (#2191)

* chore: Rename InnerProps to Props

* feat: Render community guidelines

* chore: refactor schema communityGuidelines* settings into it's own type

* test: update snapshots

src/core/client/framework/components/CopyButton.tsx

@@ -5,7 +5,7 @@ import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "talk-ui/components";
 import { PropTypesOf } from "talk-ui/types";
 
-interface InnerProps extends PropTypesOf<typeof Button> {
+interface Props extends PropTypesOf<typeof Button> {
   text: string;
 }
 
@@ -13,7 +13,7 @@ interface State {
   copied: boolean;
 }
 
-class CopyButton extends React.Component<InnerProps> {
+class CopyButton extends React.Component<Props> {
   private timeout: any = null;
 
   public state: State = {

src/core/client/framework/components/Markdown.css

@@ -0,0 +1,41 @@
+.root {
+  @mixin bodyCopy;
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+  h1 {
+    @mixin heading1;
+  }
+  h2 {
+    @mixin heading2;
+  }
+  h3 {
+    @mixin heading3;
+  }
+  h4 {
+    @mixin heading4;
+  }
+  h5 {
+    @mixin heading5;
+  }
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
+  blockquote {
+    background-color: rgba(255, 255, 255, 0.66);
+    padding: var(--spacing-unit);
+    margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit))
+      var(--spacing-unit);
+    border-radius: var(--round-corners);
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: none;
+    }
+  }
+}

src/core/client/framework/components/Markdown.spec.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import Markdown from "./Markdown";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(<Markdown>**bold**</Markdown>);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/framework/components/Markdown.tsx

@@ -0,0 +1,33 @@
+import cn from "classnames";
+import marked from "marked";
+import React, { AllHTMLAttributes, PureComponent } from "react";
+
+import styles from "./Markdown.css";
+
+const renderer = new marked.Renderer();
+
+// Set link target to `_parent` to work properly in an embed.
+renderer.link = (href, title, text) =>
+  `<a target="_parent" href="${href}" ${
+    title ? `title="${title}"` : ""
+  }>${text}</a>`;
+
+marked.setOptions({ renderer, gfm: true, breaks: true });
+
+interface Props extends AllHTMLAttributes<HTMLDivElement> {
+  children: string;
+}
+
+export default class Markdown extends PureComponent<Props> {
+  public render() {
+    const { children, className, ...rest } = this.props;
+    const html = marked(children);
+    return (
+      <div
+        className={cn(styles.root, className)}
+        {...rest}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+}

src/core/client/framework/components/__snapshots__/Markdown.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Markdown-root"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><strong>bold</strong></p>
+",
+    }
+  }
+/>
+`;

src/core/client/framework/components/index.ts

@@ -3,4 +3,5 @@ export { default as PasswordField } from "./PasswordField";
 export { default as FacebookButton } from "./FacebookButton";
 export { default as GoogleButton } from "./GoogleButton";
 export { default as OIDCButton } from "./OIDCButton";
+export { default as Markdown } from "./Markdown";
 export { default as DurationField, DURATION_UNIT } from "./DurationField";

src/core/client/framework/components/loadables/MarkdownEditor.css

@@ -2,16 +2,43 @@ $minHeight: 200px;
 $fullscreenZIndex: 10;
 
 .wrapper {
-  /* Fix blockquote styling of MDL: https://github.com/google/material-design-lite/issues/2037 */
+  @mixin bodyCopy;
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+  h1 {
+    @mixin heading1;
+  }
+  h2 {
+    @mixin heading2;
+  }
+  h3 {
+    @mixin heading3;
+  }
+  h4 {
+    @mixin heading4;
+  }
+  h5 {
+    @mixin heading5;
+  }
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
   blockquote {
-    > p:first-child {
-      padding-top: 16px;
-    }
-    > p:last-child {
-      margin-bottom: 0;
-    }
+    background-color: rgba(0, 0, 0, 0.075);
+    padding: var(--spacing-unit);
+    margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit))
+      var(--spacing-unit);
+    border-radius: var(--round-corners);
     &::after {
-      margin-left: -0.5em;
+      content: none;
+    }
+    &::before {
+      content: none;
     }
   }
 }