Up newsletter demo

demo-newsletter-editor.html

@@ -3,37 +3,22 @@
   <head>
     <meta charset="utf-8">
     <title>GrapesJS Demo - Free Open Source Newsletter Editor</title>
-    <meta content="Best Free Open Source Responsive Newsletter Builder" name="description">
+    <meta content="Best Free Open Source Responsive No-Code Newsletter HTML Email Builder" name="description">
     <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.20.3">
     <link rel="stylesheet" href="stylesheets/material.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
-    <link rel="stylesheet" href="stylesheets/toastr.min.css">
-    <link rel="stylesheet" href="stylesheets/grapesjs-preset-newsletter.css?v=0.2.21">
     <link rel="stylesheet" href="stylesheets/demos.css?v2">
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="js/aviary.js"></script>
     <script src="js/grapes.min.js?v0.20.3"></script>
     <script src="./js/ckeditor/ckeditor.js"></script>
-    <script src="./js/grapesjs-plugin-ckeditor.min.js"></script>
+    <script src="https://unpkg.com/grapesjs-plugin-ckeditor@0.0.10"></script>
-    <script src="./js/grapesjs-preset-newsletter.min.js?v=0.2.21"></script>
+    <script src="https://unpkg.com/grapesjs-preset-newsletter@1.0.1"></script>
-    <script src="./js/grapesjs-aviary.min.js"></script>
-    <script src="./js/toastr.min.js"></script>
-    <script src="./js/ajaxable.min.js"></script>
   </head>
   <style>
     .nl-link {
       color: inherit;
     }
 
-    .gjs-clm-tag {
-      color: white;
-    }
-
-    .gjs-four-color {
-      color: #35d7bb;
-    }
-
     .gjs-logo-version {
       background-color: #5a606d;
     }
@@ -61,7 +46,7 @@
             <table class="c1766">
               <tr>
                 <td class="cell c1769">
-                  <img class="c926" src="//artf.github.io/grapesjs/img/grapesjs-logo.png" alt="GrapesJS."/>
+                  <img class="c926" src="https://grapesjs.com/img/grapesjs-logo.png" alt="GrapesJS."/>
                 </td>
                 <td class="cell c1776">
                   <div class="c1144">GrapesJS Newsletter Builder
@@ -73,7 +58,7 @@
             <table class="card">
               <tr>
                 <td class="card-cell">
-                  <img class="c1271" src="//artf.github.io/grapesjs/img/tmp-header-txt.jpg" alt="Big image here"/>
+                  <img class="c1271" src="https://grapesjs.com/img/tmp-header-txt.jpg" alt="Big image here"/>
                   <table class="table100 c1357">
                     <tr>
                       <td class="card-content">
@@ -85,7 +70,7 @@
                         <table class="c1542">
                           <tr>
                             <td class="card-footer" id="c1545">
-                              <a class="button" href="https://github.com/artf/grapesjs">Free and Open Source
+                              <a class="button" href="https://github.com/grapesjs/grapesjs">Free and Open Source
                               </a>
                             </td>
                           </tr>
@@ -102,7 +87,7 @@
                   <table class="list-item-content">
                     <tr class="list-item-row">
                       <td class="list-cell-left">
-                        <img class="list-item-image" src="//artf.github.io/grapesjs/img/tmp-blocks.jpg" alt="Image1"/>
+                        <img class="list-item-image" src="https://grapesjs.com/img/tmp-blocks.jpg" alt="Image1"/>
                       </td>
                       <td class="list-cell-right">
                         <h1 class="card-title">Built-in Blocks
@@ -121,7 +106,7 @@
                   <table class="list-item-content">
                     <tr class="list-item-row">
                       <td class="list-cell-left">
-                        <img class="list-item-image" src="//artf.github.io/grapesjs/img/tmp-tgl-images.jpg" alt="Image2"/>
+                        <img class="list-item-image" src="https://grapesjs.com/img/tmp-tgl-images.jpg" alt="Image2"/>
                       </td>
                       <td class="list-cell-right">
                         <h1 class="card-title">Toggle images
@@ -140,7 +125,7 @@
                   <table class="grid-item-card">
                     <tr>
                       <td class="grid-item-card-cell">
-                        <img class="grid-item-image" src="//artf.github.io/grapesjs/img/tmp-send-test.jpg" alt="Image1"/>
+                        <img class="grid-item-image" src="https://grapesjs.com/img/tmp-send-test.jpg" alt="Image1"/>
                         <table class="grid-item-card-body">
                           <tr>
                             <td class="grid-item-card-content">
@@ -159,7 +144,7 @@
                   <table class="grid-item-card">
                     <tr>
                       <td class="grid-item-card-cell">
-                        <img class="grid-item-image" src="//artf.github.io/grapesjs/img/tmp-devices.jpg" alt="Image2"/>
+                        <img class="grid-item-image" src="https://grapesjs.com/img/tmp-devices.jpg" alt="Image2"/>
                         <table class="grid-item-card-body">
                           <tr>
                             <td class="grid-item-card-content">
