[Question] - Appending to nested components
Question
I'm using component.find() to search for a nested component in a big chunk of HTML content for a fieldset tag so that I can append components after it. Component.find locates the component, as seen in the console.log, but attempting to .append or use .components to inject content results in a console error: fieldSet.append is not a function.
The goal is to use Traits to inject a chunk of HTML using the variable questionFieldSet into the form after the first fieldset.
If I use editor.getSelected().append, the HTML injects but at the wrong position as expected. I need to inject deeply within the nested component and .find() or .closest() doesn't seem to work.
Which API should be used to appened to nested components? Is this the proper structure for a component with big chunks of HTML?
https://codesandbox.io/s/weathered-shape-xubqn
To reproduce:
- Drag an Application Form block onto the canvas.
- Select the application form on the canvas, and click the cog icon to load the traits
- Click "Add Question" in the traits manager.
Thank you
Answers (1)
Figured this out! Just had to specific an array position :-)
After using component.find('fieldset') be sure to set an array position fieldSet[0].append(questionFieldSet);
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3270
QUESTION: How to export JS code from angular components?
Hey, I am using grapesjs in my Angular app I have a custom angular component (which is basically custom HTML created with angular) and I am...
Issue #1059
[Question]: Load html content from a file dynamically
Hi, I need to load content from a html file from server onto editor after or while initializing editor. How this can be implemented? HTML w...
Issue #2274
[QUESTION] How to load children of a readonly component?
I'm trying to mount a readonly component (draggable, droppable etc all set to false) and allow the user to edit child components inside. Fo...
Issue #2924
[QUESTION] Component HTML being changed
I am using GrapesJs to define Freemarker FTL templates. I am seeking an issue when my custom component HTML has been changed after inserted...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.