Use emoji-mart-fast data and functions to retrieve emojis

This brings a unified emoji dataset and unified default and
recent/frequent emojis for both EmojiPicker and emoji autocompletion. It
also brings support for searching for `+1`, `:)` etc.

Signed-off-by: Jonas Meurer <[email protected]>

Author: mejo-

Diff for: package-lock.json

@@ -84,7 +84,6 @@
 		"cypress": "^6.5.0",
 		"cypress-visual-regression": "^1.5.0",
 		"cypress-vue-unit-test": "^3.5.1",
-		"emoji-datasource": "^6.0.0",
 		"eslint": "^7.21.0",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-cypress": "^2.11.1",

Diff for: package.json

@@ -151,7 +151,7 @@ import stringLength from 'string-length'
 import { t } from '../../l10n'
 import AutoCompleteResult from './AutoCompleteResult'
 import richEditor from '../../mixins/richEditor/index'
-import { allEmojis, emojiSearch } from '../../functions/emoji/index'
+import { emojiSearch, addRecent } from '../../functions/emoji'
 
 export default {
 	name: 'RichContenteditable',
@@ -242,13 +242,16 @@ export default {
 				// Where to inject the menu popup
 				menuContainer: this.menuContainer,
 				// Popup mention autocompletion templates
-				menuItemTemplate: item => `${item.original.value} :${item.original.short_name}`,
+				menuItemTemplate: item => `${item.original.native} :${item.original.short_name}`,
 				// Hide if no results
 				noMatchTemplate: () => t('No emojis found'),
 				// Display raw emoji along with its name
-				selectTemplate: item => item.original.value,
+				selectTemplate: (item) => {
+					addRecent(item.original)
+					return item.original.native
+				},
 				// Pass the search results as values
-				values: (text, cb) => cb(emojiSearch(allEmojis, text)),
+				values: (text, cb) => cb(emojiSearch(text)),
 				// Class added to the menu container
 				containerClass: 'tribute-container-emoji',
 				// Class added to each list item

Diff for: src/components/RichContenteditable/RichContenteditable.vue

@@ -20,44 +20,28 @@
  *
  */
 
-export const allEmojis = EMOJIS
+import data from 'emoji-mart-vue-fast/data/all.json'
+import { EmojiIndex } from 'emoji-mart-vue-fast/src'
+import frequently from 'emoji-mart-vue-fast/src/utils/frequently'
 
-/** later
-const DEFAULTS = [
-	'heart',
-	'+1',
-	'-1',
-	'joy',
-	'cry',
-]
- */
+// export const allEmojis = index.buildIndex()
 
 /**
- * @param {Array} searchItems Array of emojis
  * @param {string} query Emoji search string
+ * @param {Number} maxResults Maximum of returned emojis
  * @returns {Array} list of found emojis
  */
-export const emojiSearch = function(searchItems, query) {
-	if (!query) {
-		// Return first five emojis for empty searches
-		return searchItems.slice(0, 5)
+export const emojiSearch = function(query, maxResults = 5) {
+	const index = new EmojiIndex(data)
+	if (query) {
+		return index.search(query, 5) || []
 	}
 
-	// First search for exact matches
-	let results = searchItems.filter(item => item.short_names
-		.filter(name => name.toLowerCase() === query.toLowerCase()).length > 0)
-
-	// Second search for matches that start with query string
-	results = [...new Set([...results, ...searchItems.filter(item => item.short_names
-		.filter(name => name.toLowerCase().startsWith(query.toLowerCase())).length > 0)])]
-
-	// If we still don't have enough, search for general matches
-	if (results.length < 5) {
-		results = [...new Set([...results, ...searchItems.filter(item => item.short_names
-			.filter(name => name.toLowerCase().includes(query.toLowerCase())).length > 0)])]
-	}
+	return frequently.get(5).map((id) => index.emoji(id)) || []
+}
 
-	return results.slice(0, 5)
+export const addRecent = function(id) {
+	frequently.add(id)
 }
 
-export default { allEmojis, emojiSearch }
+export default { emojiSearch, addRecent }

Diff for: src/functions/emoji/emoji.js

@@ -20,7 +20,6 @@
  *
  */
 
-import { allEmojis, emojiSearch } from './emoji'
+import { emojiSearch, addRecent } from './emoji'
 
-export { allEmojis, emojiSearch }
-export default { allEmojis, emojiSearch }
+export { emojiSearch, addRecent }

Diff for: src/functions/emoji/index.js

@@ -10,30 +10,6 @@ const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-m
 const nodeExternals = require('webpack-node-externals')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 
-const emojisData = require('emoji-datasource/emoji.json')
-const EMOJIS = emojisData
-	.filter(emoji => emoji.short_name)
-	.reduce((accumulator, current) => {
-		// Add current emoji
-		const emoji = Object.assign({}, current)
-		emoji.value = String.fromCodePoint(...emoji.unified.split('-').map(hex => '0x' + hex))
-		delete emoji.skin_variations
-		accumulator.push(emoji)
-
-		// Handle variations, take the current emoji and replace with variations
-		if (current.skin_variations) {
-			Object.values(current.skin_variations).forEach((variation) => {
-				const emojiVariation = Object.assign({}, current, variation)
-				emojiVariation.value = String.fromCodePoint(...emojiVariation.unified.split('-').map(hex => '0x' + hex))
-				delete emojiVariation.skin_variations
-				accumulator.push(emojiVariation)
-			})
-		}
-		return accumulator
-	}, [])
-
-console.info('Emojis count:', EMOJIS.length, typeof emojisData)
-
 // scope variable
 // fallback for cypress testing
 const appVersion = JSON.stringify(process.env.npm_package_version || 'nextcloud-vue')
@@ -180,7 +156,6 @@ module.exports = {
 		new DefinePlugin({
 			SCOPE_VERSION,
 			TRANSLATIONS: JSON.stringify(translations),
-			EMOJIS: JSON.stringify(EMOJIS),
 		}),
 	],
 	resolve: {