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') {
+    // If target has not parent with class 'bes-online-editor', find target's parent whose parent is 'bes-online-editor'
-      const divIndex = this.children.findIndex(
+    const target = BesEditor.findParent(targetEl)
-        child => child.elements === targetEl
+      ? BesEditor.findParent(targetEl)
-      )
+      : targetEl
-      const matches = this.children[divIndex]?.matches
+
-      if (!matches) {
+    const divIndex = this.children.findIndex(child => child.elements === target)
-        popup.hide()
+    const matches = this.children[divIndex]?.matches
-        return
+    if (!matches) {
-      }
+      popup.hide()
-      if (
+      return
-        BesEditor.renderPopup(
+    }
-          targetEl,
+    if (
-          matches,
+      BesEditor.renderPopup(target, matches, popup, e.clientX, e.clientY, this)
-          popup,
+    )
-          e.clientX,
+      return
-          e.clientY,
+    else popup.hide()
-          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) {