Merge pull request 'Fix code blocks not working in MFM' (#96) from sfr/pleroma-fe:fix/mfm into develop

Reviewed-on: AkkomaGang/pleroma-fe#96

build/webpack.base.conf.js

@@ -30,7 +30,7 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.vue'],
+    extensions: ['.js', '.jsx', '.vue', '.mjs'],
     modules: [
       path.join(__dirname, '../node_modules')
     ],
@@ -68,6 +68,11 @@ module.exports = {
           path.resolve(__dirname, '../src/i18n')
         ]
       },
+      {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: "javascript/auto"
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

package.json

@@ -34,8 +34,7 @@
     "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
     "marked": "^4.0.17",
-    "marked-mfm": "^0.4.0",
-    "mfm-js": "^0.22.1",
+    "marked-mfm": "^0.5.0",
     "parse-link-header": "1.0.1",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
@@ -57,7 +56,7 @@
     "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "^3.1.0",
-    "@vue/test-utils": "2.0.0-rc.17",
+    "@vue/test-utils": "^2.0.2",
     "autoprefixer": "6.7.7",
     "babel-eslint": "7.2.3",
     "babel-loader": "8.2.4",

src/components/rich_content/rich_content.jsx

@@ -124,6 +124,14 @@ export default {
     }
 
     const renderMisskeyMarkdown = (content) => {
+      // Untangle code blocks from <br> tags
+      const codeblocks = content.match(/(<br\/>)?(~~~|```)\w*<br\/>.+?<br\/>\2\1?/g)
+      if (codeblocks) {
+        codeblocks.forEach((pre) => {
+          content = content.replace(pre, pre.replaceAll('<br/>', '\n'))
+        })
+      }
+
       marked.use(markedMfm, {
         mangle: false,
         gfm: false,

src/components/status/status.js

@@ -277,6 +277,22 @@ const Status = {
 
       return mentions
     },
+    mentionsMutedUser () {
+      // XXX: doesn't work on domain blocks, because users from blocked domains
+      // don't appear in `attentions' and therefore cannot be filtered.
+      let mentions = false
+
+      // find if user in mentions list is blocked
+      this.status.attentions.forEach((attn) => {
+        if (attn.id === this.currentUser.id) return
+        const relationship = this.$store.getters.relationship(attn.id)
+        if (relationship.muting) {
+          mentions = true
+        }
+      })
+
+      return mentions
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const reasonsToMute = this.userIsMuted ||
@@ -287,7 +303,9 @@ const Status = {
         // bot status
         (this.muteBotStatuses && this.botStatus && !this.compact) ||
         // mentions blocked user
-        this.mentionsBlockedUser
+        this.mentionsBlockedUser ||
+        // mentions muted user
+        this.mentionsMutedUser
       return !this.unmuted && !this.shouldNotMute && reasonsToMute
     },
     userIsMuted () {
@@ -340,7 +358,7 @@ const Status = {
       return (!this.shouldNotMute) && (
         (this.muted && this.hideFilteredStatuses) ||
         (this.userIsMuted && this.hideMutedUsers) ||
-        (this.status.thread_muted && this.hideMutedThreads) ||
+        ((this.status.thread_muted || this.mentionsMutedUser) && this.hideMutedThreads) ||
         (this.muteWordHits.length > 0 && this.hideWordFilteredPosts) ||
         (this.mentionsBlockedUser && this.hideThreadsWithBlockedUsers)
       )

src/components/status_body/status_body.scss

@@ -157,16 +157,19 @@
 
     --emoji-size: 16px;
 
-    & .body,
+    & .body:not(:active),
     & .attachments {
       max-height: 3.25em;
     }
 
     .body {
-      overflow: hidden;
       white-space: normal;
       min-width: 5em;
       flex: 5 1 auto;
+    }
+
+    .body:not(:active) {
+      overflow: hidden;
       mask-size: auto 3.5em, auto auto;
       mask-position: 0 0, 0 0;
       mask-repeat: repeat-x, repeat;

src/i18n/ca.json

@@ -23,7 +23,7 @@
                 "media_removal_desc": "Aquesta instància elimina els adjunts multimèdia dels apunts de les següents instàncies:",
                 "not_applicable": "N/A",
                 "quarantine": "Quarantena",
-                "quarantine_desc": "Aquesta instància només enviarà entrades públiques a les següents instàncies:",
+                "quarantine_desc": "Aquesta instància no enviarà apunts a les següents instàncies:",
                 "reason": "Motiu",
                 "reject": "Rebutja",
                 "reject_desc": "Aquesta instància no acceptarà missatges de les següents instàncies:",

src/i18n/en.json

@@ -23,7 +23,7 @@
                 "media_removal_desc": "This instance removes media from posts on the following instances:",
                 "not_applicable": "N/A",
                 "quarantine": "Quarantine",
-                "quarantine_desc": "This instance will send only public posts to the following instances:",
+                "quarantine_desc": "This instance will not send posts to the following instances:",
                 "reason": "Reason",
                 "reject": "Reject",
                 "reject_desc": "This instance will not accept messages from the following instances:",

src/modules/lists.js

@@ -57,12 +57,16 @@ const actions = {
     commit('setList', { id, title })
   },
   setListAccounts ({ rootState, commit }, { id, accountIds }) {
+    const saved = rootState.lists.allListsObject[id].accountIds
+    const added = accountIds.filter(id => !saved.includes(id))
+    const removed = saved.filter(id => !accountIds.includes(id))
     commit('setListAccounts', { id, accountIds })
-    rootState.api.backendInteractor.addAccountsToList({ id, accountIds })
-    rootState.api.backendInteractor.removeAccountsFromList({
-      id,
-      accountIds: rootState.lists.allListsObject[id].accountIds.filter(id => !accountIds.includes(id))
-    })
+    if (added.length > 0) {
+      rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
+    }
+    if (removed.length > 0) {
+      rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
+    }
   },
   deleteList ({ rootState, commit }, { id }) {
     rootState.api.backendInteractor.deleteList({ id })
@@ -76,7 +80,7 @@ export const getters = {
     return state.allListsObject[id].title
   },
   findListAccounts: state => id => {
-    return state.allListsObject[id].accountIds
+    return [...state.allListsObject[id].accountIds]
   }
 }
 

static/mfm.css

@@ -37,11 +37,11 @@
 }
 
 ._mfm_jump_ {
-  animation: mfm-jump 0.75 linear infinite;
+  animation: mfm-jump 0.75s linear infinite;
 }
 
 ._mfm_bounce_ {
-  animation: mfm-bounce 0.75 linear infinite;
+  animation: mfm-bounce 0.75s linear infinite;
   transform-origin: center bottom;
 }
 
@@ -67,7 +67,13 @@
   font-size: 600%;
 }
 
-/* blur */
+._mfm_blur_ {
+  filter: blur(6px);
+  transition: filter 0.3s
+}
+._mfm_blur_:hover {
+  filter: blur(0px);
+}
 
 ._mfm_rainbow_ {
   animation: mfm-rainbow 1s linear infinite;