From bda433b00634fd0c029c17d4544c05fc26b25a9e Mon Sep 17 00:00:00 2001
From: solidsanek <solidsanek@noreply.akkoma>
Date: Sat, 29 Oct 2022 20:50:31 +0000
Subject: [PATCH] Add mfm autocomplete (#183)

I thought it could be neat to have an autocomplete like Misskey has for MFM.

A condition was removed that prevented autocomplete to actually autocomplete stuff when only the first character was entered. It doesn't affect the other autocompletes since none of them display their elements if nothing was actually searched. (in that case MFM returns the full list of elements)

Co-authored-by: solidsanek <solidsanek@outerheaven.club>
Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/183
Reviewed-by: floatingghost <hannah@coffee-and-dreams.uk>
Co-authored-by: solidsanek <solidsanek@noreply.akkoma>
Co-committed-by: solidsanek <solidsanek@noreply.akkoma>
---
 src/components/emoji_input/emoji_input.js  | 3 +--
 src/components/emoji_input/emoji_input.vue | 2 +-
 src/components/emoji_input/suggestor.js    | 7 +++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 78e75880..846274b8 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -178,7 +178,7 @@ const EmojiInput = {
     textAtCaret: async function (newWord) {
       const firstchar = newWord.charAt(0)
       this.suggestions = []
-      if (newWord === firstchar) return
+      if (newWord === firstchar && firstchar !== '$') return
       const matchedSuggestions = await this.suggest(newWord)
       // Async: cancel if textAtCaret has changed during wait
       if (this.textAtCaret !== newWord) return
@@ -277,7 +277,6 @@ const EmojiInput = {
     },
     replaceText (e, suggestion) {
       const len = this.suggestions.length || 0
-      if (this.textAtCaret.length === 1) { return }
       if (len > 0 || suggestion) {
         const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
         const replacement = chosenSuggestion.replacement
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 7d95ab7e..078253c2 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -42,7 +42,7 @@
           :class="{ highlighted: index === highlighted }"
           @click.stop.prevent="onClick($event, suggestion)"
         >
-          <span class="image">
+          <span v-if="!suggestion.mfm" class="image">
             <img
               v-if="suggestion.img"
               :src="suggestion.img"
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index e8efbd1e..a0fe7a5b 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -1,3 +1,6 @@
+const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
+  .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
+
 /**
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
@@ -21,6 +24,10 @@ export default data => {
     if (firstChar === '@' && usersCurry) {
       return usersCurry(input)
     }
+    if (firstChar === '$') {
+      return MFM_TAGS
+        .filter(({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1)
+    }
     return []
   }
 }