How to use JavaScript or jQuery to convert a Flex TextFlow object into HTML markup?

Question

I am recreating an Adobe Flex application in JavaScript with ReactJS and rich text. The content that is displayed in the app is in the form of a TextFlow-object from the Adobe Text Layout Framework. This produces output like the following:

<TextFlow>
    <p textAlign="center">
        <span color="#58595b" fontFamily="SansSerif" fontSize="16" fontStyle="normal" fontWeight="bold">Lorem Ipsum</span>
    </p>
</TextFlow>

I need to write a JavaScript script that will iterate over all of the elements in the TextFlow object and change everything to regular html markup. I can only imagine that this will require me to - for example - find all attributes that match fontFamily and change to style="font-family:", but then I have to get the value from it and append it to the end, so I'm just kind of lost as how to go about this and I'm really hoping someone can point me in the right direction with how I might accomplish this.

Answer 1

You could loop through all the elements inside of each TextFlow element and on each element, iterate over all its attributes to create the equivalent html style property. Something like this...

var attrConversion = {
    'textalign': ['text-align','',''], // [Style name, Value prefix, Value Suffix]
    'color': ['color','',''],
    'fontfamily': ['font-family','',''],
    'fontsize': ['font-size','','px'],
    'fontstyle': ['font-style','',''],
    'fontweight': ['font-weight','','']
};

function attrConversor(textflowAttr) {
    var attr = attrConversion[textflowAttr.name];
    return attr[0] + ':' + attr[1] + textflowAttr.value + attr[2];
}

$('TextFlow *').each(function() {

    var styleField = [], textflowAttrs = [];
    var element = this;

    // Loop through all attributes.
    $.each(this.attributes,function() {
        if (this.specified) {
            textflowAttrs.push(this.name);
            styleField.push(attrConversor(this));
        }
    });

    // Remove all textflow attibutes from the element (you can't do it
    // in the $.each because it would affect the iterations).
    for (var i=0, l=textflowAttrs.length ; i<l; i++)
        element.removeAttribute(textflowAttrs[i]);

    // Apply the 'style' html attribute.
    $(this).attr('style',styleField.join(';'));
});

This approach has some problems...

1. Although it looks like that TextFlow attribute names are just like the html but in camelcase format, the problem is that this.attributes gets a this.namethat is in lowercase, so you'l have to create an object to convert the textflow attribute names to the html version.

2. Some of the TextFlow attibute values can have some small differences with the html style version. For example, font family name maybe are different, fontSize doesn't have px suffixed so you'll have to put it manually, etc. You'll have to discover and take care of all that stuff.

Here you have a fiddle example... https://fiddle.jshell.net/rigobauer/xvukm9sn/

Is not perfect, but at least give you something to work with. I hope it helps