Extract TruncatedMarkdown component

ui/js/component/common.js

@@ -1,7 +1,5 @@
 import React from "react";
-import ReactDOMServer from "react-dom/server";
 import lbry from "../lbry.js";
-import ReactMarkdown from "react-markdown";
 
 //component/icon.js
 export class Icon extends React.PureComponent {
@@ -44,40 +42,6 @@ export class TruncatedText extends React.PureComponent {
   }
 }
 
-export class TruncatedMarkdown extends React.PureComponent {
-  static propTypes = {
-    lines: React.PropTypes.number,
-  };
-
-  static defaultProps = {
-    lines: null,
-  };
-
-  transformMarkdown(text) {
-    // render markdown to html string then trim html tag
-    let htmlString = ReactDOMServer.renderToStaticMarkup(
-      <ReactMarkdown source={this.props.children} />
-    );
-    var txt = document.createElement("textarea");
-    txt.innerHTML = htmlString;
-    return txt.value.replace(/<(?:.|\n)*?>/gm, "");
-  }
-
-  render() {
-    let content = this.props.children && typeof this.props.children === "string"
-      ? this.transformMarkdown(this.props.children)
-      : this.props.children;
-    return (
-      <span
-        className="truncated-text"
-        style={{ WebkitLineClamp: this.props.lines }}
-      >
-        {content}
-      </span>
-    );
-  }
-}
-
 export class BusyMessage extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,

ui/js/component/fileCard/view.jsx

@@ -1,15 +1,11 @@
 import React from "react";
 import lbryuri from "lbryuri.js";
 import Link from "component/link";
-import {
-  Thumbnail,
-  TruncatedText,
-  Icon,
-  TruncatedMarkdown,
-} from "component/common";
+import { Thumbnail, TruncatedText, Icon } from "component/common";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 import NsfwOverlay from "component/nsfwOverlay";
+import TruncatedMarkdown from "component/truncatedMarkdown";
 
 class FileCard extends React.PureComponent {
   constructor(props) {

ui/js/component/truncatedMarkdown/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import TruncatedMarkdown from "./view";
+
+export default connect()(TruncatedMarkdown);

ui/js/component/truncatedMarkdown/view.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import ReactDOMServer from "react-dom/server";
+
+class TruncatedMarkdown extends React.PureComponent {
+  static propTypes = {
+    lines: React.PropTypes.number,
+  };
+
+  static defaultProps = {
+    lines: null,
+  };
+
+  transformMarkdown(text) {
+    // render markdown to html string then trim html tag
+    let htmlString = ReactDOMServer.renderToStaticMarkup(
+      <ReactMarkdown source={this.props.children} />
+    );
+    var txt = document.createElement("textarea");
+    txt.innerHTML = htmlString;
+    return txt.value.replace(/<(?:.|\n)*?>/gm, "");
+  }
+
+  render() {
+    let content = this.props.children && typeof this.props.children === "string"
+      ? this.transformMarkdown(this.props.children)
+      : this.props.children;
+    return (
+      <span
+        className="truncated-text"
+        style={{ WebkitLineClamp: this.props.lines }}
+      >
+        {content}
+      </span>
+    );
+  }
+}
+
+export default TruncatedMarkdown;