From dd1441f4499ddc7247778ba433049891c4822e0b Mon Sep 17 00:00:00 2001
From: Salih <salihozkara00@gmail.com>
Date: Thu, 21 Sep 2023 10:06:27 +0300
Subject: [PATCH] Fix Blog Post Preview

---
 .../Pages/CmsKit/BlogPosts/create.js          | 21 +++++++++++++------
 .../Pages/CmsKit/BlogPosts/update.js          | 21 ++++++++++++++-----
 .../Components/ContentPreview/Default.cshtml  |  7 ++-----
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js
index a101635d73..04ac2a6fa8 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/create.js
@@ -253,12 +253,13 @@ $(function () {
     initEditor();
 
     var editor;
-
+    var addWidgetButton;
     function initEditor() {
         var $editorContainer = $("#ContentEditor");
         var inputName = $editorContainer.data('input-id');
         var $editorInput = $('#' + inputName);
         var initialValue = $editorInput.val();
+        addWidgetButton = createAddWidgetButton();
 
         editor = new toastui.Editor({
             el: $editorContainer[0],
@@ -279,7 +280,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -334,20 +335,28 @@ $(function () {
         editor.insertText(txt);
     });
 
+    var $previewArea;
     $('.tab-item').on('click', function () {
         if ($(this).attr("aria-label") == 'Preview' && editor.isMarkdownMode()) {
 
+            if(!$previewArea){
+                $previewArea = $("#ContentEditor .toastui-editor-md-preview");
+                $previewArea.replaceWith("<iframe id='previewArea' style='height: 100%; width: 100%; border: 0px; display: inline;'></iframe>");
+            }
+
+            $previewArea.attr("srcdoc", '');
+
+            addWidgetButton.disabled = true;
             let content = editor.getMarkdown();
             localStorage.setItem('content', content);
 
             $.post("/CmsKitCommonWidgets/ContentPreview", { content: content }, function (result) {
-                editor.setHTML(result);
-
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                $previewArea = $("#previewArea");
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write') {
+            addWidgetButton.disabled = false;
             var retrievedObject = localStorage.getItem('content');
             editor.setMarkdown(retrievedObject);
         }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js
index d14194ecb5..d22121f8c9 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/update.js
@@ -164,12 +164,15 @@ $(function () {
     initEditor();
 
     var editor;
+    var addWidgetButton;
     function initEditor() {
         var $editorContainer = $("#ContentEditor");
         var inputName = $editorContainer.data('input-id');
         var $editorInput = $('#' + inputName);
         var initialValue = $editorInput.val();
 
+        addWidgetButton = createAddWidgetButton();
+
         editor = new toastui.Editor({
             el: $editorContainer[0],
             usageStatistics: false,
@@ -189,7 +192,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -255,20 +258,28 @@ $(function () {
         editor.insertText(txt);
     });
 
+    var $previewArea;
     $('.tab-item').on('click', function () {
         if ($(this).attr("aria-label") == 'Preview' && editor.isMarkdownMode()) {
 
+            if(!$previewArea){
+                $previewArea = $("#ContentEditor .toastui-editor-md-preview");
+                $previewArea.replaceWith("<iframe id='previewArea' style='height: 100%; width: 100%; border: 0px; display: inline;'></iframe>");
+            }
+
+            $previewArea.attr("srcdoc", '');
+
+            addWidgetButton.disabled = true;
             let content = editor.getMarkdown();
             localStorage.setItem('content', content);
 
             $.post("/CmsKitCommonWidgets/ContentPreview", { content: content }, function (result) {
-                editor.setHTML(result);
-
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                $previewArea = $("#previewArea");
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write') {
+            addWidgetButton.disabled = false;
             var retrievedObject = localStorage.getItem('content');
             editor.setMarkdown(retrievedObject);
         }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
index 450eb46f20..82c3bc36f0 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
@@ -8,8 +8,5 @@
     Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
 }
 
-<abp-card>
-    <abp-card-body>
-         @await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)
-    </abp-card-body>
-</abp-card>
\ No newline at end of file
+<div class="mt-3">@await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)</div>
+