Making a pop up on text highlight-CodePudding

I've been looking around this morning and nothing seems to be working I am trying to make something like notion has where when you highlight text in a text area a pop-up will show where you can edit text. I can sort out the functionality of the buttons in the box but I don't know what I should use to trigger a sort of on highlight event to pop up this box in a position relative to the highlight. I linked the notion reference my site and my HTML code so far. Notion Refrence My Current Site

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Study App</title>
    <link rel="stylesheet" href="study.css" />
    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

    <script src="study.js"></script>


    <div >


      <nav><label for="touch"><span>Settings</span></label>
        <input type="checkbox" id="touch"/>


        <ul >
          <li><a><div ><button onclick="myFunction()">
          <input  type="checkbox"/></button></div></a></li>
          <li><a href="#"></a></li>
        </ul>
      </nav>
    </div>


</div>



<div >
  <input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i ></i></button>
  <div >
    <a href="#" >Add Page</a></div>
  </div>
</div>

<script type="text/javascript">

var checkBox = document.getElementById("myCheckbox");
  
  function rotateElem() {
    if (checkBox.checked == false)
    {
      document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
    }
    else {
    document.querySelector('.fas.fa-angle-right.dropdown').style.transform= 'rotate(0deg)';
    }   
}
</script>

      
<div ></div>


    <div >
      <div >
        <h1><span >Study</span><span >App</span></h1>
    </div>
 
    
    <div >
      <textarea  spellcheck="true" placeholder="Untitled" cols="5" rows="1"></textarea>
      </div>

<div >
  <textarea  spellcheck="true" placeholder="Untitled" cols="30" rows="1"></textarea>
  </div>

    <div >
      <textarea  spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
    </div>

    <script>
      
let value = ''

const elements = document.querySelectorAll('.longInput')
for (let i = 0; i < elements.length; i  ) {
  elements[i].addEventListener('change', handleChange)
  elements[i].addEventListener('keyup', handleChange)
}

function handleChange(e) {
  value = e.target.value
  for (let i = 0; i < elements.length; i  ) {
    elements[i].value = value
  }
}
    </script>
  

    <script type="text/javascript">
      $('.pages').hide();
      $(document).ready(function(){
        $('#myCheckbox').click(function(){
          $('.pages').slideToggle();
        });
      });
    </script>

    <script src="study.js"></script>

  
  </body>
</html>

CodePudding user response：

Have a look at this code

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var selectedText = x.Selector.getSelected();
        if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX   5,
                'top' : pageY - 55
            }).fadeIn(200);
        } else {
            $('ul.tools').fadeOut(200);
        }
    });
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });
});

Find here a working demo! Codepen.io