Hello. I am fairly new to react and front end dev in general, but I have been given a project at my work in order to get comfortable with it and eventually to extend it with other tools based on concepts I am much more familiar with (I’m in a data science position). Currently I’m stuck on a very specific implementation of a note taking component. I will summarize it in some steps because I think it makes the most sense.
1) Take notes after doing a short quiz/test which corresponds to a category, for multiple tests and multiple categories. So I store note+category.
2) On the dashboard/landing page there is a big post it note style UI where it fetches all the notes for all categories and displays them category header + notes.
3) Click on this post it and open the rich text editor to make further modifications on your notes
4) After submitting or closing the post it these notes should be updated (implemented and done with a useState that then manages the back end storage of this.
My issue comes on step 4, in the chosen text editor I have no reliable way of separating the notes that I can see. I considered doing some sort of regex based on the category but since the user can just remove one single letter from a category header in the editor it is unreliable. I would need to have separate boxes/inputs within the editor that kind of highlight part of the text when you click it so you know which category you are currently editing but I have not found this functionality in any of the popular react text editors. I am currently using ReactQuill
An example of something that WOULD work is when I click the post it it opens x editor components for x categories since there is now a 1 to 1 relationship and no other magic needed.
Any help is greatly appreciated.