mosaico 1.0.0

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/declarations.js

@@ -0,0 +1,279 @@
+"use strict";
+
+// Parses CSS declarations and supports the property language (-ko-*) found between them.
+// Create KO bindings but doesn't depend on KO.
+// Needs a bindingProvider.
+
+var converterUtils = require("./utils.js");
+var cssParse = require("mensch/lib/parser.js");
+var console = require("console");
+var domutils = require("./domutils.js");
+
+var _declarationValueLookup = function(declarations, propertyname, templateUrlConverter) {
+  for (var i = declarations.length - 1; i >= 0; i--) {
+    if (declarations[i].type == 'property' && declarations[i].name == propertyname) {
+      return _declarationValueUrlPrefixer(declarations[i].value, templateUrlConverter);
+    }
+  }
+  return null;
+};
+
+var _propToCamelCase = function(propName) {
+  return propName.replace(/-([a-z])/g, function(match, contents, offset, s) {
+    return contents.toUpperCase();
+  });
+};
+
+var _declarationValueUrlPrefixer = function(value, templateUrlConverter) {
+  if (value.match(/url\(.*\)/)) {
+    var replaced = value.replace(/(url\()([^\)]*)(\))/g, function(matched, prefix, url, postfix) {
+      var trimmed = url.trim();
+      var apice = url.trim().charAt(0);
+      if (apice == '\'' || apice == '"') {
+        trimmed = trimmed.substr(1, trimmed.length - 2);
+      } else {
+        apice = '';
+      }
+      var newUrl = templateUrlConverter(trimmed);
+      if (newUrl !== null) {
+        return prefix + apice + newUrl + apice + postfix;
+      } else {
+        return matched;
+      }
+    });
+    return replaced;
+  } else {
+    return value;
+  }
+};
+
+var elaborateDeclarations = function(style, declarations, templateUrlConverter, bindingProvider, element, basicBindings, removeDisplayNone) {
+  var newBindings = typeof basicBindings == 'object' && basicBindings !== null ? basicBindings : {};
+  var newStyle = null;
+  var skipLines = 0;
+  if (typeof declarations == 'undefined') {
+    var styleSheet = cssParse("#{\n" + style + "}", {
+      comments: true,
+      position: true
+    });
+    declarations = styleSheet.stylesheet.rules[0].declarations;
+    skipLines = 1;
+  }
+  for (var i = declarations.length - 1; i >= 0; i--)
+    if (declarations[i].type == 'property') {
+      if (removeDisplayNone === true && declarations[i].name == 'display' && declarations[i].value == 'none') {
+        if (newStyle === null) newStyle = style;
+        newStyle = converterUtils.removeStyle(newStyle, declarations[i].position.start, declarations[i].position.end, skipLines, 0, 0, '');
+      } else {
+        var decl = declarations[i].name.match(/^-ko-(bind-|attr-)?([a-z0-9-]*?)(-if|-ifnot)?$/);
+        if (decl !== null) {
+          // rimozione dello stile -ko- dall'attributo style.
+          if (newStyle === null && typeof style != 'undefined') newStyle = style;
+
+          var isAttr = decl[1] == 'attr-';
+          var isBind = decl[1] == 'bind-';
+          var propName = decl[2];
+
+          var isIf = decl[3] == '-if' || decl[3] == '-ifnot';
+          var condDecl;
+          var bindValue;
+          var propDefaultValue;
+
+          if (isIf) {
+            condDecl = declarations[i].name.substr(0, declarations[i].name.length - decl[3].length);
+            var conditionedDeclaration = _declarationValueLookup(declarations, condDecl, templateUrlConverter);
+            if (conditionedDeclaration === null) throw "Unable to find declaration " + condDecl + " for " + declarations[i].name;
+          } else {
+
+            if ((isAttr || isBind) && (typeof element == 'undefined' && typeof style != 'undefined')) throw "Attributes and bind declarations are only allowed in inline styles!";
+
+            var needDefaultValue = true;
+            var bindType;
+            if (isAttr) {
+              propDefaultValue = domutils.getAttribute(element, propName);
+              needDefaultValue = false;
+              bindType = 'virtualAttr';
+            } else if (!isBind) {
+              needDefaultValue = typeof style !== 'undefined';
+              if (needDefaultValue) propDefaultValue = _declarationValueLookup(declarations, propName, templateUrlConverter);
+              bindType = 'virtualStyle';
+            } else {
+              bindType = null;
+              if (propName == 'text') {
+                if (typeof element !== 'undefined') {
+                  propDefaultValue = domutils.getInnerText(element);
+                } else {
+                  needDefaultValue = false;
+                }
+              } else if (propName == 'html') {
+                if (typeof element !== 'undefined') {
+                  propDefaultValue = domutils.getInnerHtml(element);
+                } else {
+                  needDefaultValue = false;
+                }
+              } else {
+                needDefaultValue = false;
+              }
+            }
+
+            if (needDefaultValue && propDefaultValue === null) {
+              console.error("Cannot find default value for", declarations[i].name, declarations);
+              throw "Cannot find default value for " + declarations[i].name + ": " + declarations[i].value + " in " + element + " (" + typeof style + "/" + propName + ")";
+            }
+            var bindDefaultValue = propDefaultValue;
+
+            var bindName = _propToCamelCase(propName);
+
+            try {
+              bindValue = converterUtils.expressionBinding(declarations[i].value, bindingProvider, bindDefaultValue);
+            } catch (e) {
+              console.error("Model ensure path failed", e.stack, "name", declarations[i].name, "value", declarations[i].value, "default", propDefaultValue, "element", element);
+              throw e;
+            }
+
+            if (bindType !== null && typeof newBindings[bindType] == 'undefined') newBindings[bindType] = {};
+
+
+            // Special handling for HREFs
+            if (bindType == 'virtualAttr' && bindName == 'href') {
+              bindType = null;
+              bindName = 'wysiwygHref';
+              // We have to remove it, otherwise we ends up with 2 rules writing it.
+              if (typeof element != 'undefined' && element !== null) {
+                domutils.removeAttribute(element, "href");
+              }
+            }
+
+            // TODO evaluate the use of "-then" (and -else) postfixes to complete the -if instead of relaying
+            // on the same basic sintax (or maybe it is better to support ternary operator COND ? THEN : ELSE).
+            var declarationCondition = _declarationValueLookup(declarations, declarations[i].name + '-if', templateUrlConverter);
+            var not = false;
+            if (declarationCondition === null) {
+              declarationCondition = _declarationValueLookup(declarations, declarations[i].name + '-ifnot', templateUrlConverter);
+              not = true;
+            } else {
+              if (_declarationValueLookup(declarations, declarations[i].name + '-ifnot', templateUrlConverter) !== null) {
+                throw "Unexpected error: cannot use both -if and -ifnot property conditions";
+              }
+            }
+            if (declarationCondition !== null) {
+              try {
+                var bindingCond = converterUtils.conditionBinding(declarationCondition, bindingProvider);
+                bindValue = (not ? '!' : '') + "(" + bindingCond + ") ? " + bindValue + " : null";
+              } catch (e) {
+                console.error("Unable to deal with -ko style binding condition", declarationCondition, declarations[i].name);
+                throw e;
+              }
+            }
+
+            if (bindType !== null) newBindings[bindType][bindName] = bindValue;
+            else newBindings[bindName] = bindValue;
+          }
+
+          // parsing @supports :preview
+          if (newStyle !== null) {
+
+            try {
+              // if "element" is defined then we are parsing an "inline" style and we want to remove it.
+              if (typeof element != 'undefined' && element !== null) {
+                newStyle = converterUtils.removeStyle(newStyle, declarations[i].position.start, declarations[i].position.end, skipLines, 0, 0, '');
+              } else {
+                // otherwise we are parsing a full stylesheet.. let's rewrite the full "prop: value" without caring about the original syntax.
+                var replacedWith = '';
+                // if it is an "if" we simply have to remove it, otherwise we replace the input code with "prop: value" generating expression.
+                if (!isIf) replacedWith = propName + ': <!-- ko text: ' + bindValue + ' -->' + propDefaultValue + '<!-- /ko -->';
+                newStyle = converterUtils.removeStyle(newStyle, declarations[i].position.start, declarations[i].position.end, skipLines, 0, 0, replacedWith);
+              }
+            } catch (e) {
+              console.warn("Remove style failed", e, "name", declarations[i]);
+              throw e;
+            }
+
+          }
+
+        } else {
+          // prefixing urls
+          var replacedValue = _declarationValueUrlPrefixer(declarations[i].value, templateUrlConverter);
+          if (replacedValue != declarations[i].value) {
+            if (newStyle === null && typeof style !== 'undefined') newStyle = style;
+            if (newStyle !== null) {
+              try {
+                newStyle = converterUtils.removeStyle(newStyle, declarations[i].position.start, declarations[i].position.end, skipLines, 0, 0, declarations[i].name + ": " + replacedValue);
+              } catch (e) {
+                console.log("Remove style failed replacing url", e, "name", declarations[i]);
+                throw e;
+              }
+            }
+          }
+
+          // Style handling by concatenated "style attribute" (worse performance but more stable than direct style handling)
+          var bindName2 = _propToCamelCase(declarations[i].name);
+          var bind = 'virtualAttrStyle';
+          var bindVal2 = typeof newBindings['virtualStyle'] !== 'undefined' ? newBindings['virtualStyle'][bindName2] : undefined;
+
+          var dist = ' ';
+          if (typeof newBindings[bind] == 'undefined') {
+            newBindings[bind] = "''";
+            dist = '';
+          }
+
+          if (typeof bindVal2 !== 'undefined') {
+            newBindings[bind] = "'" + declarations[i].name + ": '+(" + bindVal2 + ")+';" + dist + "'+" + newBindings[bind];
+            delete newBindings['virtualStyle'][bindName2];
+          } else {
+            newBindings[bind] = "'" + declarations[i].name + ": " + converterUtils.addSlashes(replacedValue) + ";" + dist + "'+" + newBindings[bind];
+          }
+
+        }
+      }
+    }
+
+  if (typeof element != 'undefined' && element !== null) {
+    for (var prop in newBindings['virtualStyle'])
+      if (newBindings['virtualStyle'].hasOwnProperty(prop)) {
+        console.log("Unexpected virtualStyle binding after conversion to virtualAttr.style", prop, newBindings['virtualStyle'][prop], style);
+        throw "Unexpected virtualStyle binding after conversion to virtualAttr.style for " + prop;
+      }
+    delete newBindings['virtualStyle'];
+
+    var currentBindings = domutils.getAttribute(element, 'data-bind');
+    var dataBind = (currentBindings !== null ? currentBindings + ", " : "") + _bindingSerializer(newBindings);
+    domutils.setAttribute(element, 'data-bind', dataBind);
+  }
+
+  // TODO a function whose return type depends on the input parameters is very ugly.. please FIX ME.
+  if (typeof style == 'undefined') {
+    // clean virtualStyle if empty
+    var hasVirtualStyle = false;
+    for (var prop1 in newBindings['virtualStyle'])
+      if (newBindings['virtualStyle'].hasOwnProperty(prop1)) {
+        hasVirtualStyle = true;
+        break;
+      }
+    if (!hasVirtualStyle) delete newBindings['virtualStyle'];
+    else {
+      // remove and add back virtualAttrStyle so it gets appended BEFORE virtualAttrStyle (_bindingSerializer reverse them...)
+      if (typeof newBindings['virtualAttrStyle'] !== 'undefined') {
+        var vs = newBindings['virtualAttrStyle'];
+        delete newBindings['virtualAttrStyle'];
+        newBindings['virtualAttrStyle'] = vs;
+      }
+    }
+    // returns new serialized bindings
+    return _bindingSerializer(newBindings);
+  }
+
+  return newStyle;
+};
+
+var _bindingSerializer = function(val) {
+  var res = [];
+  for (var prop in val)
+    if (val.hasOwnProperty(prop)) {
+      if (typeof val[prop] == 'object') res.push(prop + ": " + "{ " + _bindingSerializer(val[prop]) + " }");
+      else res.push(prop + ": " + val[prop]);
+    }
+  return res.reverse().join(', ');
+};
+
+module.exports = elaborateDeclarations;

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/domutils.js

