From dbcd677e69ff09f474691f2908d66621d1fcb70e Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Wed, 16 Sep 2020 00:19:54 +0800
Subject: [PATCH] MDE: Replace the iframe with a stub in "edit + preview" mode.

## Issue
4644: Markdown Preview breaks when <iframe> is present

Error: "Invariant violation: could not find 'store' ..."

## Change
Until we figure out a way to pass the store to the SimpleMDE preview formatter, just replace the embed with a stub region.
---
 CHANGELOG.md                                     |  1 +
 .../common/form-components/form-field.jsx        |  2 +-
 ui/component/common/markdown-preview.jsx         | 16 ++++++++++++----
 ui/scss/component/_embed-player.scss             |  6 ++++++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5da3e9841..e9fb6aaa3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Web: Fix 'Download' not triggering until second attempt _community pr!_ ([#4721](https://github.com/lbryio/lbry-desktop/pull/4721))
 - Floating player: Stay within screen when window is resized _community pr!_([#4750](https://github.com/lbryio/lbry-desktop/pull/4750))
 - App crash when including % sign in search _community pr!_([#4753](https://github.com/lbryio/lbry-desktop/pull/4753))
+- Fix markdown editor "preview" not working when `<iframe>`s are present _community pr!_([#4767](https://github.com/lbryio/lbry-desktop/pull/4767))
 - First comment on claim not showing up immeditately ([#4747](https://github.com/lbryio/lbry-desktop/pull/4747))
 - Fix "Password updated successfully" kept showing up _community pr!_([#4766](https://github.com/lbryio/lbry-desktop/pull/4766))
 
diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 67ef22bd1..bf4c7d05d 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} />;
+                    const preview = <MarkdownPreview content={plainText} isStubEmbed />;
                     return ReactDOMServer.renderToString(preview);
                   },
                 }}
diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index eebdf1a45..1316bb7e0 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -21,12 +21,14 @@ type SimpleLinkProps = {
   href?: string,
   title?: string,
   children?: React.Node,
+  isStubEmbed?: boolean,
 };
 
 type MarkdownProps = {
   strip?: boolean,
   content: ?string,
   promptLinks?: boolean,
+  isStubEmbed?: boolean,
 };
 
 const SimpleText = (props: SimpleTextProps) => {
@@ -35,7 +37,7 @@ const SimpleText = (props: SimpleTextProps) => {
 
 const SimpleLink = (props: SimpleLinkProps) => {
   const { title, children } = props;
-  const { href } = props;
+  const { href, isStubEmbed } = props;
 
   if (!href) {
     return children || null;
@@ -56,7 +58,13 @@ const SimpleLink = (props: SimpleLinkProps) => {
   if (embed) {
     // Decode this since users might just copy it from the url bar
     const decodedUri = decodeURI(uri);
-    return <EmbedPlayButton uri={decodedUri} />;
+    return isStubEmbed ? (
+      <div className="embed__inline-button-preview">
+        <pre>{decodedUri}</pre>
+      </div>
+    ) : (
+      <EmbedPlayButton uri={decodedUri} />
+    );
   }
 
   const webLink = formatLbryUrlForWeb(uri);
@@ -86,7 +94,7 @@ schema.attributes.a.push('embed');
 const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g;
 
 const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, strip, promptLinks } = props;
+  const { content, strip, promptLinks, isStubEmbed } = 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
@@ -110,7 +118,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     sanitize: schema,
     fragment: React.Fragment,
     remarkReactComponents: {
-      a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} />,
+      a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} isStubEmbed={isStubEmbed} />,
       // Workaraund of remarkOptions.Fragment
       div: React.Fragment,
     },
diff --git a/ui/scss/component/_embed-player.scss b/ui/scss/component/_embed-player.scss
index 687197c8b..5783db382 100644
--- a/ui/scss/component/_embed-player.scss
+++ b/ui/scss/component/_embed-player.scss
@@ -26,6 +26,12 @@
   }
 }
 
+.embed__inline-button-preview {
+  @extend .embed__inline-button;
+  background-color: var(--color-editor-inline-code-bg);
+  width: 50%;
+}
+
 .embed__loading {
   width: 100%;
   height: 100%;