forked from AkkomaGang/akkoma-fe
Use Marked and marked-mfm for MFM rendering
This commit is contained in:
Sol Fisher Romanoff
parent
5f9e3709b3
commit
83a3b37f1f
3 changed files with 3697 additions and 2789 deletions
|
|
@ -33,6 +33,8 @@
|
||||||
"escape-html": "1.0.3",
|
"escape-html": "1.0.3",
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"localforage": "1.10.0",
|
"localforage": "1.10.0",
|
||||||
|
"marked": "^4.0.17",
|
||||||
|
"marked-mfm": "^0.2.1",
|
||||||
"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",
|
||||||
|
|
|
||||||
|
|
@ -1,286 +1,29 @@
|
||||||
import { defineComponent, h } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import * as mfm from 'mfm-js'
|
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||||
import MentionLink from '../mention_link/mention_link.vue'
|
import { marked } from 'marked'
|
||||||
|
import markedMfm from 'marked-mfm'
|
||||||
function concat (xss) {
|
|
||||||
return ([]).concat(...xss)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'rotate']
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
RichContent
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
status: {
|
status: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
if (!this.status) return null
|
marked.use(markedMfm, {
|
||||||
const ast = mfm.parse(this.status.mfm_content, { fnNameList: MFM_TAGS })
|
mangle: false,
|
||||||
const validTime = (t) => {
|
gfm: false,
|
||||||
if (t == null) return null
|
breaks: true
|
||||||
return t.match(/^[0-9.]+s$/) ? t : null
|
})
|
||||||
}
|
return <RichContent
|
||||||
|
handle-links="true"
|
||||||
const genEl = (ast) => concat(ast.map((token) => {
|
html={marked.parse(this.status.mfm_content)}
|
||||||
switch (token.type) {
|
emoji={this.status.emojis}
|
||||||
case 'text': {
|
class="text media-body"
|
||||||
const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n')
|
/>
|
||||||
|
|
||||||
const res = []
|
|
||||||
for (const t of text.split('\n')) {
|
|
||||||
res.push(h('br'))
|
|
||||||
res.push(t)
|
|
||||||
}
|
|
||||||
res.shift()
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'bold': {
|
|
||||||
return [h('b', genEl(token.children))]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'strike': {
|
|
||||||
return [h('del', genEl(token.children))]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'italic': {
|
|
||||||
return h('i', {
|
|
||||||
style: 'font-style: oblique;'
|
|
||||||
}, genEl(token.children))
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'fn': {
|
|
||||||
// TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる
|
|
||||||
let style
|
|
||||||
switch (token.props.name) {
|
|
||||||
case 'tada': {
|
|
||||||
style = `font-size: 150%;` + 'animation: tada 1s linear infinite both;'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'jelly': {
|
|
||||||
const speed = validTime(token.props.args.speed) || '1s'
|
|
||||||
style = `animation: mfm-rubberBand ${speed} linear infinite both;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'twitch': {
|
|
||||||
const speed = validTime(token.props.args.speed) || '0.5s'
|
|
||||||
style = `animation: mfm-twitch ${speed} ease infinite;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'shake': {
|
|
||||||
const speed = validTime(token.props.args.speed) || '0.5s'
|
|
||||||
style = `animation: mfm-shake ${speed} ease infinite;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'spin': {
|
|
||||||
const direction =
|
|
||||||
token.props.args.left ? 'reverse'
|
|
||||||
: token.props.args.alternate ? 'alternate'
|
|
||||||
: 'normal'
|
|
||||||
const anime =
|
|
||||||
token.props.args.x ? 'mfm-spinX'
|
|
||||||
: token.props.args.y ? 'mfm-spinY'
|
|
||||||
: 'mfm-spin'
|
|
||||||
const speed = validTime(token.props.args.speed) || '1.5s'
|
|
||||||
style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'jump': {
|
|
||||||
style = 'animation: mfm-jump 0.75s linear infinite;'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'bounce': {
|
|
||||||
style = 'animation: mfm-bounce 0.75s linear infinite; transform-origin: center bottom;'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'flip': {
|
|
||||||
const transform =
|
|
||||||
(token.props.args.h && token.props.args.v) ? 'scale(-1, -1)'
|
|
||||||
: token.props.args.v ? 'scaleY(-1)'
|
|
||||||
: 'scaleX(-1)'
|
|
||||||
style = `transform: ${transform};`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'x2': {
|
|
||||||
style = `font-size: 200%;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'x3': {
|
|
||||||
style = `font-size: 400%;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'x4': {
|
|
||||||
style = `font-size: 600%;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'font': {
|
|
||||||
const family =
|
|
||||||
token.props.args.serif ? 'serif'
|
|
||||||
: token.props.args.monospace ? 'monospace'
|
|
||||||
: token.props.args.cursive ? 'cursive'
|
|
||||||
: token.props.args.fantasy ? 'fantasy'
|
|
||||||
: token.props.args.emoji ? 'emoji'
|
|
||||||
: token.props.args.math ? 'math'
|
|
||||||
: null
|
|
||||||
if (family) style = `font-family: ${family};`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'blur': {
|
|
||||||
return h('span', {
|
|
||||||
class: '_mfm_blur_'
|
|
||||||
}, genEl(token.children))
|
|
||||||
}
|
|
||||||
case 'rainbow': {
|
|
||||||
style = 'animation: mfm-rainbow 1s linear infinite;'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case 'rotate': {
|
|
||||||
const degrees = parseInt(token.props.args.deg) || '90'
|
|
||||||
style = `transform: rotate(${degrees}deg); transform-origin: center center;`
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (style == null) {
|
|
||||||
return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']'])
|
|
||||||
} else {
|
|
||||||
return h('span', {
|
|
||||||
style: 'display: inline-block;' + style
|
|
||||||
}, genEl(token.children))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'small': {
|
|
||||||
return [h('small', {
|
|
||||||
style: 'opacity: 0.7;'
|
|
||||||
}, genEl(token.children))]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'center': {
|
|
||||||
return [h('div', {
|
|
||||||
style: 'text-align:center;'
|
|
||||||
}, genEl(token.children))]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'url': {
|
|
||||||
return [h('a', {
|
|
||||||
key: Math.random(),
|
|
||||||
href: token.props.url,
|
|
||||||
rel: 'nofollow noopener'
|
|
||||||
}, token.props.url)]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'link': {
|
|
||||||
console.log(token.props)
|
|
||||||
return [h('a', {
|
|
||||||
key: Math.random(),
|
|
||||||
href: token.props.url,
|
|
||||||
rel: 'nofollow noopener'
|
|
||||||
}, genEl(token.children))]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'mention': {
|
|
||||||
const user = this.status.attentions.find((mention) => `@${mention.screen_name}` === token.props.acct || mention.screen_name === token.props.username)
|
|
||||||
if (user) {
|
|
||||||
return [h(MentionLink, {
|
|
||||||
url: user.statusnet_profile_url,
|
|
||||||
content: token.props.acct,
|
|
||||||
userScreenName: token.props.acct
|
|
||||||
})]
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'hashtag': {
|
|
||||||
return [h('a', {
|
|
||||||
rel: 'noopener noreferrer',
|
|
||||||
target: '_blank',
|
|
||||||
key: token.props.hashtag,
|
|
||||||
href: this.status.tags.find((hash) => hash.name === token.props.hashtag).url
|
|
||||||
}, `#${token.props.hashtag}`)]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'blockCode': {
|
|
||||||
return [h('pre', {
|
|
||||||
key: Math.random(),
|
|
||||||
lang: token.props.lang
|
|
||||||
}, token.props.code)]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'inlineCode': {
|
|
||||||
return [h('code', {
|
|
||||||
key: Math.random(),
|
|
||||||
display: 'inline'
|
|
||||||
}, token.props.code)]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'quote': {
|
|
||||||
if (!this.nowrap) {
|
|
||||||
return [h('div', {
|
|
||||||
class: 'quote'
|
|
||||||
}, genEl(token.children))]
|
|
||||||
} else {
|
|
||||||
return [h('span', {
|
|
||||||
class: 'quote'
|
|
||||||
}, genEl(token.children))]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'emojiCode': {
|
|
||||||
const emoj = this.status.emojis.find((emoji) => emoji.shortcode === token.props.name)
|
|
||||||
if (emoj) {
|
|
||||||
return [h('div', {
|
|
||||||
class: 'still-image emoji img'
|
|
||||||
},
|
|
||||||
[h('img', {
|
|
||||||
key: Math.random(),
|
|
||||||
title: token.props.name,
|
|
||||||
alt: token.props.name,
|
|
||||||
src: this.status.emojis.find((emoji) => emoji.shortcode === token.props.name).static_url
|
|
||||||
})]
|
|
||||||
)]
|
|
||||||
} else {
|
|
||||||
return `:${token.props.name}:`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'unicodeEmoji': {
|
|
||||||
return token.props.emoji
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'math': {
|
|
||||||
return [h('pre', {
|
|
||||||
key: Math.random(),
|
|
||||||
code: token.props.code
|
|
||||||
})]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'mathInline': {
|
|
||||||
return [h('pre', {
|
|
||||||
key: Math.random(),
|
|
||||||
code: token.props.code,
|
|
||||||
inline: true
|
|
||||||
})]
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'search': {
|
|
||||||
return [h('a', {
|
|
||||||
href: `https://www.google.com/search?q=${token.props.query}`
|
|
||||||
}, token.props.content)
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
default: {
|
|
||||||
console.error('unrecognized ast type:', token.type)
|
|
||||||
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
|
|
||||||
// Parse ast to DOM
|
|
||||||
return h('span', genEl(ast))
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue