Improve resetFromString by adding option to skip view updates (#6617)

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

@@ -164,7 +164,7 @@ Component> {
     const cssc = em?.Css;
     const allByID = domc?.allById() || {};
     const parsed = this.parseString(input, opts);
-    const newCmps = getComponentsFromDefs(parsed, allByID, opts);
+    const newCmps = getComponentsFromDefs(parsed, allByID, { skipViewUpdate: true, ...opts });
     const { visitedCmps = {} } = opts;
 
     // Clone styles for duplicated components

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

@@ -19,7 +19,11 @@ export type DraggableDroppableFn = (source: Component, target: Component, index?
 
 export interface AddComponentsOption extends AddOptions, OptionAsDocument {}
 
-export interface ResetComponentsOptions extends AddComponentsOption {
+export interface UpdateComponentsOptions extends AddComponentsOption {
+  skipViewUpdate?: boolean;
+}
+
+export interface ResetComponentsOptions extends UpdateComponentsOptions {
   previousModels?: Component[];
   keepIds?: string[];
   skipDomReset?: boolean;

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

@@ -11,7 +11,7 @@ import { setViewEl } from '../../utils/mixins';
 import { DomComponentsConfig } from '../config/config';
 import Component, { avoidInline } from '../model/Component';
 import Components from '../model/Components';
-import { ComponentOptions } from '../model/types';
+import { ComponentOptions, UpdateComponentsOptions } from '../model/types';
 import ComponentsView from './ComponentsView';
 import { ComponentsEvents } from '../types';
 
@@ -570,7 +570,8 @@ TComp> {
     }
   }
 
-  renderAttributes() {
+  renderAttributes(m?: any, v?: any, opts: UpdateComponentsOptions = {}) {
+    if (opts.skipViewUpdate) return;
     this.updateAttributes();
     this.updateClasses();
   }

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

@@ -1,14 +1,14 @@
 import { isUndefined } from 'underscore';
-import { removeEl } from '../../utils/dom';
+import FrameView from '../../canvas/view/FrameView';
 import { View } from '../../common';
-import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
+import { removeEl } from '../../utils/dom';
+import { DomComponentsConfig } from '../config/config';
 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';
 import { ComponentsEvents } from '../types';
+import ComponentView from './ComponentView';
 
 export default class ComponentsView extends View {
   opts!: any;
@@ -127,6 +127,8 @@ export default class ComponentsView extends View {
   }
 
   resetChildren(models: Components, opts: ResetComponentsOptions = {}) {
+    if (opts.skipViewUpdate) return;
+
     const { previousModels } = opts;
     if (!opts.skipDomReset) {
       this.parentEl!.innerHTML = '';