I am given the task to do the following:

1. Select text (i am using selection API for that)
2. Either add highlight or Comment to that text
3. Send this highlighted or commented state to backend so that user can get his highlights on loading

I have completed the first two (and i am only doing the highlighting for now because commenting seems trivial after highlighting)

Now the data I am recieving as content is not simple data. It is coming from backend using a text editor I developed using SlateJS and I am manipulating that into arrays of HTML. So the data type I am receiving is different than normal HTML.

When I recieve the data, I am wrapping it with the component I built to implement highlighting and selection.

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

Now I am confused on the third part on how to send (and then recover that data on load) Currently I am using local storage to develop this functionality and once that is done I shall tell the backend developer to build me an API for this.

This is the "data" object I am receiving inside TextEditorRenderOutput:

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

This is the code I am using for my TextSelectionComp: https://codeshare.io/Qnb6Je

One way I am thinking is to build an array of objects. Each object can include window.getSelection object and the color. Again problem comes on how to use that to highlight the data on loady.

Second problem with that is I could not find a way to get the HTML elements of the "children" prop in my TextSelectionComp which I shared in codeshare link above.