Allow to skip dom reset in components

packages/core/src/dom_components/model/Component.ts

@@ -20,13 +20,13 @@ import Selectors from '../../selector_manager/model/Selectors';
 import Traits from '../../trait_manager/model/Traits';
 import EditorModel from '../../editor/model/Editor';
 import {
-  AddComponentsOption,
   ComponentAdd,
   ComponentDefinition,
   ComponentDefinitionDefined,
   ComponentOptions,
   ComponentProperties,
   DragMode,
+  ResetComponentsOptions,
   SymbolToUpOptions,
   ToHTMLOptions,
 } from './types';
@@ -1005,7 +1005,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    */
   components<T extends ComponentAdd | undefined>(
     components?: T,
-    opts: AddComponentsOption = {},
+    opts: ResetComponentsOptions = {},
   ): undefined extends T ? Components : Component[] {
     const coll = this.get('components')!;
 

packages/core/src/dom_components/model/types.ts

@@ -19,6 +19,12 @@ export type DraggableDroppableFn = (source: Component, target: Component, index?
 
 export interface AddComponentsOption extends AddOptions, OptionAsDocument {}
 
+export interface ResetComponentsOptions extends AddComponentsOption {
+  previousModels?: Component[];
+  keepIds?: string[];
+  skipDomReset?: boolean;
+}
+
 interface ComponentWithCheck<C extends Component> {
   new (props: any, opt: ComponentOptions): C;
   isComponent(node: HTMLElement, opts?: ParseNodeOptions): ComponentDefinitionDefined | undefined | boolean;

packages/core/src/dom_components/view/ComponentsView.ts

@@ -7,6 +7,7 @@ import Component from '../model/Component';
 import ComponentView from './ComponentView';
 import FrameView from '../../canvas/view/FrameView';
 import Components from '../model/Components';
+import { ResetComponentsOptions } from '../model/types';
 
 export default class ComponentsView extends View {
   opts!: any;
@@ -124,9 +125,12 @@ export default class ComponentsView extends View {
     return rendered;
   }
 
-  resetChildren(models: Components, { previousModels = [] } = {}) {
-    this.parentEl!.innerHTML = '';
-    previousModels.forEach((md) => this.removeChildren(md, this.collection));
+  resetChildren(models: Components, opts: ResetComponentsOptions = {}) {
+    const { previousModels } = opts;
+    if (!opts.skipDomReset) {
+      this.parentEl!.innerHTML = '';
+    }
+    previousModels?.forEach((md) => this.removeChildren(md, this.collection));
     models.each((model) => this.addToCollection(model));
   }