From 6b74813132a5cd25085cb4daf10ecb11ee3f2142 Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Fri, 15 Nov 2024 15:41:10 +0000
Subject: [PATCH 1/6] feat: Make GJS Body Stylable

Make the body element in gjs template and page editor stylable in order in order to sue Flex.
---
 .../interface/themes/responsive/WebBuilder/createTemplatejs.tpl  | 1 +
 code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
index 266dc88a81..2f48614e35 100644
--- a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
@@ -116,6 +116,7 @@
             }
         });
         editor.on('load', () => {
+            editor.getWrapper().set('stylable', true);
             const urlParams = new URLSearchParams(window.location.search);
             const templateId = urlParams.get('id');
             const url = Globals.path + '/WebBuilder/AJAX?method=loadGrapesTemplate&id=' + templateId;
diff --git a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
index b4c15b8d6c..9fcf4e1ad5 100644
--- a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
@@ -114,6 +114,7 @@
             }
       });
       editor.on('load', () => {
+        editor.getWrapper().set('stylable', true);
         const urlParams = new URLSearchParams(window.location.search);
         const templateId = urlParams.get('templateId'); 
         const grapesPageId = urlParams.get('id');

From b93d9d5fbb354d4c0560b772cba44356f60a637c Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Fri, 15 Nov 2024 16:15:03 +0000
Subject: [PATCH 2/6] feat: Add Headers Section  and Headers

Add Custom Blocks for H1, H2 and H3 headers
---
 .../WebBuilder/createTemplatejs.tpl           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
index 2f48614e35..24093cabb1 100644
--- a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
@@ -5,6 +5,7 @@
     <title>Create Template</title>
     <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.10/css/grapes.min.css" integrity="sha512-F+EUNfBQvAXDvJcKgbm5DgtsOcy+5uhbGuH8VtK0ru/N6S3VYM9OHkn9ACgDlkwoxesxgeaX/6BdrQItwbBQNQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.10/grapes.min.js" integrity="sha512-TavCuu5P1hn5roGNJSursS0xC7ex1qhRcbAG90OJYf5QEc4C/gQfFH/0MKSzkAFil/UBCTJCe/zmW5Ei091zvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/grapesjs-blocks-basic@1.0.2/dist/index.min.js"></script>
     <script src="https://unpkg.com/grapesjs-script-editor"></script>
@@ -117,6 +118,26 @@
         });
         editor.on('load', () => {
             editor.getWrapper().set('stylable', true);
+            //Add headers in Headers block
+            editor.BlockManager.add('h1', {
+                label: 'H1',
+                content: '<h1>Heading 1</h1>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' }
+            });
+            editor.BlockManager.add('h2', {
+                label: 'H2',
+                content: '<h2>Heading 2</h2>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' },
+            });
+            editor.BlockManager.add('h3', {
+                label: 'H3',
+                content: '<h3>Heading 3</h3>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' },
+            });
+
             const urlParams = new URLSearchParams(window.location.search);
             const templateId = urlParams.get('id');
             const url = Globals.path + '/WebBuilder/AJAX?method=loadGrapesTemplate&id=' + templateId;

From cfc6ef93ed7d5062c73e3e1fb7ca47571ee4ea49 Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Fri, 15 Nov 2024 16:20:31 +0000
Subject: [PATCH 3/6] feat: Add Headers Section and Headers to Pages

Add a section for headers and custom blocks for h1, h2 and h3 to grapes page editor
---
 .../themes/responsive/WebBuilder/grapesjs.tpl | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
index 9fcf4e1ad5..49d513d3b9 100644
--- a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Grapes JS Page Editor</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grapesjs@0.21.10/dist/css/grapes.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.10/grapes.min.js" integrity="sha512-TavCuu5P1hn5roGNJSursS0xC7ex1qhRcbAG90OJYf5QEc4C/gQfFH/0MKSzkAFil/UBCTJCe/zmW5Ei091zvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdn.jsdelivr.net/npm/grapesjs-blocks-basic@1.0.2/dist/index.min.js"></script>
   <script src="https://unpkg.com/grapesjs-script-editor"></script>
@@ -115,6 +116,26 @@
       });
       editor.on('load', () => {
         editor.getWrapper().set('stylable', true);
+         //Add headers in Headers block
+         editor.BlockManager.add('h1', {
+                label: 'H1',
+                content: '<h1>Heading 1</h1>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' }
+            });
+            editor.BlockManager.add('h2', {
+                label: 'H2',
+                content: '<h2>Heading 2</h2>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' },
+            });
+            editor.BlockManager.add('h3', {
+                label: 'H3',
+                content: '<h3>Heading 3</h3>',
+                category: 'Headers',
+                attributes: { class: 'fa fa-header' },
+            });
+            
         const urlParams = new URLSearchParams(window.location.search);
         const templateId = urlParams.get('templateId'); 
         const grapesPageId = urlParams.get('id');

