Enhance handleClick function to support invocation from rich HTML content

online-editor.js

@@ -352,32 +352,25 @@ class BesEditor {
     return nodes
   }
 
-  // TODO: Improve this function to support copied rich html content from news sites, etc.
   handleClick(e) {
     const targetEl = e.target
     const popup = document.querySelector('bes-popup-el')
-    if (targetEl.tagName === 'DIV') {
-      const divIndex = this.children.findIndex(
-        child => child.elements === targetEl
-      )
+    // If target has not parent with class 'bes-online-editor', find target's parent whose parent is 'bes-online-editor'
+    const target = BesEditor.findParent(targetEl)
+      ? BesEditor.findParent(targetEl)
+      : targetEl
+
+    const divIndex = this.children.findIndex(child => child.elements === target)
     const matches = this.children[divIndex]?.matches
     if (!matches) {
       popup.hide()
       return
     }
     if (
-        BesEditor.renderPopup(
-          targetEl,
-          matches,
-          popup,
-          e.clientX,
-          e.clientY,
-          this
-        )
+      BesEditor.renderPopup(target, matches, popup, e.clientX, e.clientY, this)
     )
       return
     else popup.hide()
-    } else popup.hide()
   }
 
   handleScrollEvent(editor, scrollPanel) {
@@ -385,6 +378,17 @@ class BesEditor {
     this.offsetTop = editor.scrollTop
   }
 
+  static findParent(target) {
+    let element = target
+    while (element && element.parentNode) {
+      if (element.parentNode.classList?.contains('bes-online-editor')) {
+        return element
+      }
+      element = element.parentNode
+    }
+    return null
+  }
+
   static renderPopup(el, matches, popup, clientX, clientY, editor) {
     for (let m of matches) {
       if (m.rects) {