element-formatting.js

// Version 1 - Store raw css values
// Pros:
// - more backwards compatible
// - more human readable 
// - more easily used by external libraries/apps/etc.
// Cons:
// - parsing function is more complex than build function
// - requires two-way transform
// - state differs in different components (editor v.s. parent component)
// - impossible to directly link state
{
    "styles": {
        "top": "10%",
        "left": "10%",
        "z-index": 1,
        "transform": "translateX(10px) translateY(20px)"
    }
}

// State
this.state.top = '10%';

// Rendering
<img style={top: this.state.top} />

// Editing
var prop = css.parse(this.state.top);
<range value={prop.value} onChange={(e) => {
    this.setState({top: css.build({
        value: e.target.value,
        unit: prop.unit
    })});
}} />





// Version 2 - Store AST / js-formatted values
// Pros:
// - build function simpler than parse
// - only requires transform at display point
// - simpler editor code
// - direct state linking possible
// Cons:
// - less backwards compatible; custom format
// - less human readable

{
    "styles": {
        "top": {
            "value": 10,
            "unit": "%"
        },
        "left": {
            "value": 10,
            "unit": "%"
        },
        "zIndex": 1,
        "transform": [
            {
                "type": "translateX",
                "value": 10,
                "unit": "px"
            },
            {
                "type": "translateY",
                "value": 20,
                "unit": "px"
            }
        ],
        "z-index": 1
    }
}

// State
this.state.top = {value: 10, unit: '%'}

// Rendering
<img style={top: css.build(this.state.top)} />

// Editing
<range value={this.state.top.value} onChange={(e) => {
    this.setState({top: {value: e.target.value}});
}} />