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

@@ -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))
 

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);
                   },
                 }}

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,
     },

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%;