TEXT PARTS SELECTOR COMPONENT (this is alpha version, do not recomended for production use)

DEMO on GitHub Pages

Call Preview

<TextPartsSelector
              style={{ width: '100%', overflowWrap: 'anywhere' }}
              affectedContent={paragraph}
              targetContent={sortQuoteList.map((q) => ({
                id: q.id,
                content: q.content,
                start: q.posBegin,
                end: q.posEnd,
                color: q.color,
              }))}
              setTargetContent={setTargetContent}
              // disabled={!selectedQuote}
              multiple={true}
              // {...(!selectedQuote ? { hoverQuote } : {})}
            />

TERMS OF REFERENCE FOR THE COMPONENT FOR SELECTING TEXT PARTS FROM Cyril mjr27:

Examples

I have not seen components with such functionality (logically, otherwise I would there was no such task). The closest thing I've found on jQuery:

• https://codepen.io/mattsich/pen/MKvmxQ

Task:

...TODO...