From ed4467c423548efb8064036ea3899d57369686b7 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 15 Jun 2017 21:59:38 +0200
Subject: [PATCH] Add form plugin

---
 demo.html                               | 30 +++++++++++++++++++++----
 js/grapesjs-plugin-forms.min.js         |  2 ++
 stylesheets/grapesjs-preset-webpage.css | 12 ++++++++--
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 js/grapesjs-plugin-forms.min.js

diff --git a/demo.html b/demo.html
index 04b6a757f..64dbf9f57 100644
--- a/demo.html
+++ b/demo.html
@@ -731,7 +731,17 @@
           text-align: right;
           margin-bottom: 15px;
         }
-        .sub-input{
+
+        .form {
+          border-radius: 3px;
+          padding: 10px 15px;
+          background-color: rgba(0,0,0,0.2);
+        }
+
+        .input,
+        .textarea,
+        .select,
+        .sub-input {
           width: 100%;
           margin-bottom: 15px;
           padding: 7px 10px;
@@ -740,9 +750,20 @@
           background-color: #554c57;
           border: none;
         }
+
+        .select {
+          height: 30px;
+        }
+
+        .label {
+          width: 100%;
+          display: block;
+        }
+
+        .button,
         .sub-btn{
           width: 100%;
-          margin-bottom: 15px;
+          margin: 15px 0;
           background-color: #785580;
           border: none;
           color:#fff;
@@ -910,6 +931,7 @@
     <script src="js/grapes.min.js?v0.8.8"></script>
     <script src="js/grapesjs-plugin-export.min.js"></script>
     <script src="js/grapesjs-plugin-filestack.min.js"></script>
+    <script src="js/grapesjs-plugin-forms.min.js"></script>
     <script src="js/grapesjs-aviary.min.js"></script>
     <script src="js/grapesjs-preset-webpage.js"></script>
     <script type="text/javascript">
@@ -929,8 +951,8 @@
       container : '#gjs',
       fromElement: 1,
       showOffsets: 1,
-      plugins: ['gjs-plugin-export', 'gjs-preset-webpage', 'gjs-plugin-filestack', 'gjs-aviary'],
-
+      plugins: ['gjs-plugin-export', 'gjs-preset-webpage', 'gjs-plugin-filestack',
+        'gjs-aviary', 'gjs-plugin-forms'],
       pluginsOpts: {
         'gjs-plugin-filestack': {
           key: 'A1nL8omiAR8W7pHi3cotzz',
diff --git a/js/grapesjs-plugin-forms.min.js b/js/grapesjs-plugin-forms.min.js
new file mode 100644
index 000000000..bce62dd49
--- /dev/null
+++ b/js/grapesjs-plugin-forms.min.js
@@ -0,0 +1,2 @@
+/*! grapesjs-plugin-forms - 0.2.5 */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["grapesjs-plugin-forms"]=t():e["grapesjs-plugin-forms"]=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t,r=e.BlockManager;n.blocks.indexOf("form")>=0&&r.add("form",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path>\n        <path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path>\n        <rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect>\n      </svg>\n      <div class="gjs-block-label">'+n.labelForm+"</div>",category:"Forms",content:'\n        <form class="form">\n          <div class="form-group">\n            <label class="label">Name</label>\n            <input placeholder="Type here your name" class="input"/>\n          </div>\n          <div class="form-group">\n            <label class="label">Email</label>\n            <input type="email" placeholder="Type here your email" class="input"/>\n          </div>\n          <div class="form-group">\n            <label class="label">Gender</label>\n            <input type="checkbox" class="checkbox" value="M">\n            <label class="checkbox-label">M</label>\n            <input type="checkbox" class="checkbox" value="F">\n            <label class="checkbox-label">F</label>\n          </div>\n          <div class="form-group">\n            <label class="label">Message</label>\n            <textarea class="textarea"></textarea>\n          </div>\n          <div class="form-group">\n            <button type="submit" class="button">Send</button>\n          </div>\n        </form>\n      '}),n.blocks.indexOf("input")>=0&&r.add("input",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>\n        <polygon class="gjs-block-svg-path" points="4 10 5 10 5 14 4 14"></polygon>\n      </svg>\n      <div class="gjs-block-label">'+n.labelInputName+"</div>",category:"Forms",content:'<input class="input"/>'}),n.blocks.indexOf("textarea")>=0&&r.add("textarea",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,7.5 C22,6.6 21.5,6 20.75,6 L3.25,6 C2.5,6 2,6.6 2,7.5 L2,16.5 C2,17.4 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.4 22,16.5 L22,7.5 Z M21,17 L3,17 L3,7 L21,7 L21,17 Z"></path>\n        <polygon class="gjs-block-svg-path" points="4 8 5 8 5 12 4 12"></polygon>\n        <polygon class="gjs-block-svg-path" points="19 7 20 7 20 17 19 17"></polygon>\n        <polygon class="gjs-block-svg-path" points="20 8 21 8 21 9 20 9"></polygon>\n        <polygon class="gjs-block-svg-path" points="20 15 21 15 21 16 20 16"></polygon>\n      </svg>\n      <div class="gjs-block-label">'+n.labelTextareaName+"</div>",category:"Forms",content:'<textarea class="textarea"></textarea>'}),n.blocks.indexOf("select")>=0&&r.add("select",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>\n        <polygon class="gjs-block-svg-path" transform="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " points="18.5 11 20 13 17 13"></polygon>\n        <rect class="gjs-block-svg-path" x="4" y="11.5" width="11" height="1"></rect>\n      </svg>\n      <div class="gjs-block-label">'+n.labelSelectName+"</div>",category:"Forms",content:'<select class="select">\n        <option>'+n.labelSelectOption+'</option>\n        <option value="1">'+n.labelOption+" 1</option>\n        </select>"}),n.blocks.indexOf("button")>=0&&r.add("button",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>\n        <rect class="gjs-block-svg-path" x="4" y="11.5" width="16" height="1"></rect>\n      </svg>\n      <div class="gjs-block-label">'+n.labelButtonName+"</div>",category:"Forms",content:'<button class="button">Send</button>'}),n.blocks.indexOf("label")>=0&&r.add("label",{label:'\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <path class="gjs-block-svg-path" d="M22,11.875 C22,11.35 21.5,11 20.75,11 L3.25,11 C2.5,11 2,11.35 2,11.875 L2,17.125 C2,17.65 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.65 22,17.125 L22,11.875 Z M21,17 L3,17 L3,12 L21,12 L21,17 Z" fill-rule="nonzero"></path>\n        <rect class="gjs-block-svg-path" x="2" y="5" width="14" height="5" rx="0.5"></rect>\n        <polygon class="gjs-block-svg-path" fill-rule="nonzero" points="4 13 5 13 5 16 4 16"></polygon>\n      </svg>\n      <div class="gjs-block-label">'+n.labelNameLabel+"</div>",category:"Forms",content:'<label class="label">Label</label>'}),n.blocks.indexOf("checkbox")>=0&&r.add("checkbox",{label:n.labelCheckboxName,attributes:{class:"fa fa-check-square"},category:"Forms",content:'<input type="checkbox" class="checkbox"/>'}),n.blocks.indexOf("radio")>=0&&r.add("radio",{label:n.labelRadioName,attributes:{class:"fa fa-dot-circle-o"},category:"Forms",content:'<input type="radio" class="radio"/>'})}},function(e,t,n){"use strict";(function(e){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n,a=t.DomComponents,o=a.getType("default"),l=a.getType("text"),i=o.model,u=o.view,c=l.model,s=l.view,f={name:"id",label:r.labelTraitId},p={name:"for",label:r.labelTraitFor},d={name:"name",label:r.labelTraitName},h={name:"placeholder",label:r.labelTraitPlaceholder},b={name:"value",label:r.labelTraitValue},v={type:"checkbox",name:"required",label:r.labelTraitRequired},g={label:r.labelTraitChecked,type:"checkbox",name:"checked",changeProp:1};a.addType("form",{model:i.extend({defaults:Object.assign({},i.prototype.defaults,{droppable:":not(form)",draggable:":not(form)",traits:[{type:"select",label:r.labelTraitMethod,name:"method",options:[{value:"post",name:"POST"},{value:"get",name:"GET"}]},{label:r.labelTraitAction,name:"action"}]}),init:function(){this.listenTo(this,"change:formState",this.updateFormState)},updateFormState:function(){switch(this.get("formState")){case"success":this.showState("success");break;case"error":this.showState("error");break;default:this.showState("normal")}},showState:function(t){var n,r,a=t||"normal";"success"==a?(n="none",r="block"):"error"==a?(n="block",r="none"):(n="none",r="none");var o=this.getStateModel("success"),l=this.getStateModel("error"),i=e.clone(o.get("style")),u=e.clone(l.get("style"));i.display=r,u.display=n,o.set("style",i),l.set("style",u)},getStateModel:function(e){for(var t,n=e||"success",r=this.get("components"),a=0;a<r.length;a++){var o=r.models[a];if(o.get("form-state-type")==n){t=o;break}}if(!t){var l=formMsgSuccess;"error"==n&&(l=formMsgError),t=r.add({"form-state-type":n,type:"text",removable:!1,copyable:!1,draggable:!1,attributes:{"data-form-state":n},content:l})}return t}},{isComponent:function(e){if("FORM"==e.tagName)return{type:"form"}}}),view:u.extend({events:{submit:function(e){e.preventDefault()}}})}),a.addType("input",{model:i.extend({defaults:Object.assign({},i.prototype.defaults,{"custom-name":r.labelInputName,tagName:"input",draggable:"form, form *",droppable:!1,traits:[d,h,{label:r.labelTraitType,type:"select",name:"type",options:[{value:"text",name:r.labelTypeText},{value:"email",name:r.labelTypeEmail},{value:"password",name:r.labelTypePassword},{value:"number",name:r.labelTypeNumber}]},v]})},{isComponent:function(e){if("INPUT"==e.tagName)return{type:"input"}}}),view:u});var m=a.getType("input"),y=m.model;a.addType("textarea",{model:m.model.extend({defaults:Object.assign({},y.prototype.defaults,{"custom-name":r.labelTextareaName,tagName:"textarea",traits:[d,h,v]})},{isComponent:function(e){if("TEXTAREA"==e.tagName)return{type:"textarea"}}}),view:u}),a.addType("select",{model:i.extend({defaults:Object.assign({},y.prototype.defaults,{"custom-name":r.labelSelectName,tagName:"select",traits:[d,{label:r.labelTraitOptions,type:"select-options"},v]})},{isComponent:function(e){if("SELECT"==e.tagName)return{type:"select"}}}),view:function(){return o.view.extend({events:{mousedown:"handleClick"},handleClick:function(e){e.preventDefault()}})}()}),a.addType("checkbox",{model:i.extend({defaults:Object.assign({},y.prototype.defaults,{"custom-name":r.labelCheckboxName,copyable:!1,attributes:{type:"checkbox"},traits:[f,d,b,v,g]}),init:function(){this.listenTo(this,"change:checked",this.handleChecked)},handleChecked:function(){var e=this.get("checked"),t=this.get("attributes"),n=this.view;e?t.checked="checked":delete t.checked,n&&(n.el.checked=e),this.set("attributes",Object.assign({},t))}},{isComponent:function(e){if("INPUT"==e.tagName&&"checkbox"==e.type)return{type:"checkbox"}}}),view:u.extend({events:{click:"handleClick"},handleClick:function(e){e.preventDefault()}})});var x=a.getType("checkbox");a.addType("radio",{model:x.model.extend({defaults:Object.assign({},x.model.prototype.defaults,{"custom-name":r.labelRadioName,attributes:{type:"radio"}})},{isComponent:function(e){if("INPUT"==e.tagName&&"radio"==e.type)return{type:"radio"}}}),view:x.view}),a.addType("button",{model:i.extend({defaults:Object.assign({},y.prototype.defaults,{"custom-name":r.labelButtonName,tagName:"button",traits:[{type:"content",label:"Text"},{label:r.labelTraitType,type:"select",name:"type",options:[{value:"submit",name:r.labelTypeSubmit},{value:"reset",name:r.labelTypeReset},{value:"button",name:r.labelTypeButton}]}]})},{isComponent:function(e){if("BUTTON"==e.tagName)return{type:"button"}}}),view:u.extend({events:{click:"handleClick"},init:function(){this.listenTo(this.model,"change:content",this.updateContent)},updateContent:function(){this.el.innerHTML=this.model.get("content")},handleClick:function(e){e.preventDefault()}})}),a.addType("label",{model:c.extend({defaults:Object.assign({},c.prototype.defaults,{"custom-name":r.labelNameLabel,tagName:"label",traits:[p]})},{isComponent:function(e){if("LABEL"==e.tagName)return{type:"label"}}}),view:s})}}).call(t,n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=(arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.TraitManager),n=t.getType("text");t.addType("content",{events:{keyup:"onChange"},onValueChange:function(){var e=this.model;e.target.set("content",e.get("value"))},getInputEl:function(){return this.inputEl||(this.inputEl=n.prototype.getInputEl.bind(this)(),this.inputEl.value=this.target.get("content")),this.inputEl}}),t.addType("select-options",{events:{keyup:"onChange"},onValueChange:function(){for(var e=this.model.get("value").trim(),t=e.split("\n"),n=[],r=0;r<t.length;r++){var a=t[r],o=a.split("::"),l={tagName:"option",attributes:{}};o[1]?(l.content=o[1],l.attributes.value=o[0]):(l.content=o[0],l.attributes.value=o[0]),n.push(l)}this.target.get("components").reset(n),this.target.view.render()},getInputEl:function(){if(!this.$input){for(var e=this.model,t=this.target,n=(e.get("name"),""),r={placeholder:""},a=t.get("components"),o=0;o<a.length;o++){var l=a.models[o],i=l.get("attributes"),u=i.value||"";n+=u+(u?"::":"")+l.get("content")+"\n"}this.$input=$("<textarea>",r),this.$input.val(n)}return this.$input.get(0)}})}},function(e,t,n){"use strict";grapesjs.plugins.add("gjs-plugin-forms",function(e,t){var r=t||{},a=e.getConfig(),o=(a.stylePrefix,{blocks:["form","input","textarea","select","button","label","checkbox","radio"],labelTraitMethod:"Method",labelTraitAction:"Action",labelTraitState:"State",labelTraitId:"ID",labelTraitFor:"For",labelInputName:"Input",labelTextareaName:"Textarea",labelSelectName:"Select",labelCheckboxName:"Checkbox",labelRadioName:"Radio",labelButtonName:"Button",labelTraitName:"Name",labelTraitPlaceholder:"Placeholder",labelTraitValue:"Value",labelTraitRequired:"Required",labelTraitType:"Type",labelTraitOptions:"Options",labelTraitChecked:"Checked",labelTypeText:"Text",labelTypeEmail:"Email",labelTypePassword:"Password",labelTypeNumber:"Number",labelTypeSubmit:"Submit",labelTypeReset:"Reset",labelTypeButton:"Button",labelNameLabel:"Label",labelForm:"Form",labelSelectOption:"- Select option -",labelOption:"Option",labelStateNormal:"Normal",labelStateSuccess:"Success",labelStateError:"Error"});for(var l in o)l in r||(r[l]=o[l]);n(1).default(e,r),n(2).default(e,r),n(0).default(e,r)})},function(e,t,n){var r,a;(function(){function n(e){function t(t,n,r,a,o,l){for(;o>=0&&o<l;o+=e){var i=a?a[o]:o;r=n(r,t[i],i,t)}return r}return function(n,r,a,o){r=T(r,o,4);var l=!M(n)&&w.keys(n),i=(l||n).length,u=e>0?0:i-1;return arguments.length<3&&(a=n[l?l[u]:u],u+=e),t(n,r,a,l,u,i)}}function o(e){return function(t,n,r){n=j(n,r);for(var a=S(t),o=e>0?0:a-1;o>=0&&o<a;o+=e)if(n(t[o],o,t))return o;return-1}}function l(e,t,n){return function(r,a,o){var l=0,i=S(r);if("number"==typeof o)e>0?l=o>=0?o:Math.max(o+i,l):i=o>=0?Math.min(o+1,i):o+i+1;else if(n&&o&&i)return o=n(r,a),r[o]===a?o:-1;if(a!==a)return o=t(h.call(r,l,i),w.isNaN),o>=0?o+l:-1;for(o=e>0?l:i-1;o>=0&&o<i;o+=e)if(r[o]===a)return o;return-1}}function i(e,t){var n=I.length,r=e.constructor,a=w.isFunction(r)&&r.prototype||f,o="constructor";for(w.has(e,o)&&!w.contains(t,o)&&t.push(o);n--;)(o=I[n])in e&&e[o]!==a[o]&&!w.contains(t,o)&&t.push(o)}var u=this,c=u._,s=Array.prototype,f=Object.prototype,p=Function.prototype,d=s.push,h=s.slice,b=f.toString,v=f.hasOwnProperty,g=Array.isArray,m=Object.keys,y=p.bind,x=Object.create,k=function(){},w=function(e){return e instanceof w?e:this instanceof w?void(this._wrapped=e):new w(e)};void 0!==e&&e.exports&&(t=e.exports=w),t._=w,w.VERSION="1.8.3";var T=function(e,t,n){if(void 0===t)return e;switch(null==n?3:n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,a){return e.call(t,n,r,a)};case 4:return function(n,r,a,o){return e.call(t,n,r,a,o)}}return function(){return e.apply(t,arguments)}},j=function(e,t,n){return null==e?w.identity:w.isFunction(e)?T(e,t,n):w.isObject(e)?w.matcher(e):w.property(e)};w.iteratee=function(e,t){return j(e,t,1/0)};var L=function(e,t){return function(n){var r=arguments.length;if(r<2||null==n)return n;for(var a=1;a<r;a++)for(var o=arguments[a],l=e(o),i=l.length,u=0;u<i;u++){var c=l[u];t&&void 0!==n[c]||(n[c]=o[c])}return n}},C=function(e){if(!w.isObject(e))return{};if(x)return x(e);k.prototype=e;var t=new k;return k.prototype=null,t},O=function(e){return function(t){return null==t?void 0:t[e]}},N=Math.pow(2,53)-1,S=O("length"),M=function(e){var t=S(e);return"number"==typeof t&&t>=0&&t<=N};w.each=w.forEach=function(e,t,n){t=T(t,n);var r,a;if(M(e))for(r=0,a=e.length;r<a;r++)t(e[r],r,e);else{var o=w.keys(e);for(r=0,a=o.length;r<a;r++)t(e[o[r]],o[r],e)}return e},w.map=w.collect=function(e,t,n){t=j(t,n);for(var r=!M(e)&&w.keys(e),a=(r||e).length,o=Array(a),l=0;l<a;l++){var i=r?r[l]:l;o[l]=t(e[i],i,e)}return o},w.reduce=w.foldl=w.inject=n(1),w.reduceRight=w.foldr=n(-1),w.find=w.detect=function(e,t,n){var r;if(void 0!==(r=M(e)?w.findIndex(e,t,n):w.findKey(e,t,n))&&-1!==r)return e[r]},w.filter=w.select=function(e,t,n){var r=[];return t=j(t,n),w.each(e,function(e,n,a){t(e,n,a)&&r.push(e)}),r},w.reject=function(e,t,n){return w.filter(e,w.negate(j(t)),n)},w.every=w.all=function(e,t,n){t=j(t,n);for(var r=!M(e)&&w.keys(e),a=(r||e).length,o=0;o<a;o++){var l=r?r[o]:o;if(!t(e[l],l,e))return!1}return!0},w.some=w.any=function(e,t,n){t=j(t,n);for(var r=!M(e)&&w.keys(e),a=(r||e).length,o=0;o<a;o++){var l=r?r[o]:o;if(t(e[l],l,e))return!0}return!1},w.contains=w.includes=w.include=function(e,t,n,r){return M(e)||(e=w.values(e)),("number"!=typeof n||r)&&(n=0),w.indexOf(e,t,n)>=0},w.invoke=function(e,t){var n=h.call(arguments,2),r=w.isFunction(t);return w.map(e,function(e){var a=r?t:e[t];return null==a?a:a.apply(e,n)})},w.pluck=function(e,t){return w.map(e,w.property(t))},w.where=function(e,t){return w.filter(e,w.matcher(t))},w.findWhere=function(e,t){return w.find(e,w.matcher(t))},w.max=function(e,t,n){var r,a,o=-1/0,l=-1/0;if(null==t&&null!=e){e=M(e)?e:w.values(e);for(var i=0,u=e.length;i<u;i++)(r=e[i])>o&&(o=r)}else t=j(t,n),w.each(e,function(e,n,r){((a=t(e,n,r))>l||a===-1/0&&o===-1/0)&&(o=e,l=a)});return o},w.min=function(e,t,n){var r,a,o=1/0,l=1/0;if(null==t&&null!=e){e=M(e)?e:w.values(e);for(var i=0,u=e.length;i<u;i++)(r=e[i])<o&&(o=r)}else t=j(t,n),w.each(e,function(e,n,r){((a=t(e,n,r))<l||a===1/0&&o===1/0)&&(o=e,l=a)});return o},w.shuffle=function(e){for(var t,n=M(e)?e:w.values(e),r=n.length,a=Array(r),o=0;o<r;o++)t=w.random(0,o),t!==o&&(a[o]=a[t]),a[t]=n[o];return a},w.sample=function(e,t,n){return null==t||n?(M(e)||(e=w.values(e)),e[w.random(e.length-1)]):w.shuffle(e).slice(0,Math.max(0,t))},w.sortBy=function(e,t,n){return t=j(t,n),w.pluck(w.map(e,function(e,n,r){return{value:e,index:n,criteria:t(e,n,r)}}).sort(function(e,t){var n=e.criteria,r=t.criteria;if(n!==r){if(n>r||void 0===n)return 1;if(n<r||void 0===r)return-1}return e.index-t.index}),"value")};var _=function(e){return function(t,n,r){var a={};return n=j(n,r),w.each(t,function(r,o){var l=n(r,o,t);e(a,r,l)}),a}};w.groupBy=_(function(e,t,n){w.has(e,n)?e[n].push(t):e[n]=[t]}),w.indexBy=_(function(e,t,n){e[n]=t}),w.countBy=_(function(e,t,n){w.has(e,n)?e[n]++:e[n]=1}),w.toArray=function(e){return e?w.isArray(e)?h.call(e):M(e)?w.map(e,w.identity):w.values(e):[]},w.size=function(e){return null==e?0:M(e)?e.length:w.keys(e).length},w.partition=function(e,t,n){t=j(t,n);var r=[],a=[];return w.each(e,function(e,n,o){(t(e,n,o)?r:a).push(e)}),[r,a]},w.first=w.head=w.take=function(e,t,n){if(null!=e)return null==t||n?e[0]:w.initial(e,e.length-t)},w.initial=function(e,t,n){return h.call(e,0,Math.max(0,e.length-(null==t||n?1:t)))},w.last=function(e,t,n){if(null!=e)return null==t||n?e[e.length-1]:w.rest(e,Math.max(0,e.length-t))},w.rest=w.tail=w.drop=function(e,t,n){return h.call(e,null==t||n?1:t)},w.compact=function(e){return w.filter(e,w.identity)};var F=function(e,t,n,r){for(var a=[],o=0,l=r||0,i=S(e);l<i;l++){var u=e[l];if(M(u)&&(w.isArray(u)||w.isArguments(u))){t||(u=F(u,t,n));var c=0,s=u.length;for(a.length+=s;c<s;)a[o++]=u[c++]}else n||(a[o++]=u)}return a};w.flatten=function(e,t){return F(e,t,!1)},w.without=function(e){return w.difference(e,h.call(arguments,1))},w.uniq=w.unique=function(e,t,n,r){w.isBoolean(t)||(r=n,n=t,t=!1),null!=n&&(n=j(n,r));for(var a=[],o=[],l=0,i=S(e);l<i;l++){var u=e[l],c=n?n(u,l,e):u;t?(l&&o===c||a.push(u),o=c):n?w.contains(o,c)||(o.push(c),a.push(u)):w.contains(a,u)||a.push(u)}return a},w.union=function(){return w.uniq(F(arguments,!0,!0))},w.intersection=function(e){for(var t=[],n=arguments.length,r=0,a=S(e);r<a;r++){var o=e[r];if(!w.contains(t,o)){for(var l=1;l<n&&w.contains(arguments[l],o);l++);l===n&&t.push(o)}}return t},w.difference=function(e){var t=F(arguments,!0,!0,1);return w.filter(e,function(e){return!w.contains(t,e)})},w.zip=function(){return w.unzip(arguments)},w.unzip=function(e){for(var t=e&&w.max(e,S).length||0,n=Array(t),r=0;r<t;r++)n[r]=w.pluck(e,r);return n},w.object=function(e,t){for(var n={},r=0,a=S(e);r<a;r++)t?n[e[r]]=t[r]:n[e[r][0]]=e[r][1];return n},w.findIndex=o(1),w.findLastIndex=o(-1),w.sortedIndex=function(e,t,n,r){n=j(n,r,1);for(var a=n(t),o=0,l=S(e);o<l;){var i=Math.floor((o+l)/2);n(e[i])<a?o=i+1:l=i}return o},w.indexOf=l(1,w.findIndex,w.sortedIndex),w.lastIndexOf=l(-1,w.findLastIndex),w.range=function(e,t,n){null==t&&(t=e||0,e=0),n=n||1;for(var r=Math.max(Math.ceil((t-e)/n),0),a=Array(r),o=0;o<r;o++,e+=n)a[o]=e;return a};var E=function(e,t,n,r,a){if(!(r instanceof t))return e.apply(n,a);var o=C(e.prototype),l=e.apply(o,a);return w.isObject(l)?l:o};w.bind=function(e,t){if(y&&e.bind===y)return y.apply(e,h.call(arguments,1));if(!w.isFunction(e))throw new TypeError("Bind must be called on a function");var n=h.call(arguments,2),r=function(){return E(e,r,t,this,n.concat(h.call(arguments)))};return r},w.partial=function(e){var t=h.call(arguments,1),n=function(){for(var r=0,a=t.length,o=Array(a),l=0;l<a;l++)o[l]=t[l]===w?arguments[r++]:t[l];for(;r<arguments.length;)o.push(arguments[r++]);return E(e,n,this,this,o)};return n},w.bindAll=function(e){var t,n,r=arguments.length;if(r<=1)throw new Error("bindAll must be passed function names");for(t=1;t<r;t++)n=arguments[t],e[n]=w.bind(e[n],e);return e},w.memoize=function(e,t){var n=function(r){var a=n.cache,o=""+(t?t.apply(this,arguments):r);return w.has(a,o)||(a[o]=e.apply(this,arguments)),a[o]};return n.cache={},n},w.delay=function(e,t){var n=h.call(arguments,2);return setTimeout(function(){return e.apply(null,n)},t)},w.defer=w.partial(w.delay,w,1),w.throttle=function(e,t,n){var r,a,o,l=null,i=0;n||(n={});var u=function(){i=!1===n.leading?0:w.now(),l=null,o=e.apply(r,a),l||(r=a=null)};return function(){var c=w.now();i||!1!==n.leading||(i=c);var s=t-(c-i);return r=this,a=arguments,s<=0||s>t?(l&&(clearTimeout(l),l=null),i=c,o=e.apply(r,a),l||(r=a=null)):l||!1===n.trailing||(l=setTimeout(u,s)),o}},w.debounce=function(e,t,n){var r,a,o,l,i,u=function(){var c=w.now()-l;c<t&&c>=0?r=setTimeout(u,t-c):(r=null,n||(i=e.apply(o,a),r||(o=a=null)))};return function(){o=this,a=arguments,l=w.now();var c=n&&!r;return r||(r=setTimeout(u,t)),c&&(i=e.apply(o,a),o=a=null),i}},w.wrap=function(e,t){return w.partial(t,e)},w.negate=function(e){return function(){return!e.apply(this,arguments)}},w.compose=function(){var e=arguments,t=e.length-1;return function(){for(var n=t,r=e[t].apply(this,arguments);n--;)r=e[n].call(this,r);return r}},w.after=function(e,t){return function(){if(--e<1)return t.apply(this,arguments)}},w.before=function(e,t){var n;return function(){return--e>0&&(n=t.apply(this,arguments)),e<=1&&(t=null),n}},w.once=w.partial(w.before,2);var A=!{toString:null}.propertyIsEnumerable("toString"),I=["valueOf","isPrototypeOf","toString","propertyIsEnumerable","hasOwnProperty","toLocaleString"];w.keys=function(e){if(!w.isObject(e))return[];if(m)return m(e);var t=[];for(var n in e)w.has(e,n)&&t.push(n);return A&&i(e,t),t},w.allKeys=function(e){if(!w.isObject(e))return[];var t=[];for(var n in e)t.push(n);return A&&i(e,t),t},w.values=function(e){for(var t=w.keys(e),n=t.length,r=Array(n),a=0;a<n;a++)r[a]=e[t[a]];return r},w.mapObject=function(e,t,n){t=j(t,n);for(var r,a=w.keys(e),o=a.length,l={},i=0;i<o;i++)r=a[i],l[r]=t(e[r],r,e);return l},w.pairs=function(e){for(var t=w.keys(e),n=t.length,r=Array(n),a=0;a<n;a++)r[a]=[t[a],e[t[a]]];return r},w.invert=function(e){for(var t={},n=w.keys(e),r=0,a=n.length;r<a;r++)t[e[n[r]]]=n[r];return t},w.functions=w.methods=function(e){var t=[];for(var n in e)w.isFunction(e[n])&&t.push(n);return t.sort()},w.extend=L(w.allKeys),w.extendOwn=w.assign=L(w.keys),w.findKey=function(e,t,n){t=j(t,n);for(var r,a=w.keys(e),o=0,l=a.length;o<l;o++)if(r=a[o],t(e[r],r,e))return r},w.pick=function(e,t,n){var r,a,o={},l=e;if(null==l)return o;w.isFunction(t)?(a=w.allKeys(l),r=T(t,n)):(a=F(arguments,!1,!1,1),r=function(e,t,n){return t in n},l=Object(l));for(var i=0,u=a.length;i<u;i++){var c=a[i],s=l[c];r(s,c,l)&&(o[c]=s)}return o},w.omit=function(e,t,n){if(w.isFunction(t))t=w.negate(t);else{var r=w.map(F(arguments,!1,!1,1),String);t=function(e,t){return!w.contains(r,t)}}return w.pick(e,t,n)},w.defaults=L(w.allKeys,!0),w.create=function(e,t){var n=C(e);return t&&w.extendOwn(n,t),n},w.clone=function(e){return w.isObject(e)?w.isArray(e)?e.slice():w.extend({},e):e},w.tap=function(e,t){return t(e),e},w.isMatch=function(e,t){var n=w.keys(t),r=n.length;if(null==e)return!r;for(var a=Object(e),o=0;o<r;o++){var l=n[o];if(t[l]!==a[l]||!(l in a))return!1}return!0};var B=function(e,t,n,r){if(e===t)return 0!==e||1/e==1/t;if(null==e||null==t)return e===t;e instanceof w&&(e=e._wrapped),t instanceof w&&(t=t._wrapped);var a=b.call(e);if(a!==b.call(t))return!1;switch(a){case"[object RegExp]":case"[object String]":return""+e==""+t;case"[object Number]":return+e!=+e?+t!=+t:0==+e?1/+e==1/t:+e==+t;case"[object Date]":case"[object Boolean]":return+e==+t}var o="[object Array]"===a;if(!o){if("object"!=typeof e||"object"!=typeof t)return!1;var l=e.constructor,i=t.constructor;if(l!==i&&!(w.isFunction(l)&&l instanceof l&&w.isFunction(i)&&i instanceof i)&&"constructor"in e&&"constructor"in t)return!1}n=n||[],r=r||[];for(var u=n.length;u--;)if(n[u]===e)return r[u]===t;if(n.push(e),r.push(t),o){if((u=e.length)!==t.length)return!1;for(;u--;)if(!B(e[u],t[u],n,r))return!1}else{var c,s=w.keys(e);if(u=s.length,w.keys(t).length!==u)return!1;for(;u--;)if(c=s[u],!w.has(t,c)||!B(e[c],t[c],n,r))return!1}return n.pop(),r.pop(),!0};w.isEqual=function(e,t){return B(e,t)},w.isEmpty=function(e){return null==e||(M(e)&&(w.isArray(e)||w.isString(e)||w.isArguments(e))?0===e.length:0===w.keys(e).length)},w.isElement=function(e){return!(!e||1!==e.nodeType)},w.isArray=g||function(e){return"[object Array]"===b.call(e)},w.isObject=function(e){var t=typeof e;return"function"===t||"object"===t&&!!e},w.each(["Arguments","Function","String","Number","Date","RegExp","Error"],function(e){w["is"+e]=function(t){return b.call(t)==="[object "+e+"]"}}),w.isArguments(arguments)||(w.isArguments=function(e){return w.has(e,"callee")}),"function"!=typeof/./&&"object"!=typeof Int8Array&&(w.isFunction=function(e){return"function"==typeof e||!1}),w.isFinite=function(e){return isFinite(e)&&!isNaN(parseFloat(e))},w.isNaN=function(e){return w.isNumber(e)&&e!==+e},w.isBoolean=function(e){return!0===e||!1===e||"[object Boolean]"===b.call(e)},w.isNull=function(e){return null===e},w.isUndefined=function(e){return void 0===e},w.has=function(e,t){return null!=e&&v.call(e,t)},w.noConflict=function(){return u._=c,this},w.identity=function(e){return e},w.constant=function(e){return function(){return e}},w.noop=function(){},w.property=O,w.propertyOf=function(e){return null==e?function(){}:function(t){return e[t]}},w.matcher=w.matches=function(e){return e=w.extendOwn({},e),function(t){return w.isMatch(t,e)}},w.times=function(e,t,n){var r=Array(Math.max(0,e));t=T(t,n,1);for(var a=0;a<e;a++)r[a]=t(a);return r},w.random=function(e,t){return null==t&&(t=e,e=0),e+Math.floor(Math.random()*(t-e+1))},w.now=Date.now||function(){return(new Date).getTime()};var P={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},R=w.invert(P),Z=function(e){var t=function(t){return e[t]},n="(?:"+w.keys(e).join("|")+")",r=RegExp(n),a=RegExp(n,"g");return function(e){return e=null==e?"":""+e,r.test(e)?e.replace(a,t):e}};w.escape=Z(P),w.unescape=Z(R),w.result=function(e,t,n){var r=null==e?void 0:e[t];return void 0===r&&(r=n),w.isFunction(r)?r.call(e):r};var q=0;w.uniqueId=function(e){var t=++q+"";return e?e+t:t},w.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var z=/(.)^/,D={"'":"'","\\":"\\","\r":"r","\n":"n","\u2028":"u2028","\u2029":"u2029"},K=/\\|'|\r|\n|\u2028|\u2029/g,V=function(e){return"\\"+D[e]};w.template=function(e,t,n){!t&&n&&(t=n),t=w.defaults({},t,w.templateSettings);var r=RegExp([(t.escape||z).source,(t.interpolate||z).source,(t.evaluate||z).source].join("|")+"|$","g"),a=0,o="__p+='";e.replace(r,function(t,n,r,l,i){return o+=e.slice(a,i).replace(K,V),a=i+t.length,n?o+="'+\n((__t=("+n+"))==null?'':_.escape(__t))+\n'":r?o+="'+\n((__t=("+r+"))==null?'':__t)+\n'":l&&(o+="';\n"+l+"\n__p+='"),t}),o+="';\n",t.variable||(o="with(obj||{}){\n"+o+"}\n"),o="var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n"+o+"return __p;\n";try{var l=new Function(t.variable||"obj","_",o)}catch(e){throw e.source=o,e}var i=function(e){return l.call(this,e,w)};return i.source="function("+(t.variable||"obj")+"){\n"+o+"}",i},w.chain=function(e){var t=w(e);return t._chain=!0,t};var $=function(e,t){return e._chain?w(t).chain():t};w.mixin=function(e){w.each(w.functions(e),function(t){var n=w[t]=e[t];w.prototype[t]=function(){var e=[this._wrapped];return d.apply(e,arguments),$(this,n.apply(w,e))}})},w.mixin(w),w.each(["pop","push","reverse","shift","sort","splice","unshift"],function(e){var t=s[e];w.prototype[e]=function(){var n=this._wrapped;return t.apply(n,arguments),"shift"!==e&&"splice"!==e||0!==n.length||delete n[0],$(this,n)}}),w.each(["concat","join","slice"],function(e){var t=s[e];w.prototype[e]=function(){return $(this,t.apply(this._wrapped,arguments))}}),w.prototype.value=function(){return this._wrapped},w.prototype.valueOf=w.prototype.toJSON=w.prototype.value,w.prototype.toString=function(){return""+this._wrapped},r=[],void 0!==(a=function(){return w}.apply(t,r))&&(e.exports=a)}).call(this)}])});
\ No newline at end of file
diff --git a/stylesheets/grapesjs-preset-webpage.css b/stylesheets/grapesjs-preset-webpage.css
index ffacdb3e5..e845f08f6 100644
--- a/stylesheets/grapesjs-preset-webpage.css
+++ b/stylesheets/grapesjs-preset-webpage.css
@@ -1,3 +1,7 @@
+.gjs-block-svg {
+  width: 61%;
+}
+
 .gjs-clm-tags .gjs-sm-title,
 .gjs-sm-sector .gjs-sm-title {
   border-top: none;
@@ -33,8 +37,10 @@
 .gjs-color-active,
 .gjs-pn-btn.gjs-pn-active,
 .gjs-pn-btn:active,
-.gjs-block:hover {
-  color: rgb(217, 131, 166);
+.gjs-block:hover,
+.gjs-block:hover .gjs-block-svg-path {
+  color: #d97aa6;
+  fill: #d97aa6;
 }
 
 #gjs-rte-toolbar .gjs-rte-btn,
@@ -48,10 +54,12 @@
 .gjs-off-prv,
 .gjs-pn-btn,
 .gjs-pn-panel,
+.gjs-block-svg-path,
 .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
 .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
 .gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
   color: #b9a5a6;
+  fill: #b9a5a6;
 }
 
 #gjs-rte-toolbar,