Caret negli elementi contenteditable

[alfiop78]

Utilizzare il CaretPositionFromPoint per poter visualizzare una pop-up mentre si digita nei div contenteditable. La pop-up visualizza le colonne del database mentre si digita del testo, nell'elenco devono essere visualizzate prima le colonne appartenenti alla tabella selezionata, es.: se si vuole inserire il campo id ed è stata selezionata la tabella Azienda, viene visualizzato prima il campo appartenwnte a questa tabella e poi lo stesso campo di altre tabelle.

https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint

[alfiop78]

Utilizzo dello script: Invece di utilizzare due elementi, la textarea e il div mirror potrei utilizzare solo un div contenteditable e ottenere la posizione del cursore con il caret position del commento precedente ed evitare di mettere due elementi sovrapposti come nello script di esempio. Utilizzare questo script per ottenere la parola corrente :

const findIndexOfCurrentWord = () => {
    // Get current value and cursor position
    const currentValue = textarea.value;
    const cursorPos = textarea.selectionStart;

    // Iterate backwards through characters until we find a space or newline character
    let startIndex = cursorPos - 1;
    while (startIndex >= 0 && !/\s/.test(currentValue[startIndex])) {
        startIndex--;
    }
    return startIndex;
};