Add the possibility to init the LayerManager with a different root

src/editor/model/Editor.js

@@ -566,6 +566,14 @@ module.exports = Backbone.Model.extend({
     return device && width && !preview ? `(${condition}: ${width})` : '';
   },
 
+  /**
+   * Return the component wrapper
+   * @return {Component}
+   */
+  getWrapper() {
+    return this.get('DomComponents').getWrapper();
+  },
+
   /**
    * Return the count of changes made to the content and not yet stored.
    * This count resets at any `store()`

src/navigator/config/config.js

@@ -14,6 +14,10 @@ module.exports = {
   // Hide textnodes
   hideTextnode: 1,
 
+  // Indicate a query string of the element to be selected as the root of layers.
+  // By default the root is the wrapper
+  root: '',
+
   // Indicates if the wrapper is visible in layers
   showWrapper: 1,
 

src/navigator/index.js

@@ -35,9 +35,8 @@ module.exports = () => {
 
     postRender() {
       const elTo = config.appendTo;
-
+      const root = config.root;
-      if (config.root) {
+      root && this.setRoot(root);
-      }
 
       if (elTo) {
         const el = isElement(elTo) ? elTo : document.querySelector(elTo);
@@ -56,7 +55,7 @@ module.exports = () => {
     },
 
     /**
-     * Get root of layers
+     * Get the root of layers
      * @return {Component}
      */
     getRoot() {

src/navigator/view/ItemView.js

@@ -1,9 +1,12 @@
-import { isUndefined } from 'underscore';
+import { isUndefined, isString } from 'underscore';
+import { getModel } from 'utils/mixins';
+import Backbone from 'backbone';
 const ComponentView = require('dom_components/view/ComponentView');
 const inputProp = 'contentEditable';
+const $ = Backbone.$;
 let ItemsView;
 
-module.exports = require('backbone').View.extend({
+module.exports = Backbone.View.extend({
   events: {
     'mousedown [data-toggle-move]': 'startSort',
     'click [data-toggle-visible]': 'toggleVisibility',
@@ -323,7 +326,10 @@ module.exports = require('backbone').View.extend({
     return this.caret;
   },
 
-  setRoot(model) {
+  setRoot(el) {
+    el = isString(el) ? this.em.getWrapper().find(el)[0] : el;
+    const model = getModel(el, $);
+    if (!model) return;
     this.stopListening();
     this.model = model;
     this.initialize(this.opt);