Modifying a component in the editor clears the model content

[austinbiggs]

What I'm trying to achieve: I have special "data-" attributes on some of the components I pull into the editor. When one of these is modified, I want to get the value of the "data-" attribute and the new content. I have code listening to when a component is modified. When this event fires, I'm checking the content (work-in-progress). However, when I get the content, it's empty, even though the component isn't...

The issue seems to be that instead of modifying the existing component model, a new one is created.

editor.on( 'component:update' , function( model ) { console.log( JSON.stringify( model ) ); });

When selecting the element I want to modify, the model gets written in the console.log 2x

{"tagName":"p","type":"text","removable":true,"draggable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":"","unstylable":"","highlightable":true,"copyable":true,"resizable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"","status":"","content":"This is just an awesome house that you should buy immediately! This text is here so that you can see what a complete description looks like.","icon":"","style":{},"attributes":{"data-track-changes":"","data-meta-field":"value_primary_description_html"},"classes":[{"name":"track-changes","label":"track-changes","type":1,"active":true,"private":false,"protected":false}],"script":"","traits":[{"type":"text","label":"","name":"id","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]},{"type":"text","label":"","name":"title","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]}],"propagate":"","components":[]}

{"tagName":"p","type":"text","removable":true,"draggable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":"","unstylable":"","highlightable":true,"copyable":true,"resizable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"","status":"selected","content":"This is just an awesome house that you should buy immediately! This text is here so that you can see what a complete description looks like.","icon":"","style":{},"attributes":{"data-track-changes":"","data-meta-field":"value_primary_description_html"},"classes":[{"name":"track-changes","label":"track-changes","type":1,"active":true,"private":false,"protected":false}],"script":"","traits":[{"type":"text","label":"","name":"id","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]},{"type":"text","label":"","name":"title","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]}],"propagate":"","components":[]}

After making my changes and unselecting the component, the event (component:update:content) fires and returns the following model:

{"tagName":"p","type":"text","removable":true,"draggable":true,"droppable":false,"badgable":true,"stylable":true,"stylable-require":"","unstylable":"","highlightable":true,"copyable":true,"resizable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":false,"state":"","status":"selected","content":"","icon":"","style":{},"attributes":{"data-track-changes":"","data-meta-field":"value_primary_description_html"},"classes":[{"name":"track-changes","label":"track-changes","type":1,"active":true,"private":false,"protected":false}],"script":"","traits":[{"type":"text","label":"","name":"id","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]},{"type":"text","label":"","name":"title","min":"","max":"","value":"","default":"","placeholder":"eg. Text here","changeProp":0,"options":[]}],"propagate":"","components":[]}

I'm not sure what I'm doing wrong here, or if there's a better way to do this? Is this a bug?

[austinbiggs]

I’ve been digging through more code and from what I can tell, this doesn’t happen in when using the CKEditor plugin (tested using the newsletter demo). However, when using the default RTE it does occur (tested on my own code and the website demo)

_{Sent with GitHawk}

[artf]

Hi Austin, the reason behind your issue it's just because the built-in RTE works differently from a custom one (eg. CKEditor plugin) which just writes all changes inside content. https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentTextView.js#L67-L90 The default RTE resets its components with a newly updated content so you have to check them through model.components() instead of model.get('content')

[lock[bot]]

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.