From ed42c476fb689d868b436921f363fe7f74feadfc Mon Sep 17 00:00:00 2001 From: FloatingGhost Date: Tue, 14 Jun 2022 15:57:02 +0100 Subject: [PATCH 1/3] allow MFM authoring --- index.html | 1 + package.json | 1 + src/components/mfm_content/mfm_content.jsx | 264 ++++++++++++++++++ .../settings_modal/tabs/general_tab.vue | 5 + src/components/status_body/status_body.js | 8 +- src/components/status_body/status_body.scss | 1 + src/components/status_body/status_body.vue | 30 +- src/i18n/en.json | 6 +- src/i18n/ja_pedantic.json | 1 + src/modules/config.js | 1 + src/modules/instance.js | 1 + .../entity_normalizer.service.js | 9 + static/mfm.css | 139 +++++++++ yarn.lock | 12 + 14 files changed, 464 insertions(+), 15 deletions(-) create mode 100644 src/components/mfm_content/mfm_content.jsx create mode 100644 static/mfm.css diff --git a/index.html b/index.html index d1fdd7d4..40db0bbe 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + diff --git a/package.json b/package.json index 58aeb363..405b6fe4 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "escape-html": "1.0.3", "js-cookie": "^3.0.1", "localforage": "1.10.0", + "mfm-js": "^0.22.1", "parse-link-header": "1.0.1", "phoenix": "1.6.2", "punycode.js": "2.1.0", diff --git a/src/components/mfm_content/mfm_content.jsx b/src/components/mfm_content/mfm_content.jsx new file mode 100644 index 00000000..e0ecda20 --- /dev/null +++ b/src/components/mfm_content/mfm_content.jsx @@ -0,0 +1,264 @@ +import { defineComponent, h } from 'vue' +import * as mfm from 'mfm-js' +import MentionLink from '../mention_link/mention_link.vue' +import mention_link from '../mention_link/mention_link' + +function concat (xss) { + return ([]).concat(...xss) +} + +export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate']; + + +export default defineComponent({ + props: { + status: { + type: Object, + required: true + } + }, + + render () { + if (!this.status) return null + const ast = mfm.parse(this.status.mfm_content, { fnNameList: MFM_TAGS }) + const validTime = (t) => { + if (t == null) return null + return t.match(/^[0-9.]+s$/) ? t : null + } + + const genEl = (ast) => concat(ast.map((token) => { + switch (token.type) { + case 'text': { + 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 'sparkle': { + return h(MkSparkle, {}, genEl(token.children)) + } + 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' + })] + } + + case 'link': { + 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('pre', { + key: Math.random(), + code: token.props.code, + inline: true + })] + } + + case 'quote': { + if (!this.nowrap) { + return [h('div', { + class: 'quote' + }, genEl(token.children))] + } else { + return [h('span', { + class: 'quote' + }, genEl(token.children))] + } + } + + case 'emojiCode': { + 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 + })] + )] + } + + case 'unicodeEmoji': { + return token.props.emoji + } + + default: { + console.error('unrecognized ast type:', token.type) + + return [] + } + } + })) + + // Parse ast to DOM + return h('span', genEl(ast)) + } +}) diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 825ac06a..f2d332ce 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -99,6 +99,11 @@ {{ $t('settings.sensitive_if_subject') }} +
  • + + {{ $t('settings.render_mfm') }} + +
  • { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index d88a6c5e..3c1e0bdc 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,6 +62,7 @@ display: flex; flex-direction: column; flex-wrap: nowrap; + overflow: hidden; &.-tall-status { position: relative; diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 976fe98c..5a069557 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -41,18 +41,26 @@ > {{ $t("general.show_more") }} - - + > + + +