[Question] Exclude html elements from model

[pvbergen]

This is a broad question, so I will provide the use case and some ideas instead of actual code.

Basic description

We are using grapesjs as part of a Drupal module (#1798 (comment)) and we are facing an issue with having too many html elements within the grapes container. This impacts the performance for users.

The idea we follow with the module is to show the whole page within the grapes iframe. This enables the user to see the page as whole and allows us to utilize the tablet and mobile view modes. Due to the thousands of elements in header or footer registered as uneditable default components the model of grapesjs is getting slow (js lag of several seconds), as the collections grow beyond the intended/usual number of elements.

Setup

An example of our setup as html:

<div id="grapes-container">
   <header data-gjs-type="default">
      <!-- HTML elements, not editable, registered as default components -->
      <nav data-gjs-type="default">
        <ul data-gjs-type="default">
           <li data-gjs-type="default">
           </li>
        </ul>
      </nav>
   </header>
   <section id="editable-container">
      <!-- HTML elements, editable,  registered as custom components --> 
      <div data-gjs-type="component1"> <!-- custom component -->
          <div data-gjs-type="default">Some text</div> <!-- trait -->
      </div>
   </section>
   <footer>
      <!-- HTML elements, not editable, registered as default components -->
   </footer>
</div>

We set the editable flag on default component(s) to false and use our custom components to implement the editing using traits.

A visual example of our setup:

Question

Is it possible to include HTML in the grapes container but exclude it from the model?
E.g. having the HTML in the header not register with grapes, as it is inert in the context of editing a page.

Possible approaches

We tried different approaches, but were not able to make it work:

• Set an inexisting component to the uneditable elements
• Delete the default component type before initialization
• Alter the model after initialization

I'm happy to provide more details. Currently, I'm not sure, though, what kind of information would be useful.

[artf]

Do you mean something like this?

const header = '<div style="padding: 100px">My header</div>';
editor.getWrapper().getEl().insertAdjacentHTML('beforeBegin', header);

This will add an HTML without being actually related to GrapesJS Components

[pvbergen]

Huh, that would be surprisingly simple. Thanks!
I'll test it out in the next few days and see how we can integrate it with our workflow.