From 674e9498e6663ff087965b8b0d9b40d420246fd6 Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Mon, 11 Mar 2024 08:20:50 +0100
Subject: [PATCH] Display highlight elements in CKEditor cases.

---
 online-editor.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/online-editor.js b/online-editor.js
index 5c89e4f..e8b849c 100644
--- a/online-editor.js
+++ b/online-editor.js
@@ -11,6 +11,7 @@ class BesEditor {
     this.correctionPanel = correctionPanel
     this.scrollPanel = scrollPanel
     this.offsetTop = null
+    this.isCKeditor = false
     this.disableSpellcheck(edit)
     this.proof(edit)
     edit.addEventListener('beforeinput', e => this.handleBeforeInput(e), false)
@@ -21,9 +22,10 @@ class BesEditor {
   }
 
   // Register editor
-  static register(edit) {
+  static register(edit, isCkeditor) {
     let editor = new BesEditor(edit)
     besEditors.push(editor)
+    if (isCkeditor) editor.isCKeditor = true
     return editor
   }
 
@@ -145,6 +147,12 @@ class BesEditor {
                   })
                 })
                 this.markProofed(el, matches)
+
+                // This is a solution for CKEditor. It is not the best solution, but it works for now.
+                if (this.isCKeditor) {
+                  const resizeEvent = new Event('resize')
+                  window.dispatchEvent(resizeEvent)
+                }
               })
               .catch(error => {
                 // TODO: Make parsing issues non-fatal. But show an error sign somewhere in the UI.
@@ -278,6 +286,7 @@ class BesEditor {
   // Adds grammar mistake markup
   addMistakeMarkup(range, scrollPanel) {
     // TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
+    // In CKEditor case, the highlight element is not shown for some reason. But after resizing the window it is shown.
     const clientRects = range.getClientRects()
     const scrollPanelRect = scrollPanel.getBoundingClientRect()
     const highlight = document.createElement('div')
@@ -523,6 +532,12 @@ window.onload = () => {
   document
     .querySelectorAll('.bes-online-editor')
     .forEach(edit => BesEditor.register(edit))
+
+  // TODO: not the most optimal solution, but it works for now
+  // Find contenteditable element inside ckeditor and prepare it
+  document.querySelectorAll('.ck-editor__editable').forEach(edit => {
+    BesEditor.register(edit, true)
+  })
 }
 
 window.onresize = () => {