@@ -182,7 +167,7 @@
                   <div class="c2577">
                     <p class="footer-info">GrapesJS Newsletter Builder is a free and open source preset (plugin) used on top of the GrapesJS core library.
                   For more information about and how to integrate it inside your applications check<p>
-                  <a class="link" href="https://github.com/artf/grapesjs-preset-newsletter">GrapesJS Newsletter Preset</a>
+                  <a class="link" href="https://github.com/grapesjs/preset-newsletter">GrapesJS Newsletter Preset</a>
                     <br/>
                   </div>
                   <div class="c2421">
@@ -504,13 +489,13 @@
       <br/>
       <div class="info-panel-label">
         <b>GrapesJS Newsletter Builder</b> is a showcase of what/how is possible to build an editor using the
-        <a class="info-panel-link gjs-four-color" target="_blank" href="//artf.github.io/grapesjs/">GrapesJS</a>
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://grapesjs.com/">GrapesJS</a>
         core library
         <br/><br/>
         For any tip about this demo (or newsletters construction in general) check the
-        <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs-preset-newsletter">Newsletter Preset repository</a>
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/grapesjs/preset-newsletter">Newsletter Preset repository</a>
         and open an issue. For any problem with the builder itself, open an issue on the main
-        <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/grapesjs/grapesjs">GrapesJS repository</a>
         <br/><br/>
         Being a free and open source project contributors and supporters are extremely welcome.
         If you like the project support it with a donation of your choice or become a backer/sponsor via
@@ -533,17 +518,11 @@
 
 
     <script type="text/javascript">
