Fix component content reset with duplicated ids (#6638)

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

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

packages/core/src/editor/model/Editor.ts

@@ -847,7 +847,7 @@ export default class EditorModel extends Model {
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles;
     const cssc = this.Css;
     const wrp = opts.component || this.Components.getComponent();
-    const protCss = !avoidProt ? config.protectedCss! : '';
+    const protCss = !avoidProt ? config.protectedCss || '' : '';
     const css =
       wrp &&
       this.CodeManager.getCode(wrp, 'css', {

packages/core/test/specs/dom_components/model/Component.ts

@@ -436,6 +436,30 @@ describe('Component', () => {
     expect(comp1.getId()).toEqual(comp1Id);
   });
 
+  test('Ensure duplicated component clones also the rules', () => {
+    const idName = 'test';
+    const cmp = dcomp.addComponent(`
+      <div>
+        <div id="${idName}">Comp 1</div>
+      </div>
+      <style>
+        #test { color: red; }
+        @media (max-width: 992px) {
+          #test { color: blue; }
+        }
+      </style>
+    `) as Component;
+    expect(em.getCss()).toBe('#test{color:red;}@media (max-width: 992px){#test{color:blue;}}');
+    cmp.components().resetFromString(`
+      <div id="${idName}">Comp 1</div>
+      <div id="${idName}">Comp 2</div>
+    `);
+    const newId = cmp.components().at(1).getId();
+    expect(em.getCss()).toBe(
+      `#test{color:red;}#${newId}{color:red;}@media (max-width: 992px){#test{color:blue;}#${newId}{color:blue;}}`,
+    );
+  });
+
   test('Ability to stop/change propagation chain', () => {
     obj.append({
       removable: false,