DocumentHtml improvement and Enzyme

frontend/components/Document/components/DocumentHtml/DocumentHtml.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import { observer } from 'mobx-react';
+
+import styles from './DocumentHtml.scss';
+
+@observer
+class DocumentHtml extends React.Component {
+  static propTypes = {
+    html: PropTypes.string.isRequired,
+  }
+
+  componentDidMount = () => {
+    this.setExternalLinks();
+  }
+
+  componentDidUpdate = () => {
+    this.setExternalLinks();
+  }
+
+  setExternalLinks = () => {
+    const links = ReactDOM.findDOMNode(this).querySelectorAll('a');
+    links.forEach(link => {
+      if (link.hostname !== window.location.hostname) {
+        link.target = '_blank'; // eslint-disable-line no-param-reassign
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div
+        className={ styles.document }
+        dangerouslySetInnerHTML={{ __html: this.props.html }}
+      />
+    );
+  }
+}
+
+export default DocumentHtml;

frontend/components/Document/components/DocumentHtml/DocumentHtml.scss

@@ -0,0 +1,85 @@
+@import '~styles/constants.scss';
+
+.document {
+  h1, h2, h3, h4, h5, h6 {
+    :global {
+      .anchor {
+        visibility: hidden;
+        color: $gray;
+      }
+    }
+
+    &:hover {
+      :global {
+        .anchor {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  ul {
+    padding-left: 1.5em;
+
+    ul {
+      margin: 0;
+    }
+  }
+
+  // pre {
+  //   box-shadow: 1px 1px 1px #f5f5f5;
+  // }
+
+  blockquote {
+    font-style: italic;
+    border-left: 2px solid $lightGray;
+    padding-left: 0.8em;
+  }
+
+  table {
+    width: 100%;
+    overflow: auto;
+    display: block;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    thead, tbody {
+      width: 100%;
+    }
+
+    thead {
+      tr {
+        border-bottom: 2px solid $lightGray;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid $lightGray;
+      }
+    }
+
+    tr {
+      background-color: #fff;
+
+      // &:nth-child(2n) {
+      //   background-color: #f8f8f8;
+      // }
+    }
+
+    th, td {
+      text-align: left;
+      border: 1px 0 solid $lightGray;
+      padding: 5px 20px 5px 0;
+
+      &:last-child {
+        padding-right: 0;
+        width: 100%;
+      }
+    }
+
+    th {
+      font-weight: bold;
+    }
+  }
+}

frontend/components/Document/components/DocumentHtml/DocumentHtml.test.js

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import DocumentHtml from './DocumentHtml';
+import { shallow } from 'enzyme';
+
+const testHtml = `
+  <h1>test document</h1>
+  <p>Hello! <a href="/internal">internal link</a></p>
+  <p>Aliens <a href="/external">external link</a></p>
+`;
+
+test('renders', () => {
+  const wrapper = shallow(
+    <DocumentHtml
+      html={ testHtml }
+    />
+  );
+  expect(wrapper.find('.document').length).toBe(1);
+});

frontend/components/Document/components/DocumentHtml/index.js

@@ -0,0 +1,2 @@
+import DocumentHtml from './DocumentHtml';
+export default DocumentHtml;