How to Sync from DOM to Component/model?

[DhaniAM]

for example I want insert mark:

rte.insertHTML(`<mark style="background-color:${action?.value ?? 'yellow'}">${rte.selection()}</mark>`)

This only applied to dom and not to the components, so when I try to save (using editor.getProjectData), it doesn't get saved. This is just an example. But how to easily sync dom changes to grapesjs components?

[DhaniAM]

I tried using component.components(html) and component.replaceWith(html) but it removes all styling.
If I can't sync from DOM to component, then how do I wrap a selection with custom tags (like span) using components?