From 2b371dad05affcd93be93c6fb3cac2bca566666d Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Fri, 24 Mar 2023 07:26:31 +0100 Subject: [PATCH 1/2] fix(NcRichContenteditable): Fix tribute emoji complete interfering unexpectedly aka. Cocos Island Meme Signed-off-by: Joas Schilling --- .../NcRichContenteditable.vue | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index 5015cafec5..7482d72a75 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', 'P', 'S', '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) From c1b9a2139f7c71ade762171bc8d207f4c0005d4d Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Fri, 24 Mar 2023 08:56:09 +0100 Subject: [PATCH 2/2] fix(NcRichContenteditable): Also fix lowercase character text smiles Signed-off-by: Joas Schilling --- src/components/NcRichContenteditable/NcRichContenteditable.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index 7482d72a75..b9a690ab77 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue @@ -418,7 +418,7 @@ export default { * 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', 'P', 'S', 'X', ')', '(', '/'] + const smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/'] this.textSmiles = [] smilesCharacters.forEach((char) => { this.textSmiles.push(':' + char)