Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: detect mentions of users who have email as their name #1698

Merged
merged 2 commits into from
Aug 3, 2022

Conversation

oliverlaz
Copy link
Member

🎯 Goal

With this PR, we want to fix one edge case with user mentions feaure in which a user could have their name set to their e-mail address. Before, the SDK would wrongly recognize the mention as an e-mail address and would wrap it into <a href="mailto:..." /> tag.

🛠 Implementation details

The link detection process kicks in before user mentions are detected.
With this change, while detecting links we also consider whether the detected link matches an email identical to the mentioned user's name.

As part of this change, mdast-util-find-and-replace is updated to its latest version as the one we were previously using had a bug, and sometimes it could skip matching nodes.

The link detection process kicks-in before user mentions are detected.
With this change, while detecting links we also take care whether the detected link
matches to an email which is identical to possibly mentioned user's name.

As part of this change, mdast-util-find-and-replace is updated to it's latest version
as the one we were previously using had a bug, and sometimes it could skip matching nodes.
@MartinCupela
Copy link
Contributor

@oliverlaz the original request complained about the options.customMarkDownRenderers not having an impact on the render result. I am thinking, whether the solution should address that in order we avoid implementing code handling edge cases and allow our users to handle those edge cases by themselves. How do you see that?

petyosi
petyosi previously approved these changes Aug 2, 2022
@oliverlaz
Copy link
Member Author

@oliverlaz the original request complained about the options.customMarkDownRenderers not having an impact on the render result. I am thinking, whether the solution should address that in order we avoid implementing code handling edge cases and allow our users to handle those edge cases by themselves. How do you see that?

The overrides didn't work because renderText didn't detect the "e-mail" mentions correctly (it detected a link). With the latest fix, the detection is improved and mention override now correctly works. I just added a test for it.

@codecov
Copy link

codecov bot commented Aug 2, 2022

Codecov Report

Merging #1698 (7744c63) into develop (19fc992) will increase coverage by 0.33%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop    #1698      +/-   ##
===========================================
+ Coverage    79.39%   79.73%   +0.33%     
===========================================
  Files          229      229              
  Lines         5796     5803       +7     
  Branches      1710     1713       +3     
===========================================
+ Hits          4602     4627      +25     
+ Misses        1048     1029      -19     
- Partials       146      147       +1     
Impacted Files Coverage Δ
src/utils.tsx 73.50% <100.00%> (+16.23%) ⬆️
.../components/MessageList/VirtualizedMessageList.tsx 66.84% <0.00%> (+1.08%) ⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us.

@oliverlaz oliverlaz merged commit 367b7c4 into develop Aug 3, 2022
@oliverlaz oliverlaz deleted the fix/email-username-mentions branch August 3, 2022 13:43
@MartinCupela MartinCupela mentioned this pull request Aug 3, 2022
github-actions bot pushed a commit that referenced this pull request Aug 3, 2022
# [9.4.0](v9.3.0...v9.4.0) (2022-08-03)

### Bug Fixes

