Move MFM content rendering to RichContent

package.json

@@ -34,7 +34,7 @@
     "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
     "marked": "^4.0.17",
-    "marked-mfm": "^0.2.1",
+    "marked-mfm": "^0.4.0",
     "mfm-js": "^0.22.1",
     "parse-link-header": "1.0.1",
     "phoenix": "1.6.2",

src/components/mfm_content/mfm_content.jsx

@@ -1,29 +0,0 @@
-import { defineComponent } from 'vue'
-import RichContent from 'src/components/rich_content/rich_content.jsx'
-import { marked } from 'marked'
-import markedMfm from 'marked-mfm'
-
-export default defineComponent({
-  components: {
-    RichContent
-  },
-  props: {
-    status: {
-      type: Object,
-      required: true
-    }
-  },
-  render () {
-    marked.use(markedMfm, {
-      mangle: false,
-      gfm: false,
-      breaks: true
-    })
-    return <RichContent
-      handle-links="true"
-      html={marked.parse(this.status.mfm_content)}
-      emoji={this.status.emojis}
-      class="text media-body"
-    />
-  }
-})

src/components/rich_content/rich_content.jsx

@@ -2,6 +2,8 @@ import { unescape, flattenDeep } from 'lodash'
 import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
+import { marked } from 'marked'
+import markedMfm from 'marked-mfm'
 import StillImage from 'src/components/still-image/still-image.vue'
 import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
 import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
@@ -58,6 +60,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Render Misskey Markdown
+    mfm: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -112,6 +120,15 @@ export default {
       }
     }
 
+    const renderMisskeyMarkdown = (content) => {
+      marked.use(markedMfm, {
+        mangle: false,
+        gfm: false,
+        breaks: true
+      })
+      return marked.parse(content)
+    }
+
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
@@ -249,7 +266,7 @@ export default {
       return item
     }
 
-    const pass1 = convertHtmlToTree(html).map(processItem)
+    const pass1 = convertHtmlToTree(this.mfm ? renderMisskeyMarkdown(html) : html).map(processItem)
     const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...

src/components/status_body/status_body.js

@@ -1,6 +1,5 @@
 import fileType from 'src/services/file_type/file_type.service'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import MFMContent from 'src/components/mfm_content/mfm_content.jsx'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -84,8 +83,7 @@ const StatusContent = {
     ...mapGetters(['mergedConfig'])
   },
   components: {
-    RichContent,
-    MFMContent
+    RichContent
   },
   mounted () {
     this.status.attentions && this.status.attentions.forEach(attn => {

src/components/status_body/status_body.vue

@@ -44,18 +44,13 @@
         <div
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
         >
-          <MFMContent
-            v-if="renderMisskeyMarkdown && status.mfm_content"
-            class="RichContent text media-body mfm-post-content"
-            :status="status"
-          />
           <RichContent
-            v-else
             :class="{ '-single-line': singleLine }"
             class="text media-body"
             :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
+            :mfm="renderMisskeyMarkdown && (status.content_type === 'text/x.misskeymarkdown')"
             :greentext="mergedConfig.greentext"
             :attentions="status.attentions"
             @parseReady="onParseReady"

yarn.lock

@@ -7443,10 +7443,10 @@ markdown-table@^2.0.0:
   dependencies:
     repeat-string "^1.0.0"
 
-marked-mfm@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/marked-mfm/-/marked-mfm-0.2.1.tgz#0956f469111772da92a4ed2bb33c7c4d1b2c7040"
-  integrity sha512-sD4NMZz8BUa+gyyqEqZN+vgQCdP/kvShr8Etsv5q5TdUTbENSXLL8oNGHMTeLt+bxDzAaHY02cAwXidXWNXriw==
+marked-mfm@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/marked-mfm/-/marked-mfm-0.4.0.tgz#d3094c42daaa57b1b0b263278633de82ebf62396"
+  integrity sha512-2ZdBHGOV7BFJUcQNLp/jjwEE2IT1O5d1H7cd4dGeuOBI1nivuBCv1Azt7fbRlygfUSQ2rgGtFZ1ZbrP4dRhh3A==
   dependencies:
     "@babel/core" "^7.18.6"
     "@babel/preset-env" "^7.18.6"