Estoy tratando de rastrear y restaurar la posición del símbolo de intercalación dentro del contenido anidado Div editable como será mi código.

 <div id="parentDiv" contentEditable={"true"}> <div id="chip-1" styles={color: "red",border: "1px solid #999",border-radius: "10px",margin-right: "5px",padding: "3px"}> TotalCurrentRatio </div> <div id="chip-2" styles={color: "red", margin-right: "5px",padding: "3px"}> / </div> <div id="chip-3" styles={color: "red",border: "1px solid #999",border-radius: "10px",margin-right: "5px",padding: "3px"}> NetAsset </div> </div> <button id="button" onClick={setCaret}> GetCaret </button> <button id="FoucsButton" onClick={focusEnd}> setCaret </button>

Estoy tratando de hacer dos funciones

1. GetCaret : que guarda la posición actual de intercalación en una variable.

2. SetCaret : que establece la posición del personaje en función de la posición devuelta por GetCaret. Probé muchas soluciones como

    const GetCaret= ( containerEl: EventTarget & HTMLDivElement ) => { var range = window.getSelection()!.getRangeAt(0); var preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(containerEl); preSelectionRange.setEnd(range.startContainer, range.startOffset); var start = preSelectionRange.toString().length; return { start: start, end: start + range.toString().length, }; };

2. SetCaret

 const setCaret = ( caretPosition: { start: number; end: number; } ) => { var el = document.getElementById("parentDiv"); var range = document.createRange(); var sel = window.getSelection(); if (el !== null && sel !== null && el.innerText.length > 0) { range.setStart(el, 4314); range.collapse(true); console.log("setCaret ", caretPosition.end); sel.removeAllRanges(); sel.addRange(range); el.focus(); } return; };

Pero no funciona para el contenido anidado Captura de pantalla div editable (como se muestra arriba) de mi componente: