Adding new components to existing ones

Hello,

I would like to ask if there’s any existing support or API for adding new components to an existing component list (e. g. after fetching or generating them dynamically). I’m talking about something like this:

editor.addComponent({
  parent: 'parent_id',
  component: '<p>New child component</p>'
})

I’ve studied the documentation and the closest I got is the addComponents() function. Unfortunately, this function specifies no target where the new component should be placed.

I’m asking this because my intention is to use GrapesJS in a real-time collaborative way and sending the whole HTML representation back and forth after every user action is just too slow.

Best regards, Michal

[baxxos]

Thanks for your replies, I think my question has been answered and there’s not much else to add. I’m closing this now, however the find() method would be a welcome addition to this awesome framework.

[ryandeba]

Unfortunately I am not aware of a simple way to get a specific component object without recursively iterating through them to find the one you want, but that sounds like a great idea!

You might be able to do something like this to get all components and then filter for the one that you want (this code is not fully tested, but hopefully can get you started in the right direction if you’re stuck):

function getAllComponents(component) {
	component = component || editor.DomComponents.getWrapper();

	var components = component.get("components").models;
	component.get("components").forEach(function(component) {
		components = components.concat(getAllComponents(component));
	});

	return components;
};

getAllComponents().filter(function(component) { return component.cid == "someID"; } )[0]