From fcec87c5e4a7ebe869e9b98fc55de3e6b8762c5b Mon Sep 17 00:00:00 2001
From: malik masis <malik.masis@gmail.com>
Date: Tue, 5 Jul 2022 16:59:53 +0300
Subject: [PATCH] Added the AddWidget button to Page/Update

---
 .../Pages/CmsKit/Pages/Update.cshtml          |  1 +
 .../Pages/CmsKit/Pages/create.js              |  4 +--
 .../Pages/CmsKit/Pages/update.js              | 29 +++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml
index 499ad1b633..ea6f8c9a1b 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml
@@ -30,6 +30,7 @@
     <abp-script src="/client-proxies/cms-kit-common-proxy.js"/>
     <abp-script src="/client-proxies/cms-kit-admin-proxy.js"/>
     <abp-script src="/Pages/CmsKit/Pages/update.js" />
+    <abp-script src="/Pages/CmsKit/Contents/addWidgetModal.js" />
 </abp-script-bundle>
 }
 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
index be705d6316..f511cfc1cd 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
@@ -122,7 +122,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createLastButton(),
+                    el: createAddWidgetButton(),
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -171,7 +171,7 @@ $(function () {
         });
     }
 
-    function createLastButton() {
+    function createAddWidgetButton() {
         //TODO add auth
         const button = document.createElement('button');
 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
index 6bd90dd934..9b42338854 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
@@ -4,6 +4,7 @@ $(function () {
 
     var $formUpdate = $('#form-page-update');
     var $buttonSubmit = $('#button-page-update');
+    var widgetModal = new abp.ModalManager({ viewUrl: abp.appPath + "CmsKit/Contents/AddWidgetModal", modalClass: "addWidgetModal" });
 
     $formUpdate.data('validator').settings.ignore = ":hidden, [contenteditable='true']:not([name]), .tui-popup-wrapper";
 
@@ -83,6 +84,19 @@ $(function () {
             minHeight: "25em",
             initialEditType: 'markdown',
             language: $editorContainer.data("language"),
+            toolbarItems: [
+                ['heading', 'bold', 'italic', 'strike'],
+                ['hr', 'quote'],
+                ['ul', 'ol', 'task', 'indent', 'outdent'],
+                ['table', 'image', 'link'],
+                ['code', 'codeblock'],
+                // Using Option: Customize the last button
+                [{
+                    el: createAddWidgetButton(),
+                    command: 'bold',
+                    tooltip: 'Add Widget'
+                }]
+            ],
             hooks: {
                 addImageBlobHook: uploadFile,
             },
@@ -126,4 +140,19 @@ $(function () {
             }
         });
     }
+
+    function createAddWidgetButton() {
+        const button = document.createElement('button');
+
+        button.className = 'toastui-editor-toolbar-icons last dropdown';
+        button.style.backgroundImage = 'none';
+        button.style.margin = '0';
+        button.innerHTML = `AW`;
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            widgetModal.open();
+        });
+
+        return button;
+    }
 });