asDocument not working as expected. Fixes #6116 (#6121)

packages/core/src/dom_components/index.ts

@@ -80,7 +80,13 @@ import ComponentTextNode from './model/ComponentTextNode';
 import ComponentVideo from './model/ComponentVideo';
 import ComponentWrapper from './model/ComponentWrapper';
 import Components from './model/Components';
-import { ComponentAdd, ComponentDefinition, ComponentDefinitionDefined, ComponentStackItem } from './model/types';
+import {
+  AddComponentsOption,
+  ComponentAdd,
+  ComponentDefinition,
+  ComponentDefinitionDefined,
+  ComponentStackItem,
+} from './model/types';
 import ComponentCommentView from './view/ComponentCommentView';
 import ComponentFrameView from './view/ComponentFrameView';
 import ComponentImageView from './view/ComponentImageView';
@@ -480,7 +486,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
    *   attributes: { title: 'here' }
    * });
    */
-  addComponent(component: ComponentAdd, opt: AddOptions = {}): Component | Component[] {
+  addComponent(component: ComponentAdd, opt: AddComponentsOption = {}): Component | Component[] {
     return this.getComponents().add(component, opt);
   }
 
@@ -514,7 +520,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
    * @return {this}
    * @private
    */
-  setComponents(components: ComponentAdd, opt: AddOptions = {}) {
+  setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) {
     this.clear(opt).addComponent(components, opt);
   }
 

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

@@ -32,15 +32,17 @@ export default class ComponentWrapper extends Component {
 
   constructor(...args: ConstructorParameters<typeof Component>) {
     super(...args);
+    const props = args[0] || {};
     const opts = args[1];
+
     const cmp = opts?.em?.Components;
     const CmpHead = cmp?.getType(typeHead)?.model;
     const CmpDef = cmp?.getType('default').model;
     if (CmpHead) {
       this.set(
         {
-          head: new CmpHead({}, opts),
+          head: new CmpHead({ ...props.head }, opts),
-          docEl: new CmpDef({ tagName: 'html' }, opts),
+          docEl: new CmpDef({ tagName: 'html', ...props.docEl }, opts),
         },
         { silent: true },
       );

packages/core/src/editor/index.ts

@@ -71,7 +71,7 @@ import ComponentManager, { ComponentEvent } from '../dom_components';
 import Component from '../dom_components/model/Component';
 import Components from '../dom_components/model/Components';
 import ComponentWrapper from '../dom_components/model/ComponentWrapper';
-import { ComponentAdd, DragMode } from '../dom_components/model/types';
+import { AddComponentsOption, ComponentAdd, DragMode } from '../dom_components/model/types';
 import I18nModule from '../i18n';
 import KeymapsModule, { KeymapEvent } from '../keymaps';
 import ModalModule, { ModalEvent } from '../modal_dialog';
@@ -326,7 +326,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    *   content: 'New component'
    * });
    */
-  setComponents(components: ComponentAdd, opt: AddOptions = {}) {
+  setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) {
     this.em.setComponents(components, opt);
     return this;
   }

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

@@ -39,7 +39,7 @@ import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator'
 import ComponentView from '../../dom_components/view/ComponentView';
 import { ProjectData, StorageOptions } from '../../storage_manager/model/IStorage';
 import CssRules from '../../css_composer/model/CssRules';
-import { ComponentAdd, DragMode } from '../../dom_components/model/types';
+import { AddComponentsOption, ComponentAdd, DragMode } from '../../dom_components/model/types';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 import DataSourceManager from '../../data_sources';
@@ -699,7 +699,7 @@ export default class EditorModel extends Model {
    * @return {this}
    * @public
    */
-  setComponents(components: ComponentAdd, opt: AddOptions = {}) {
+  setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) {
     return this.Components.setComponents(components, opt);
   }
 

packages/core/test/common.ts

@@ -24,3 +24,7 @@ export function setupTestEditor() {
   fixtures.appendChild(wrapperEl.el);
   return { editor, em, dsm, cmpRoot, fixtures: fixtures as HTMLElement };
 }
+
+export function flattenHTML(html: string) {
+  return html.replace(/>\s+|\s+</g, (m) => m.trim());
+}

packages/core/test/specs/dom_components/index.ts

@@ -4,6 +4,8 @@ import Editor from '../../../src/editor';
 import utils from '../../test_utils.js';
 import { Component } from '../../../src';
 import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
+import { flattenHTML, setupTestEditor } from '../../common';
+import { ProjectData } from '../../../src/storage_manager';
 
 describe('DOM Components', () => {
   describe('Main', () => {
@@ -320,21 +322,12 @@ describe('DOM Components', () => {
     let fxt: HTMLElement;
     let root: ComponentWrapper;
 
-    beforeEach((done) => {
+    beforeEach(() => {
-      fxt = document.createElement('div');
+      const testEditor = setupTestEditor();
-      document.body.appendChild(fxt);
+      editor = testEditor.editor;
-      editor = new Editor({
+      em = testEditor.em;
-        el: fxt,
+      fxt = testEditor.fixtures;
-        avoidInlineStyle: true,
+      root = testEditor.cmpRoot;
-        storageManager: false,
-      });
-      em = editor.getModel();
-      fxt.appendChild(em.Canvas.render());
-      em.loadOnStart();
-      editor.on('change:ready', () => {
-        root = editor.Components.getWrapper()!;
-        done();
-      });
     });
 
     afterEach(() => {
@@ -376,8 +369,8 @@ describe('DOM Components', () => {
         expect(docEl.get('htmlp')).toBe(true);
         expect(root.get('bodyp')).toBe(true);
         expect(root.doctype).toBe('<!DOCTYPE html>');
-
+        expect(root.toHTML()).toBe(
-        const outputHtml = `
+          flattenHTML(`
           <!DOCTYPE html>
           <html lang="en" class="cls-html">
             <head class="cls-head">
@@ -390,8 +383,41 @@ describe('DOM Components', () => {
               <h1>H1</h1>
             </body>
           </html>
-          `.replace(/>\s+|\s+</g, (m) => m.trim());
+        `),
-        expect(root.toHTML()).toBe(outputHtml);
+        );
+      });
+    });
+
+    describe('load with document components', () => {
+      let projectData: ProjectData;
+      const docHtml = `
+        <!DOCTYPE html>
+        <html lang="en">
+          <head class="cls-head">
+            <title>ABC</title>
+          </head>
+          <body>
+            <span>Test</span>
+          </body>
+        </html>
+        `;
+
+      test('imports properly HTML with document data', () => {
+        editor.setComponents(docHtml, { asDocument: true });
+        projectData = editor.getProjectData();
+        expect(root.toHTML()).toBe(flattenHTML(docHtml));
+      });
+
+      // https://github.com/GrapesJS/grapesjs/issues/6116
+      test('editor loads properly document data from projectData', () => {
+        editor.loadProjectData(projectData);
+        const newRoot = editor.getWrapper()!;
+
+        const { head, doctype } = newRoot;
+        expect(head.components().length).toBe(1);
+        expect(doctype).toBe('<!DOCTYPE html>');
+
+        expect(newRoot.toHTML()).toBe(flattenHTML(docHtml));
       });
     });
   });