JointJS: Inspector doesn't edit link label?

Question

I'm working on a Flowchart editor and I want the ui.inspector to edit labels on links.

I did the following:

function createInspector(cellView) {


    if (!inspector || inspector.options.cellView !== cellView) {

        if (inspector) {

            inspector.remove();
        }

inspector = new joint.ui.Inspector({
            inputs: {

                labels: 
             attrs: {
            text:{

          text: { type: 'textarea', group: 'Labels', label: 'Label', index: 2 },

                 }
                }

                        },

            },

            },
            groups: {

               labels:[ { label: 'Labels', index: 1 },
            }],
            cellView: cellView
        });
        $('#inspector-holder-create').html(inspector.render().el);
    }
}

paper.on('cell:pointerdown', function(cellView) {
    createInspector(cellView);
});

However, when I edit a link it shows in the JSON output:

"labels": {
            "0": {
                "attrs": {
                    "text": {
                        "text": "Text I entered"
                    }
                }
            }
        },

but doesn't actually render on the link in the stencil.

I think the problem is with the { "0": part the inspector adds. I want to remove that and replace with it [ ] so the output will be

 labels: [
    { attrs: { text: { text: 'label' } } }
]

What should I do ??

Answer 1

It is possible to define Inspector inputs with paths.

'labels/0/attrs/text/text': {
    type: 'text',
    group: 'Text',
    index: 1,
    label: 'Label'
}

Or as a combination of attributes nesting and paths.

'labels/0/attrs': {
    text: {
        text: {
            type: 'text',
            group: 'Text',
            index: 1,
            label: 'Label'
        },
        fontSize: {
            type: 'number',
            group: 'Text',
            index: 2,
            label: 'Font Size'
        }
    }
}

This is valid for Rappid v2.4.0+.

Answer 2

inspector = new joint.ui.Inspector({
inputs: {
    'labels': [
        {attrs: {
            text: {
                text: {
                    type: 'text',
                    group: 'someGroup',
                    index: 1,
                    label: "Label"
                }
            }
        }}
    ]
}});