Issue #553Opened November 21, 2017by baxxos2 reactions

Adding new components to existing ones

Question

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

Answers (3)

ryandebaNovember 22, 20171 reactions
Code SnippetTEXT
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]`
baxxosNovember 27, 20171 reactions

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.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.