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", "js-cookie": "^3.0.1",
"localforage": "1.10.0", "localforage": "1.10.0",
"marked": "^4.0.17", "marked": "^4.0.17",
"marked-mfm": "^0.2.1", "marked-mfm": "^0.4.0",
"mfm-js": "^0.22.1", "mfm-js": "^0.22.1",
"parse-link-header": "1.0.1", "parse-link-header": "1.0.1",
"phoenix": "1.6.2", "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 { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.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 { 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 StillImage from 'src/components/still-image/still-image.vue'
import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue' import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue' import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
@ -58,6 +60,12 @@ export default {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
// Render Misskey Markdown
mfm: {
required: false,
type: Boolean,
default: false
} }
}, },
// NEVER EVER TOUCH DATA INSIDE RENDER // 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 // Processor to use with html_tree_converter
const processItem = (item, index, array, what) => { const processItem = (item, index, array, what) => {
// Handle text nodes - just add emoji // Handle text nodes - just add emoji
@ -249,7 +266,7 @@ export default {
return item 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() const pass2 = [...pass1].reverse().map(processItemReverse).reverse()
// DO NOT USE SLOTS they cause a re-render feedback loop here. // DO NOT USE SLOTS they cause a re-render feedback loop here.
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ... // 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 fileType from 'src/services/file_type/file_type.service'
import RichContent from 'src/components/rich_content/rich_content.jsx' 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 { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
@ -84,8 +83,7 @@ const StatusContent = {
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
}, },
components: { components: {
RichContent, RichContent
MFMContent
}, },
mounted () { mounted () {
this.status.attentions && this.status.attentions.forEach(attn => { this.status.attentions && this.status.attentions.forEach(attn => {

View file

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

View file

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