From 155c29253432a4ea789fbf4dd4bae4318ed030b4 Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Fri, 15 Nov 2024 17:11:17 +0000
Subject: [PATCH 4/6] feat: Add Tooltips Where Not Default

Add Tooltips for the items items in the top menu that do not contain them as default
---
 .../WebBuilder/createTemplatejs.tpl           | 18 ++++++++++++++++++
 .../themes/responsive/WebBuilder/grapesjs.tpl | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
index 24093cabb1..2e27c3241b 100644
--- a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
@@ -117,6 +117,24 @@
             }
         });
         editor.on('load', () => {
+            //Add tooltips for buttons that do not include them by default
+            const buttonsWithTooltips = [
+                { id: 'undo', title: 'Undo Last Action' },
+                { id: 'redo', title: 'Redo Last Action' },
+                { id: 'gjs-open-import-webpage', title: 'Add Custom Code' },
+                { id: 'canvas-clear', title: 'Clear Canvas' }
+            ];
+
+            buttonsWithTooltips.forEach(button => {
+                const buttonElement = editor.Panels.getButton('options', button.id);
+                if (buttonElement) {
+                    buttonElement.set('attributes', {
+                        title: button.title,
+                        'data-tooltips-pos': 'bottom'
+                    });
+                }
+            });
+                       
             editor.getWrapper().set('stylable', true);
             //Add headers in Headers block
             editor.BlockManager.add('h1', {
diff --git a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
index 49d513d3b9..a932aaac65 100644
--- a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
@@ -115,6 +115,23 @@
             }
       });
       editor.on('load', () => {
+        const buttonsWithTooltips = [
+            { id: 'undo', title: 'Undo Last Action' },
+            { id: 'redo', title: 'Redo Last Action' },
+            { id: 'gjs-open-import-webpage', title: 'Add Custom Code' },
+            { id: 'canvas-clear', title: 'Clear Canvas' }
+        ];
+
+        buttonsWithTooltips.forEach(button => {
+          const buttonElement = editor.Panels.getButton('options', button.id);
+                if (buttonElement) {
+                    buttonElement.set('attributes', {
+                        title: button.title,
+                        'data-tooltips-pos': 'bottom'
+                    });
+                }
+        });
+
         editor.getWrapper().set('stylable', true);
          //Add headers in Headers block
          editor.BlockManager.add('h1', {
@@ -135,7 +152,7 @@
                 category: 'Headers',
                 attributes: { class: 'fa fa-header' },
             });
-            
+
         const urlParams = new URLSearchParams(window.location.search);
         const templateId = urlParams.get('templateId'); 
         const grapesPageId = urlParams.get('id');

From c50c2fdb82b20f2a3fe257b87e14e4f1c0236be5 Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Fri, 15 Nov 2024 17:31:19 +0000
Subject: [PATCH 5/6] chore: Update Changelog

---
 code/web/release_notes/24.12.00.MD | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/web/release_notes/24.12.00.MD b/code/web/release_notes/24.12.00.MD
index 1e3e152725..fae0fa09ea 100644
--- a/code/web/release_notes/24.12.00.MD
+++ b/code/web/release_notes/24.12.00.MD
@@ -12,6 +12,10 @@
 // james staub - Nashville
 
 // alexander - PTFSE
+### Web Builder Updates - Grapes JS
+- Added tooltips to the buttons in the the top menu bar of the GrapesJS editor that did not have them as default. (*AB*)
+- Added the ability to add styles to the body element in the GrapesJS editor. (*AB*)
+- Added a custom Headers section with custom blocks for H1, H2 and H3 to the GrapesJS editor. (*AB*)
 
 // Chloe - PTFSE
 

From 85842a6e69a8630ecb41f8e31984cbb47803eec4 Mon Sep 17 00:00:00 2001
From: Alexander Blanchard <alexander.blanchard@ptfs-europe.com>
Date: Thu, 28 Nov 2024 17:21:38 +0000
Subject: [PATCH 6/6] refactor: Move new features outside of editor load

---
 .../WebBuilder/createTemplatejs.tpl           | 77 ++++++++++---------
 .../themes/responsive/WebBuilder/grapesjs.tpl | 60 ++++++++-------
 2 files changed, 70 insertions(+), 67 deletions(-)

diff --git a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
index 2e27c3241b..c446a9824a 100644
--- a/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/createTemplatejs.tpl
@@ -116,46 +116,47 @@
                 });
             }
         });
