Me dan la tarea de hacer lo siguiente:

1. Seleccionar texto (estoy usando la API de selección para eso)
2. Agregue resaltado o comentario a ese texto
3. Envíe este estado resaltado o comentado al backend para que el usuario pueda obtener sus aspectos destacados al cargar

He completado los dos primeros (y solo estoy destacando por ahora porque comentar parece trivial después de resaltar)

Ahora, los datos que recibo como contenido no son datos simples. Proviene del backend usando un editor de texto que desarrollé usando SlateJS y lo estoy manipulando en matrices de HTML. Entonces, el tipo de datos que estoy recibiendo es diferente al HTML normal.

Cuando recibo los datos, los envuelvo con el componente que construí para implementar el resaltado y la selección.

 <TextSelectionComp sideEffectsOfHighlighting={sideEffectsOfHighlighting} isHighlightingActive={isHighlightingActive}> <TextEditorRenderOutput data={data} /> </TextSelectionComp>

Ahora estoy confundido sobre la tercera parte sobre cómo enviar (y luego recuperar esos datos en la carga) Actualmente estoy usando el almacenamiento local para desarrollar esta funcionalidad y una vez que esté hecho, le diré al desarrollador de back-end que me cree una API para esto.

Este es el objeto de "datos" que estoy recibiendo dentro de TextEditorRenderOutput:

 data: JSON.stringify({ original: [ { type: "paragraph", children: [ { text: "No props given", }, ], }, ], htmlForm: ["<p>No props given</p>"], }),

Este es el código que estoy usando para mi TextSelectionComp: https://codeshare.io/Qnb6Je

Una forma en la que estoy pensando es construir una matriz de objetos. Cada objeto puede incluir el objeto window.getSelection y el color. Nuevamente surge el problema de cómo usar eso para resaltar los datos en loady.

El segundo problema con eso es que no pude encontrar una manera de obtener los elementos HTML del accesorio "niños" en mi TextSelectionComp que compartí en el enlace de código compartido anterior.