Documentation is being shown but its ugly

assets/diagram-js-code-editor.css

@@ -2,7 +2,6 @@
    position: absolute;
    top: 90px;
    right: 20px;
-   overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9);
    color: rgb(0, 0, 0);
    border: solid 1px #CCC;
@@ -42,7 +41,6 @@
   float: left;
   margin: 0;
   padding: 0;
-  list-style: none;
   background-color: #f2f2f2;
   border-bottom: 1px solid #ccc;
   border-top: 1px solid #ccc;
@@ -50,8 +48,8 @@
 .toolbar > div {
   float: left;
   display: block;
-  padding: 0px 15px;
   border-right: 1px solid #ccc;
+  padding: 0px 15px;
 }
 
 .toolbar div {
@@ -59,6 +57,7 @@
   font-weight: bold;
   color: #069;
 }
+
 .toolbar div:hover {
   color: #c00;
   background-color: #fff;
@@ -68,31 +67,48 @@
   background-color: rgb(201, 205, 248);
 }
 
-.trigger {
+.dropdown .trigger {
   border: none;
+  padding: 0px;
 }
 
 .dropdown {
-  /* display: inline-block; */
   position: relative;
 }
 
 .dropdown .dropdown-content {
   display: none;
   position: absolute;
-  background-color: #f2f2f2;
-  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
+  background-color: #f2f2f2 !important;
   z-index: 1;
 }
 
-.dropdown-content a {
-  text-decoration: none;
+.dropdown:hover .dropdown-content {
   display: block;
 }
 
-.dropdown-content a:hover {background-color: #f1f1f1}
+.dropdown-content .sub-trigger {
+  text-decoration: none;
+  padding: 0 0 0 15px;
+  border-bottom: 1px solid #ccc;
+  display: block;
+}
 
-.dropdown:hover .dropdown-content {
+.description {
+  display: none;
+  color: #000 !important;
+  min-width: 300px;
+  background-color: #f2f2f2;
+}
+
+.dropdown-content .sub-trigger{
+position: relative;
+}
+.dropdown-content .sub-trigger:hover .description {
+  top: 0;
+  left: 100%;
+
+  position: absolute;
   display: block;
 }
 
@@ -145,7 +161,4 @@
    padding: 6px;
    z-index: 1;
  }
-
-
- /*  */
  

lib/Editor.js

@@ -86,8 +86,7 @@ export default function Editor(
     } else {
       self.scripts = response.scripts;
     }
-    console.log(23);
-        self._eventBus.fire("editor.toolbar.update");
+    self._eventBus.fire("editor.toolbar.update");
   });
 
   eventBus.on('editor.objects.response', function (response) {
@@ -100,13 +99,14 @@ export default function Editor(
   });
 
   eventBus.on('editor.toolbar.update', function () {
-    self.scripts_menu.innerHTML = "";
+    self._scripts_menu.innerHTML = "";
     self.scripts.forEach(element =>
-      self.scripts_menu.innerHTML += `<a>${element.name}</a>`);
+      self._scripts_menu.innerHTML += `<div class="sub-trigger">${element.name}<div class="description">${element.description}</div></div>`);
+
+    self._objects_menu.innerHTML = "";
+    self.objects.forEach(element =>
+      self._objects_menu.innerHTML += `<div class="sub-trigger">${element.name}</div>`);
   });
-  
-  eventBus.fire('editor.objects.request');
-  eventBus.fire('editor.scripts.request');
 }
 
 Editor.$inject = [
@@ -140,7 +140,6 @@ Editor.prototype._init = function () {
 
   parent.appendChild(toggle);
 
-  // ? I'm pretty sure I can just create a template string that will hold all these definitions but I'll have to get into that
 
   var toolbar = this._toolbar = document.createElement('div');
   domClasses(toolbar).add('toolbar');
@@ -148,7 +147,8 @@ Editor.prototype._init = function () {
   var run_btn = this._run_btn = document.createElement('div');
   run_btn.setAttribute("id", "run_btn");
 
-
+  // ? I'm pretty sure I can just create a template string that will hold all these definitions but I'll have to get into that
+  
   var scripts_menu_container = document.createElement('div');
   domClasses(scripts_menu_container).add('dropdown');
 
@@ -160,13 +160,10 @@ Editor.prototype._init = function () {
   
   var scripts_menu = this._scripts_menu = document.createElement('div');
   domClasses(scripts_menu).add('dropdown-content');
-  scripts_menu.innerHTML = `
-  <a href="#">Link 1</a>
-  <a href="#">Link 2</a>
-  <a href="#">Link 3</a>`;
+  self._scripts = [];
 
   scripts_menu_container.appendChild(scripts_menu);
-
+  //--------------------------------------------------------//
   var objects_menu_container = document.createElement('div');
   domClasses(objects_menu_container).add('dropdown');
 
@@ -178,22 +175,19 @@ Editor.prototype._init = function () {
   
   var objects_menu = this._objects_menu = document.createElement('div');
   domClasses(objects_menu).add('dropdown-content');
-  objects_menu.innerHTML = `
-  <a href="#">Link 1</a>
-  <a href="#">Link 2</a>
-  <a href="#">Link 3</a>`;
+  self._objects = [];
 
   objects_menu_container.appendChild(objects_menu);
 
+  toolbar.appendChild(run_btn);
+  toolbar.appendChild(objects_menu_container);
+  toolbar.appendChild(scripts_menu_container);
+
   // create ide textarea
   var ide_window = document.createElement('div');
   ide_window.setAttribute("id", "editor");
   domClasses(ide_window).add('ide');
 
-  toolbar.appendChild(run_btn);
-  toolbar.appendChild(objects_menu_container);
-  toolbar.appendChild(scripts_menu_container);
-
   parent.appendChild(toolbar);
   parent.appendChild(ide_window);
 
@@ -237,7 +231,11 @@ Editor.prototype.open = function () {
     codestore.value = this._ide.getValue();
     triggerEvent(codestore, "change");
   });
+
   this._eventBus.fire('editor.toggle', { open: true });
+
+  this._eventBus.fire('editor.objects.request');
+  this._eventBus.fire('editor.scripts.request');
 };
 
 Editor.prototype.close = function () {