-        editor.on('load', () => {
-            //Add tooltips for buttons that do not include them by default
-            const buttonsWithTooltips = [
-                { id: 'undo', title: 'Undo Last Action' },
-                { id: 'redo', title: 'Redo Last Action' },
-                { id: 'gjs-open-import-webpage', title: 'Add Custom Code' },
-                { id: 'canvas-clear', title: 'Clear Canvas' }
-            ];
+        editor.getWrapper().set('stylable', true);
 
-            buttonsWithTooltips.forEach(button => {
-                const buttonElement = editor.Panels.getButton('options', button.id);
-                if (buttonElement) {
-                    buttonElement.set('attributes', {
-                        title: button.title,
-                        'data-tooltips-pos': 'bottom'
-                    });
-                }
-            });
-                       
-            editor.getWrapper().set('stylable', true);
-            //Add headers in Headers block
-            editor.BlockManager.add('h1', {
-                label: 'H1',
-                content: '<h1>Heading 1</h1>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' }
-            });
-            editor.BlockManager.add('h2', {
-                label: 'H2',
-                content: '<h2>Heading 2</h2>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' },
-            });
-            editor.BlockManager.add('h3', {
-                label: 'H3',
-                content: '<h3>Heading 3</h3>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' },
-            });
+        //Add headers in Headers block
+        editor.BlockManager.add('h1', {
+            label: 'H1',
+            content: '<h1>Heading 1</h1>',
+            category: 'Headers',
+            attributes: { class: 'fa fa-header' }
+        });
+        editor.BlockManager.add('h2', {
+            label: 'H2',
+            content: '<h2>Heading 2</h2>',
+            category: 'Headers',
+            attributes: { class: 'fa fa-header' },
+        });
+        editor.BlockManager.add('h3', {
+            label: 'H3',
+            content: '<h3>Heading 3</h3>',
+            category: 'Headers',
+            attributes: { class: 'fa fa-header' },
+        });
+
+        //Add tooltips for buttons that do not include them by default
+        const buttonsWithTooltips = [
+            { id: 'undo', title: 'Undo Last Action' },
+            { id: 'redo', title: 'Redo Last Action' },
+            { id: 'gjs-open-import-webpage', title: 'Add Custom Code' },
+            { id: 'canvas-clear', title: 'Clear Canvas' }
+        ];
 
+        buttonsWithTooltips.forEach(button => {
+            const buttonElement = editor.Panels.getButton('options', button.id);
+            if (buttonElement) {
+                buttonElement.set('attributes', {
+                    title: button.title,
+                    'data-tooltips-pos': 'bottom'
+                });
+            }
+        });
+
+        editor.on('load', () => {
             const urlParams = new URLSearchParams(window.location.search);
             const templateId = urlParams.get('id');
             const url = Globals.path + '/WebBuilder/AJAX?method=loadGrapesTemplate&id=' + templateId;
diff --git a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
index a932aaac65..c12643102f 100644
--- a/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
+++ b/code/web/interface/themes/responsive/WebBuilder/grapesjs.tpl
@@ -114,8 +114,30 @@
                 });
             }
       });
-      editor.on('load', () => {
-        const buttonsWithTooltips = [
+      editor.getWrapper().set('stylable', true);
+
+      //Add headers in Headers block
+      editor.BlockManager.add('h1', {
+          label: 'H1',
+          content: '<h1>Heading 1</h1>',
+          category: 'Headers',
+          attributes: { class: 'fa fa-header' }
+      });
+      editor.BlockManager.add('h2', {
+          label: 'H2',
+          content: '<h2>Heading 2</h2>',
+          category: 'Headers',
+          attributes: { class: 'fa fa-header' },
+      });
+      editor.BlockManager.add('h3', {
+          label: 'H3',
+          content: '<h3>Heading 3</h3>',
+          category: 'Headers',
+          attributes: { class: 'fa fa-header' },
+      });
+
+      //Add tooltips for buttons that do not include them by default
+      const buttonsWithTooltips = [
             { id: 'undo', title: 'Undo Last Action' },
             { id: 'redo', title: 'Redo Last Action' },
             { id: 'gjs-open-import-webpage', title: 'Add Custom Code' },
@@ -124,35 +146,15 @@
 
         buttonsWithTooltips.forEach(button => {
           const buttonElement = editor.Panels.getButton('options', button.id);
-                if (buttonElement) {
-                    buttonElement.set('attributes', {
-                        title: button.title,
-                        'data-tooltips-pos': 'bottom'
-                    });
-                }
+          if (buttonElement) {
+              buttonElement.set('attributes', {
+                  title: button.title,
+                  'data-tooltips-pos': 'bottom'
+              });
+          }
         });
 
-        editor.getWrapper().set('stylable', true);
-         //Add headers in Headers block
-         editor.BlockManager.add('h1', {
-                label: 'H1',
-                content: '<h1>Heading 1</h1>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' }
-            });
-            editor.BlockManager.add('h2', {
-                label: 'H2',
-                content: '<h2>Heading 2</h2>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' },
-            });
-            editor.BlockManager.add('h3', {
-                label: 'H3',
-                content: '<h3>Heading 3</h3>',
-                category: 'Headers',
-                attributes: { class: 'fa fa-header' },
-            });
-
+      editor.on('load', () => {
         const urlParams = new URLSearchParams(window.location.search);
         const templateId = urlParams.get('templateId'); 
         const grapesPageId = urlParams.get('id');