Merge pull request 'Ensure MFM scaling is ignored when rendering is disabled' (#189) from ignore-scale-mfm-disabled into develop

Reviewed-on: AkkomaGang/pleroma-fe#189

src/boot/after_store.js

@@ -148,6 +148,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('showWiderShortcuts')
   copyInstanceOption('showNavShortcuts')
   copyInstanceOption('showPanelNavShortcuts')
+  copyInstanceOption('stopGifs')
   copyInstanceOption('logo')
 
   store.dispatch('setInstanceOption', {

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

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"

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 []
   }
 }

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,4 +1,4 @@
-import { filter, trim } from 'lodash'
+import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@@ -27,13 +27,13 @@ const FilteringTab = {
       get () {
         return this.muteWordsStringLocal
       },
-      set (value) {
+      set: debounce(function (value) {
         this.muteWordsStringLocal = value
         this.$store.dispatch('setOption', {
           name: 'muteWords',
           value: filter(value.split('\n'), (word) => trim(word).length > 0)
         })
-      }
+      }, 500)
     }
   },
   // Updating nested properties

src/components/status_body/status_body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="StatusBody"
-    :class="{ '-compact': compact }"
+    :class="{ '-compact': compact, 'mfm-disabled': !renderMisskeyMarkdown }"
   >
     <div class="body">
       <div

src/components/status_content/status_content.vue

@@ -82,9 +82,16 @@
     }
   }
   &.mfm-disabled {
+    span {
+      font-size: 100% !important;
+    }
     .mfm {
       animation: none !important;
     }
+    .emoji {
+      width: 32px !important;
+      height: 32px !important;
+    }
   }
 }
 

src/modules/config.js

@@ -55,7 +55,7 @@ export const defaultState = {
   alwaysShowNewPostButton: false,
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
-  stopGifs: true,
+  stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',
   notificationVisibility: {