Refine popup positioning and update it's styles

online-editor.js

@@ -211,15 +211,6 @@ function besAddMistake(range, match) {
     highlight.style.width = `${rect.width}px`
     highlight.style.height = `${rect.height}px`
     correctionPanel.appendChild(highlight)
-
-    // TODO: Find a solution to handle click events on the highlights
-    // const editor = document.querySelector('.bes-online-editor')
-    // highlight.addEventListener("click", function(e) {
-    // console.log(e);
-    // editor.focus();
-    // besHandleClick(e);
-    // return true;
-    // });
   }
   return clientRects
 }
@@ -250,44 +241,28 @@ function besGetBlockParent(el, edit) {
 }
 
 function besHandleClick(e, editor) {
-  console.log(e)
   const targetEl = e.target
   if (targetEl.tagName === 'DIV') {
-    // Find div inside besEditors[editor.id].children
-    console.log(besEditors[editor.id])
     const editorData = besEditors[editor.id]
     const divIndex = editorData.children.findIndex(
       child => child.elements === targetEl
     )
-    const matches = editorData.children[divIndex].matches
+    const matches = editorData.children[divIndex]?.matches
-
+    if (!matches) return
     for (let m of matches) {
-      console.log(m)
       if (m.rects) {
         for (let r of m.rects) {
-          console.log(r)
+          const clientX = e.clientX
-          const x = e.clientX
+          const clientY = e.clientY
-          const y = e.clientY
+          if (isPointInRect(clientX, clientY, r)) {
-          if (isPointInRect(x, y, r)) {
-            console.log(m.message)
             const popup = document.querySelector('my-component')
             popup.changeText(m.message)
-            popup.toggle('show')
+            popup.show(clientX, clientY)
           }
         }
       }
     }
-    console.log('The point is outside the rectangle')
   }
-  // switch (e.target) {
-  //   case e.target.closest('span'):
-  //     const clicked = e.target.closest('span')
-  //     const infoText = clicked?.dataset.info
-  //     const myComponent = document.querySelector('my-component')
-  //     myComponent.setAttribute('my-attribute', infoText)
-  //     console.log(clicked)
-  //     break
-  // }
 }
 
 function isPointInRect(x, y, rect) {

popup.js

@@ -14,18 +14,24 @@ class MyComponent extends HTMLElement {
         :host {
           position: relative;
           display: inline-block;
+          z-index: 10;
         }
         .popup-text {
-          visibility: hidden;
+          max-width: 160px;
-          width: 160px;
+          color: black;
-          background-color: #555;
-          color: #fff;
           text-align: center;
           padding: 8px 0;
-          position: absolute;
           z-index: 1;
         }
-        :host(.show) .popup-text {
+        .bes-popup-container {
+          visibility: hidden;
+          max-width: 200px;
+          background-color: white;
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+          border-radius: 5px;
+          padding: 8px;
+        }
+        :host(.show) .bes-popup-container {
           visibility: visible;
           animation: fadeIn 1s;
         }
@@ -34,13 +40,23 @@ class MyComponent extends HTMLElement {
           to {opacity:1 ;}
         }
       </style>
-      <span class="popup-text">
+      <div class="bes-popup-container">
-        Tole je testni popup
+        <span class="popup-text">
-        <slot></slot>
+          Tole je testni popup
-      </span>
+        </span>
+      </div>
     `
   }
 
+  show(x, y) {
+    console.log(x, y)
+    y = y + 20
+    this.style.position = 'fixed'
+    this.style.left = `${x}px`
+    this.style.top = `${y}px`
+    this.classList.add('show')
+  }
+
   toggle() {
     this.classList.toggle('show')
   }