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.

Sign up for GitHub

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

Jump to bottom

feat: transform emoji tags into standard HTML #2870

Merged
merged 17 commits into from
Jan 23, 2024
Merged

feat: transform emoji tags into standard HTML #2870

merged 17 commits into from
Jan 23, 2024

Conversation

musale
Copy link
Contributor

@musale musale commented Nov 21, 2023

Closes #2330

PR Type

  • Feature

Description of the changes

Transforms <emoji> tags in content strings to standard HTML.

PR checklist

  • Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
  • All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
  • Stories have been added and existing stories have been tested
  • Added appropriate documentation. Docs PR:
  • License header has been added to all new source files (yarn setLicense)
  • Contains NO breaking changes

Other information

@musale
Update current tests for emojis in different positions
c72599b 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Change emoji translation to standard HTML
d14b593 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Use the fallback emoji transformation if no match is found
c5749b7 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Check for emoji content with other content and size appropriately
ff3c6af 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Process multiple emojis in content and style them to be centered
d01f1a4 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Add docs for the functions declared
48759d1 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Add some tests for the rewriteEmojiContentToHTML functoin
f695888 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale musale added this to the Chat - GA milestone Nov 21, 2023
@musale musale requested a review from a team as a code owner November 21, 2023 15:54
@musale musale changed the title Update current tests for emojis in different positions feat: transform emoji tags into standard HTML Nov 21, 2023
@github-actions GitHub Actions
Copy link

🚀 New react-contoso sample application deployed here

1 similar comment
@github-actions GitHub Actions
Copy link

🚀 New react-contoso sample application deployed here

@sebastienlevert
Copy link
Contributor

This works amazing! GREAT work on this @musale. One of the scenario that wasn't really working to be "1:1" with Teams is multiple emojis in a single message.

image

image

@musale musale linked an issue Nov 24, 2023 that may be closed by this pull request
[mgt-chat] Support for translation of emoji tags to standard HTML #2330
Closed
gavinbarron
gavinbarron reviewed Nov 28, 2023
View reviewed changes
Copy link
Member

@gavinbarron gavinbarron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome stuff @musale this situation is a bit more complex than the simple support we had and needs some more thought and external comms IMO

packages/mgt-chat/src/utils/rewriteEmojiContent.ts Outdated Show resolved Hide resolved
packages/mgt-chat/src/utils/rewriteEmojiContent.ts Outdated Show resolved Hide resolved
packages/mgt-chat/src/utils/rewriteEmojiContent.ts Outdated Show resolved Hide resolved
@musale
Merge branch 'next/mgt-chat' into emoji-to-html
b41c853
@musale
Change to use DOMParser to replace emoji content
028df29 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Update tests and remove dead code
18d766a 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Update to use the DOMParser function
e574560 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
Add documentation for new functions
6b4eb36 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@musale
rename rewriteEmojiContentToHTMLDOMParsing to rewriteEmojiContentToHTML
a89e654 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@github-actions GitHub Actions
Copy link

🚀 New react-contoso sample application deployed here

sebastienlevert
sebastienlevert previously approved these changes Nov 29, 2023
View reviewed changes
Copy link
Contributor

@sebastienlevert sebastienlevert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionnally, this seems to work as expected!

gavinbarron
gavinbarron reviewed Nov 30, 2023
View reviewed changes
Copy link
Member

@gavinbarron gavinbarron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is getting really close.

packages/mgt-chat/src/utils/rewriteEmojiContent.ts Show resolved Hide resolved
packages/mgt-chat/src/utils/rewriteEmojiContent.ts Show resolved Hide resolved
packages/mgt-chat/src/utils/rewriteEmojiContent.ts Show resolved Hide resolved
@musale
Add test for emojis in multiple p tags
ce859aa 
Signed-off-by: Martin Musale <martinmusale@microsoft.com>
@github-actions GitHub Actions
Copy link

🚀 New react-contoso sample application deployed here

gavinbarron
gavinbarron approved these changes Jan 23, 2024
View reviewed changes
Copy link
Member

@gavinbarron gavinbarron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions GitHub Actions
Copy link

Code Coverage

