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
- }
-})
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 @@
-