ui/js/component/common.js

@@ -42,6 +42,59 @@ export class TruncatedText extends React.PureComponent {
   }
 }
 
+export class TruncatedMarkdown extends React.PureComponent {
+  static propTypes = {
+    lines: React.PropTypes.number,
+  };
+
+  static defaultProps = {
+    lines: null,
+  };
+
+  truncateMarkdown(text) {
+    let output;
+    try {
+      output = text
+        // Remove HTML tags
+        .replace(/<(.*?)>/g, "$1")
+        // Remove setext-style headers
+        .replace(/^[=\-]{2,}\s*$/g, "")
+        // Remove footnotes?
+        .replace(/\[\^.+?\](\: .*?$)?/g, "")
+        .replace(/\s{0,2}\[.*?\]: .*?$/g, "")
+        // Remove images
+        .replace(/\!\[.*?\][\[\(].*?[\]\)]/g, "")
+        // Remove inline links
+        .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, "$1")
+        // Remove Blockquotes
+        .replace(/>/g, "")
+        // Remove reference-style links?
+        .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, "")
+        // Remove atx-style headers
+        .replace(/^\#{1,6}\s*([^#]*)\s*(\#{1,6})?/gm, "$1")
+        .replace(/([\*_]{1,3})(\S.*?\S)\1/g, "$2")
+        .replace(/(`{3,})(.*?)\1/gm, "$2")
+        .replace(/^-{3,}\s*$/g, "")
+        .replace(/`(.+?)`/g, "$1")
+        .replace(/\n{2,}/g, "\n\n");
+    } catch (e) {
+      return text;
+    }
+    return output;
+  }
+
+  render() {
+    return (
+      <span
+        className="truncated-text"
+        style={{ WebkitLineClamp: this.props.lines }}
+      >
+        {this.truncateMarkdown(this.props.children)}
+      </span>
+    );
+  }
+}
+
 export class BusyMessage extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,

ui/js/component/fileTile/view.jsx

@@ -3,7 +3,11 @@ import lbry from "lbry.js";
 import lbryuri from "lbryuri.js";
 import Link from "component/link";
 import FileActions from "component/fileActions";
-import { Thumbnail, TruncatedText } from "component/common.js";
+import {
+  Thumbnail,
+  TruncatedText,
+  TruncatedMarkdown,
+} from "component/common.js";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 
@@ -117,9 +121,9 @@ class FileTile extends React.PureComponent {
                 <h3><TruncatedText lines={1}>{title}</TruncatedText></h3>
               </div>
               <div className="card__content card__subtext">
-                <TruncatedText lines={3}>
+                <TruncatedMarkdown lines={3}>
                   {description}
-                </TruncatedText>
+                </TruncatedMarkdown>
               </div>
             </div>
           </div>