Detached Component

[ltenti]

I have to put a custom component inside my page let call it registration-form.
The HTML of the component can change from time to time and is generated server-side.
My custom registration-form component replaces the innerHTML of its view with the HTML received from an asynchronous request to the server when the corresponding block is dropped in the canvas.
Although the HTML of the custom registration-form component can change it will always contain a div whose inner HTML is the title of the form.
I would like to allow grapes editor to manipulate that title (with style manager and traits manager ie.) creating a new component whose view has to be the title itself.
That component has to live only for the time I'm editing the page, before the page is stored I will manipulate the model of the registration-form so that the content information and all the styles information related to the title can be stored as attributes (or properties) of the registration-form.

My question is: how can I create such a detached Component? I can't find an API call to do that.

[artf]

Do you have an example of your case?

[ltenti]

Well you can find an example here:

https://jsfiddle.net/ltenti/p8d65f3z/33/

[ltenti]

Hi @artf, in the example I substitute the view HTML with a simplified version of what I can get from the server just to show you what I mean.
The question is: how can I allow grapesjs to edit the '

Title to be edited by Grapes tools

'? I thought I can create a new component "from" the h1, get the associated custom css and content, store it as attributes of the "xyz-registration-form" component and then use it for the final rendering.
Do you think this can be a good path?
What API can I use to create the temporary component?

[artf]

Instead of making DOM changes, which are not visible for the editor, why not create a regular component on server response?

const result = model.components(`<div>server side content</div>`);

Here you have way more control

[ltenti]

Because HTML received from server is much more complex than the one I used in the example and I can't change the server side part of my solution to serve an HTML that grapesjs can easily transform.
The problem is that I have big legacy components that has only some specific parts customizable and I'm looking for a way to let grapesjs help me making that parts customizable using grapesjs tools like style manager.
Second point is that, at the moment, I'm not able to cut my big components in fine grained ones to make it possible to interleave server-side components with standard grapesjs ones.

[artf]

You can avoid touching any of your legacy HTML, just instruct the editor to understand your content via isComponent feature