Update up to 0.8.4 and update website demo

demo.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>GrapesJS Demo</title>
+    <title>GrapesJS Demo - Open Source Website Page Builder</title>
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
     <link rel="stylesheet" href="stylesheets/grapes.min.css">
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.css">
@@ -117,23 +117,20 @@
            opacity: 0.95;
          }
 
-         #gjs-pn-commands {
-            display: none;
-         }
-
          #gjs-pn-devices-c {
            width: 85%;
            z-index: 1;
          }
 
-         #gjs-sm-float {
+         #gjs-sm-float,
+         #gjs-pn-commands,
+         #gjs-pn-views .fa-cog {
             display: none;
          }
 
          [data-tooltip]::after {
            background: rgba(51, 51, 51, 0.9);
          }
-
     </style>
   </head>
   <body>
@@ -910,7 +907,7 @@
       </style>
     </div>
 
-    <script src="js/grapes.min.js?v0.5.41"></script>
+    <script src="js/grapes.min.js?v0.8.4"></script>
     <script src="js/grapesjs-plugin-export.min.js"></script>
     <script src="js/grapesjs-plugin-filestack.min.js"></script>
     <script src="js/grapesjs-aviary.min.js"></script>

js/grapesjs-preset-webpage.js

@@ -1,6 +1,8 @@
 grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
   var opt = opts || {};
   var config = editor.getConfig();
+  var pfx = editor.getConfig().stylePrefix;
+  var modal = editor.Modal;
 
   config.showDevices = 0;
 
@@ -12,6 +14,29 @@ grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
     });
   }
 
+  /****************** IMPORTER *************************/
+
+  var codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
+  let container = document.createElement('div');
+  var btnImp = document.createElement('button');
+
+  // Init import button
+  btnImp.innerHTML = 'Import';
+  btnImp.className = pfx + 'btn-prim ' + pfx + 'btn-import';
+  btnImp.onclick = function() {
+    var code = codeViewer.editor.getValue();
+    editor.DomComponents.getWrapper().set('content', '');
+    editor.setComponents(code.trim());
+    modal.close();
+  };
+
+  // Init code viewer
+  codeViewer.set({
+    codeName: 'htmlmixed',
+    theme: opt.codeViewerTheme || 'hopscotch',
+    readOnly: 0
+  });
+
 
   /****************** COMMANDS *************************/
 
@@ -54,12 +79,45 @@ grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
     }
   });
 
+  cmdm.add('html-import', {
+    run: function(editor, sender) {
+      sender && sender.set('active', 0);
+
+      var modalContent = modal.getContentEl();
+      var viewer = codeViewer.editor;
+      modal.setTitle('Import Template');
+
+      // Init code viewer if not yet instantiated
+      if (!viewer) {
+        var txtarea = document.createElement('textarea');
+        var labelEl = document.createElement('div');
+        labelEl.className = pfx + 'import-label';
+        labelEl.innerHTML = 'Paste here your HTML/CSS and click Import';
+        container.appendChild(labelEl);
+        container.appendChild(txtarea);
+        container.appendChild(btnImp);
+        codeViewer.init(txtarea);
+        viewer = codeViewer.editor;
+      }
+
+      modal.setContent('');
+      modal.setContent(container);
+      codeViewer.setContent(
+          '<div class="txt-red">Hello world!</div>' +
+          '<style>\n.txt-red {color: red;padding: 30px\n}</style>'
+      );
+      modal.open();
+      viewer.refresh();
+    }
+  });
+
   /****************** BLOCKS *************************/
 
   var bm = editor.BlockManager;
   bm.add('link-block', {
     label: 'Link Block',
     attributes: {class:'fa fa-link'},
+    category: 'Basic',
     content: {
       type:'link',
       editable: false,
@@ -86,6 +144,11 @@ grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
     className: 'fa fa-repeat icon-redo',
     command: 'redo',
     attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }
+  },{
+    id: 'import',
+    className: 'fa fa-download',
+    command: 'html-import',
+    attributes: { title: 'Import' }
   },{
     id: 'clean-all',
     className: 'fa fa-trash icon-blank',
@@ -142,6 +205,22 @@ grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
 
   // Do stuff on load
   editor.on('load', function() {
+    // Load and show settings
+    var openTmBtn = pnm.getButton('views', 'open-tm');
+    openTmBtn && openTmBtn.set('active', 1);
+
+    // Add Settings Sector
+    var traitsSector = $('<div class="gjs-sm-sector no-select">'+
+      '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span>' +
+      ' Settings</div>' +
+      '<div class="gjs-sm-properties" style="display: none;"></div></div>');
+    var traitsProps = traitsSector.find('.gjs-sm-properties');
+    traitsProps.append($('.gjs-trt-traits'));
+    $('#gjs-sm-sectors').before(traitsSector);
+    traitsSector.find('.gjs-sm-title').on('click', function(){
+      traitsProps.toggle();
+    });
+
     // Open block manager
     var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
     openBlocksBtn && openBlocksBtn.set('active', 1);

stylesheets/grapesjs-preset-webpage.css

@@ -16,6 +16,10 @@
   box-shadow: none;
 }
 
+.gjs-trt-trait {
+  font-size: 11px;
+}
+
 .gjs-btnt.gjs-pn-active,
 .gjs-pn-btn.gjs-pn-active {
   box-shadow: none;
@@ -113,7 +117,7 @@
   margin: 0;
   height: 40px;
   padding: 10px;
-  width: 25%;
+  width: 33.3333%;
   border-bottom: 2px solid rgba(0, 0, 0, 0.3);
 }