@@ -0,0 +1,93 @@
+"use strict";
+
+// This deals with Cheerio/jQuery issues.
+// Most of this could be done without jQuery, too, but jQuery is easier to be mocked with Cheerio
+// Otherwise we would need jsDom to run the compiler in the server (without a real browser)
+
+var $ = require("jquery");
+
+function _extend(target, source) {
+  if (source) {
+    for (var prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        target[prop] = source[prop];
+      }
+    }
+  }
+  return target;
+}
+
+var objExtend = function(obj, extender) {
+  if (typeof $.extend == 'function') {
+    return $.extend(true, obj, extender);
+  } else {
+    return _extend(obj, JSON.parse(JSON.stringify(extender)));
+  }
+};
+
+var getAttribute = function(element, attribute) {
+  var res = $(element).attr(attribute);
+  if (typeof res == 'undefined') res = null;
+  return res;
+  // return element.getAttribute(attribute);
+};
+
+var setAttribute = function(element, attribute, value) {
+  $(element).attr(attribute, value);
+  // element.setAttribute(attribute, value);
+};
+
+var removeAttribute = function(element, attribute) {
+  $(element).removeAttr(attribute);
+  // element.removeAttribute(attribute);
+};
+
+var getInnerText = function(element) {
+  return $(element).text();
+  // if (typeof element.innerText != 'undefined') return element.innerText;
+  // else return element.textContent;
+};
+
+var getInnerHtml = function(element) {
+  return $(element).html();
+  // return element.innerHTML;
+};
+
+var getLowerTagName = function(element) {
+  // sometimes cheerio doesn't have tagName but "name".
+  // Browsers have "name" with empty string
+  // Sometimes cheerio has tagName but no prop function.
+  if (element.tagName === '' && typeof element.name == 'string') return element.name.toLowerCase();
+  if (element.tagName !== '') return element.tagName.toLowerCase();
+  return $(element).prop("tagName").toLowerCase();
+  // return element.tagName.toLowerCase();
+};
+
+var setContent = function(element, content) {
+  $(element).html(content);
+  // element.innerHTML = content;
+};
+
+var replaceHtml = function(element, html) {
+  $(element).replaceWith(html);
+  // element.outerHTML = html;
+};
+
+var removeElements = function($elements, tryDetach) {
+  if (tryDetach && typeof $elements.detach !== 'undefined') $elements.detach();
+  // NOTE: we don't need an else, as detach is simply an optimization
+  $elements.remove();
+};
+
+module.exports = {
+  getAttribute: getAttribute,
+  setAttribute: setAttribute,
+  removeAttribute: removeAttribute,
+  getInnerText: getInnerText,
+  getInnerHtml: getInnerHtml,
+  getLowerTagName: getLowerTagName,
+  setContent: setContent,
+  replaceHtml: replaceHtml,
+  removeElements: removeElements,
+  objExtend: objExtend
+};

