From 5e18f1ceebca20e87c2533d68fd7d2bf0a466802 Mon Sep 17 00:00:00 2001 From: Sol Fisher Romanoff 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 - } -}) 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 @@
-