diff --git a/src/canvas/view/FrameView.ts b/src/canvas/view/FrameView.ts
index 30d7005db..9a1722d8a 100644
--- a/src/canvas/view/FrameView.ts
+++ b/src/canvas/view/FrameView.ts
@@ -3,6 +3,8 @@ import { ModuleView } from '../../abstract';
import { BoxRect, ObjectAny } from '../../common';
import CssRulesView from '../../css_composer/view/CssRulesView';
import ComponentWrapperView from '../../dom_components/view/ComponentWrapperView';
+import ComponentView from '../../dom_components/view/ComponentView';
+import { type as typeHead } from '../../dom_components/model/ComponentHead';
import Droppable from '../../utils/Droppable';
import {
append,
@@ -40,6 +42,7 @@ export default class FrameView extends ModuleView {
private jsContainer?: HTMLElement;
private tools: { [key: string]: HTMLElement } = {};
private wrapper?: ComponentWrapperView;
+ private headView?: ComponentView;
private frameWrapView?: FrameWrapView;
constructor(model: Frame, view?: FrameWrapView) {
@@ -333,6 +336,7 @@ export default class FrameView extends ModuleView {
evOpts.window = this.getWindow();
em?.trigger(`${evLoad}:before`, evOpts); // deprecated
em?.trigger(CanvasEvents.frameLoad, evOpts);
+ this.renderHead();
appendScript([...canvas.get('scripts')]);
};
}
@@ -368,6 +372,20 @@ export default class FrameView extends ModuleView {
appendVNodes(head, toAdd);
}
+ renderHead() {
+ const { model, em } = this;
+ const { root } = model;
+ const HeadView = em.Components.getType(typeHead)!.view;
+ this.headView = new HeadView({
+ el: this.getHead(),
+ model: root.head,
+ config: {
+ ...root.config,
+ frameView: this,
+ },
+ }).render();
+ }
+
renderBody() {
const { config, em, model, ppfx } = this;
const doc = this.getDoc();
diff --git a/src/dom_components/model/ComponentHead.ts b/src/dom_components/model/ComponentHead.ts
index 29e96c833..43c4efef4 100644
--- a/src/dom_components/model/ComponentHead.ts
+++ b/src/dom_components/model/ComponentHead.ts
@@ -13,6 +13,7 @@ export default class ComponentHead extends Component {
type,
tagName: type,
draggable: false,
+ highlightable: false,
droppable: (({ tagName }) => !tagName || droppable.includes(toLowerCase(tagName))) as DraggableDroppableFn,
};
}
diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts
index f211c54bc..41a950046 100644
--- a/src/dom_components/model/Components.ts
+++ b/src/dom_components/model/Components.ts
@@ -239,7 +239,9 @@ Component> {
if (asDocument) {
const root = parent as ComponentWrapper;
components = (parsed.html as any).components;
- root.head.set(parsed.head as any, opt);
+ const { components: headCmps, ...restHead } = parsed.head || {};
+ root.head.set(restHead as any, opt);
+ root.head.components(headCmps);
root.docEl.set(parsed.root as any, opt);
root.set({ doctype: parsed.doctype });
}