Edit Custom Component

[MuhammadIsmail-Dev]

Hi Great People!
I am facing a hurdle while working on your awesome framework (GrapesJs).

• using latest version.

I have defined a custom component.
Purpose:
take values from traits and initiates Ajax call then render data according to the Ajax response.

Example 1.1

• Get a List from server and render it.
• get a Form from server as string html and render it.
  (working of this example is handled in onRender method of view)

so above mentioned examples is working fine the PROBLEM is to edit that rendered html in editor.

Issue:
see the layers in below image. I'll explain it.

so red box in above image is my custom component. blue box is the html that I bring here from server as I mentioned in example 1.1
Now what I want is to edit that blue box items in canvas like customising the text, css changes etc.
I can select the ws-if(red box) in canvas but I can't edit the inner html(blue box) .
although I can select the inner html in layers but can't select them by my cursor, on the canvas.

Visual Examle:

I tried my best to explain this problem simply.

I'll appreciate if someone helps me to overcome this challenge as I am stuck from few days.

Thanks.

[artf]

Hi @MuhammadIsmail-Dev, it would be easier to understand what is happening by providing a reproducible demo (you can replace the ajax call with a static HTML string)

[MuhammadIsmail-Dev]

thanks @artf here is an example.

[artf]

An element, in order to be selected in the editor, should be part of the components. By doing targetEl.innerHTML = htmlFromServer you're simply replacing the DOM so the editor doesn't "see" that content. You have to properly update components to make your elements selectable, eg. component.components(htmlFromServer) (this will parse the HTML string and create components in the project)