contextmenu.less

#_cdielts-context-menu.menu {
  width: 120px;
  background-color: white;
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  display: none;

  .menu-options {
    list-style: none;
    padding: 10px 0;
    margin: 0;

    .menu-option {
      font-weight: 500;
      font-size: 14px;
      padding: 10px 40px 10px 20px;
      cursor: pointer;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }
}

contextmenu.ts

      const contextMenuElement = document.createElement("div");
      contextMenuElement.id = "_cdielts-context-menu";
      contextMenuElement.classList.add("menu");
      contextMenuElement.innerHTML = `
        <ul class="menu-options">
          <li class="menu-option" data-event="highlight">Highlight</li>
          <li class="menu-option" data-event="notes">Notes</li>
        </ul>
      `;

      const parent = doc.querySelector(".cdielts-section-container");

      parent.appendChild(contextMenuElement);

      parent.addEventListener("contextmenu", (e: any) => {
        e.preventDefault();

        const bounds = parent.getBoundingClientRect();
        const left = e.pageX - bounds.x;
        const top = e.pageY - bounds.y;

        contextMenuElement.style.left = `${left}px`;
        contextMenuElement.style.top = `${top}px`;
        contextMenuElement.style.display = "block";
      });

      parent.addEventListener("click", (e: any) => {
        contextMenuElement.style.display = "none";
      });

      Array.from(contextMenuElement.querySelectorAll(".menu-option")).forEach(menuOptionElement => {
        menuOptionElement.addEventListener("click", _ => {
          console.log(`contextmenu-${menuOptionElement.getAttribute("data-event")}`);
          menuOptionElement.dispatchEvent(new CustomEvent(`contextmenu-${menuOptionElement.getAttribute("data-event")}`));
          contextMenuElement.style.display = "none";
        });
      });