Collections in a Custom Component

Elements Component Development
1

@ben @dan I’m building a custom component that utilizes a collection to accommodate a variety of content parts, title, content, image, etc..

What I’m struggling with is figuring out whether it is possible to iterate over the items in the collection and create a drop zone for specific pieces of information for each item.

For example, there is a text area where a lengthy description can be added. Currently, I’m doing this using the text area property, but, of course, this is less than ideal, as you have no control over the styling of the text. Ideally, I would like to have a drop zone into which a user could drop either a text or typography component. They can then style the text to their heart’s content. If this is not possible, maybe @richtext can be used instead. But my experimentation with this has shown that it is almost impossible to edit the text in the rich text directive. Typically, all I can type is a single character before it kicks me out. Not sure if this is something I’m doing wrong or if there is a bug. I’d appreciate any insights.

But all of my experimentation to create something like this has met with defeat.

Before I spend more time trying to come up with a solution, I would appreciate some guidance on whether there is a known way to achieve my goal.

2

Yes 100 percent

@each(item in collection)
	<div>
		@text("itemText", default: "Edit this text!")
	</div>
@endeach

Should be able to, but cant do things like this.

3

Elements does not support creating @dropzone’s inside of loops.

If you’re using a collection then you will need to use controls, as you have been, to add data for each collection item.

4

@ben That is a real bummer, as you cannot then make something like I have just spent a week working on, where rich text needs to be available for editing.

I guess I will have to abandon this project. What a waste.