Drawing notation in wrong location

[0x213F]

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:

1. Render one Rough Notation inline
2. Render a second Rough Notation inline, after the first one
3. See error
4. 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.

[linkstrifer]

Hi, sorry for the delay, I was really sick (COVID times xD)

About this issue, I think I'm missing something, I cannot replicate it on my end.

How are you adding the user-generated annotations?

I tried your code and is working fine in my playground so I think maybe is a conflict with the way you are adding annotations, I'm not sure if the error is on my end, here is a codesandbox

https://codesandbox.io/s/hardcore-curie-zg827?file=/src/App.js

[0x213F]

Hey there - I hope you are doing well. No rush on this - especially not at the expense of your well-being!

Thank you for sharing the code sandbox. The example you gave is not quite the bug I am experiencing. Below I have linked two more code sandboxes to explain the issue.

1: works as expected here ("filling in backwards") https://codesandbox.io/s/awesome-minsky-gqkpq

2: It also works as expected here ("filling in forwards") - this is the one that I am having trouble with https://codesandbox.io/s/clever-ishizaka-tw9sr

...So turns out that second example runs totally fine. This makes me think that there is some other factor at play here. I don't think react-rough-notation is at fault.

So the short version is that I need to do some more digging and figure out what is going wrong. Very likely react-rough-notation is not the culprit :)

The longer version is... well... here is my code.

[liltechnomancer]

I have this same issue, you can see it on my deployed site. https://technomancy.dev/ I can add more info later but wanted to add this for now.

[aviraltandon21]

Hi @0x213F , I am also facing the exact same issue with my website. Did you find/come up with any solution or workaround ? If so, please help me in fixing the bug.

Thanks and regards

[linkstrifer]

Hi @0x213F , I am also facing the exact same issue with my website. Did you find/come up with any solution or workaround ? If so, please help me in fixing the bug.

Thanks and regards

Are you just notating multiple inline elements ?

[aviraltandon21]

I have this same issue, you can see it on my deployed site. https://technomancy.dev/ I can add more info later but wanted to add this for now.

It looks fine on your website. Did you find any solution ?

[aviraltandon21]

Hi @0x213F , I am also facing the exact same issue with my website. Did you find/come up with any solution or workaround ? If so, please help me in fixing the bug. Thanks and regards

Are you just notating multiple inline elements ?

Yes

[linkstrifer]

@aviraltandon21 can you post a codesandbox with the part of your code with the issue?

I tried here but it doesn't have the issue: https://codesandbox.io/s/objective-lamport-lql5b4?file=/src/App.js:233-525

[liltechnomancer]

I have this same issue, you can see it on my deployed site. https://technomancy.dev/ I can add more info later but wanted to add this for now.

It looks fine on your website. Did you find any solution ?

No I got it to occur less but it is still happening often. Notice the T not being highlighted.

From what I can tell its from layout shift from fonts and other styles loading.