-      var host = '//artf.github.io/grapesjs/';
+      var host = 'https://grapesjs.com/';
-      var images = [
-        host + 'img/grapesjs-logo.png',
-        host + 'img/tmp-blocks.jpg',
-        host + 'img/tmp-tgl-images.jpg',
-        host + 'img/tmp-send-test.jpg',
-        host + 'img/tmp-devices.jpg',
-      ];
 
       // Set up GrapesJS editor with the Newsletter plugin
       var editor = grapesjs.init({
+        selectorManager: { componentFirst: true },
         clearOnRender: true,
         height: '100%',
         storageManager: {
@@ -552,19 +531,24 @@
           }
         },
         assetManager: {
-          assets: images,
+          assets: [
-          upload: 0,
+            host + 'img/grapesjs-logo.png',
+            host + 'img/tmp-blocks.jpg',
+            host + 'img/tmp-tgl-images.jpg',
+            host + 'img/tmp-send-test.jpg',
+            host + 'img/tmp-devices.jpg',
+          ],
+          upload: false,
           uploadText: 'Uploading is not available in this demo',
         },
         container : '#gjs',
         fromElement: true,
-        plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor'],
+        plugins: ['grapesjs-preset-newsletter', 'gjs-plugin-ckeditor'],
         pluginsOpts: {
-          'gjs-preset-newsletter': {
+          'grapesjs-preset-newsletter': {
             modalLabelImport: 'Paste all your code here below and click import',
             modalLabelExport: 'Copy the code and use it wherever you want',
             codeViewerTheme: 'material',
-            //defaultTemplate: templateImport,
             importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
             cellStyle: {
               'font-size': '12px',
@@ -597,109 +581,36 @@
 
 
       // Let's add in this demo the possibility to test our newsletters
-      var mdlClass = 'gjs-mdl-dialog-sm';
       var pnm = editor.Panels;
       var cmdm = editor.Commands;
       var md = editor.Modal;
-      /*
-      var testContainer = document.getElementById("test-form");
-      var contentEl = testContainer.querySelector('input[name=body]');
-      cmdm.add('send-test', {
-        run(editor, sender) {
-          sender.set('active', 0);
-          var modalContent = md.getContentEl();
-          var mdlDialog = document.querySelector('.gjs-mdl-dialog');
-          var cmdGetCode = cmdm.get('gjs-get-inlined-html');
-          contentEl.value = cmdGetCode && cmdGetCode.run(editor);
-          mdlDialog.className += ' ' + mdlClass;
-          testContainer.style.display = 'block';
-          md.setTitle('Test your Newsletter');
-          md.setContent('');
-          md.setContent(testContainer);
-          md.open();
-          md.getModel().once('change:open', function() {
-            mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
-            //clean status
-          })
-        }
-      });
-      pnm.addButton('options', {
-        id: 'send-test',
-        className: 'fa fa-paper-plane',
-        command: 'send-test',
-        attributes: {
-          'title': 'Test Newsletter',
-          'data-tooltip-pos': 'bottom',
-        },
-      });
-
-      var statusFormElC = document.querySelector('.form-status');
-      var statusFormEl = document.querySelector('.form-status i');
-      var ajaxTest = ajaxable(testContainer).
-        onStart(function(){
-          statusFormEl.className = 'fa fa-refresh anim-spin';
-          statusFormElC.style.opacity = '1';
-          statusFormElC.className = 'form-status';
-        })
-        .onResponse(function(res){
-          if (res.data) {
-            statusFormElC.style.opacity = '0';
-            statusFormEl.removeAttribute('data-tooltip');
-            md.close();
-          } else if(res.errors || res.errors == '') {
-            var err = res.errors || 'Server error';
-            statusFormEl.className = 'fa fa-exclamation-circle';
-            statusFormEl.setAttribute('data-tooltip', err);
-            statusFormElC.className = 'form-status text-danger';
-          }
-        });
-      */
 
       // Add info command
       var infoContainer = document.getElementById("info-panel");
       cmdm.add('open-info', {
         run: function(editor, sender) {
+          var mdlClass = 'gjs-mdl-dialog-sm';
           sender.set('active', 0);
           var mdlDialog = document.querySelector('.gjs-mdl-dialog');
           mdlDialog.className += ' ' + mdlClass;
           infoContainer.style.display = 'block';
-          md.setTitle('About this demo');
+          md.open({
-          md.setContent('');
+            title: 'About this demo',
-          md.setContent(infoContainer);
+            content: infoContainer,
-          md.open();
+          });
           md.getModel().once('change:open', function() {
             mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
           })
         }
       });
+
+      // Add info button
+      const iconStyle = 'style="display: block; max-width: 22px"';
       pnm.addButton('options', [{
-        id: 'undo',
-        className: 'fa fa-undo',
-        attributes: {title: 'Undo'},
-        command: function(){ editor.runCommand('core:undo') }
-      },{
-        id: 'redo',
-        className: 'fa fa-repeat',
-        attributes: {title: 'Redo'},
-        command: function(){ editor.runCommand('core:redo') }
-      },{
-        id: 'clear-all',
-        className: 'fa fa-trash icon-blank',
-        attributes: {title: 'Clear canvas'},
-        command: {
-          run: function(editor, sender) {
-            sender && sender.set('active', false);
-            if(confirm('Are you sure to clean the canvas?')){
-              editor.DomComponents.clear();
-              setTimeout(function(){
-                localStorage.clear()
-              },0)
-            }
-          }
-        }
-      },{
         id: 'view-info',
-        className: 'fa fa-question-circle',
+        label: `<svg ${iconStyle} viewBox="0 0 24 24">
+            <path fill="currentColor" d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+        </svg>`,
         command: 'open-info',
         attributes: {
           'title': 'About',
@@ -707,20 +618,29 @@
         },
       }]);
 
-      // Simple warn notifier
-      var origWarn = console.warn;
-      toastr.options = {
-        closeButton: true,
-        preventDuplicates: true,
-        showDuration: 250,
-        hideDuration: 150
-      };
-      console.warn = function (msg) {
-        toastr.warning(msg);
-        origWarn(msg);
-      };
-
       // Beautify tooltips
+      [
+        ['sw-visibility', 'Show Borders'],
+        ['preview', 'Preview'],
+        ['fullscreen', 'Fullscreen'],
+        ['export-template', 'Export'],
+        ['undo', 'Undo'],
+        ['redo', 'Redo'],
+        ['gjs-open-import-template', 'Import'],
+        ['gjs-toggle-images', 'Toggle images'],
+        ['canvas-clear', 'Clear canvas']
+      ].forEach(function(item) {
+        pnm.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
+      });
+      // [
+      //   ['open-sm', 'Style Manager'],
+      //   ['open-layers', 'Layers'],
+      //   ['open-blocks', 'Blocks']
+      // ].forEach(function(item) {
+      //   pnm.getButton('views', item[0]).set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom', title2: item[1] });
+      //   console.log('views', item[0], pnm.getButton('views', item[0]).get('attributes'))
+      // });
+
       var titles = document.querySelectorAll('*[title]');
       for (var i = 0; i < titles.length; i++) {
         var el = titles[i];
@@ -732,19 +652,24 @@
         el.setAttribute('title', '');
       }
 
+      // Update canvas-clear command
+      cmdm.add('canvas-clear', function() {
+        if(confirm('Are you sure to clean the canvas?')) {
+          editor.runCommand('core:canvas-clear')
+          setTimeout(function(){ localStorage.clear()}, 0)
+        }
+      });
 
       // Do stuff on load
       editor.on('load', function() {
-        var $ = grapesjs.$;
+        // Show borders by default
+        pnm.getButton('options', 'sw-visibility').set('active', 1);
 
         // Show logo with the version
         var logoCont = document.querySelector('.gjs-logo-cont');
         document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
         var logoPanel = document.querySelector('.gjs-pn-commands');
         logoPanel.appendChild(logoCont);
-
-        // Move Ad
-        $('#gjs').append($('.ad-cont'));
       });
     </script>
     <script>