Move MFM content rendering to RichContent

This commit is contained in:
Sol Fisher Romanoff 2022-07-10 10:39:02 +03:00
parent 83a3b37f1f
commit 5e18f1ceeb
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
6 changed files with 25 additions and 44 deletions

View file

@ -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",

View file

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

View file

@ -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 -> ...

View file

@ -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 => {

View file

@ -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"

View file

@ -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"