Package Line Rate Branch Rate Complexity Health
mgt-chat.src.statefulClient 100% 100% 0 ✔
mgt-chat.src.utils 100% 86% 0 ✔
mgt-components.dist.es6.components.mgt-agenda.src.components.mgt-agenda 12% 100% 0 ❌
mgt-components.dist.es6.components.mgt-contact.src.components.mgt-contact 62% 100% 0 ➖
mgt-components.dist.es6.components.mgt-file-list.mgt-file-upload.src.components.mgt-file-list.mgt-file-upload 43% 100% 0 ❌
mgt-components.dist.es6.components.mgt-file-list.src.components.mgt-file-list 51% 100% 0 ➖
mgt-components.dist.es6.components.mgt-file.src.components.mgt-file 46% 100% 0 ❌
mgt-components.dist.es6.components.mgt-get.src.components.mgt-get 20% 100% 0 ❌
mgt-components.dist.es6.components.mgt-login.src.components.mgt-login 63% 100% 0 ➖
mgt-components.dist.es6.components.mgt-messages.src.components.mgt-messages 65% 100% 0 ➖
mgt-components.dist.es6.components.mgt-organization.src.components.mgt-organization 46% 100% 0 ❌
mgt-components.dist.es6.components.mgt-people-picker.src.components.mgt-people-picker 49% 100% 0 ❌
mgt-components.dist.es6.components.mgt-people.src.components.mgt-people 59% 100% 0 ➖
mgt-components.dist.es6.components.mgt-person-card.src.components.mgt-person-card 53% 33% 0 ➖
mgt-components.dist.es6.components.mgt-person.src.components.mgt-person 48% 100% 0 ❌
mgt-components.dist.es6.components.mgt-picker.src.components.mgt-picker 75% 100% 0 ✔
mgt-components.dist.es6.components.mgt-profile.src.components.mgt-profile 39% 100% 0 ❌
mgt-components.dist.es6.components.mgt-tasks-base.src.components.mgt-tasks-base 76% 100% 0 ✔
mgt-components.dist.es6.components.mgt-tasks.src.components.mgt-tasks 54% 100% 0 ➖
mgt-components.dist.es6.components.mgt-taxonomy-picker.src.components.mgt-taxonomy-picker 62% 100% 0 ➖
mgt-components.dist.es6.components.mgt-teams-channel-picker.src.components.mgt-teams-channel-picker 55% 100% 0 ➖
mgt-components.dist.es6.components.mgt-theme-toggle.src.components.mgt-theme-toggle 74% 100% 0 ➖
mgt-components.dist.es6.components.mgt-todo.src.components.mgt-todo 80% 100% 0 ✔
mgt-components.dist.es6.components.preview.mgt-search-box.src.components.preview.mgt-search-box 74% 100% 0 ➖
mgt-components.dist.es6.components.preview.mgt-search-results.src.components.preview.mgt-search-results 51% 100% 0 ➖
mgt-components.dist.es6.components.preview.src.components.preview 100% 100% 0 ✔
mgt-components.dist.es6.components.src.components 82% 100% 0 ✔
mgt-components.dist.es6.components.sub-components.mgt-arrow-options.src.components.sub-components.mgt-arrow-options 70% 100% 0 ➖
mgt-components.dist.es6.components.sub-components.mgt-dot-options.src.components.sub-components.mgt-dot-options 28% 100% 0 ❌
mgt-components.dist.es6.components.sub-components.mgt-flyout.src.components.sub-components.mgt-flyout 40% 100% 0 ❌
mgt-components.dist.es6.components.sub-components.mgt-spinner.src.components.sub-components.mgt-spinner 92% 100% 0 ✔
mgt-components.dist.es6.graph.src.graph 36% 100% 0 ❌
mgt-components.dist.es6.src 100% 100% 0 ✔
mgt-components.dist.es6.styles.src.styles 73% 100% 0 ➖
mgt-components.dist.es6.utils.src.utils 46% 100% 0 ❌
mgt-components.src.components 81% 100% 0 ✔
mgt-components.src.components.mgt-contact 68% 83% 0 ➖
mgt-components.src.components.mgt-file 51% 100% 0 ➖
mgt-components.src.components.mgt-file-list 56% 100% 0 ➖
mgt-components.src.components.mgt-file-list.mgt-file-upload 49% 88% 0 ❌
mgt-components.src.components.mgt-messages 66% 100% 0 ➖
mgt-components.src.components.mgt-organization 47% 100% 0 ❌
mgt-components.src.components.mgt-person 84% 69% 0 ✔
mgt-components.src.components.mgt-person-card 66% 47% 0 ➖
mgt-components.src.components.mgt-profile 40% 100% 0 ❌
mgt-components.src.components.mgt-theme-toggle 100% 100% 0 ✔
mgt-components.src.components.sub-components.mgt-flyout 72% 53% 0 ➖
mgt-components.src.components.sub-components.mgt-spinner 100% 100% 0 ✔
mgt-components.src.graph 40% 76% 0 ❌
mgt-components.src.styles 92% 80% 0 ✔
mgt-components.src.utils 82% 47% 0 ✔
mgt-element.dist.es6.components.src.components 74% 83% 0 ➖
mgt-element.dist.es6.mock.src.mock 90% 76% 0 ✔
mgt-element.dist.es6.providers.src.providers 86% 77% 0 ✔
mgt-element.dist.es6.src 91% 80% 0 ✔
mgt-element.dist.es6.utils.src.utils 66% 70% 0 ➖
mgt-element.src 88% 100% 0 ✔
mgt-element.src.components 84% 100% 0 ✔
mgt-element.src.mock 81% 56% 0 ✔
mgt-element.src.providers 80% 85% 0 ✔
mgt-element.src.utils 71% 90% 0 ➖
Summary 57% (25863 / 45135) 69% (520 / 759) 0 ➖

@github-actions GitHub Actions
Copy link

🚀 New react-contoso sample application deployed here

@sebastienlevert sebastienlevert merged commit 7223112 into next/mgt-chat Jan 23, 2024
9 checks passed
@sebastienlevert sebastienlevert deleted the emoji-to-html branch January 23, 2024 04:02
plasne added a commit to plasne/microsoft-graph-toolkit that referenced this pull request Jan 29, 2024
@plasne
Merge pull request #25 from microsoftgraph/next/mgt-chat
cd7dfb9 
feat: transform emoji tags into standard HTML (microsoftgraph#2870)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sebastienlevert sebastienlevert sebastienlevert approved these changes

@gavinbarron gavinbarron gavinbarron approved these changes

Assignees
No one assigned
Labels
Build: React Contoso
Projects
Graph Toolkit
Archived in project
Milestone
Chat - GA
Development

Successfully merging this pull request may close these issues.

[mgt-chat] Support for translation of emoji tags to standard HTML
3 participants
@musale @sebastienlevert @gavinbarron