Problem trying to inject new HTML content in the Editor

I've just fixed my problem doing a workaround after researching on the grapesjs core. I'm going to explain the solution that I did:

1. I'm using a popup dialog with a bootstrap switcher to select text language. The complicate issue is how to update the component model that are not selected on the editor. To accomplish this I had to do the following one:

const sel = ContentBuilder.getEditor().getSelected();
/**
* This code update new elements inside the model when an user change the languages.
* @type {*|Model|Component}
*/
                    const coll = sel.collection; // I got the collection elements of the element selected
                    const at = coll.indexOf(sel) + 1; // After the element selected I will add a new component
                    let added;

                    // I need to add special attributes to a new component in the editor for my goal.
                    // Add special attributes to the element selected with DEFAULT LANG CONDITION
                    sel.addAttributes({'attr-lang-id':element_clicked.attr("attr-lang-id")});
                    sel.addAttributes({'attr-condition':MYM_LANG_DEFAULT});

                    // Cloning new component closest to the selected one.
                    added = coll.add(sel.clone(), { at });
                    // Adding language attribute to later on control the language text injected
                    added.addAttributes({'attr-lang-id':element_clicked.attr("attr-lang-id")});
                    added.addAttributes({'attr-condition':language_selected});
                    added.addClass(MYM_LANG_HIDDEN);
                    // Set the text content
                    added.set('content', text);

                    added = Array.isArray(added) ? added : [added];
                  // To call to clone event
                    added.forEach(add => ContentBuilder.getEditor().trigger('component:clone', add));

2. If I switch off the language option I need to delete all the new components and update the editor model:

               // Get component selected on the Editor 
               const comp = ContentBuilder.getEditor().getSelected();
                const coll = comp.collection;
                const at = coll.indexOf(comp);

                // We need to remove from the selected one attributes like
                //.removeAttr("attr-lang-id")
                //.removeAttr("attr-condition", MYM_LANG_DEFAULT)
                const attr = comp.getAttributes(); // To get all attributes from the model
                delete attr['attr-lang-id']; // To delete uuid
                delete attr['attr-condition']; // To delete condition settings
                comp.setAttributes(attr);

               // Now I need to look for all components that are not the default one that I want to keep on the editor. So I will remove everything but the component that is on the position 0.
                if (coll.length > 1) {
                    // To remove all elements but the first one
                    coll.models.splice(1);
                }


                comp.emitUpdate();

This is how it works: http://recordit.co/zcrpR0MRyv

For sure that exist a easy way to implement this solution but I couldn't find the good methods to do it.

Thanks in advance.

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.