From 0ebc1631fd6657182cbc1d3d9ec1244c7b06b018 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 4 Oct 2021 16:47:17 +0200
Subject: [PATCH] Fix default rendering of StyleManager. Closes #3835

---
 src/commands/view/OpenStyleManager.js | 68 ++++++++++++++-------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js
index d79327860..21a9eb588 100644
--- a/src/commands/view/OpenStyleManager.js
+++ b/src/commands/view/OpenStyleManager.js
@@ -4,47 +4,54 @@ const $ = Backbone.$;
 export default {
   run(em, sender) {
     this.sender = sender;
+
     if (!this.$cn) {
-      var config = em.getConfig(),
-        panels = em.Panels;
-      // Main container
+      const config = em.getConfig();
+      const panels = em.Panels;
+      const trgEvCnt = 'change:appendContent';
       this.$cn = $('<div></div>');
-      // Secondary container
       this.$cn2 = $('<div></div>');
       this.$cn.append(this.$cn2);
 
       // Device Manager
-      var dvm = em.DeviceManager;
+      const dvm = em.DeviceManager;
       if (dvm && config.showDevices) {
-        var devicePanel = panels.addPanel({ id: 'devices-c' });
-        devicePanel
-          .set('appendContent', dvm.render())
-          .trigger('change:appendContent');
+        const devicePanel = panels.addPanel({ id: 'devices-c' });
+        const dvEl = dvm.render();
+        devicePanel.set('appendContent', dvEl).trigger(trgEvCnt);
       }
 
       // Class Manager container
-      var clm = em.SelectorManager;
-      if (clm) this.$cn2.append(clm.render([]));
-      this.$cn2.append(em.StyleManager.render());
-      var smConfig = em.StyleManager.getConfig();
-      const pfx = smConfig.stylePrefix;
-      // Create header
-      this.$header = $(
-        `<div class="${pfx}header">${em.t('styleManager.empty')}</div>`
-      );
-      this.$cn.append(this.$header);
+      const slm = em.SelectorManager;
+      const slmConfig = slm.getConfig();
+      if (!slmConfig.appendTo) {
+        this.$cn2.append(slm.render([]));
+      }
+
+      // Style Manager
+      const sm = em.StyleManager;
+      const smConfig = sm.getConfig();
+      if (!smConfig.appendTo) {
+        this.$cn2.append(sm.render());
+        const pfx = smConfig.stylePrefix;
+        this.$header = $(
+          `<div class="${pfx}header">${em.t('styleManager.empty')}</div>`
+        );
+        this.$cn.append(this.$header);
+      }
 
       // Create panel if not exists
-      if (!panels.getPanel('views-container'))
-        this.panel = panels.addPanel({ id: 'views-container' });
-      else this.panel = panels.getPanel('views-container');
+      const pnCnt = 'views-container';
+      this.panel = panels.getPanel(pnCnt);
+      if (!this.panel) this.panel = panels.addPanel({ id: pnCnt });
 
       // Add all containers to the panel
-      this.panel.set('appendContent', this.$cn).trigger('change:appendContent');
+      this.panel.set('appendContent', this.$cn).trigger(trgEvCnt);
 
       this.target = em.editor;
       this.listenTo(this.target, 'component:toggled', this.toggleSm);
     }
+
     this.toggleSm();
   },
 
@@ -59,19 +66,16 @@ export default {
     const selectedAll = target.getSelectedAll().length;
 
     if (selectedAll === 1 || (selectedAll > 1 && componentFirst)) {
-      this.$cn2.show();
-      this.$header.hide();
+      this.$cn2 && this.$cn2.show();
+      this.$header && this.$header.hide();
     } else {
-      this.$cn2.hide();
-      this.$header.show();
+      this.$cn2 && this.$cn2.hide();
+      this.$header && this.$header.show();
     }
   },
 
   stop() {
-    // Hide secondary container if exists
-    if (this.$cn2) this.$cn2.hide();
-
-    // Hide header container if exists
-    if (this.$header) this.$header.hide();
+    this.$cn2 && this.$cn2.hide();
+    this.$header && this.$header.hide();
   }
 };