Merge pull request #2520 from lbryio/channel-desc

Minor fixes for channel-about page

src/ui/component/channelAbout/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React, { Fragment } from 'react';
+import MarkdownPreview from 'component/common/markdown-preview';
 
 type Props = {
   description: ?string,
@@ -7,6 +8,15 @@ type Props = {
   website: ?string,
 };
 
+const formatEmail = (email: string) => {
+  if (email) {
+    const protocolRegex = new RegExp('^mailto:', 'i');
+    const protocol = protocolRegex.exec(email);
+    return protocol ? email : `mailto:${email}`;
+  }
+  return null;
+};
+
 function ChannelContent(props: Props) {
   const { description, email, website } = props;
   const showAbout = description || email || website;
@@ -16,17 +26,25 @@ function ChannelContent(props: Props) {
       {!showAbout && <h2 className="empty">{__('Nothing here yet')}</h2>}
       {showAbout && (
         <Fragment>
-          {description && <div className="media__info-text">{description}</div>}
+          {description && (
+            <div className="media__info-text media__info-text--small">
+              <MarkdownPreview content={description} promptLinks />
+            </div>
+          )}
           {email && (
             <Fragment>
               <div className="media__info-title">{__('Contact')}</div>
-              <div className="media__info-text">{email}</div>
+              <div className="media__info-text">
+                <MarkdownPreview content={formatEmail(email)} promptLinks />
+              </div>
             </Fragment>
           )}
           {website && (
             <Fragment>
               <div className="media__info-title">{__('Site')}</div>
-              <div className="media__info-text">{website}</div>
+              <div className="media__info-text">
+                <MarkdownPreview content={website} promptLinks />
+              </div>
             </Fragment>
           )}
         </Fragment>

src/ui/component/common/markdown-preview-internal.jsx

@@ -30,7 +30,7 @@ const SimpleLink = (props: SimpleLinkProps) => {
 const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
-schema.protocols.href[3] = 'lbry';
+schema.protocols.href.push('lbry');
 
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content, promptLinks } = props;

src/ui/component/externalLink/view.jsx

@@ -22,14 +22,14 @@ class ExternalLink extends React.PureComponent<Props> {
     const { href, title, children, openModal } = this.props;
 
     // Regex for url protocol
-    const protocolRegex = new RegExp('^(https?|lbry)+:', 'i');
+    const protocolRegex = new RegExp('^(https?|lbry|mailto)+:', 'i');
     const protocol = href ? protocolRegex.exec(href) : null;
 
     // Return plain text if no valid url
     let element = <span>{children}</span>;
 
     // Return external link if protocol is http or https
-    if (protocol && (protocol[0] === 'http:' || protocol[0] === 'https:')) {
+    if (protocol && (protocol[0] === 'http:' || protocol[0] === 'https:' || protocol[0] === 'mailto:')) {
       element = (
         <Button
           button="link"

src/ui/scss/component/_media.scss

@@ -260,12 +260,16 @@
 
 .media__info-text {
   font-size: 1.15rem;
-  word-break: break-all;
+  word-break: break-word;
 
   &:not(:last-of-type) {
     margin-bottom: var(--spacing-vertical-large);
   }
 
+  &.media__info-text--small {
+    max-width: 50rem;
+  }
+
   &.media__info-text--center {
     text-align: center;
   }