From 02d296200418092c3b6ecff124c002e29e7791dc Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 29 Sep 2020 11:46:18 +0800
Subject: [PATCH] MarkdownPreview: Replace 'lbry://' link with a stub when
 previewing an edit.

## Issue
4797: Markdown preview breaks when using a lbry link in angle brackets

This is similar to the Embed case in commit dbcd677e.

## Change
Replaced it with a dummy link that looks like what the final outcome would be, but would not be clickable.

Again, similar to the embed case, unless there is a way to pass the store over, I don't have an alternative that makes sense: Adding a dummy router or replacing it as a regular <a> will just make React spew security errors.

Not being able to click it is not ideal as we (as a user) can't verify our links, but it's better than the current case of not rendering anything at all.
---
 .../common/form-components/form-field.jsx       |  2 +-
 ui/component/common/markdown-preview.jsx        | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index bf4c7d05d..5eaaa1b58 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -182,7 +182,7 @@ export class FormField extends React.PureComponent<Props> {
                   spellChecker: true,
                   hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
                   previewRender(plainText) {
-                    const preview = <MarkdownPreview content={plainText} isStubEmbed />;
+                    const preview = <MarkdownPreview content={plainText} noDataStore />;
                     return ReactDOMServer.renderToString(preview);
                   },
                 }}
diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index 1316bb7e0..854735c49 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -21,14 +21,14 @@ type SimpleLinkProps = {
   href?: string,
   title?: string,
   children?: React.Node,
-  isStubEmbed?: boolean,
+  noDataStore?: boolean,
 };
 
 type MarkdownProps = {
   strip?: boolean,
   content: ?string,
   promptLinks?: boolean,
-  isStubEmbed?: boolean,
+  noDataStore?: boolean,
 };
 
 const SimpleText = (props: SimpleTextProps) => {
@@ -37,7 +37,7 @@ const SimpleText = (props: SimpleTextProps) => {
 
 const SimpleLink = (props: SimpleLinkProps) => {
   const { title, children } = props;
-  const { href, isStubEmbed } = props;
+  const { href, noDataStore } = props;
 
   if (!href) {
     return children || null;
@@ -58,7 +58,7 @@ const SimpleLink = (props: SimpleLinkProps) => {
   if (embed) {
     // Decode this since users might just copy it from the url bar
     const decodedUri = decodeURI(uri);
-    return isStubEmbed ? (
+    return noDataStore ? (
       <div className="embed__inline-button-preview">
         <pre>{decodedUri}</pre>
       </div>
@@ -71,7 +71,10 @@ const SimpleLink = (props: SimpleLinkProps) => {
   // using Link after formatLbryUrl to handle "/" vs "#/"
   // for web and desktop scenarios respectively
 
-  return (
+  return noDataStore ? (
+    // Dummy link (no 'href')
+    <a title={title}>{children}</a>
+  ) : (
     <Link
       title={title}
       to={webLink}
@@ -94,7 +97,7 @@ schema.attributes.a.push('embed');
 const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g;
 
 const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, strip, promptLinks, isStubEmbed } = props;
+  const { content, strip, promptLinks, noDataStore } = props;
   const strippedContent = content
     ? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => {
         // Let the browser try to create an iframe to see if the markup is valid
@@ -118,7 +121,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     sanitize: schema,
     fragment: React.Fragment,
     remarkReactComponents: {
-      a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} isStubEmbed={isStubEmbed} />,
+      a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} noDataStore={noDataStore} />,
       // Workaraund of remarkOptions.Fragment
       div: React.Fragment,
     },