addressing request change

ui/js/component/common.js

@@ -1,5 +1,7 @@
 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 {
@@ -51,45 +53,27 @@ export class TruncatedMarkdown extends React.PureComponent {
     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;
+  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;
+    console.log(content);
     return (
       <span
         className="truncated-text"
         style={{ WebkitLineClamp: this.props.lines }}
       >
-        {this.truncateMarkdown(this.props.children)}
+        {content}
       </span>
     );
   }

ui/js/component/fileCard/view.jsx

@@ -91,7 +91,7 @@ class FileCard extends React.PureComponent {
                 style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}
               />}
             <div className="card__content card__subtext card__subtext--two-lines">
-              <TruncatedMarkdown lines={3}>{description}</TruncatedMarkdown>
+              <TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
             </div>
           </Link>
           {obscureNsfw && this.state.hovered

ui/js/component/form.js

@@ -41,7 +41,7 @@ export class FormField extends React.PureComponent {
       this._element = "input";
       this._type = "text";
     } else if (this.props.type == "SimpleMDE") {
-      this._element = "SimpleMDE";
+      this._element = SimpleMDE;
       this._type = "textarea";
     } else if (formFieldFileSelectorTypes.includes(this.props.type)) {
       this._element = "input";
@@ -113,45 +113,25 @@ export class FormField extends React.PureComponent {
     delete otherProps.className;
     delete otherProps.postfix;
     delete otherProps.prefix;
-    const element = this._element === "SimpleMDE"
-      ? <SimpleMDE
-          id={elementId}
-          type={this._type}
-          name={this.props.name}
-          ref="field"
-          placeholder={this.props.placeholder}
-          className={
-            "form-field__input form-field__input-" +
-            this.props.type +
-            " " +
-            (this.props.className || "") +
-            (isError ? "form-field__input--error" : "")
-          }
-          name={this.props.name}
-          options={{
-            hideIcons: ["heading"],
-          }}
-          {...otherProps}
-        >
-          {this.props.children}
-        </SimpleMDE>
-      : <this._element // can't be applied to SimpleMDE idk why
-          id={elementId}
-          type={this._type}
-          name={this.props.name}
-          ref="field"
-          placeholder={this.props.placeholder}
-          className={
-            "form-field__input form-field__input-" +
-            this.props.type +
-            " " +
-            (this.props.className || "") +
-            (isError ? "form-field__input--error" : "")
-          }
-          {...otherProps}
-        >
-          {this.props.children}
-        </this._element>;
+    const element = (
+      <this._element
+        id={elementId}
+        type={this._type}
+        name={this.props.name}
+        ref="field"
+        placeholder={this.props.placeholder}
+        className={
+          "form-field__input form-field__input-" +
+          this.props.type +
+          " " +
+          (this.props.className || "") +
+          (isError ? "form-field__input--error" : "")
+        }
+        {...otherProps}
+      >
+        {this.props.children}
+      </this._element>
+    );
 
     return (
       <div className={"form-field form-field--" + this.props.type}>

ui/scss/component/_form-field.scss

@@ -165,6 +165,6 @@ input[type="text"].input-copyable {
   color: $color-help;
 }
 
-.CodeMirror-scroll {
-  height: auto !important;
+.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
+  height: auto;
 }