mirror of
https://github.com/hanzoai/team.git
synced 2026-09-30 01:57:35 +00:00
59a17a117b
* Mock react-virtualized-auto-sizer in all unit tests to ensure contents are mounted
Without mocking that, anything inside of an `AutoSizer` wouldn't be rendered
at all, leading to weird behaviour like the emoji picker being empty in tests.
* Fix EmojiPickerCategoryRow not having a defaultMessage
This caused any unit tests involving the emoji picker to error unless you
also provided an intlMessages object which is hard to do due to how Jest's
`moduleNameMapper` option is configured currently.
* Fixed incorrect usage of useCallback in EmojiPickerItem
The way this was previously written, we weren't specifying dependencies
properly for those callbacks which lead to some actual performance issues
because of how heavy the emoji picker is, and it also lead to issues where
click handlers would have to be triggered multiple times in unit tests
for some reason.
* MM-66659 Stop using caretPosition in useEditorEmojiPicker
This bug seems to be caused by a race condition between React and Chrome which
only occurs on Windows and only now that we've upgraded to React 18. That race
condition occurs with how we map the selection range in the post textbox to
its `caretPosition` state. That state has always been pretty janky, so I've
decided to remove it.
This also has some other benefits like improving UX by using `execCommand`
which preserves the undo/redo stack when using the emoji picker and simplifying
the code because we no longer have to manually mess with the cursor position.
Also, while I was in there, I fixed some minor weirdness around how whitespace
is handled when adding those emojis.
* MM-66659 Stop using caretPosition in useKeyHandler
* MM-66659 Stop using caretPosition for prefill message
* MM-66659 Remove remaining traces of caretPosition in AdvancedTextEditor
* Fix exclusive test
* Fix "Fixed incorrect usage of useCallback in EmojiPickerItem"
* Fixed incorrect usage of FixedSizeList in emoji picker
This is the actual fix to the issue I thought I fixed previously by changing
how `useCallback` was called in EmojiPickerItem.
It turns out the actual issue is that we were passing a new function as the
child of FixedSizeList on every render cycle which caused it to re-render all
of the rows which somehow also assigned them new DOM Nodes as well. The
EmojiPicker re-renders whenever we mouse over an emoji, so it would re-render
the FixedSizeList and all of its children frequently when mousing over things.
Apart from causing performance issues, that also seems to cause RTL to fail to
click on an emoji the first time you call `userAgent.click` because the first
call would move the mouse which would trigger a re-render, and that would
seemingly cause RTL to forget what to click on.
To fix that, I used a new React context to pass the extra props to the
EmojiPickerCategoryOrEmojiRow. I could've also done that by adding them to the
FixedSizeList's `itemData` prop, but that already contains a lot of heavy data,
and I didn't want to add to that.
* Revert changes to postMessageOnKeyPress
* Run Prettier in playwright folder
* Added docs to new Playwright test
* Address feedback
(cherry picked from commit f0815ae9f8)
Co-authored-by: Harrison Healey <[email protected]>