Fix/issue 373

packages/editor/src/js/converter/domutils.js

@@ -80,10 +80,59 @@ var removeElements = function ($elements, tryDetach) {
   $elements.remove();
 };
 
+// https://dev.to/qausim/convert-html-inline-styles-to-a-style-object-for-react-components-2cbi
+var formatStringToCamelCase = function(str) {
+  const splitted = str.split("-");
+  if (splitted.length === 1) return splitted[0];
+  return (
+    splitted[0] +
+    splitted
+      .slice(1)
+      .map(word => word[0].toUpperCase() + word.slice(1))
+      .join("")
+  );
+};
+
+var getStyleObjectFromString = function(str) {
+  const style = {};
+  console.log({ str });
+  str.split(";").forEach(el => {
+    const [property, value] = el.split(":");
+
+    const includedProperties = ["margin"];
+
+    if (
+      !property ||
+      !property.trim() ||
+      typeof property === "undefined" ||
+      !value ||
+      !value.trim ||
+      typeof value === "undefined"||
+      !includedProperties.includes(property)
+    ) return;
+    const formattedProperty = formatStringToCamelCase(property.trim());
+    style[formattedProperty] = value.trim();
+  });
+
+  return style;
+};
+
+
+
+var concatObjectProperties = function(str) {
+  const resultValue = Object.entries(str).reduce((accumulator, value ) => {
+    const valueBasedOnType  = isNaN(value[1]) ?  `'${value[1]}'`: value[1];
+    return `${accumulator }, ${value[0]} : ${valueBasedOnType}`
+  }, "");
+  return resultValue;
+}
+
 module.exports = {
   getAttribute: getAttribute,
   setAttribute: setAttribute,
+  concatObjectProperties,
   removeAttribute: removeAttribute,
+  getStyleObjectFromString: getStyleObjectFromString,
   getInnerText: getInnerText,
   getInnerHtml: getInnerHtml,
   getLowerTagName: getLowerTagName,

packages/editor/src/js/converter/parser.js

@@ -290,6 +290,7 @@ var processBlock = function (
         ')';
 
       if (domutils.getLowerTagName(element) != 'img') {
+
         defaultValue = domutils.getInnerHtml(element);
         var modelBindValue = bindingProvider(
           dataEditable,
@@ -329,6 +330,7 @@ var processBlock = function (
         }
         domutils.removeAttribute(element, 'data-ko-editable');
       } else {
+
         var width = domutils.getAttribute(element, 'width');
         if (width === '') width = null;
         if (width === null) {
@@ -432,20 +434,43 @@ var processBlock = function (
 
         var tmplName = templateCreator(element);
 
-        var containerBind = '{';
-        if (align == 'left') containerBind += ", float: 'left'";
-        else if (align == 'right') containerBind += ", float: 'right'";
+        const elementStyle = domutils.getAttribute(element, 'style');
+        const styleToJavascriptFormat =  domutils.getStyleObjectFromString(elementStyle);
+        let  bindingStyleValues = domutils.concatObjectProperties(styleToJavascriptFormat);
+
+        let containerBind = '{';
+
+
+        if (align == 'left') containerBind += " float: 'left'";
+        else if (align == 'right') containerBind += " float: 'right'";
         else if (align == 'center')
           if (typeof console.debug == 'function')
             console.debug(
               "Ignoring align=center on an img tag: we don't know how to emulate this alignment in the editor!"
             );
-          else if (align == 'top') containerBind += ", verticalAlign: 'top'";
+          else if (align == 'top') containerBind += "verticalAlign: 'top'";
           else if (align == 'middle')
-            containerBind += ", verticalAlign: 'middle'";
+            containerBind += " verticalAlign: 'middle'";
           else if (align == 'bottom')
-            containerBind += ", verticalAlign: 'bottom'";
+            containerBind += "verticalAlign: 'bottom'";
+
+        if(styleToJavascriptFormat && typeof styleToJavascriptFormat != "undefined") {
+          if(containerBind === '{' && bindingStyleValues.charAt(0) === ',')
+            bindingStyleValues = bindingStyleValues.substring(1);
+          containerBind += bindingStyleValues;
+        }
+
         containerBind += '}';
+
+        let cssBindling = '{ selecteditem: $root.isSelectedItem('+itemBindValue+')';
+        let elementClass = domutils.getAttribute(element, 'class');
+
+        if(!!elementClass &&  !!elementClass.trim()) {
+          cssBindling += `, '${elementClass}': true`;
+        }
+
+        cssBindling += '}';
+
         $(element).before(
           '<!-- ko wysiwygImg: { _data: $data, _item: ' +
             itemBindValue +
@@ -463,6 +488,8 @@ var processBlock = function (
             size +
             ', _method: ' +
             method +
+            ', _css: ' +
+            cssBindling +
             ', _placeholdersrc: ' +
             placeholdersrc +
             ', _stylebind: ' +

packages/editor/src/tmpl/img-wysiwyg.tmpl.html

@@ -1,5 +1,5 @@
-<table tabfocus="0" cellspacing="0" cellpadding="0" data-drop-content="Drop here" data-bind="style: _stylebind, click: function(obj, evt) { $root.selectItem(_item, _data); return true; }, clickBubble: false, fudroppable: { activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, extdroppable: { options: { accept: '.image', activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, data: _src, dragged: $root.fileToImage }, css: { selecteditem: $root.isSelectedItem(_item) }, scrollIntoView: $root.isSelectedItem(_item), attr: { 'data-drop-content': $root.t('Drop here'), width: _width, height: _height, align: _align }"
-  class="img-wysiwyg selectable-img" style="display: table; width:100%"><tr><td class="uploadzone">
+<table tabfocus="0" cellspacing="0" cellpadding="0" data-drop-content="Drop here" data-bind="style: _stylebind, click: function(obj, evt) { $root.selectItem(_item, _data); return true; }, clickBubble: false, fudroppable: { activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, extdroppable: { options: { accept: '.image', activeClass: 'ui-state-highlight', hoverClass: 'ui-state-draghover' }, data: _src, dragged: $root.fileToImage }, css: _css, scrollIntoView: $root.isSelectedItem(_item), attr: { 'data-drop-content': $root.t('Drop here'), width: _width, height: _height, align: _align }"
+  class="img-wysiwyg selectable-img" style="display: table;"><tr><td class="uploadzone">
   <div class="mo-imgselectionhelper"></div>
   <div class="mo-uploadzone"></div>
   <div class="img-size" data-bind="text: _size">size</div>