Drawing notation in wrong location #17
Description
Describe the bug
I am rendering multiple RoughNotation elements inline the same component. It looks something like this initially:
<div>
<span>Hello, my name is </span>
<RoughNotation className={styles.Notated}
show={true}
color="red"
type={modification.type}
animate={modification.animate}>
0x213F
</RoughNotation>
<span>, nice to meet you!</span>
</div>
When the user interacts with the page, they can add more notations. For example, look at the following:
<div>
<span>Hello, my </span>
<RoughNotation show={true} color="red" type="highlight">
name
</RoughNotation>
<span> is </span>
<RoughNotation show={true} color="red" type="highlight">
0x213F
</RoughNotation>
<span>, nice to meet you!</span>
</div>
When the new notation occurs before the already established notation, it renders fine (no bug). However, when it renders after, it does not render as expected:
<div>
<span>Hello, my name is </span>
<RoughNotation show={true} color="red" type="highlight">
0x213F
</RoughNotation>
<span>, nice to </span>
<RoughNotation show={true} color="red" type="highlight">
meet
</RoughNotation>
<span> you!</span>
</div>
To Reproduce
Steps to reproduce the behavior:
- Render one Rough Notation inline
- Render a second Rough Notation inline, after the first one
- See error
- You may keep adding Rough Notations ahead of the last one to continue reproducing.
Expected behavior
(I was able to do this by "filling in" the Rough Notations backwards)
Screenshots
("Filling in" the Rough Notation forwards, it highlights the first word 3 times in a row)
Here is what the DOM looks like. I'm posting this as evidence that I didn't accidentally notate the same element 3 times, but instead did it to 3 different intervals.
Desktop (please complete the following information):
- OS: macOS
- Browser Chrome
- Version 87.0.4280.88
Additional context
Let me know how I can assist with this bug. I am having trouble understanding what the root cause may be. If someone could help point me in the right direction, that would be greatly appreciated!
If this ends up being a bug with a library, I would be happy to work on a PR if someone could give me more context on the fix.