Get the model of the clonned element

[perfect-coders]

First of all thanks for such a great tool. I am giving a random id to the element when user drags a block in the editor. But when someone copies the element from "copy icon" in toolbar, I am not able to get the clonned element. And I am not able to give the random id to the clonned element.

[artf]

I'll add component:clone event on the next release

[sudharsanUI]

@artf @ryandeba
Hi, we have same problem.
i have Input control within column components, in this situation component:clone is working fine. But, in multiple column within single row component, row component clone is not working. In this case, i have only empty component getting cloned. Herewith is sample code

view: defaultView.extend({ ...etpPageView,
    renderContent() {
        const currModel = this.model
        const template = `<div class="column" data-gjs-type="columnPlaceholder">${this.model.get('content')}</div>`
        this.getChildrenContainer().innerHTML = (template)
        
        /******************** COLUMN - CLONED ELEMENT **************************/
        editor.on('component:clone', model => {
            if (model === currModel) {  
            let currId = uuidv4()

            // COLUMN PLACEHOLDER HIDE WHILE CLONE THE COMPONENT
            this.handleComponentPlaceholderHide()

            /* AFTER RENDER SET STYLE -- COLUMN STYLE AND ATTRIBUTE IMPLEMENTED AS PER SELECTED COLUMN */
            model.addAttributes({'id': currId})
            model.get('traits').where({name: 'id'})[0].set('value', currId)

            // COLUMN CLONE
            let SplitState = this.model.get('traits').where({name: 'cols'})[0].get('value')
            this.handleComponent_SizeCloneMove(model, SplitState)
            }
        })
    },
    // COLUMN PLACEHOLDER HIDE WHILE CLONE THE COMPONENT
    handleComponentPlaceholderHide(){
        let checkControlLen = this.getChildrenContainer().querySelector('[elem]')
        if (checkControlLen !== null){
            let placeholderdv = this.getChildrenContainer().querySelector('[data-gjs-type="columnPlaceholder"]')
            placeholderdv.style.display = 'none'  
        }
    },
    // COLUMN CLONE
    handleComponent_SizeCloneMove(model, SplitState){
        this.el.style.display = 'inline-block'
        if(SplitState === '1') { 
          model.addAttributes({'cols': '1'}) 
          this.el.style.width = '100%' 
        }
    },
})

component:clone Is it right way to proceed within the render content method?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.