Javascript - Ottieni elementi dietro il caret negli elementi figlio di [contenteditable]

Question

Sto costruendo un editor di testo semplice e intuitivo in Javascript, in pratica un editor WYSIWYG. Utilizzerò l'attributo contenteditable nel wrapper principale (.wrapper). Quando premi Invio all'interno di .wrapper, un nuovo elemento <p> con un id univoco viene aggiunto al wrapper.

Ho bisogno di un modo per recuperare quale elemento figlio di .wrapper che è attualmente selezionato (vale a dire, essendo messo a fuoco o con l'indicatore di inserimento/testo all'interno di esso).

Ho cercato per giorni senza risultati e ho provato a utilizzare document.elementFromPoint() ma senza risultati corretti.

Quando si utilizza $(":focus"), ottengo l'intero .wrapper e non l'elemento figlio specifico.

Edit:

Esempio HTML struttura:

<div class="container t-wrapper" contenteditable> 
</div> 

Esempio codice Javascript:

$(document).ready(function() { 
    $currentElement = $("[contenteditable]"); 

    $(".t-wrapper").each(function() { 
     var id = generateIdentifier(6); // Ignore this 

     /* This creates the initial <p> child element, where you start typing. */ 
     $(this).html('<p class="t-empty t-first" id="' + id + '"></p>'); 

     $(this).on("mouseup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 

     $(this).on("keyup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 
    )); 
}); 

Edit 2:

sono riuscito a ge Funziona in modo equo con l'evento mouseup, poiché in realtà stai facendo clic su qualcosa. Ma ho bisogno che funzioni per spostare il cursore usando la tastiera . In alternativa, ho bisogno di un modo per ottenere la posizione del cursore in pixel, e quindi utilizzare document.elementFromPoint() per ottenere l'elemento specifico.

Answer 1

document.activeElement restituirà l'elemento attualmente attivo.

Answer 2

:focus non seleziona i tuoi elementi perché non sono focalizzabili.

È possibile renderli attivabili aggiungendo tabindex="-1" in HTML o in JS.

var generateIdentifier = Math.random; 
 
var currentElement = document.querySelector("[contenteditable]"); 
 
[].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) { 
 
    var first = document.createElement('p'); 
 
    first.className = "t-empty t-first"; 
 
    first.id = generateIdentifier(6); 
 
    first.textContent = 'Press enter to create new paragraphs'; 
 
    first.tabIndex = -1; 
 
    el.appendChild(first); 
 
});

.container > :focus { 
 
    border: 1px solid blue; 
 
}

<div class="container t-wrapper" contenteditable></div>

Sembra che se si aggiunge al primo comma, nuovi paragrafi ottengono automaticamente. Ma se si vuole essere sicuri, penso che si potrebbe ricorrere a un osservatore di mutazione o di un listener di eventi keyup per rilevare paragrafi senza tabindex, e aggiungerlo:

el.addEventListener("keyup", function(e) { 
    var newChild = el.querySelector('p:not([tabindex])'); 
    if(newChild) newChild.tabIndex = -1; 
});