diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index 5015cafec5..b9a690ab77 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -247,6 +247,7 @@ export default {
data() {
return {
+ textSmiles: [],
tribute: null,
autocompleteOptions: {
// Allow spaces in the middle of mentions
@@ -273,16 +274,41 @@ export default {
// Where to inject the menu popup
menuContainer: this.menuContainer,
// Popup mention autocompletion templates
- menuItemTemplate: item => `${item.original.native} :${item.original.short_name}`,
+ menuItemTemplate: item => {
+ if (this.textSmiles.includes(item.original)) {
+ // Display the raw text string for :), :-D, … for non emoji results,
+ // instead of trying to show an image and their name.
+ return item.original
+ }
+
+ return `${item.original.native} :${item.original.short_name}`
+ },
// Hide if no results
noMatchTemplate: () => t('No emoji found'),
// Display raw emoji along with its name
selectTemplate: (item) => {
+ if (this.textSmiles.includes(item.original)) {
+ // Replace the selection with the raw text string for :), :-D, … for non emoji results
+ return item.original
+ }
+
emojiAddRecent(item.original)
return item.original.native
},
// Pass the search results as values
- values: (text, cb) => cb(emojiSearch(text)),
+ values: (text, cb) => {
+ const emojiResults = emojiSearch(text)
+ if (this.textSmiles.includes(':' + text)) {
+ /**
+ * Prepend text smiles to the search results so that Tribute
+ * is not interfering with normal writing, aka. "Cocos Island Meme".
+ * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,
+ * when submitting the input with Enter after writing them
+ */
+ emojiResults.unshift(':' + text)
+ }
+ cb(emojiResults)
+ },
// Class added to the menu container
containerClass: 'tribute-container-emoji',
// Class added to each list item
@@ -388,6 +414,17 @@ export default {
},
mounted() {
+ /**
+ * Populate the list of text smiles we want to offer via Tribute.
+ * We add the colon `:)` and colon-dash `:-)` version for each of them.
+ */
+ const smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']
+ this.textSmiles = []
+ smilesCharacters.forEach((char) => {
+ this.textSmiles.push(':' + char)
+ this.textSmiles.push(':-' + char)
+ })
+
this.autocompleteTribute = new Tribute(this.autocompleteOptions)
this.autocompleteTribute.attach(this.$el)