Is there a method (or preferred way) to wrap component in another?

[glaprida]

I want my images to be easily wrapped in tags with a single click. (I added a button to the images toolbar for that)

Right now what I'm doing is caching the component; doing a replaceWith(myLinkComponent) and appending my original Image component as a child.
Works fine, but I'm not sure its the best way.

--

Also, while not technically wrapping one component with another... I have a similar usage of replaceWith.

I want all my text components to be interchangable (be able to switch an h1 for any other h2,3,4,5 or 6, and even a Paragraph or a Blockquote). I have made a custom trait for them (it's basically a select with all the available options).

I tried the replaceWith as well, but its more complicated.
I can easily cache the previous content with component.view.el.innerHTML and then set it to newComponent.components(prevContent)

It kinda works... I have span tags inside my text, or bold tags, anchors, whatever... they are passed on to the new replaced components.
But if any of those inner components had any styles, the are lost (unless there was a Class applied – note I'm using componentsFirst).

I hope its clear enough!
Any advice?

[artf]

I'd say for wrapping, the most basic approach would be to append the "wrapper" component at the same position as the selected one and then move the selected inside the new wrapper.

const selected = editor.getSelected();
const newWrapper = selected.parent().append('<div style="border: 2px solid red"></div>', {
    at: selected.index(),
})[0];
newWrapper.append(selected);

About the example with changing tags, no need to do extra work, just change the tagName of the component and it should rerender it. You can see your exact approach here https://github.com/olivmonnier/grapesjs-plugin-header/blob/master/src/components.js

[glaprida]

The wrapping worked perfectly, thanks.

The changing tag, not so well. It changes the tagName and the tag itself (i can see it with devTools), but it doesn't rerender for some reason.

It still has the old data-gjs-type.

Also, each of my heading components come with a pre-applied private class; that should change as well when changing block, and it doesn't.

The replaceWith method works "better" in that sense (it changes the the data-gjs-type and the pre-applied class), but I have to manually append the old content, and I end up losing componentFirst styles.

[artf]

It still has the old data-gjs-type.

In this case the component has to be of the same type. You can keep using the replaceWith and move what you need (eg. content, attributes) inside the new component.