[Question] Exclude html elements from model
Question
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 (https://github.com/artf/grapesjs/issues/1798#issuecomment-559498604) 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.
Answers (2)
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.
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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1905
[QUESTION] Not editable block after import template
Have the same issue like in 1408. You said that JSON should be imported instead of the HTML. Can you tell me please how to import JSON temp...
Issue #1341
[Question] How to work with Custom Components
Hello, I have some questions and issues about and with the grapes editorProblem 1 In a component, which class is there extended? Is it real...
Issue #980
[BUG] Related with task https://github.com/artf/grapesjs/issues/873
Hello, After restoring editor from db still have some part of bug present. It seems inside of script: function () traits will have old valu...
Issue #3596
BUG: Values are not escaped
GrapesJS code is open to XSS issues because values are inserted into DOM without escaping, e.g. https://github.com/artf/grapesjs/blob/dev/s...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.