feat(rich-text-editor): DLT-2116 enable emoji searching by name and keyword #1
Conversation
Signed-off-by: Julio Ortega <[email protected]>
Signed-off-by: Julio Ortega <[email protected]>
Signed-off-by: Julio Ortega <[email protected]>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Enhanced emoji suggestion functionality in the rich text editor for both Vue 2 and Vue 3 versions.
- Added keyword and name-based emoji searching in
packages/dialtone-vue2/components/rich_text_editor/extensions/emoji/suggestion.jsand Vue 3 equivalent - Implemented a 20-result suggestion limit to improve performance
- Updated filtering logic to accommodate new search capabilities
- Changes are identical in both Vue 2 and Vue 3 files
2 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings
| return false; | ||
| }); | ||
| return filteredEmoji.map(item => { return { code: item.shortname }; }); | ||
| query = query.toLowerCase(); |
There was a problem hiding this comment.
style: Reassigning function parameter. Consider using a new variable name
| const filteredEmoji = emojiList | ||
| .filter( | ||
| item => [ | ||
| item.name, | ||
| item.shortname.replaceAll(':', ''), | ||
| ...item.keywords, | ||
| ].some(text => text.startsWith(query)), | ||
| ).splice(0, suggestionLimit); |
There was a problem hiding this comment.
style: This filtering could be expensive for large emoji lists. Consider memoization or indexing for better performance
| .filter( | ||
| item => [ | ||
| item.name, | ||
| item.shortname.replaceAll(':', ''), |
There was a problem hiding this comment.
style: replaceAll might not be supported in all environments. Consider using replace with regex
| return false; | ||
| }); | ||
| return filteredEmoji.map(item => { return { code: item.shortname }; }); | ||
| query = query.toLowerCase(); |
There was a problem hiding this comment.
style: Reassigning function parameter. Consider using a new variable name
| const filteredEmoji = emojiList | ||
| .filter( | ||
| item => [ | ||
| item.name, | ||
| item.shortname.replaceAll(':', ''), | ||
| ...item.keywords, | ||
| ].some(text => text.startsWith(query)), | ||
| ).splice(0, suggestionLimit); |
There was a problem hiding this comment.
style: This filtering logic might be computationally expensive for large emoji lists. Consider optimizing if performance issues arise
| .filter( | ||
| item => [ | ||
| item.name, | ||
| item.shortname.replaceAll(':', ''), |
There was a problem hiding this comment.
style: replaceAll may not be supported in all browsers. Consider using replace with a regex for better compatibility
Enable emoji searching by name and keyword
Obligatory GIF (super important!)
🛠️ Type Of Change
These types will increment the version number on release:
📖 Jira Ticket
https://dialpad.atlassian.net/browse/DLT-2116
📖 Description
suggestionLimitto limit the results to 20, this hugely improves the performance.💡 Context
📝 Checklist
For all PRs:
For all Vue changes:
./scripts/dialtone-vue-sync.shscript. Read docs here: Dialtone Vue Sync Script🔮 Next Steps
Release, update and test on product
📷 Screenshots / GIFs