Fix cloning pages issue

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

@@ -1,6 +1,6 @@
 import Component from './Component';
 import { toLowerCase } from '../../utils/mixins';
-import { DraggableDroppableFn } from './types';
+import { ComponentDefinition, DraggableDroppableFn } from './types';
 
 export const type = 'head';
 const droppable = ['title', 'style', 'base', 'link', 'meta', 'script', 'noscript'];
@@ -21,4 +21,11 @@ export default class ComponentHead extends Component {
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === type;
   }
+
+  toJSON(): ComponentDefinition {
+    return {
+      ...super.toJSON(),
+      droppable: (({ tagName }) => !tagName || droppable.includes(toLowerCase(tagName))) as DraggableDroppableFn,
+    };
+  }
 }

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

@@ -36,10 +36,11 @@ export default class ComponentWrapper extends Component {
     const CmpHead = cmp?.getType(typeHead)?.model;
     const CmpDef = cmp?.getType('default').model;
     if (CmpHead) {
+      const { head, docEl } = props;
       this.set(
         {
-          head: new CmpHead({ ...props.head }, opt),
-          docEl: new CmpDef({ tagName: 'html', ...props.docEl }, opt),
+          head: head && head instanceof Component ? head : new CmpHead({ ...head }, opt),
+          docEl: docEl && docEl instanceof Component ? docEl : new CmpDef({ tagName: 'html', ...docEl }, opt),
         },
         { silent: true },
       );
@@ -58,6 +59,14 @@ export default class ComponentWrapper extends Component {
     return this.attributes.doctype || '';
   }
 
+  clone(opt?: { symbol?: boolean | undefined; symbolInv?: boolean | undefined }): this {
+    const result = super.clone(opt);
+    result.set('head', this.get('head').clone(opt));
+    result.set('docEl', this.get('docEl').clone(opt));
+
+    return result;
+  }
+
   toHTML(opts: ToHTMLOptions = {}) {
     const { doctype } = this;
     const asDoc = !isUndefined(opts.asDocument) ? opts.asDocument : !!doctype;

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

@@ -0,0 +1,36 @@
+import Component from '../../../../src/dom_components/model/Component';
+import ComponentHead from '../../../../src/dom_components/model/ComponentHead';
+import Editor from '../../../../src/editor';
+
+describe('ComponentWrapper', () => {
+  let em: Editor;
+
+  beforeEach(() => {
+    em = new Editor({ avoidDefaults: true });
+    em.Pages.onLoad();
+  });
+
+  describe('.clone', () => {
+    test('clones the component and returns a new instance for head and document element', () => {
+      const originalComponent = em.Pages.getSelected()?.getMainComponent();
+      const clonedComponent = originalComponent?.clone();
+      em.Pages.add(
+        {
+          id: 'PAGE_ID',
+          clonedComponent,
+        },
+        {
+          select: true,
+        },
+      );
+      const newPageComponent = em.Pages.get('PAGE_ID')?.getMainComponent();
+
+      expect(clonedComponent?.head).toBeInstanceOf(ComponentHead);
+      expect(clonedComponent?.head.cid).not.toEqual(originalComponent?.head.cid);
+
+      expect(clonedComponent?.docEl).toBeInstanceOf(Component);
+      expect(clonedComponent?.docEl.cid).not.toEqual(originalComponent?.docEl.cid);
+      expect(newPageComponent?.head.cid).not.toEqual(originalComponent?.head.cid);
+    });
+  });
+});