From daab8a28edcd1327dd7a9ac479a8a42675479951 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Thu, 14 Apr 2022 00:22:05 +0800
Subject: [PATCH] Fix post-editor preview mode (#7532)

## Cause
It broke because lack of awareness that we can't use our components in preview mode. For some reason, we don't have redux access in SimpleMDE's preview mode.

## Change
- Restore the stub for iframes
- Fix preview for images, and apply a similar styling as in Posts.

Co-authored-by: jessopb <36554050+jessopb@users.noreply.github.com>
---
 CHANGELOG.md                             |  1 +
 ui/component/common/markdown-preview.jsx | 15 ++++++++++-----
 ui/scss/component/_embed-player.scss     |  3 +--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f57ede3f..825c4439a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 ### Fixed
+- Fix post-editor preview mode _community pr!_ ([#7532](https://github.com/lbryio/lbry-desktop/pull/7532))
 
 ## [0.52.6] - [2022-04-04]
 
diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index 90edcc161..246edfc58 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/ui/component/common/markdown-preview.jsx
@@ -33,6 +33,7 @@ type SimpleTextProps = {
 type SimpleLinkProps = {
   href?: string,
   title?: string,
+  embed?: boolean,
   children?: React.Node,
 };
 
@@ -66,7 +67,7 @@ const SimpleText = (props: SimpleTextProps) => {
 // ****************************************************************************
 
 const SimpleLink = (props: SimpleLinkProps) => {
-  const { title, children, href } = props;
+  const { title, children, href, embed } = props;
 
   if (!href) {
     return children || null;
@@ -82,13 +83,13 @@ const SimpleLink = (props: SimpleLinkProps) => {
 
   const [uri, search] = href.split('?');
   const urlParams = new URLSearchParams(search);
-  const embed = urlParams.get('embed');
+  const embedParam = urlParams.get('embed');
 
-  if (embed) {
+  if (embed || embedParam) {
     // Decode this since users might just copy it from the url bar
     const decodedUri = decodeURI(uri);
     return (
-      <div className="embed__inline-button-preview">
+      <div className="embed__inline-button embed__inline-button--preview">
         <pre>{decodedUri}</pre>
       </div>
     );
@@ -195,7 +196,11 @@ export default React.memo<MarkdownProps>(function MarkdownPreview(props: Markdow
       // Workaraund of remarkOptions.Fragment
       div: React.Fragment,
       img: (imgProps) =>
-        isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? (
+        noDataStore ? (
+          <div className="file-viewer file-viewer--document">
+            <img {...imgProps} />
+          </div>
+        ) : isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? (
           <ZoomableImage {...imgProps} />
         ) : (
           <SimpleImageLink src={imgProps.src} alt={imgProps.alt} title={imgProps.title} />
diff --git a/ui/scss/component/_embed-player.scss b/ui/scss/component/_embed-player.scss
index 59ee8119f..5c37fc9a6 100644
--- a/ui/scss/component/_embed-player.scss
+++ b/ui/scss/component/_embed-player.scss
@@ -38,8 +38,7 @@
   }
 }
 
-.embed__inline-button-preview {
-  @extend .embed__inline-button;
+.embed__inline-button--preview {
   background-color: var(--color-editor-inline-code-bg);
   width: 50%;
 }