[QUESTION] Is Multiple trait possible to do editable img and <a> tag in the table component?

Hi Artur,

I had forgot to say i am using latest version, i am sorry for that.

I want to add a plugin for editable social media icons, image url and link href in component settings. Something like this:

I create a new trait type and i want to add multiple editable input something like above image.

I tried to create inputs in the getInputEl function but it returning only one inputEl.

My code:

grapesjs.plugins.add('social-media-options', (editor) => {
    editor.TraitManager.addType('content', {
        events:{
            'keyup': 'onChange',  // trigger parent onChange method on keyup
        },
        getInputEl: function() {
            if(!this.inputEl) {
                let targetEl = this.target.view.$el,
                    getLinks = targetEl.find("a");
                for (let i = 0; i < getLinks.length; i++) {
                    var input = document.createElement('textarea');
                    input.value = getLinks[i].getAttribute("href");
                    input.style.marginBottom = "10px";
                }
                this.inputEl = input;
            }
            return this.inputEl;
        },
        onValueChange: function () {
            let getLinks = this.target.view.$el.find("a");
            console.log(getLinks[0].attributes.href);
            //this.target.set('content', this.model.get('value'));
        }
    });

    let domc = editor.DomComponents;
    let defaultType = domc.getType('default');
    let defaultModel = defaultType.model;

    domc.addType('table', {
        model: defaultType.model.extend({
            init(){
                var components = this.get('components');
                console.log(components);
            },
            defaults: Object.assign({}, defaultModel.prototype.defaults, {
                tagName: 'table',
                droppable: ['tbody', 'thead', 'tfoot'],
                traits: [{type:'content'}],
            }),
        },{
            isComponent(el) {
                if (el.tagName === 'TABLE' && el.id === 'social-media') {
                    console.log($(el).find("a:first").html());
                    return { type: 'table' }
                }
            },
        }),
        view: defaultType.view,
    });
});

How can i get and change every image and link input? Or is there any solutions instead of getInputEl? How can i access all child component in the table and how can use it? Thanks in advance.