data/vendor/assets/mosaico-0.16.0/mosaico/src/js/converter/editor.js

@@ -0,0 +1,411 @@
+"use strict";
+
+var console = require("console");
+var elaborateDeclarations = require("./declarations.js");
+var utils = require('./utils.js');
+var modelDef = require('./model.js');
+
+var _getOptionsObject = function(options) {
+  var optionsCouples = options.split('|');
+  var opts = {};
+  for (var i = 0; i < optionsCouples.length; i++) {
+    var opt = optionsCouples[i].split('=');
+    opts[opt[0]] = opt.length > 1 ? opt[1] : opt[0];
+  }
+  return opts;
+};
+
+// TODO this should not have hardcoded rules (we now have a way to declare them in the template definition)
+// Category "style" is used by editType "styler"
+// Cateogry "content" is used by editType "edit"
+// TODO maybe we should use a common string here, and rely only on the original category.
+var _filterProps = function(model, editType, level) {
+  var res = [];
+  for (var prop in model)
+    if (!prop.match(/^customStyle$/) && !prop.match(/^_/) && model.hasOwnProperty(prop)) {
+      var isStyleProp = model[prop] !== null && typeof model[prop]._category != 'undefined' && model[prop]._category == 'style';
+      if (prop == 'id' || prop == 'type' || prop.match(/Blocks$/)) {} else if (editType == 'styler') {
+        if (isStyleProp || level > 0) res.push(prop);
+      } else if (editType == 'edit') {
+        // Editing for properties in the "content" category but not defined in the context of a block
+        var isContentProp = model[prop] !== null && typeof model[prop]._category != 'undefined' && model[prop]._category == 'content' &&
+          (typeof model[prop]._context == 'undefined' || model[prop]._context != 'block');
+        if (isContentProp) res.push(prop);
+      } else if (typeof editType == 'undefined') {
+        res.push(prop);
+      }
+    }
+  return res;
+};
+
+var _propInput = function(model, prop, propAccessor, editType, widgets) {
+  var html = "";
+  var widget;
+  if (model !== null && typeof model._widget != 'undefined') widget = model._widget;
+
+  if (typeof widget == 'undefined') {
+    throw "Unknown data type for " + prop;
+  }
+
+  // For content editors we deal with focusing (clicking is handled by the container DIV).
+  var onfocusbinding = 'focusable: true';
+  if (editType == 'edit') {
+    onfocusbinding += ', event: { focus: function(ui, event) { $($element).click(); } } ';
+  }
+
+  html += '<label class="data-' + widget + '"' + (widget == 'boolean' ? ' data-bind="event: { mousedown: function(ui, evt) { if (evt.button == 0) { var input = $($element).find(\'input\'); var ch = input.prop(\'checked\'); setTimeout(function() { input.click(); input.prop(\'checked\', !ch); input.trigger(\'change\'); }, 0); } } }, click: function(ui, evt) { evt.preventDefault(); }, clickBubble: false"' : '') + '>';
+
+  if (typeof widgets !== 'undefined' && typeof widgets[widget] !== 'undefined') {
+    var w = widgets[widget];
+    var parameters = {};
+    if (typeof w.parameters !== 'undefined')
+      for (var p in w.parameters)
+        if (w.parameters.hasOwnProperty(p) && typeof model['_'+p] !== 'undefined')
+          parameters[p] = model['_'+p];
+    html += w.html(propAccessor, onfocusbinding, parameters);
+  } else if (widget == 'boolean') {
+    html += '<input type="checkbox" value="nothing" data-bind="checked: ' + propAccessor + ', ' + onfocusbinding + '" />';
+    html += '<span class="checkbox-replacer" ></span>'; /* data-bind="css: { checked: '+propAccessor+' }" */
+  } else if (widget == 'color') {
+    html += '<input size="7" type="text" data-bind="colorpicker: { color: ' + propAccessor + ', strings: $root.t(\'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\') }, ' + ', ' + onfocusbinding + '" />';
+  } else if (widget == 'select') {
+    if (typeof model._options != 'undefined') {
+      var opts = _getOptionsObject(model._options);
+      // var opts = model._options;
+      html += '<select data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '">';
+      for (var opt in opts)
+        if (opts.hasOwnProperty(opt)) {
+          html += '<option value="' + opt + '" data-bind="text: $root.ut(\'template\', \'' + utils.addSlashes(opts[opt]) + '\')">' + opts[opt] + '</option>';
+        }
+      html += '</select>';
+    }
+  } else if (widget == 'font') {
+    html += '<select type="text" data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '">';
+    html += '<optgroup label="Sans-Serif Fonts">';
+    html += '<option value="Arial,Helvetica,sans-serif">Arial</option>';
+    html += '<option value="\'Comic Sans MS\',cursive,sans-serif">Comic Sans MS</option>';
+    html += '<option value="Impact,Charcoal,sans-serif">Impact</option>';
+    html += '<option value="\'Trebuchet MS\',Helvetica,sans-serif">Trebuchet MS</option>';
+    html += '<option value="Verdana,Geneva,sans-serif">Verdana</option>';
+    html += '</optgroup>';
+    html += '<optgroup label="Serif Fonts">';
+    html += '<option value="Georgia,serif">Georgia</option>';
+    html += '<option value="\'Times New Roman\',Times,serif">Times New Roman</option>';
+    html += '</optgroup>';
+    html += '<optgroup label="Monospace Fonts">';
+    html += '<option value="\'Courier New\',Courier,monospace">Courier New</option>';
+    html += '</optgroup>';
+    html += '</select>';
+  } else if (widget == 'url') {
+    html += '<div class="ui-textbutton">';
+    // <a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon fa fa-fw caret-down">▼</span></span></a>
+    html += '<input class="ui-textbutton-input" size="7" type="url" pattern="(mailto:.+@.+|https?://.+\\..+|\\[.*\\].*)" value="nothing" data-bind="css: { withButton: typeof $root.linkDialog !== \'undefined\' }, validatedValue: ' + propAccessor + ', ' + onfocusbinding + '" />';
+    html += '<a class="ui-textbutton-button" data-bind="visible: typeof $root.linkDialog !== \'undefined\', click: typeof $root.linkDialog !== \'undefined\' ? $root.linkDialog.bind($element.previousSibling) : false, button: { icons: { primary: \'fa fa-fw fa-ellipsis-h\' }, label: \'Opzioni\', text: false }">Opzioni</a>';
+    html += '</div>';
+  } else if (widget == 'integer') {
+    // at this time the "step" depends on max being greater than 100.
+    // maybe we should expose "step" as a configuration, too
+    var min = 0;
+    var max = 1000;
+    if (model !== null && typeof model._max !== 'undefined') max = model._max;
+    if (model !== null && typeof model._min !== 'undefined') min = model._min;
+    var step = (max - min) >= 100 ? 10 : 1;
+    var page = step * 5;
+    html += '<input class="number-spinner" size="7" step="' + step + '" type="number" value="-1" data-bind="spinner: { min: ' + min + ', max: ' + max + ', page: ' + page + ', value: ' + propAccessor + ' }, valueUpdate: [\'change\', \'spin\']' + ', ' + onfocusbinding + '" />';
+  } else {
+    html += '<input size="7" type="text" value="nothing" data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '" />';
+  }
+
+  html += '</label>';
+
+  return html;
+};
+
+var _getGlobalStyleProp = function(globalStyles, model, prop, path) {
+  var globalStyleProp;
+  if (typeof model !== 'object' || model === null || typeof model._widget !== 'undefined') {
+    if (typeof prop !== 'undefined' && typeof path !== 'undefined' && path.length > 0 && typeof globalStyles == 'object' && typeof globalStyles[path] != 'undefined') {
+      globalStyleProp = globalStyles[path];
+    }
+  }
+  return globalStyleProp;
+};
+
+var _propEditor = function(withBindingProvider, widgets, templateUrlConverter, model, themeModel, path, prop, editType, level, baseThreshold, globalStyles, globalStyleProp, trackUsage, rootPreviewBinding, previewBackground) {
+  if (typeof level == 'undefined') level = 0;
+
+  if (typeof prop !== 'undefined' && typeof model == 'object' && model !== null && typeof model._usecount === 'undefined') {
+    console.log("TODO EDITOR ignoring", path, "property because it is not used by the template", "prop:", prop, "type:", editType, "level:", level, withBindingProvider._templateName);
+    return "";
+  }
+
+  var propAccessor = typeof globalStyleProp != 'undefined' ? prop + '._defaultComputed' : prop;
+
+  var html = "";
+  var title;
+  var ifSubsProp = propAccessor;
+  var ifSubsGutter = 1;
+  // typeof globalStyleProp != 'undefined' ? 1 : 2;
+  var ifSubsThreshold = 1;
+
+  // The visibility handling is a PITA
+  // 
+  // Here are some "edge cases" to test whenever we change something here:
+  // LM social footer: removing shareVisibile must be reflected in the booleans sub-checks
+  // FLUID social block: multiple clicks on the "wand" should not make the editor invisible
+  // BIS heroMenu - By changing the menu visibility it should be reflected in style editors for the menu links
+  // FLUID almost every block with a color variant sometimes keeps showing style editor for the hidden variant.
+  if (typeof model == 'object' && model !== null && typeof model._widget == 'undefined') {
+    // Do nothing here
+  } else {
+    if (typeof globalStyleProp == 'undefined') {
+      ifSubsGutter += 1;
+    }
+  }
+
+  // NOTE baseThreshold is added only when globalStyle is not defined because when we have globalStyle
+  // we're going to bind the computed values and not the original and this way we don't add ourserf to the dependency 
+  // tracking (subscriptionCount)
+  // NOTE baseThreshold is an "expression" and not a fixed number, so this is a concatenation
+  if (typeof globalStyleProp == 'undefined' && typeof baseThreshold !== 'undefined') ifSubsThreshold += baseThreshold;
+
+  if (typeof prop != 'undefined' && !!trackUsage) {
+    html += '<!-- ko ifSubs: { data: ' + ifSubsProp + ', threshold: ' + ifSubsThreshold + ', gutter: ' + ifSubsGutter + ' } -->';
+  }
+
+  if (typeof prop != 'undefined' && (model === null || typeof model._name == 'undefined')) {
+    // TODO throw exception?
+    console.log("TODO WARN Missing label for property ", prop);
+  }
+  if (typeof prop == 'undefined' && model !== null && typeof model._name == 'undefined') {
+    console.log("TODO WARN Missing label for object ", model.type /*, model */ );
+  }
+
+  if (typeof model == 'object' && model !== null && typeof model._widget == 'undefined') {
+    var props = _filterProps(model, editType, level);
+
+    var hasCustomStyle = editType == 'styler' && model !== null && typeof model.customStyle !== 'undefined' && typeof globalStyleProp !== 'undefined';
+    var selectedItemBinding = '';
+    var additionalClasses = '';
+    if (typeof prop !== 'undefined' && editType == 'edit') {
+      selectedItemBinding = ', click: function(obj, evt) { $root.selectItem(' + prop + ', $data); return false }, clickBubble: false, css: { selecteditem: $root.isSelectedItem(' + prop + ') }, scrollIntoView: $root.isSelectedItem(' + prop + '), ';
+      additionalClasses += ' selectable';
+    }
+    if (hasCustomStyle) {
+      additionalClasses += ' supportsCustomStyles';
+    }
+    html += '<div class="objEdit level' + level + additionalClasses + '" data-bind="tooltips: {}' + selectedItemBinding + '">';
+    var modelName = (model !== null && typeof model._name != 'undefined' ? model._name : (typeof prop !== 'undefined' ? '[' + prop + ']' : ''));
+    if (hasCustomStyle) {
+      var themeSectionName = 'Stile';
+      if (typeof themeModel !== 'undefined' && themeModel !== null && typeof themeModel._name !== 'undefined') {
+        themeSectionName = themeModel._name;
+      } else {
+        console.log("TODO missing label for theme section ", prop, model !== null ? model.type : '-');
+      }
+
+      modelName = '<span class="blockSelectionMethod" data-bind="text: customStyle() ? $root.ut(\'template\', \'' + utils.addSlashes(modelName) + '\') : $root.ut(\'template\', \'' + utils.addSlashes(themeSectionName) + '\')">Block</span>';
+    } else {
+      modelName = '<span data-bind="text: $root.ut(\'template\', \'' + utils.addSlashes(modelName) + '\')">' + modelName + '</span>';
+    }
+    title = model !== null && typeof model._help !== 'undefined' ? ' title="' + utils.addSlashes(model._help) + '" data-bind="attr: { title: $root.ut(\'template\', \'' + utils.addSlashes(model._help) + '\') }"' : '';
+    html += '<span' + title + ' class="objLabel level' + level + '">' + modelName + '</span>';
+
+    if (editType == 'edit' && typeof model._blockDescription !== 'undefined') {
+      html += '<div class="blockDescription" data-bind="html: $root.ut(\'template\', \'' + utils.addSlashes(model._blockDescription) + '\')">' + model._blockDescription + '</div>';
+    }
+
+    /* CUSTOM STYLE */
+    if (hasCustomStyle) {
+      html += '<label class="data-boolean blockCheck" data-bind="tooltips: { }">';
+      html += '<input type="checkbox" value="nothing" data-bind="focusable: true, checked: customStyle" />';
+      html += '<span title="Switch between global and block level styles editing" data-bind="attr: { title: $root.t(\'Switch between global and block level styles editing\') }" class="checkbox-replacer checkbox-replacer-onoff"></span>'; //  data-bind="tooltip: { content: \'personalizza tutti\' }"
+      html += '</label>';
+      html += '<!-- ko template: { name: \'customstyle\', if: customStyle } --><!-- /ko -->';
+    }
+
+    if (typeof prop != 'undefined') {
+      html += '<!-- ko with: ' + prop + ' -->';
+
+      /* PREVIEW */
+      if (level == 1 && typeof prop != 'undefined') {
+        if (typeof model._previewBindings != 'undefined' && typeof withBindingProvider != 'undefined') {
+          if (typeof rootPreviewBinding != 'undefined') html += '<!-- ko with: $root.content() --><div class="objPreview" data-bind="' + rootPreviewBinding + '"></div><!-- /ko -->';
+          if (typeof previewBackground != 'undefined') html += '<!-- ko with: $parent --><div class="objPreview" data-bind="' + previewBackground + '"></div><!-- /ko -->';
+          var previewBindings = elaborateDeclarations(undefined, model._previewBindings, templateUrlConverter, withBindingProvider.bind(this, path + '.'));
+          html += '<div class="objPreview"><div class="objPreviewInner" data-bind="' + previewBindings + '"></div></div>';
+        }
+      }
+    }
+
+    /* PREVIEW */
+    var previewBG;
+    if (level === 0) {
+      if (typeof model._previewBindings != 'undefined') {
+        previewBG = elaborateDeclarations(undefined, model._previewBindings, templateUrlConverter, withBindingProvider.bind(this, path.length > 0 ? path + '.' : ''));
+      }
+    }
+
+    var i, newPath;
+
+    var before = html.length;
+
+    var newThemeModel;
+    var newGlobalStyleProp;
+
+    for (i = 0; i < props.length; i++) {
+      newPath = path.length > 0 ? path + "." + props[i] : props[i];
+      if (typeof model[props[i]] != 'object' || model[props[i]] === null || typeof model[props[i]]._widget != 'undefined') {
+        newGlobalStyleProp = undefined;
+        if (level === 0 && props[i] == 'theme')
+          html += _propEditor(withBindingProvider, widgets, templateUrlConverter, model[props[i]], newThemeModel, newPath, props[i], editType, 0, baseThreshold, undefined, undefined, trackUsage, rootPreviewBinding);
+        else {
+          newGlobalStyleProp = _getGlobalStyleProp(globalStyles, model[props[i]], props[i], newPath);
+          html += _propEditor(withBindingProvider, widgets, templateUrlConverter, model[props[i]], newThemeModel, newPath, props[i], editType, level + 1, baseThreshold, globalStyles, newGlobalStyleProp, trackUsage, rootPreviewBinding, previewBG);
+        }
+      }
+    }
+    for (i = 0; i < props.length; i++) {
+      newPath = path.length > 0 ? path + "." + props[i] : props[i];
+      if (!(typeof model[props[i]] != 'object' || model[props[i]] === null || typeof model[props[i]]._widget != 'undefined')) {
+        newGlobalStyleProp = undefined;
+        if (level === 0 && props[i] == 'theme')
+          html += _propEditor(withBindingProvider, widgets, templateUrlConverter, model[props[i]], newThemeModel, newPath, props[i], editType, 0, baseThreshold, undefined, undefined, trackUsage, rootPreviewBinding);
+        else {
+          newGlobalStyleProp = _getGlobalStyleProp(globalStyles, model[props[i]], props[i], newPath);
+          html += _propEditor(withBindingProvider, widgets, templateUrlConverter, model[props[i]], newThemeModel, newPath, props[i], editType, level + 1, baseThreshold, globalStyles, newGlobalStyleProp, trackUsage, rootPreviewBinding, previewBG);
+        }
+      }
+    }
+
+    var added = html.length - before;
+    if (added === 0) {
+      // No editable content: if this is in context "template" we leave it empty, otherwise we show an help.
+      if (typeof model == 'object' && model !== null && model._context == 'template') {
+        return '';
+      } else {
+        // TODO move me to a tmpl?
+        html += '<div class="objEmpty" data-bind="html: $root.t(\'Selected element has no editable properties\')">Selected element has no editable properties</div>';
+      }
+    }
+
+    if (typeof prop != 'undefined') {
+      html += '<!-- /ko -->';
+    }
+    html += '</div>';
+
+  } else {
+    var checkboxes = true;
+
+    if (typeof globalStyles == 'undefined') checkboxes = false;
+
+    if (model === null || typeof model != 'object' || typeof model._widget != 'undefined') {
+      var bindings = [];
+
+      if (typeof globalStyleProp != 'undefined') bindings.push('css: { notnull: ' + prop + '() !== null }');
+      title = model !== null && typeof model._help !== 'undefined' ? ' title="' + utils.addSlashes(model._help) + '" data-bind="attr: { title: $root.ut(\'template\', \'' + utils.addSlashes(model._help) + '\') }"' : '';
+      if (title.length > 0) bindings.push('tooltips: {}');
+      var bind = bindings.length > 0 ? 'data-bind="' + utils.addSlashes(bindings.join()) + '"' : '';
+      html += '<div class="propEditor ' + (checkboxes ? 'checkboxes' : '') + '"' + bind + '>';
+
+      var modelName2 = (model !== null && typeof model._name != 'undefined' ? model._name : (typeof prop !== 'undefined' ? '[' + prop + ']' : ''));
+      modelName2 = '<span data-bind="text: $root.ut(\'template\', \'' + utils.addSlashes(modelName2) + '\')">' + modelName2 + '</span>';
+      html += '<span' + title + ' class="propLabel">' + modelName2 + '</span>';
+      html += '<div class="propInput ' + (typeof globalStyles != 'undefined' ? 'local' : '') + '" data-bind="css: { default: ' + prop + '() === null }">';
+      html += _propInput(model, prop, propAccessor, editType, widgets);
+      html += '</div>';
+      if (typeof globalStyleProp != 'undefined') {
+        html += '<div class="propInput global" data-bind="css: { overridden: ' + prop + '() !== null }">';
+        html += _propInput(model, prop, globalStyleProp, editType, widgets);
+        html += '</div>';
+
+        if (checkboxes) {
+          html += '<div class="propCheck"><label data-bind="tooltips: {}"><input type="checkbox" data-bind="focusable: true, click: function(evt, obj) { $root.localGlobalSwitch(' + prop + ', ' + globalStyleProp + '); return true; }, checked: ' + prop + '() !== null">';
+          html += '<span class="checkbox-replacer" data-bind="css: { checked: ' + prop + '() !== null }, attr: { title: $root.t(\'This style is specific for this block: click here to remove the custom style and revert to the theme value\') }"></span>';
+          html += '</label></div>';
+        }
+      }
+      html += '</div>';
+    } else if (model === null || typeof model != 'object') {
+      // TODO remove debug output
+      html += '<div class="propEditor unknown">[A|' + prop + "|" + typeof model + ']</div>';
+    } else {
+      // TODO remove debug output
+      html += '<div class="propEditor unknown">[B|' + prop + "|" + typeof model + ']</div>';
+    }
+
+
+  }
+
+  if (typeof prop != 'undefined' && !!trackUsage) {
+    html += '<!-- /ko -->';
+    html += '<!-- ko ifSubs: { not: true, data: ' + ifSubsProp + ', threshold: ' + ifSubsThreshold + ', gutter: 0 } -->';
+    html += '<span class="label notused">(' + prop + ')</span>';
+    html += '<!-- /ko -->';
+  }
+
+  return html;
+};
+
+
+var createBlockEditor = function(defs, widgets, themeUpdater, templateUrlConverter, rootModelName, templateName, editType, templateCreator, baseThreshold, trackGlobalStyles, trackUsage, fromLevel) {
+  if (typeof trackUsage == 'undefined') trackUsage = true;
+  var model = modelDef.getDef(defs, templateName);
+
+  var rootModel = modelDef.getDef(defs, rootModelName);
+  var rootPreviewBindings;
+  if (typeof rootModel._previewBindings != 'undefined' && templateName != 'thaeme' && editType == 'styler') {
+    rootPreviewBindings = elaborateDeclarations(undefined, rootModel._previewBindings, templateUrlConverter, modelDef.getBindValue.bind(undefined, defs, themeUpdater, rootModelName, rootModelName, ''));
+  }
+
+  var globalStyles = typeof trackGlobalStyles != 'undefined' && trackGlobalStyles ? defs[templateName]._globalStyles : undefined;
+  var globalStyleProp = typeof trackGlobalStyles != 'undefined' && trackGlobalStyles ? defs[templateName]._globalStyle : undefined;
+
+
+  var themeModel;
+  if (typeof globalStyleProp !== 'undefined') {
+    var mm = modelDef.getDef(defs, 'theme');
+    // TODO remove deprecated $theme
+    themeModel = mm[globalStyleProp.replace(/^(\$theme|_theme_)\./, '')];
+  }
+
+
+  var withBindingProvider = modelDef.getBindValue.bind(undefined, defs, themeUpdater, rootModelName, templateName);
+  withBindingProvider._templateName = templateName;
+
+  var html = '<div class="editor">';
+  html += "<div class=\"blockType" + (typeof globalStyles != 'undefined' ? " withdefaults" : "") + "\">" + model.type + "</div>";
+
+  var editorContent = _propEditor(withBindingProvider, widgets, templateUrlConverter, model, themeModel, "", undefined, editType, fromLevel, baseThreshold, globalStyles, globalStyleProp, trackUsage, rootPreviewBindings);
+  if (editorContent.length > 0) {
+    html += editorContent;
+  }
+
+  html += '</div>';
+
+  templateCreator(html, templateName, editType);
+};
+
+var createBlockEditors = function(defs, widgets, themeUpdater, templateUrlConverter, rootModelName, templateName, templateCreator, baseThreshold) {
+  createBlockEditor(defs, widgets, themeUpdater, templateUrlConverter, rootModelName, templateName, 'edit', templateCreator, baseThreshold);
+  createBlockEditor(defs, widgets, themeUpdater, templateUrlConverter, rootModelName, templateName, 'styler', templateCreator, baseThreshold, true);
+};
+
+var generateEditors = function(templateDef, widgets, templateUrlConverter, templateCreator, baseThreshold) {
+  var defs = templateDef._defs;
+  var templateName = templateDef.templateName;
+  var blocks = templateDef._blocks;
+  var idx;
+  var blockDefs = [];
+  for (idx = 0; idx < blocks.length; idx++) {
+    if (typeof blocks[idx].container !== 'undefined') {
+      blockDefs.push(modelDef.generateModel(defs, blocks[idx].block));
+    }
+    createBlockEditors(defs, widgets, undefined, templateUrlConverter, blocks[idx].root, blocks[idx].block, templateCreator, baseThreshold);
+  }
+
+  if (typeof defs['theme'] != 'undefined') createBlockEditor(defs, widgets, undefined, templateUrlConverter, templateName, 'theme', 'styler', templateCreator, undefined, false, false, -1);
+  return blockDefs;
+};
+
+module.exports = generateEditors;