Rename popup component, and render replacement suggestions

index.html

@@ -18,7 +18,7 @@
     <!-- TODO: Insert correction-panel in DOM with JavaScript and include editor ID in its ID to support multiple editors. -->
     <div id="correction-panel"></div>
     <div id="ed7" class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
-    <my-component></my-component>
+    <bes-popup-el></bes-popup-el>
   </body>
 </html>
 <style>

online-editor.js

@@ -17,7 +17,7 @@ window.onload = () => {
       e => besHandleBeforeInput(editor, e),
       false
     )
-    //edit.addEventListener('click', e => besHandleClick(editor, e))
+    edit.addEventListener('click', e => besHandleClick(editor, e))
   })
 }
 
@@ -27,7 +27,7 @@ window.onresize = () => {
     editor.children.forEach(child => {
       besClearAllMistakes(editor, child?.elements)
       child.matches.forEach(match => {
-        const clientRect = besAddMistake(match.range, match.message)
+        const clientRect = besAddMistake(match.range, match)
         match.rects = clientRect
       })
     })
@@ -117,7 +117,7 @@ async function besProof(editor, el) {
                 matches.push({
                   range: range,
                   rects: clientRect,
-                  message: match.message
+                  match: match
                 })
               })
 
@@ -224,7 +224,6 @@ function besAddMistake(range, match) {
     const rect = clientRects[i]
     const highlight = document.createElement('div')
     highlight.classList.add('bes-typo-mistake')
-    highlight.dataset.info = match.message
     highlight.style.left = `${rect.left}px`
     highlight.style.top = `${rect.top}px`
     highlight.style.width = `${rect.width}px`
@@ -282,7 +281,14 @@ function besRenderPopup(matches, popup, clientX, clientY) {
     if (m.rects) {
       for (let r of m.rects) {
         if (besIsPointInRect(clientX, clientY, r)) {
-          popup.changeText(m.message)
+          popup.changeText(m.match.message)
+          m.match.replacements.forEach(replacement => {
+            popup.appendReplacements(
+              replacement.value,
+              m.match.offset,
+              m.match.length
+            )
+          })
           popup.show(clientX, clientY)
           return true
         }

popup.js

@@ -29,10 +29,11 @@ class BesPopupEl extends HTMLElement {
         .bes-popup-container {
           visibility: hidden;
           max-width: 300px;
-          bacground-color: rgb(47, 50, 55);
+          background-color: rgb(241, 243, 249);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           border-radius: 5px;
           padding: 8px;
+          z-index: 1;
         }
         .bes-toolbar {
           display: flex;
@@ -47,6 +48,18 @@ class BesPopupEl extends HTMLElement {
           padding: 10px;
           border-radius: 5px;
         }
+        .bes-replacement-btn{
+          margin: 5px 0;
+          padding: 5px;
+          border: none;
+          border-radius: 5px;
+          background-color: #239aff;
+          color: white;
+          cursor: pointer;
+        }
+        .bes-replacement-btn:hover{
+          background-color: #1976f0;
+        }
         :host(.show) .bes-popup-container {
           visibility: visible;
           animation: fadeIn 1s;
@@ -62,8 +75,9 @@ class BesPopupEl extends HTMLElement {
         </div>
         <div class="bes-text-div">
           <span class="popup-text">
-            Tole je testni popup
           </span>
+          <div class="bes-replacement-div">
+          </div>
         </div>
       </div>
     `
@@ -74,9 +88,19 @@ class BesPopupEl extends HTMLElement {
     this.style.position = 'fixed'
     this.style.left = `${x}px`
     this.style.top = `${y}px`
+    this.clear()
     this.classList.add('show')
   }
 
+  clear() {
+    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
+    const replacements = replacementDiv.childNodes
+    if (!replacements.length) return
+    replacements.forEach(replacement => {
+      replacementDiv.removeChild(replacement)
+    })
+  }
+
   hide() {
     this.classList.remove('show')
   }
@@ -84,6 +108,17 @@ class BesPopupEl extends HTMLElement {
   changeText(text) {
     this.shadowRoot.querySelector('.popup-text').textContent = text
   }
+
+  appendReplacements(replacement, offset, length) {
+    const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
+    const replacementBtn = document.createElement('button')
+    replacementBtn.classList.add('bes-replacement-btn')
+    replacementBtn.dataset.length = length
+    replacementBtn.dataset.offset = offset
+    replacementBtn.textContent = replacement
+    replacementBtn.classList.add('bes-replacement')
+    replacementDiv.appendChild(replacementBtn)
+  }
 }
 
 customElements.define('bes-popup-el', BesPopupEl)