npm - matcha-components - Versions diffs - 20.183.0 → 20.185.0 - Mend

matcha-components 20.183.0 → 20.185.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/assets/page-builder/index-cdn.html ADDED Viewed

@@ -0,0 +1,980 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <title>GrapesJS</title>
+  <link rel="stylesheet" href="css/grapes.min.css">
+  <link rel="stylesheet" href="css/grapick.min.css">
+  <script src="https://unpkg.com/matcha-components/assets/page-builder/js/grapes.min.js"></script>
+  <script src="js/grapesjs-blocks-basic.js"></script>
+  <script src="js/grapesjs-component-countdown.js"></script>
+  <script src="js/grapesjs-custom-code.js"></script>
+  <script src="js/grapesjs-parser-postcss.js"></script>
+  <script src="js/grapesjs-plugin-export.js"></script>
+  <script src="js/grapesjs-plugin-forms.js"></script>
+  <script src="js/grapesjs-preset-webpage.js"></script>
+  <script src="js/grapesjs-style-bg.js"></script>
+  <script src="js/grapesjs-tabs.js"></script>
+  <script src="js/grapesjs-tooltip.js"></script>
+  <script src="js/grapesjs-touch.js"></script>
+</head>
+<body>
+  <style>
+    body,
+    html {
+      height: 100%;
+      margin: 0;
+    }
+    .code-panel .codepanel-label {
+      color: #a97d44 !important;
+    }
+    .gjs-pn-views-layer,
+    .gjs-cv-canvas {
+      transition: width 0.3s ease-in-out;
+    }
+    .gjs-pn-buttons {
+      align-items: center;
+      display: flex;
+    }
+    .gjs-pn-views-layer {
+      box-shadow: initial;
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      top: 40px;
+      padding-top: 0;
+      height: calc(100% - 40px);
+      z-index: 4;
+    }
+    .gjs-pn-views-layer {
+      left: 0;
+      width: 15%;
+      overflow: auto;
+      box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+    }
+    .gjs-pn-views-layers {
+      left: 0;
+      right: unset;
+    }
+    .gjs-pn-devices-c {
+      left: 45%;
+    }
+    .gjs-pn-opcoes,
+    #gjs-breadcrumbs {
+      left: 15%;
+    }
+    .gjs-pn-opcoes.fechado,
+    #gjs-breadcrumbs.fechado {
+      left: 0;
+    }
+    .gjs-cv-canvas.layer-aberto {
+      width: 70%;
+      left: 15%;
+    }
+    .gjs-cv-canvas.layer-aberto.code-editor-aberto {
+      width: 50%;
+    }
+    .gjs-cv-canvas.code-editor-aberto {
+      width: 65%;
+    }
+    .gjs-pn-views-container.code-editor-aberto {
+      width: 35%;
+    }
+    .gjs-pn-buttons {
+      justify-content: start;
+    }
+    .m-loader {
+      position: relative;
+    }
+    .m-loader.m-loader--brand:before {
+      border-top-color: #716aca;
+    }
+    .m-loader.m-loader--lg:before {
+      width: 2rem;
+      height: 2rem;
+      margin-top: -1rem;
+      margin-left: -1rem;
+      border-top-width: 3px;
+      border-right-width: 3px;
+    }
+    .m-loader:before {
+      border-top-color: #dfe2ea;
+    }
+    .m-loader:before {
+      width: 1.4rem;
+      height: 1.4rem;
+      margin-top: -0.7rem;
+      margin-left: -0.7rem;
+      border-top-width: 2px;
+      border-right-width: 2px;
+    }
+    .m-loader:before {
+      content: '';
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-top: 2px solid #07d;
+      border-right: 2px solid transparent;
+      border-radius: 50%;
+      -webkit-animation: m-loader-rotate 0.6s linear infinite;
+      animation: m-loader-rotate 0.6s linear infinite;
+    }
+    .m-blockui {
+      background: #fff;
+      -webkit-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
+      box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
+    }
+    .m-blockui {
+      border-radius: 4px;
+      display: table;
+      table-layout: fixed;
+    }
+    .m-blockui>span {
+      color: #6f727d;
+    }
+    .m-blockui>span {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 8px 15px;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+    .m-blockui>span>.m-loader,
+    .m-blockui>span>.m-spinner {
+      margin-right: 10px;
+    }
+    .m-loader {
+      position: relative;
+    }
+    .m-blockui>span>.m-loader,
+    .m-blockui>span>.m-spinner {
+      margin-right: 10px;
+    }
+    .m-loader {
+      position: relative;
+    }
+    .m-loader.m-loader--info:before {
+      border-top-color: #36a3f7;
+    }
+    .m-loader.m-loader--lg:before {
+      width: 2rem;
+      height: 2rem;
+      margin-top: -1rem;
+      margin-left: -1rem;
+      border-top-width: 3px;
+      border-right-width: 3px;
+    }
+    .m-loader.m-loader--info:before {
+      border-top-color: #36a3f7;
+    }
+    .m-loader.m-loader--lg:before {
+      width: 2rem;
+      height: 2rem;
+      margin-top: -1rem;
+      margin-left: -1rem;
+      border-top-width: 3px;
+      border-right-width: 3px;
+    }
+    .m-loader:before {
+      border-top-color: #dfe2ea;
+    }
+    .m-loader:before {
+      width: 1.4rem;
+      height: 1.4rem;
+      margin-top: -0.7rem;
+      margin-left: -0.7rem;
+      border-top-width: 2px;
+      border-right-width: 2px;
+    }
+    .m-loader:before {
+      content: '';
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-top: 2px solid #07d;
+      border-right: 2px solid transparent;
+      border-radius: 50%;
+      -webkit-animation: m-loader-rotate 0.6s linear infinite;
+      animation: m-loader-rotate 0.6s linear infinite;
+    }
+    *,
+    *::before,
+    *::after {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+    .m-blockui>span {
+      color: #6f727d;
+    }
+    .m-blockui>span {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 8px 15px;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+    @keyframes m-loader-rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <div id="gjs"></div>
+  <script>
+    var blocksPage = {
+      get: function (query) {
+        var el;
+        if (query === document) {
+          return document;
+        }
+        if (!!(query && query.nodeType === 1)) {
+          return query;
+        }
+        if (el = document.getElementById(query)) {
+          return el;
+        } else if (el = document.getElementsByTagName(query)) {
+          return el[0];
+        } else if (el = document.getElementsByClassName(query)) {
+          return el[0];
+        } else {
+          return null;
+        }
+      },
+      addClass: function (el, className) {
+        if (!el || typeof className === 'undefined') {
+          return;
+        }
+        var classNames = className.split(' ');
+        if (el.classList) {
+          for (var i = 0; i < classNames.length; i++) {
+            if (classNames[i] && classNames[i].length > 0) {
+              el.classList.add(blocksPage.trim(classNames[i]));
+            }
+          }
+        } else if (!blocksPage.hasClass(el, className)) {
+          for (var i = 0; i < classNames.length; i++) {
+            el.className += ' ' + blocksPage.trim(classNames[i]);
+          }
+        }
+      },
+      actualWidth: function (el, cache) {
+        return blocksPage.actualCss(el, 'width', cache);
+      },
+      actualCss: function (el, prop, cache) {
+        if (el instanceof HTMLElement === false) {
+          return;
+        }
+        if (!el.getAttribute('m-hidden-' + prop) || cache === false) {
+          var value;
+          // the element is hidden so:
+          // making the el block so we can meassure its height but still be hidden
+          el.style.cssText = 'position: absolute; visibility: hidden; display: block;';
+          if (prop == 'width') {
+            value = el.offsetWidth;
+          } else if (prop == 'height') {
+            value = el.offsetHeight;
+          }
+          el.style.cssText = '';
+          // store it in cache
+          el.setAttribute('m-hidden-' + prop, value);
+          return parseFloat(value);
+        } else {
+          // store it in cache
+          return parseFloat(el.getAttribute('m-hidden-' + prop));
+        }
+      },
+      remove: function (el) {
+        if (el && el.parentNode) {
+          el.parentNode.removeChild(el);
+        }
+      },
+      trim: function (string) {
+        return string.trim();
+      },
+      hasClass: function (el, className) {
+        if (!el) {
+          return;
+        }
+        return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
+      },
+      css: function (el, styleProp, value) {
+        el = blocksPage.get(el);
+        if (!el) {
+          return;
+        }
+        if (value !== undefined) {
+          el.style[styleProp] = value;
+        } else {
+          var value, defaultView = (el.ownerDocument || document).defaultView;
+          // W3C standard way:
+          if (defaultView && defaultView.getComputedStyle) {
+            // sanitize property name to css notation
+            // (hyphen separated words eg. font-Size)
+            styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
+            return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
+          } else if (el.currentStyle) { // IE
+            // sanitize property name to camelCase
+            styleProp = styleProp.replace(/\-(\w)/g, function (str, letter) {
+              return letter.toUpperCase();
+            });
+            value = el.currentStyle[styleProp];
+            // convert other units to pixels on IE
+            if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
+              return (function (value) {
+                var oldLeft = el.style.left,
+                  oldRsLeft = el.runtimeStyle.left;
+                el.runtimeStyle.left = el.currentStyle.left;
+                el.style.left = value || 0;
+                value = el.style.pixelLeft + "px";
+                el.style.left = oldLeft;
+                el.runtimeStyle.left = oldRsLeft;
+                return value;
+              })(value);
+            }
+            return value;
+          }
+        }
+      },
+      block: function (target, options) {
+        var el = $(target);
+        options = $.extend(true, {
+          opacity: 0.03,
+          overlayColor: '#000000',
+          state: 'brand',
+          type: 'loader',
+          size: 'lg',
+          centerX: true,
+          centerY: true,
+          message: '',
+          shadow: true,
+          width: 'auto'
+        }, options);
+        var skin;
+        var state;
+        var loading;
+        var size;
+        var html;
+        if (options.type == 'spinner') {
+          skin = options.skin ? 'm-spinner--skin-' + options.skin : '';
+          state = options.state ? 'm-spinner--' + options.state : '';
+          loading = '<div class="m-spinner ' + skin + ' ' + state + '"></div';
+        } else {
+          skin = options.skin ? 'm-loader--skin-' + options.skin : '';
+          state = options.state ? 'm-loader--' + options.state : '';
+          size = options.size ? 'm-loader--' + options.size : '';
+          loading = '<div class="m-loader ' + skin + ' ' + state + ' ' + size + '"></div';
+        }
+        if (options.message && options.message.length > 0) {
+          var classes = 'm-blockui ' + (options.shadow === false ? 'm-blockui-no-shadow' : '');
+          html = '<div class="' + classes + '"><span>' + options.message + '</span><span>' + loading + '</span></div>';
+          var el = document.createElement('div');
+          blocksPage.get('body').prepend(el);
+          blocksPage.addClass(el, classes);
+          el.innerHTML = '<span>' + options.message + '</span><span>' + loading + '</span>';
+          options.width = blocksPage.actualWidth(el) + 10;
+          blocksPage.remove(el);
+          if (target == 'body') {
+            html = '<div class="' + classes + '" style="margin-left:-' + (options.width / 2) + 'px;"><span>' + options.message + '</span><span>' + loading + '</span></div>';
+          }
+        } else {
+          html = loading;
+        }
+        var params = {
+          message: html,
+          centerY: options.centerY,
+          centerX: options.centerX,
+          css: {
+            top: '30%',
+            left: '50%',
+            border: '0',
+            padding: '0',
+            backgroundColor: 'none',
+            width: options.width
+          },
+          overlayCSS: {
+            backgroundColor: options.overlayColor,
+            opacity: options.opacity,
+            cursor: 'wait',
+            zIndex: '10'
+          },
+          onUnblock: function () {
+            if (el && el[0]) {
+              blocksPage.css(el[0], 'position', '');
+              blocksPage.css(el[0], 'zoom', '');
+            }
+          }
+        };
+        if (target == 'body') {
+          params.css.top = '50%';
+          $.blockUI(params);
+        } else {
+          var el = $(target);
+          el.block(params);
+        }
+      },
+      unblock: function (target) {
+        if (target && target != 'body') {
+          $(target).unblock();
+        } else {
+          $.unblockUI();
+        }
+      },
+      blockPage: function (options) {
+        return blocksPage.block('body', options);
+      },
+      unblockPage: function () {
+        return blocksPage.unblock('body');
+      }
+    }
+    const block = {
+      block: (el) => {
+        el = el || '';
+        const blockConf = {
+          opacity: 0.5,
+          overlayColor: '#000000',
+          type: 'loader',
+          state: 'info',
+          message: 'Aguarde...'
+        };
+        if (el == '') {
+          blocksPage.blockPage(blockConf);
+        } else if (typeof el === 'object') {
+          blocksPage.block(el, blockConf);
+        } else {
+          if (String(el).substr(0, 1) != "#") {
+            el = "#" + el;
+          }
+          blocksPage.block(el, blockConf);
+        }
+      },
+      unblock: (el) => {
+        el = el || '';
+        if (el == '') {
+          blocksPage.unblockPage();
+        } else if (typeof el === 'object') {
+          blocksPage.unblock(el);
+        } else {
+          if (String(el).substr(0, 1) != "#") {
+            el = "#" + el;
+          }
+          blocksPage.unblock(el);
+        }
+      }
+    };
+    var editor = grapesjs.init({
+      height: '100%',
+      container: '#gjs',
+      fromElement: true,
+      showOffsets: true,
+      assetManager: {
+        embedAsBase64: true,
+      },
+      selectorManager: { componentFirst: true },
+      styleManager: {
+        sectors: [{
+          name: 'General',
+          properties: [
+            {
+              extend: 'float',
+              type: 'radio',
+              default: 'none',
+              options: [
+                { value: 'none', className: 'fa fa-times' },
+                { value: 'left', className: 'fa fa-align-left' },
+                { value: 'right', className: 'fa fa-align-right' }
+              ],
+            },
+            'display',
+            { extend: 'position', type: 'select' },
+            'top',
+            'right',
+            'left',
+            'bottom',
+          ],
+        }, {
+          name: 'Dimension',
+          open: false,
+          properties: [
+            'width',
+            {
+              id: 'flex-width',
+              type: 'integer',
+              name: 'Width',
+              units: ['px', '%'],
+              property: 'flex-basis',
+              toRequire: 1,
+            },
+            'height',
+            'max-width',
+            'min-height',
+            'margin',
+            'padding'
+          ],
+        }, {
+          name: 'Typography',
+          open: false,
+          properties: [
+            'font-family',
+            'font-size',
+            'font-weight',
+            'letter-spacing',
+            'color',
+            'line-height',
+            {
+              extend: 'text-align',
+              options: [
+                { id: 'left', label: 'Left', className: 'fa fa-align-left' },
+                { id: 'center', label: 'Center', className: 'fa fa-align-center' },
+                { id: 'right', label: 'Right', className: 'fa fa-align-right' },
+                { id: 'justify', label: 'Justify', className: 'fa fa-align-justify' }
+              ],
+            },
+            {
+              property: 'text-decoration',
+              type: 'radio',
+              default: 'none',
+              options: [
+                { id: 'none', label: 'None', className: 'fa fa-times' },
+                { id: 'underline', label: 'underline', className: 'fa fa-underline' },
+                { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough' }
+              ],
+            },
+            'text-shadow'
+          ],
+        }, {
+          name: 'Decorations',
+          open: false,
+          properties: [
+            'opacity',
+            'border-radius',
+            'border',
+            'box-shadow',
+            'background', // { id: 'background-bg', property: 'background', type: 'bg' }
+          ],
+        }, {
+          name: 'Extra',
+          open: false,
+          buildProps: [
+            'transition',
+            'perspective',
+            'transform'
+          ],
+        }, {
+          name: 'Flex',
+          open: false,
+          properties: [{
+            name: 'Flex Container',
+            property: 'display',
+            type: 'select',
+            defaults: 'block',
+            list: [
+              { value: 'block', name: 'Disable' },
+              { value: 'flex', name: 'Enable' }
+            ],
+          }, {
+            name: 'Flex Parent',
+            property: 'label-parent-flex',
+            type: 'integer',
+          }, {
+            name: 'Direction',
+            property: 'flex-direction',
+            type: 'radio',
+            defaults: 'row',
+            list: [{
+              value: 'row',
+              name: 'Row',
+              className: 'icons-flex icon-dir-row',
+              title: 'Row',
+            }, {
+              value: 'row-reverse',
+              name: 'Row reverse',
+              className: 'icons-flex icon-dir-row-rev',
+              title: 'Row reverse',
+            }, {
+              value: 'column',
+              name: 'Column',
+              title: 'Column',
+              className: 'icons-flex icon-dir-col',
+            }, {
+              value: 'column-reverse',
+              name: 'Column reverse',
+              title: 'Column reverse',
+              className: 'icons-flex icon-dir-col-rev',
+            }],
+          }, {
+            name: 'Justify',
+            property: 'justify-content',
+            type: 'radio',
+            defaults: 'flex-start',
+            list: [{
+              value: 'flex-start',
+              className: 'icons-flex icon-just-start',
+              title: 'Start',
+            }, {
+              value: 'flex-end',
+              title: 'End',
+              className: 'icons-flex icon-just-end',
+            }, {
+              value: 'space-between',
+              title: 'Space between',
+              className: 'icons-flex icon-just-sp-bet',
+            }, {
+              value: 'space-around',
+              title: 'Space around',
+              className: 'icons-flex icon-just-sp-ar',
+            }, {
+              value: 'center',
+              title: 'Center',
+              className: 'icons-flex icon-just-sp-cent',
+            }],
+          }, {
+            name: 'Align',
+            property: 'align-items',
+            type: 'radio',
+            defaults: 'center',
+            list: [{
+              value: 'flex-start',
+              title: 'Start',
+              className: 'icons-flex icon-al-start',
+            }, {
+              value: 'flex-end',
+              title: 'End',
+              className: 'icons-flex icon-al-end',
+            }, {
+              value: 'stretch',
+              title: 'Stretch',
+              className: 'icons-flex icon-al-str',
+            }, {
+              value: 'center',
+              title: 'Center',
+              className: 'icons-flex icon-al-center',
+            }],
+          }, {
+            name: 'Flex Children',
+            property: 'label-parent-flex',
+            type: 'integer',
+          }, {
+            name: 'Order',
+            property: 'order',
+            type: 'integer',
+            defaults: 0,
+            min: 0
+          }, {
+            name: 'Flex',
+            property: 'flex',
+            type: 'composite',
+            properties: [{
+              name: 'Grow',
+              property: 'flex-grow',
+              type: 'integer',
+              defaults: 0,
+              min: 0
+            }, {
+              name: 'Shrink',
+              property: 'flex-shrink',
+              type: 'integer',
+              defaults: 0,
+              min: 0
+            }, {
+              name: 'Basis',
+              property: 'flex-basis',
+              type: 'integer',
+              units: ['px', '%', ''],
+              unit: '',
+              defaults: 'auto',
+            }],
+          }, {
+            name: 'Align',
+            property: 'align-self',
+            type: 'radio',
+            defaults: 'auto',
+            list: [{
+              value: 'auto',
+              name: 'Auto',
+            }, {
+              value: 'flex-start',
+              title: 'Start',
+              className: 'icons-flex icon-al-start',
+            }, {
+              value: 'flex-end',
+              title: 'End',
+              className: 'icons-flex icon-al-end',
+            }, {
+              value: 'stretch',
+              title: 'Stretch',
+              className: 'icons-flex icon-al-str',
+            }, {
+              value: 'center',
+              title: 'Center',
+              className: 'icons-flex icon-al-center',
+            }],
+          }]
+        }
+        ],
+      },
+      plugins: [
+        'gjs-blocks-basic',
+        'grapesjs-plugin-forms',
+        'grapesjs-component-countdown',
+        'grapesjs-plugin-export',
+        'grapesjs-tabs',
+        'grapesjs-custom-code',
+        'grapesjs-touch',
+        'grapesjs-parser-postcss',
+        'grapesjs-tooltip',
+        'grapesjs-tui-image-editor',
+        'grapesjs-typed',
+        'grapesjs-style-bg',
+        'grapesjs-preset-webpage',
+        'grapesjs-code-editor',
+      ],
+      pluginsOpts: {
+        'gjs-blocks-basic': { flexGrid: true },
+        'grapesjs-tui-image-editor': {
+          script: [
+            // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
+            'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
+            'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
+            'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
+          ],
+          style: [
+            'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
+            'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
+          ],
+        },
+        'grapesjs-tabs': {
+          tabsBlock: { category: 'Extra' }
+        },
+        'grapesjs-typed': {
+          block: {
+            category: 'Extra',
+            content: {
+              type: 'typed',
+              'type-speed': 40,
+              strings: [
+                'Text row one',
+                'Text row two',
+                'Text row three',
+              ],
+            }
+          }
+        },
+        'grapesjs-preset-webpage': {
+          showStylesOnChange: 0,
+          modalImportTitle: 'Import Template',
+          modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
+          modalImportContent: function (editor) {
+            return editor.getHtml() + '<style>' + editor.getCss() + '</style>'
+          },
+        },
+        'grapesjs-code-editor': {
+          blockPage: block
+        }
+      },
+    });
+    editor.I18n.addMessages({
+      en: {
+        styleManager: {
+          properties: {
+            'background-repeat': 'Repeat',
+            'background-position': 'Position',
+            'background-attachment': 'Attachment',
+            'background-size': 'Size',
+          }
+        },
+      }
+    });
+    var pn = editor.Panels;
+    var modal = editor.Modal;
+    var cmdm = editor.Commands;
+    // 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)
+      }
+    });
+    // Add info command
+    var mdlClass = 'gjs-mdl-dialog-sm';
+    var infoContainer = document.getElementById('info-panel');
+    cmdm.add('open-info', function () {
+      var mdlDialog = document.querySelector('.gjs-mdl-dialog');
+      mdlDialog.className += ' ' + mdlClass;
+      infoContainer.style.display = 'block';
+      modal.setTitle('About this demo');
+      modal.setContent(infoContainer);
+      modal.open();
+      modal.getModel().once('change:open', function () {
+        mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
+      })
+    });
+    pn.addButton('options', {
+      id: 'open-info',
+      className: 'fa fa-question-circle',
+      command: function () { editor.runCommand('open-info') },
+      attributes: {
+        'title': 'About',
+        'data-tooltip-pos': 'bottom',
+      },
+    });
+    // Add and beautify tooltips
+    [['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
+    ['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
+    ['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
+      .forEach(function (item) {
+        pn.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) {
+        pn.getButton('views', item[0]).set('attributes', { title: item[1], 'data-tooltip-pos': 'bottom' });
+      });
+    // Do stuff on load
+    editor.on('load', function () {
+      var $ = grapesjs.$;
+      // Show borders by default
+      pn.getButton('options', 'sw-visibility').set('active', 1);
+      // Show logo with the version
+      // Load and show settings and style manager
+      var openTmBtn = pn.getButton('views', 'open-tm');
+      openTmBtn && openTmBtn.set('active', 1);
+      var openSm = pn.getButton('views', 'open-sm');
+      openSm && openSm.set('active', 1);
+      // Remove trait view
+      pn.removeButton('views', 'open-tm');
+      // Add Settings Sector
+      var traitsSector = $('<div class="gjs-sm-sector no-select">' +
+        '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></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-sector-title').on('click', function () {
+        var traitStyle = traitsProps.get(0).style;
+        var hidden = traitStyle.display == 'none';
+        if (hidden) {
+          traitStyle.display = 'block';
+        } else {
+          traitStyle.display = 'none';
+        }
+      });
+      // Open block manager
+      var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
+      openBlocksBtn && openBlocksBtn.set('active', 1);
+      editor.on('component:selected', (a) => {
+        const btnOpenCode = editor.Panels.getButton('views', 'code-editor');
+        if (!btnOpenCode.active) {
+          const openSmBtn = editor.Panels.getButton('views', 'open-sm');
+          openSmBtn.set('active', true);
+        }
+      });
+    });
+  </script>
+</body>
+</html>