Merge pull request #17563 from abpframework/salihozkara/cmskit

Cms: Fix Page feature preview problem

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js

@@ -92,12 +92,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,
@@ -117,7 +120,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -171,27 +174,48 @@ $(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", '');
 
             let content = editor.getMarkdown();
+            addWidgetButton.disabled = true;
             localStorage.setItem('content', content);
 
             $.post("/CmsKitCommonWidgets/ContentPreview", { content: content }, function (result) {
+                var style = styleEditor.getValue();
+                var script = scriptEditor.getValue();
 
-                let style = styleEditor.getValue();
+                var parser = new DOMParser();
-
+                var doc = parser.parseFromString(result, 'text/html');
-                $('#editor-preview-style').remove();
+                
-
+                var head = doc.querySelector('head');
-                $('head').append('<style id="editor-preview-style">' + style + '</style>');
+                var styleElement = doc.createElement('style');
-
+                styleElement.type = 'text/css';
-                editor.setHTML(result);
+                styleElement.innerHTML = style;
+                head.append(styleElement);
+
+                var body = doc.querySelector('body');
+                var scriptElement = doc.createElement('script');
+                scriptElement.type = 'text/javascript';
+                scriptElement.innerHTML = script;
+                body.append(scriptElement);
+                
+                result = new XMLSerializer().serializeToString(doc);
                 
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
+                $previewArea = $("#previewArea");
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write'){
+            addWidgetButton.disabled = false;
             var retrievedObject = localStorage.getItem('content');
             editor.setMarkdown(retrievedObject);
         }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js

@@ -62,12 +62,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,
@@ -87,7 +90,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -141,24 +144,44 @@ $(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) {
 
-                let style = styleEditor.getValue();
+                var style = styleEditor.getValue();
+                var script = scriptEditor.getValue();
 
-                $('#editor-preview-style').remove();
+                var parser = new DOMParser();
+                var doc = parser.parseFromString(result, 'text/html');
 
-                $('head').append('<style id="editor-preview-style">' + style + '</style>');
+                var head = doc.querySelector('head');
+                var styleElement = doc.createElement('style');
+                styleElement.type = 'text/css';
+                styleElement.innerHTML = style;
+                head.append(styleElement);
 
-                editor.setHTML(result);
+                var body = doc.querySelector('body');
+                var scriptElement = doc.createElement('script');
+                scriptElement.type = 'text/javascript';
+                scriptElement.innerHTML = script;
+                body.append(scriptElement);
 
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
+                result = new XMLSerializer().serializeToString(doc);
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                $previewArea = $("#previewArea");
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write') {

modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml

@@ -1,10 +1,15 @@
-@using Volo.CmsKit.Contents
+@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
-@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
+@using Volo.Abp.AspNetCore.Mvc.UI.Theming
 
-@model DefaultContentDto
+@model Volo.CmsKit.Contents.DefaultContentDto
 
-<div class="content">
+@inject IThemeManager ThemeManager
+@{
+    Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
+}
 
-    @await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)
+<abp-card>
-
+    <abp-card-body>
-</div>
+         @await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)
+    </abp-card-body>
+</abp-card>

modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/_ViewImports.cshtml

@@ -0,0 +1,6 @@
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
+@addTagHelper *, Volo.CmsKit.Common.Web
+@addTagHelper *, Volo.CmsKit.Public.Web