Load shallow editor

src/dom_components/index.js

@@ -53,10 +53,9 @@
  *
  * @module Components
  */
-import Backbone from 'backbone';
-import { isEmpty, isObject, isArray, isFunction, isString, result } from 'underscore';
+import { isEmpty, isObject, isArray, isFunction, isString, result, debounce } from 'underscore';
 import defaults from './config/config';
-import Component from './model/Component';
+import Component, { keyUpdate, keyUpdateInside } from './model/Component';
 import Components from './model/Components';
 import ComponentView from './view/ComponentView';
 import ComponentsView from './view/ComponentsView';
@@ -646,6 +645,25 @@ export default () => {
       model && isEmpty(model.get('status')) && model.set('status', state);
     },
 
+    getShallowWrapper() {
+      let { shallow, em } = this;
+
+      if (!shallow && em) {
+        const shallowEm = em.get('shallow');
+        shallow = shallowEm?.get('DomComponents').getWrapper();
+        if (shallow) {
+          const events = [keyUpdate, keyUpdateInside].join(' ');
+          shallow.on(
+            events,
+            debounce(() => shallow.components(''), 100)
+          );
+        }
+        this.shallow = shallow;
+      }
+
+      return shallow;
+    },
+
     /**
      * Check if the component can be moved inside another.
      * @param {[Component]} target The target Component is the one that is supposed to receive the source one.

src/editor/model/Editor.js

@@ -132,23 +132,20 @@ export default class EditorModel extends Model {
   }
 
   /**
-   * Should be called after all modules and plugins are loaded
+   * Should be called once all modules and plugins are loaded
    * @param {Function} clb
    * @private
    */
   loadOnStart(clb = null) {
     const sm = this.get('StorageManager');
 
-    // Generally, with `onLoad`, the module will try to load the data from
-    // its configurations
-    this.get('toLoad').forEach(module => {
-      module.onLoad();
-    });
+    // In `onLoad`, the module will try to load the data from its configurations.
+    this.get('toLoad').forEach(mdl => mdl.onLoad());
 
     // Stuff to do post load
     const postLoad = () => {
       const modules = this.get('modules');
-      modules.forEach(module => module.postLoad && module.postLoad(this));
+      modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this));
       this.set('readyLoad', 1);
       clb && clb();
     };
@@ -158,6 +155,17 @@ export default class EditorModel extends Model {
     } else {
       setTimeout(postLoad);
     }
+
+    // Create shallow editor.
+    // Here we can create components/styles without altering/triggering the main EditorModel
+    const shallow = new EditorModel({
+      noticeOnUnload: false,
+      storageManager: false,
+      undoManager: false,
+    });
+    // We only need to load a few modules
+    ['PageManager', 'Canvas'].forEach(key => shallow.get(key).onLoad());
+    this.set('shallow', shallow);
   }
 
   /**
@@ -779,6 +787,8 @@ export default class EditorModel extends Model {
     const { config, view } = this;
     const editor = this.getEditor();
     const { editors = [] } = config.grapesjs || {};
+    const shallow = this.get('shallow');
+    shallow?.destroyAll();
     this.stopListening();
     this.stopDefault();
     this.get('modules')

src/editor/view/EditorView.js

@@ -1,9 +1,10 @@
 import Backbone from 'backbone';
+import { View } from 'common';
 import { appendStyles } from 'utils/mixins';
 
 const $ = Backbone.$;
 
-export default Backbone.View.extend({
+export default class EditorView extends View {
   initialize() {
     const { model } = this;
     model.view = this;
@@ -18,7 +19,7 @@ export default Backbone.View.extend({
         model.set('changesCount', 0);
       });
     });
-  },
+  }
 
   render() {
     const { $el, conf, model } = this;
@@ -33,9 +34,15 @@ export default Backbone.View.extend({
     $el.append(this.cv.render());
     $el.append(this.pn.render());
 
+    // Load shallow editor
+    const shallow = model.get('shallow');
+    const shallowCanvasEl = shallow.get('Canvas').render();
+    shallowCanvasEl.style.display = 'none';
+    $el.append(shallowCanvasEl);
+
     $el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
     contEl.addClass(`${pfx}editor-cont`).empty().append($el);
 
     return this;
-  },
-});
+  }
+}

src/undo_manager/index.js

@@ -51,6 +51,9 @@ export default () => {
       config = { ...configDef, ...opts };
       em = config.em;
       this.em = em;
+      if (config._disable) {
+        config = { ...config, maximumStackLength: 0 };
+      }
       const fromUndo = true;
       um = new UndoManager({ track: true, register: [], ...config });
       um.changeUndoType('change', {