Placing non-editable HTML around wrapper

I've fiddled with the code and made a small patch that fits my needs. A config option surround lets you specify an ID, which represents an element in the container. This DOM subtree is plucked out during the main initialization, stored in the Editor config, and picked up by the Canvas. The Canvas then handles rendering of the surround around the wrapper. I am interested to know if anyone else has needs like this and if this seems like a good solution.

Again, if the use case isn't clear: suppose I am using Bootstrap, and I have a Theme with a container, navbar, footer, etc. I then have a page Template which I am editing with Grapes. I want to see the Template inside its Theme's HTML, but I should be able to edit only the Template, and similarly Editor.getHtml() should return only the Template HTML.

Greate @z1lk I think even something like this will work

const canvas = editor.Canvas;
const surround = document.createElement('div');
surround.innerHTML = '<div>Some text</div>';
canvas.getBody().appendChild(surround);
surround.appendChild(canvas.getWrapperEl());

I close this as you've solved your case

I used a solution similar to yours so I don't have to maintain changes to the Grapes source. Sometimes the position of the component "tools" are out of place, as if their vertical offset is computed relative to the body and not the wrapper. I can't reliably reproduce it though. Thanks for your help @artf

edit: I think the tools misplacement was due to the "surround" moving from outside the canvas to inside. I no longer have the problem, but I can produce a similar issue by selecting a component to bring up the tools and then opening up my browser's inspector (Firefox). Similar to #495