allow MFM authoring

2022-06-14 15:57:02 +01:00 · 2022-06-14 15:57:02 +01:00 · ed42c476fb
commit ed42c476fb
parent 8f1aaf617a
14 changed files with 464 additions and 15 deletions
--- a/src/components/mfm_content/mfm_content.jsx
+++ 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))
+  }
+})
--- 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') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting path="renderMisskeyMarkdown">
+            {{ $t('settings.render_mfm') }}
+          </BooleanSetting>
+        </li>
        <li>
          <BooleanSetting
            path="alwaysShowNewPostButton"
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@ -1,5 +1,6 @@
 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 {
@ -35,9 +36,11 @@ const StatusContent = {
    'toggleShowingLongSubject'
  ],
  data () {
+    const { renderMisskeyMarkdown } = this.$store.getters.mergedConfig
    return {
      postLength: this.status.text.length,
-      parseReadyDone: false
+      parseReadyDone: false,
+      renderMisskeyMarkdown
    }
  },
  computed: {
@ -81,7 +84,8 @@ const StatusContent = {
    ...mapGetters(['mergedConfig'])
  },
  components: {
-    RichContent
+    RichContent,
+    MFMContent
  },
  mounted () {
    this.status.attentions && this.status.attentions.forEach(attn => {
--- 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;
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@ -41,18 +41,26 @@
        >
          {{ $t("general.show_more") }}
        </button>
-        <RichContent
+        <div
          v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
-          :class="{ '-single-line': singleLine }"
-          class="text media-body"
-          :html="status.raw_html"
-          :emoji="status.emojis"
-          :handle-links="true"
-          :greentext="mergedConfig.greentext"
-          :attentions="status.attentions"
-          @parseReady="onParseReady"
-        />
-
+        >
+          <MFMContent
+            v-if="renderMisskeyMarkdown && status.mfm_content"
+            class="RichContent text media-body"
+            :status="status"
+          />
+          <RichContent
+            v-else
+            :class="{ '-single-line': singleLine }"
+            class="text media-body"
+            :html="status.raw_html"
+            :emoji="status.emojis"
+            :handle-links="true"
+            :greentext="mergedConfig.greentext"
+            :attentions="status.attentions"
+            @parseReady="onParseReady"
+          />
+        </div>
        <button
          v-show="hideSubjectStatus"
          class="button-unstyled -link cw-status-hider"
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -209,7 +209,8 @@
      "text/plain": "Plain text",
      "text/html": "HTML",
      "text/markdown": "Markdown",
-      "text/bbcode": "BBCode"
+      "text/bbcode": "BBCode",
+      "text/x.misskeymarkdown": "MFM"
    },
    "content_warning": "Subject (optional)",
    "default": "Just landed in L.A.",
@ -507,6 +508,7 @@
    "post_status_content_type": "Post status content type",
    "sensitive_by_default": "Mark posts as sensitive by default",
    "sensitive_if_subject": "Automatically mark images as sensitive if a subject line is specified",
+    "render_mfm": "Render Misskey Markdown",
    "useStreamingApiWarning": "It's cool use it. If it breaks refresh I guess?",
    "stop_gifs": "Pause animated images until you hover on them",
    "streaming": "Automatically show new posts when scrolled to the top",
@ -840,7 +842,7 @@
    "hide_repeats": "Hide repeats",
    "show_repeats": "Show repeats",
    "domain_muted": "Unblock domain",
-    "mute_domain": "Block domain", 
+    "mute_domain": "Block domain",
    "bot": "Bot",
    "admin_menu": {
      "moderation": "Moderation",
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@ -582,6 +582,7 @@
    "greentext": "引用を緑色で表示",
    "sensitive_by_default": "はじめから投稿をセンシティブとして設定",
    "sensitive_if_subject": "ステータスにサブジェクトをついたらNSFWにする",
+    "render_mfm": "Misskey Markdownを表示",
    "more_settings": "その他の設定",
    "reply_visibility_self_short": "自分宛のリプライを見る",
    "reply_visibility_following_short": "フォローしている人に宛てられたリプライを見る",
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -95,6 +95,7 @@ export const defaultState = {
  virtualScrolling: undefined, // instance default
  sensitiveByDefault: undefined, // instance default
  sensitiveIfSubject: undefined,
+  renderMisskeyMarkdown: undefined,
  conversationDisplay: undefined, // instance default
  conversationTreeAdvanced: undefined, // instance default
  conversationOtherRepliesButton: undefined, // instance default
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -55,6 +55,7 @@ const defaultState = {
  virtualScrolling: true,
  sensitiveByDefault: false,
  sensitiveIfSubject: false,
+  renderMisskeyMarkdown: false,
  conversationDisplay: 'linear',
  conversationTreeAdvanced: false,
  conversationOtherRepliesButton: 'below',
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@ -280,6 +280,15 @@ export const parseStatus = (data) => {
      output.summary = data.spoiler_text
    }

+    if (data.akkoma) {
+      const { akkoma } = data
+      if (akkoma && akkoma.source && akkoma.source.mediaType === 'text/x.misskeymarkdown') {
+        output.mfm_content = akkoma.source.content
+      }
+    } else {
+      output.mfm_content = null
+    }
+
    output.in_reply_to_status_id = data.in_reply_to_id
    output.in_reply_to_user_id = data.in_reply_to_account_id
    output.replies_count = data.replies_count