Update getScriptString with string interpolation from props

index.html

@@ -1365,6 +1365,7 @@
     }]);
 
     var bm = editor.BlockManager;
+    /*
     bm.add('link-block', {
       label: 'Link Block',
       attributes: {class:'fa fa-link'},
@@ -1380,29 +1381,27 @@
           'min-width': '50px'
         }
       },
-    });
-    /*
-    bm.add('testblock', {
-      label: 'TEST Block',
-      attributes: {class:'fa fa-rocket'},
-      category: 'Basic',
-      content: `<div class="testblock">TEST</div>
-      <style>
-        .testblock {
-          width: 200px;
-          height: 200px;
-          background-color: red;
-        }
-
-        @media (max-width: 768px) {
-          .testblock {
-            background-color: green;
-          }
-        }
-      </style>
-      `,
     });*/
 
+    var domc = editor.DomComponents;
+    var defaultType = domc.getType('default');
+    var defaultModel = defaultType.model;
+    var defaultView = defaultType.view;
+
+    /*
+    domc.addType('default', {
+      model: defaultModel.extend({
+        defaults: Object.assign({}, defaultModel.prototype.defaults, {
+          traits: [{
+            name: 'title',
+            label: 'Título',
+            placeholder: 'Insira um texto aqui'
+          }]
+        }),
+      }),
+    });
+    */
+
     // Store and load events
     editor.on('storage:load', function(e) {
       console.log('LOAD ', e);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/dom_components/model/Component.js

@@ -3,6 +3,10 @@ var Components = require('./Components');
 var Selectors = require('selector_manager/model/Selectors');
 var Traits = require('trait_manager/model/Traits');
 
+const escapeRegExp = (str) => {
+  return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+}
+
 module.exports = Backbone.Model.extend({
 
   defaults: {
@@ -348,14 +352,25 @@ module.exports = Backbone.Model.extend({
   getScriptString(script) {
     var scr = script || this.get('script');
 
-    // Need to cast script functions to string
+    // Need to convert script functions to strings
     if (typeof scr == 'function') {
       var scrStr = scr.toString().trim();
-      scrStr = scrStr.replace(/^function\s?\(\)\s?\{/, '');
-      scrStr = scrStr.replace(/\}$/, '');
-      scr = scrStr;
+      var lines = scrStr.split('\n');
+      lines.shift();
+      lines.pop();
+      scr = lines.join('\n');
     }
 
+    var varTagStart = escapeRegExp('{[ ');
+    var varTagEnd = escapeRegExp(' ]}');
+    var reg = new RegExp(`${varTagStart}(\\w+)${varTagEnd}`, 'g');
+    scr = scr.replace(reg, (match, v) => {
+      // If at least one match is found I have to track this change for a
+      // better optimization inside JS generator
+      this.scriptUpdated();
+      return this.attributes[v];
+    })
+
     return scr;
   }