From 3d01b27896b2f6190275266b3aee9e545abb1f90 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 9 Jun 2018 14:44:42 +0200
Subject: [PATCH] Add the possibility to init the LayerManager with a different
 root

---
 src/editor/model/Editor.js     |  8 ++++++++
 src/navigator/config/config.js |  4 ++++
 src/navigator/index.js         |  7 +++----
 src/navigator/view/ItemView.js | 12 +++++++++---
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index f2f35b31b..933639d3a 100644
--- a/src/editor/model/Editor.js
+++ b/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()`
diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js
index 74a46e95c..ec5629e96 100644
--- a/src/navigator/config/config.js
+++ b/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,
 
diff --git a/src/navigator/index.js b/src/navigator/index.js
index f7aafd447..992ccb3a6 100644
--- a/src/navigator/index.js
+++ b/src/navigator/index.js
@@ -35,9 +35,8 @@ module.exports = () => {
 
     postRender() {
       const elTo = config.appendTo;
-
-      if (config.root) {
-      }
+      const root = 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() {
diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js
index d0300507c..bac7d04c0 100644
--- a/src/navigator/view/ItemView.js
+++ b/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);