diff --git a/packages/editor/src/js/converter/domutils.js b/packages/editor/src/js/converter/domutils.js index 7c357180..9d7e09b8 100644 --- a/packages/editor/src/js/converter/domutils.js +++ b/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, diff --git a/packages/editor/src/js/converter/parser.js b/packages/editor/src/js/converter/parser.js index fc188384..c1f11689 100644 --- a/packages/editor/src/js/converter/parser.js +++ b/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( '