From 5e18f1ceebca20e87c2533d68fd7d2bf0a466802 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Sun, 10 Jul 2022 10:39:02 +0300
Subject: [PATCH] Move MFM content rendering to RichContent

---
 package.json                                 |  2 +-
 src/components/mfm_content/mfm_content.jsx   | 29 --------------------
 src/components/rich_content/rich_content.jsx | 19 ++++++++++++-
 src/components/status_body/status_body.js    |  4 +--
 src/components/status_body/status_body.vue   |  7 +----
 yarn.lock                                    |  8 +++---
 6 files changed, 25 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/mfm_content/mfm_content.jsx

diff --git a/package.json b/package.json
index a4d7cc58..1ef35f4a 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/mfm_content/mfm_content.jsx b/src/components/mfm_content/mfm_content.jsx
deleted file mode 100644
index b273e4d2..00000000
--- a/src/components/mfm_content/mfm_content.jsx
+++ /dev/null
@@ -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"
-    />
-  }
-})
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ca075270..1129008d 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/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 -> ...
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 1fe9eb7b..91d795f1 100644
--- a/src/components/status_body/status_body.js
+++ b/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 => {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 7add83aa..439871da 100644
--- a/src/components/status_body/status_body.vue
+++ b/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"
diff --git a/yarn.lock b/yarn.lock
index f9d29f1d..e46558e9 100644
--- a/yarn.lock
+++ b/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"