Detect Selected Text Within a Group

[duracel]

I’m using the Text Selection plugin by Airdev to display a tooltip inside a rich text editor whenever the user selects a text. The only problem is, the plugin will detect ANY selected text on the page, not just inside the rich text editor.

Demo: Bubble | No-code apps

As you can see when selecting the text on the right, the tooltip still appears.

Is there a way to limit this to only detecting selected text inside the rich text field? With or without this plugin.

I was successful in achieving this by creating a reusable element that has the rich text editor and the Text Selection (plugin) element inside it, and by doing this it will only detect selected text inside the reusable element and not the whole page. But for the app I’m building I can’t place the rich text field inside a reusable element. So looking for alternative solutions.

[duracel]

I switched from using the Text Selection plugin to using this javascript on page load:

const selectableTextArea = document.querySelectorAll("#editor");
const tooltipDiv = document.querySelector("#tooltip");

selectableTextArea.forEach(elem => {
  elem.addEventListener("mouseup", selectableTextAreaMouseUp);
});

tooltipDiv.addEventListener("click", tooltipDivClick);

document.addEventListener("mousedown", documentMouseDown);

function selectableTextAreaMouseUp(event) {
  setTimeout(() => { // In order to avoid some weird behavior...
    const selectedText = window.getSelection().toString().trim();
    if(selectedText.length) { 
      const x = event.pageX;
      const y = event.pageY;
      const tooltipDivWidth = Number(getComputedStyle(tooltipDiv).width.slice(0,-2));
      const tooltipDivHeight = Number(getComputedStyle(tooltipDiv).height.slice(0,-2));

      if(document.activeElement !== tooltipDiv) {
        tooltipDiv.style.left = `${x - tooltipDivWidth*0.5}px`;
        tooltipDiv.style.top = `${y - tooltipDivHeight*1.25}px`;
        tooltipDiv.style.display = "block";
        tooltipDiv.classList.add("btnEntrance");
      }
      else {
        tooltipDiv.style.left = `${x-tooltipDivWidth*0.5}px`;
        tooltipDiv.style.top = `${y-tooltipDivHeight*0.5}px`;
      }
    }    
  }, 0);
}

function documentMouseDown(event) {
  if(event.target.id!=="tooltip" && getComputedStyle(tooltipDiv).display==="block") {
    tooltipDiv.style.display = "none";
    tooltipDiv.classList.remove("btnEntrance");
    window.getSelection().empty();
  }
}
function tooltipDivClick(event) {
  const selectedText = window.getSelection().toString().trim();

}

Along with this CSS:

<style>
#tooltip {
  width: 50px !important;
  height: 140px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  cursor: pointer;
  z-index: 1000 !important;
  display: none;
}
.btnEntrance {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
@keyframes btnEntrance { /* zoomIn */
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
  }    
}
</style>

Everything works fine now except for the positioning of the tooltip. Instead of appearing next to my cursor, it appears at the top-left corner of the page (which is the default positioning of the floating group in bubble). Is bubble’s styling overriding my own, or is there an issue with my code?

EDIT: Here’s how it’s supposed to work