Update resetFromString with new options

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

@@ -1,5 +1,5 @@
 import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore';
-import Component from './Component';
+import Component, { SetAttrOptions } from './Component';
 import { AddOptions, Collection } from '../../common';
 import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
@@ -18,6 +18,21 @@ import ComponentWrapper from './ComponentWrapper';
 import { ComponentsEvents, ParseStringOptions } from '../types';
 import { isSymbolInstance, isSymbolRoot, updateSymbolComps } from './SymbolUtils';
 
+export interface ResetCommonUpdateProps {
+  component: Component;
+  item: ComponentDefinitionDefined;
+  options: SetAttrOptions;
+}
+
+export interface ResetFromStringOptions {
+  visitedCmps?: Record<string, Component[]>;
+  keepIds?: string[];
+  updateOptions?: {
+    onAttributes?: (props: ResetCommonUpdateProps & { attributes: Record<string, any> }) => void;
+    onStyle?: (props: ResetCommonUpdateProps & { style: Record<string, any> }) => void;
+  };
+}
+
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
   const cmps = (isArray(cmp) || isFunction((cmp as Components).map) ? cmp : [cmp]) as Component[];
@@ -35,6 +50,7 @@ const getComponentsFromDefs = (
 ) => {
   opts.visitedCmps = opts.visitedCmps || {};
   const { visitedCmps } = opts;
+  const updateOptions = (opts.updateOptions as ResetFromStringOptions['updateOptions']) || {};
   const itms = isArray(items) ? items : [items];
 
   return itms.map((item) => {
@@ -50,10 +66,21 @@ const getComponentsFromDefs = (
         // Update the component if exists already
         if (all[id]) {
           result = all[id] as any;
-          const cmp = result as unknown as Component;
-          tagName && cmp.set({ tagName }, { ...opts, silent: true });
-          keys(restAttr).length && cmp.addAttributes(restAttr, { ...opts });
-          keys(style).length && cmp.addStyle(style, opts);
+          const { onAttributes, onStyle } = updateOptions;
+          const component = result as unknown as Component;
+          tagName && component.set({ tagName }, { ...opts, silent: true });
+
+          if (onAttributes) {
+            onAttributes({ item, component, attributes: restAttr, options: opts });
+          } else if (keys(restAttr).length) {
+            component.addAttributes(restAttr, { ...opts });
+          }
+
+          if (onStyle) {
+            onStyle({ item, component, style, options: opts });
+          } else if (keys(style).length) {
+            component.addStyle(style, opts);
+          }
         }
       } else {
         // Found another component with the same ID, treat it as a new component
@@ -131,7 +158,7 @@ Component> {
     models.each((model) => this.onAdd(model));
   }
 
-  resetFromString(input = '', opts: { visitedCmps?: Record<string, Component[]>; keepIds?: string[] } = {}) {
+  resetFromString(input = '', opts: ResetFromStringOptions = {}) {
     opts.keepIds = getComponentIds(this);
     const { domc, em, parent } = this;
     const cssc = em?.Css;

packages/core/src/selector_manager/index.ts

@@ -292,7 +292,7 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     const added: Selector[] = [];
 
     if (isString(classes)) {
-      classes = classes.trim().split(' ');
+      classes = classes.trim().split(' ').filter(Boolean);
     }
 
     classes.forEach((name) => added.push(this.addSelector(name) as Selector));