search

bonafideduck / react-highlight-within-textarea

React component for highlighting bits of text within a textarea
100 stars 13 forks source link

Overlapping highlight arrays causes one range to not be highlighted #171

Open tfielding-sourcepoint opened 1 year ago

tfielding-sourcepoint commented 1 year ago

Consider the following example: <HighlightWithinTextarea highlight={[ [0, 5], [4,6] ]} ... />

In this example, the [4,6] highlight will not render highlighted because it seems to be overlapping with the first [0,5] entry.

bonafideduck commented 1 year ago

When I designed this, I had a few choices:

  1. Do not support overlapping areas. <A>012345</A>
  2. Support overlapping areas, but truncate the second one. <A>012345</A><B>5</B>
  3. Support overlapping areas, but split them into three pieces and wrap that area with both components. <A>0123</A><A><B>45</B></A><B>6</B>

I chose to keep it simple and just not support overlapping highlights.

I'm open for feature requests (perhaps an overlap property). But I'd not want it to get too complex.

bonafideduck commented 1 year ago

Since the range is exclusive of the last, it was for:

highlight={[ [0, 6], [4,7] ]}

khoaoaoaoa commented 1 year ago

@bonafideduck Please add overlapping feature 🙏