* detect mentions of users who have email as their name ([#1698](#1698)) ([367b7c4](367b7c4))

### Features

* allow to send custom message data when editing a message ([#1696](#1696)) ([05eae28](05eae28))
@petyosi
Copy link
Contributor

petyosi commented Aug 3, 2022

🎉 This PR is included in version 9.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@alexlopezit
Copy link

@oliverlaz @MartinCupela @petyosi Thanks for the update and new release version.

As the latest version of mdast-util-find-and-replace uses ESM I got a quick question; our tests are failing and I was just wondering if you know a way around this?

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/.../node_modules/mdast-util-find-and-replace/index.js from /Users/.../node_modules/stream-chat-react/dist/index.cjs.js not supported.
Instead change the require of index.js in /Users/.../node_modules/stream-chat-react/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

alexlopezit added a commit to Skedulo/stream-chat-react that referenced this pull request Aug 4, 2022
@oliverlaz
Copy link
Member Author

@oliverlaz @MartinCupela @petyosi Thanks for the update and new release version.

As the latest version of mdast-util-find-and-replace uses ESM I got a quick question; our tests are failing and I was just wondering if you know a way around this?

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/.../node_modules/mdast-util-find-and-replace/index.js from /Users/.../node_modules/stream-chat-react/dist/index.cjs.js not supported.
Instead change the require of index.js in /Users/.../node_modules/stream-chat-react/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

hi @alexlopezit, thanks for reporting the issue. I'll have a look and I'll get back to you.

oliverlaz added a commit that referenced this pull request Aug 4, 2022
related to: #1698

- add a smoke test which should detect broken CJS bundle
- run the smoke test on CI after every push
oliverlaz added a commit that referenced this pull request Aug 4, 2022
Our recent upgrade of `mdast-util-find-and-replace` in #1698 broke our CommonJS bundle.
The `mdast-util-find-and-replace` package is now bundled within our CJS bundle. This will eliminate the conflict between ESM and CJS modules in NodeJS.
As part of this change, a very naive smoke test is introduced aiming for earlier detection of such incompatibilities.
oliverlaz added a commit that referenced this pull request Aug 4, 2022
…1703)

Our recent upgrade of `mdast-util-find-and-replace` in #1698 broke our CommonJS bundle.
The `mdast-util-find-and-replace` package is now bundled within our CJS bundle. This will eliminate the conflict between ESM and CJS modules in NodeJS.
As part of this change, a very naive smoke test is introduced aiming for earlier detection of such incompatibilities.
github-actions bot pushed a commit that referenced this pull request Aug 4, 2022
## [9.4.1](v9.4.0...v9.4.1) (2022-08-04)

### Bug Fixes

* include mdast-util-find-and-replace into our CJS bundle ([#1702](#1702)) ([#1703](#1703)) ([8010889](8010889)), closes [#1698](#1698)
@oliverlaz
Copy link
Member Author

hi @alexlopezit, we just released v9.4.1 which fixes the problem you faced. Can you please upgrade and let us know whether everything runs well on your end?

@alexlopezit
Copy link

Thanks @oliverlaz, works perfect now 👍

github-actions bot pushed a commit that referenced this pull request Aug 18, 2022
# [10.0.0-theming-v2.1](v9.4.0...v10.0.0-theming-v2.1) (2022-08-18)

### Bug Fixes

* add str-chat__message--other class to MessageDeleted ([25f3190](25f3190))
* **Card:** prefer title_link over og_scrape_url ([843990e](843990e))
* do not generate class names to contain string 'undefined', do not pass Media prop to Card ([40342fe](40342fe))
* **EditMessageForm:** remove circular dependency ([6218a65](6218a65))
* File attachment UI in theme-v1 ([0a80bef](0a80bef))
* File attachment UI in theme-v1 ([9604ca6](9604ca6))
* **FilePreviewItem:** add file type for correct file icons ([6e6fce5](6e6fce5))
* improve scrollToBottom with image attachments ([be8bb7a](be8bb7a))
* include mdast-util-find-and-replace into our CJS bundle ([#1702](#1702)) ([61c4eec](61c4eec)), closes [#1698](#1698)
* **MessageInput:** add container className ([a5e7908](a5e7908))
* **MessageInputFlat:** send button adjustments ([f456704](f456704))
* **MessageInput:** remove useId, add quotedMessage patch ([64e07d3](64e07d3))
* **MessageInput:** update dropzone markup ([974802b](974802b))
* **MessageList:** prevent redundant calls to scroll to bottom, don't use ResizeObserver ([363676e](363676e))
* **MessageStatus:** add V2 TooltipContainer component "shim" ([dcfbbfb](dcfbbfb))
* move card caption to card content and rename to source link ([c44bcd7](c44bcd7))
* **QuotedMessagePreview:** use themingVersion instead of PreviewHeader property ([4f79b07](4f79b07))
* reduce mount/unmount of image attachments ([34082a4](34082a4))
* replace FileReader with URL.createObjectURL ([#1701](#1701)) ([c8a490e](c8a490e))
* Responsive layout ([7551650](7551650))
* **SuggestionList:** update trigger limits ([2e1f025](2e1f025))
* sync event listener keyDown type btw the image attachment and gallery modal ([51e7c14](51e7c14))
* **TypingIndicator:** adjust position of the indicator ([f5db199](f5db199))
* **TypingIndicator:** use MessageListMainPanel to position the indicator ([865cbc8](865cbc8))

* Merge pull request #1697 from GetStream/theming-v2-user-testing ([2c133ad](2c133ad)), closes [#1697](#1697)
* Remove useMobilePress and useBreakpoint hooks (#1648) ([430bf24](430bf24)), closes [#1648](#1648)

### Features

* adapt MessageOptions to theming v2 ([23c2d93](23c2d93))
* adapt MessageStatus to theming v2 ([a5b0fae](a5b0fae))
* add "str-chat__message--error-message" class to message error div ([c4f7520](c4f7520))
* add Attachment icons for theming v2 ([97e8047](97e8047))
* add Card component for theming v2 ([5f5341f](5f5341f))
* add class "str-chat__message-sender-avatar" to Avatar root to display it for sender only ([ecd0b4b](ecd0b4b))
* add class str-chat__message-list-scroll to virtuoso root element ([7d2284e](7d2284e))
* add common IconProps type ([3ff89bb](3ff89bb))
* add FileAttachment component for theming v2 ([52acd80](52acd80))
* add group styles to virtualized message list items ([ff2044e](ff2044e))
* add Message icons for theming v2 - MessageDeliveredIcon, MessageErrorIcon ([9ff9034](9ff9034))
* add ModalGallery to the ComponentContext ([27e149a](27e149a))
* add realistic giphy attachment generator ([e4c2a7b](e4c2a7b))
* add str-chat__simple-message--error-failed class to str-chat__message-inner ([a5f8f94](a5f8f94))
* add str-chat-react__modal__inner class to str-chat__modal__inner ([0234522](0234522))
* add theme v2 class to CustomNotification ([037dc89](037dc89))
* add theme v2 to Reaction components, extract shared logic ReactionList & SimpleReactionList ([f6a12d0](f6a12d0))
* add themeVersion flag to ChatProps & ChatContext ([70cbfcb](70cbfcb))
* add ThemeVersion type to ChatContext ([695f30a](695f30a))
* add theming v2 changes for channel and channel header ([#1632](#1632)) ([3f8fddb](3f8fddb))
* add theming v2 classes to MessageActions elements ([d62e04a](d62e04a))
* add theming v2 classes to QuotedMessage ([8c5d2ff](8c5d2ff))
* add theming v2 classes to ReactionSelector & ReactionList ([fbedb42](fbedb42))
* add v2 classes to send and cancel button of EditMessageForm ([#1669](#1669)) ([ab75c2c](ab75c2c))
* adjust Audio widget for theming v2 ([f08c6f5](f08c6f5))
* adjust Gallery and Image widget for theming v2 ([de29a73](de29a73))
* adjust MessageRepliesCountButton to theming v2, add classes ([5076fd5](5076fd5))
* adjust MessageSimple for theming v2 ([ebd4bd7](ebd4bd7))
* allow card image enlargement in modal ([47bf301](47bf301))
* apply theme-v2 to channel list and preview  ([#1603](#1603)) ([cc88f1f](cc88f1f))
* change the close icon for modal and remove Close text ([88a5f7c](88a5f7c))
* compute the themeVersion value, remove themeVersion Chat prop ([3421087](3421087))
* convert attachment render functions into components, group attachments in order ([aeee078](aeee078))
* do not sanitize attachment scrape urls ([aa1624a](aa1624a))
* extract CardAudio and render only uploaded audio data in Audio component ([8027908](8027908))
* include the parent message in virtualized scrollable message list ([dd63427](dd63427))
* message is considered top if it has reactions and bottom if the next message has reactions ([638aead](638aead))
* **MessageInput:** add drag & drop upload functionality ([e731b67](e731b67))
* **ProgressBar:** add "seeking" feature to the progress bar ([0320864](0320864))
* **ProgressBar:** add onClick property ([4d9d06c](4d9d06c))
* remove avatar from the thread header ([dec0d8d](dec0d8d))
* remove deprecated components: MessageCommerce, MessageLivestream, MessageTeam ([9d75fb8](9d75fb8))
* remove translations for deprecated components: MessageCommerce, MessageLivestream, MessageTeam ([e524d0a](e524d0a))
* render cards for each attachment with scraped data ([0a59806](0a59806))
* show always ScrollToBottomButton on scroll up and show unread message count ([e554356](e554356))
* stop using FixedHeightMessage as default VirtualMessage component ([fc67915](fc67915))
* switch ladle to v2 ([ecd1cc6](ecd1cc6))
* **theming-v2:** add channel search for theme v2 ([#1685](#1685)) ([b735c30](b735c30)), closes [#1669](#1669)
* **TypingIndicator:** add translations ([f079e26](f079e26))
* update message componets with theme v2 designs ([e5192d5](e5192d5))
* use FileIcon with version in UploadsPreview ([4d150b1](4d150b1))
* wrap ThreadHead content in a div to enable styling for class str-chat__parent-message-li ([9323edb](9323edb))

### Reverts

* fix: File attachment UI in theme-v1 ([789dd27](789dd27))

### BREAKING CHANGES

* ThemingV2 - user testing and adjustments
* useMobilePress and useBreakpoint hooks are removed.

useMobilePress:
Historically, this hook programmatically handled the user interaction with Message components
by toggling `mobile-press` class upon user interaction.
The goal of this operation was to have the message actions displayed on the screen.
Internally, we found a better solution by offloading this behavior to the browser and
utilizing `:focus` and `:focus-within` CSS pseudo-selectors.

useBreakpoint:
This hook did hold the "programmatic" responsive UI breakpoints.
We realized they aren't always in line with our stylesheet breakpoints and possibly with our
customer's breakpoints. This misalignment was causing some inconsistencies and issues.
We are removing this hook because we believe defining UI breakpoints should be
responsibility of our customers.

SearchResults:
During the refactoring, we stumbled upon one side-effect where `popupResults` prop
wasn't always respected. The fix of it could be a breaking change for a small percentage
of our customers, but we believe this fix is the right thing to do.
github-actions bot pushed a commit that referenced this pull request Aug 29, 2022
# [9.5.0](v9.4.1...v9.5.0) (2022-08-29)

### Bug Fixes

* include mdast-util-find-and-replace into our CJS bundle ([#1702](#1702)) ([61c4eec](61c4eec)), closes [#1698](#1698)
* prevent double submissions in korean ([#1720](#1720)) ([5d781d8](5d781d8))
* replace FileReader with URL.createObjectURL ([#1701](#1701)) ([c8a490e](c8a490e))
* **Vite:** add emoji-mart (emoji, picker) re-export ([#1724](#1724)) ([c90cf4b](c90cf4b))

### Features

* increase and support overriding jump to message limit ([#1718](#1718)) ([8c720f4](8c720f4))
github-actions bot pushed a commit that referenced this pull request Sep 6, 2022
# [10.0.0-theming-v2.3](v10.0.0-theming-v2.2...v10.0.0-theming-v2.3) (2022-09-06)

### Bug Fixes

* include mdast-util-find-and-replace into our CJS bundle ([#1702](#1702)) ([#1703](#1703)) ([8010889](8010889)), closes [#1698](#1698)
* prevent double submissions in korean ([#1720](#1720)) ([5d781d8](5d781d8))
* ThemingV2 beta adjustments ([#1728](#1728)) ([785ee11](785ee11))
* **ThemingV2:** MessageInputFlat missing lodash/zipObject ([#1721](#1721)) ([dd8a457](dd8a457))
* **Vite:** add emoji-mart (emoji, picker) re-export ([#1724](#1724)) ([c90cf4b](c90cf4b))

### Features

* increase and support overriding jump to message limit ([#1718](#1718)) ([8c720f4](8c720f4))
* **ThemingV2:** PopperTooltip component ([#1714](#1714)) ([9b6301e](9b6301e))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants