24.12.00 grapes js editor enhancements

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/[email protected]/dist/index.min.js"></script>
     <script src="https://unpkg.com/grapesjs-script-editor"></script>
@@ -115,6 +116,46 @@
                 });
             }
         });
+        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' },
+            { 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');

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/[email protected]/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/[email protected]/dist/index.min.js"></script>
   <script src="https://unpkg.com/grapesjs-script-editor"></script>
@@ -113,6 +114,46 @@
                 });
             }
       });
+      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' },
+            { 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('templateId'); 

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