0

I'm attempting to create a editor with Draft.js which will highlight specific words as the user types them, however I've been running into a bug where if the same highlighted word is typed back to back separated by a single space it will cause the highlighted substring to be appended to the end of the previous editor content for one state update (content returns to expected value upon the next editor state update).

I have found that in findWithRegex(), if I set end the match array length +/- 1 e.g. end = start + matchArr[0].length + 1; it resolves the issue, it seems to be something with setting end to the exact length of the substring.

CodeSandbox: https://codesandbox.io/s/throbbing-thunder-fp2rx8?file=/src/App.tsx ("doe" is the highlight word in this example)

I'm writing this at 1 AM so I hope my issue makes sense haha, please ask any questions you might have. Thanks in advance!

Owen
  • 26
  • 3
  • if you are writing this at 1AM - please go to bed, sleep well and try again in the morning :) usually one gets better ideas after a nap :) – Deian Oct 01 '22 at 14:14
  • @Deian haha feeling refreshed and ready to attack it again ;) I've been working on this bug for a couple days now though haha – Owen Oct 01 '22 at 17:20

1 Answers1

0

Found the issue, it seems to be a conflict with React Strict Mode haha. All I had to do was remove the <React.StrictMode> tags in my index.js/index.tsx file and now everything works as intended

Owen
  • 26
  • 3