Add emoji autocompletion

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

Author: skjnldsv

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
 	globals: {
+		EMOJIS: true,
 		SCOPE_VERSION: true,
 		TRANSLATIONS: true,
 		oc_userconfig: true

package-lock.json

@@ -83,6 +83,7 @@
 		"cypress": "^6.5.0",
 		"cypress-visual-regression": "^1.5.0",
 		"cypress-vue-unit-test": "^3.5.1",
+		"emoji-datasource": "^6.0.0",
 		"eslint": "^6.8.0",
 		"eslint-config-standard": "^14.1.1",
 		"eslint-loader": "^4.0.2",

package.json

@@ -193,7 +193,7 @@ export default {
 	data() {
 		return {
 			tribute: null,
-			options: {
+			autocompleteOptions: {
 				fillAttr: 'id',
 				// Search against id and label (display name)
 				lookup: result => `${result.id} ${result.label}`,
@@ -208,6 +208,21 @@ export default {
 				// Autocompletion results
 				values: this.debouncedAutoComplete,
 			},
+			emojiOptions: {
+				trigger: ':',
+				// Search against id and label (display name)
+				lookup: result => result.short_names.join(' '),
+				// Where to inject the menu popup
+				menuContainer: this.menuContainer,
+				// Popup mention autocompletion templates
+				menuItemTemplate: item => item.original.value,
+				// Hide if no results
+				noMatchTemplate: () => '<span class="hidden"></span>',
+				// Inner display of mentions, display raw emoji
+				selectTemplate: item => item.original.value,
+				// Autocompletion results
+				values: EMOJIS,
+			},
 
 			// Represent the raw untrimmed text of the contenteditable
 			// serves no other purpose than to check whether the
@@ -276,8 +291,11 @@ export default {
 	},
 
 	mounted() {
-		this.tribute = new Tribute(this.options)
-		this.tribute.attach(this.$el)
+		this.autocompleteTribute = new Tribute(this.autocompleteOptions)
+		this.autocompleteTribute.attach(this.$el)
+
+		this.emojiTribute = new Tribute(this.emojiOptions)
+		this.emojiTribute.attach(this.$el)
 
 		// Update default value
 		this.updateContent(this.value)
@@ -287,8 +305,11 @@ export default {
 		this.$refs.contenteditable.contentEditable = this.contenteditable
 	},
 	beforeDestroy() {
-		if (this.tribute) {
-			this.tribute.detach(this.$el)
+		if (this.autocompleteTribute) {
+			this.autocompleteTribute.detach(this.$el)
+		}
+		if (this.emojiTribute) {
+			this.emojiTribute.detach(this.$el)
 		}
 	},
 
@@ -421,7 +442,8 @@ export default {
 		onEnter(event) {
 			// Prevent submitting if autocompletion menu
 			// is opened or length is over maxlength
-			if (this.multiline || this.isOverMaxlength || this.tribute.isActive) {
+			if (this.multiline || this.isOverMaxlength
+				|| this.autocompleteTribute.isActive || this.emojiTribute.isActive) {
 				return
 			}
 

src/components/RichContenteditable/RichContenteditable.vue

@@ -11,6 +11,30 @@ const IconfontPlugin = require('iconfont-plugin-webpack')
 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')
@@ -149,6 +173,7 @@ module.exports = {
 		new DefinePlugin({
 			SCOPE_VERSION,
 			TRANSLATIONS: JSON.stringify(translations),
+			EMOJIS: JSON.stringify(EMOJIS),
 		}),
 	],
 	resolve: {