In order for a GrapesJS builder to utilize different font faces, I create a <style> element containing all of the @font-face declarations I plan on using and append it to the canvas document head. I add preload font <link> elements to the head as well.
I've noticed that when I select a new page, the <style> and <link> elements I added to the canvas document head are gone. To prevent having to reprocess all of this, I had hoped to take advantage of the Page.getMainFrame().addHeadItem and Page.getMainFrame().setHead functions, which should allow me to persist the style and links on the frame models. However, when the frames are rendered, the data in the Frame2.head array appears to be ignored, and is not rendered into the document.
Is there something I need to be doing differently for this to work? I've also considered making a copy of the document head after I've loaded it and simply attaching it to the frame after it's rendered, but I would prefer to use the framework as intended if I can.
As the framework does not seem to provide a way to keep the canvas document head content on page change, I've implemented a solution using GrapesJS's event system.
editor.on('canvas:frame:load:head', ({window}) => {
// add content to window.document.head
});
This listens for the canvas document head to be created, and can be used to then load whatever you need into it. The canvas:frame:load:head event is triggered any time the canvas document head is created, including on editor initialization and page change.