From 9a6fa0c2661471bd234e5752642f2ed693c4ca2a Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 4 Sep 2024 15:39:54 +0400 Subject: [PATCH] asDocument not working as expected. Fixes #6116 (#6121) --- packages/core/src/dom_components/index.ts | 12 +++- .../dom_components/model/ComponentWrapper.ts | 6 +- packages/core/src/editor/index.ts | 4 +- packages/core/src/editor/model/Editor.ts | 4 +- packages/core/test/common.ts | 4 ++ .../core/test/specs/dom_components/index.ts | 64 +++++++++++++------ 6 files changed, 66 insertions(+), 28 deletions(-) diff --git a/packages/core/src/dom_components/index.ts b/packages/core/src/dom_components/index.ts index 930166876..8284f7696 100644 --- a/packages/core/src/dom_components/index.ts +++ b/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) { 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), - docEl: new CmpDef({ tagName: 'html' }, opts), + head: new CmpHead({ ...props.head }, opts), + docEl: new CmpDef({ tagName: 'html', ...props.docEl }, opts), }, { silent: true }, ); diff --git a/packages/core/src/editor/index.ts b/packages/core/src/editor/index.ts index 0afa32535..9d9bdc8e5 100644 --- a/packages/core/src/editor/index.ts +++ b/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 { * content: 'New component' * }); */ - setComponents(components: ComponentAdd, opt: AddOptions = {}) { + setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) { this.em.setComponents(components, opt); return this; } diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index aec546bbf..9627b5873 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/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); } diff --git a/packages/core/test/common.ts b/packages/core/test/common.ts index 538bce3b7..89f54e68b 100644 --- a/packages/core/test/common.ts +++ b/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+ m.trim()); +} diff --git a/packages/core/test/specs/dom_components/index.ts b/packages/core/test/specs/dom_components/index.ts index 8685ab966..6946e5f3b 100644 --- a/packages/core/test/specs/dom_components/index.ts +++ b/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) => { - fxt = document.createElement('div'); - document.body.appendChild(fxt); - editor = new Editor({ - el: fxt, - avoidInlineStyle: true, - storageManager: false, - }); - em = editor.getModel(); - fxt.appendChild(em.Canvas.render()); - em.loadOnStart(); - editor.on('change:ready', () => { - root = editor.Components.getWrapper()!; - done(); - }); + beforeEach(() => { + const testEditor = setupTestEditor(); + editor = testEditor.editor; + em = testEditor.em; + fxt = testEditor.fixtures; + root = testEditor.cmpRoot; }); afterEach(() => { @@ -376,8 +369,8 @@ describe('DOM Components', () => { expect(docEl.get('htmlp')).toBe(true); expect(root.get('bodyp')).toBe(true); expect(root.doctype).toBe(''); - - const outputHtml = ` + expect(root.toHTML()).toBe( + flattenHTML(` @@ -390,8 +383,41 @@ describe('DOM Components', () => {

H1

- `.replace(/>\s+|\s+ m.trim()); - expect(root.toHTML()).toBe(outputHtml); + `), + ); + }); + }); + + describe('load with document components', () => { + let projectData: ProjectData; + const docHtml = ` + + + + ABC + + + Test + + + `; + + 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(''); + + expect(newRoot.toHTML()).toBe(flattenHTML(docHtml)); }); }); });