From bffe140ab0987fb9d83ec961d4f4e458abe2fa5e Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Thu, 12 Oct 2023 12:54:09 +0900
Subject: [PATCH] ruby

---
 .../global/MkMisskeyFlavoredMarkdown.ts       | 27 ++++++++++++++++++-
 .../frontend/src/components/global/MkRuby.vue | 18 +++++++++++++
 packages/frontend/src/scripts/mfm-tags.ts     |  2 +-
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/components/global/MkRuby.vue

diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 25262030d6..57939e2a1d 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -14,6 +14,7 @@ import MkA from '@/components/global/MkA.vue';
 import { host } from '@/config';
 import { defaultStore } from '@/store';
 import { mixEmoji } from '@/scripts/emojiKitchen/emojiMixer';
+import MkRuby from "@/components/global/MkRuby.vue";
 
 const QUOTE_STYLE = `
 display: block;
@@ -327,6 +328,31 @@ export default function(props: {
 						style = useAnim ? `--move-fromX: ${fromX}em; --move-fromY: ${fromY}em; --move-toX: ${toX}em; --move-toY: ${toY}em; animation: ${speed} ${ease} ${delay} infinite ${direction} mfm-move;` : '';
 						break;
 					}
+					case 'ruby': {
+	    				if (token.children.length === 1 ){
+							const base = token.children[0].props.text.split(/[ 　]+/);
+							if (base.length !== 2 ){
+								style = null;
+								break;
+							}
+							return h(MkRuby,{
+								base:base[0],
+								text:base[1]
+							});
+						}else if(token.children.length === 2){
+							console.log(token.children)
+							const base = token.children[0].type !== 'unicodeEmoji' ? token.children[0].props.text : token.children[0].props.emoji;
+							const txt = token.children[1].type !== 'unicodeEmoji' ? token.children[1].props.text : token.children[1].props.emoji;
+							return h(MkRuby,{
+								base:base,
+								basetype:token.children[0].type,
+								text:txt,
+							});
+						}else{
+							style = null;
+							break;
+						}
+					}
 					case 'mix': {
 						const ch = token.children;
 						if (ch.length != 2 || ch.some(c => c.type !== 'unicodeEmoji')) {
@@ -395,7 +421,6 @@ export default function(props: {
 					username: token.props.username,
 				})];
 			}
-
 			case 'hashtag': {
 				return [h(MkA, {
 					key: Math.random(),
diff --git a/packages/frontend/src/components/global/MkRuby.vue b/packages/frontend/src/components/global/MkRuby.vue
new file mode 100644
index 0000000000..0ea808f06d
--- /dev/null
+++ b/packages/frontend/src/components/global/MkRuby.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import MkEmoji from './MkEmoji.vue';
+const props = defineProps<{
+    base: string;
+    text: string;
+    basetype: string;
+}>();
+</script>
+
+<template>
+    <ruby>
+
+        <MkEmoji v-if="basetype === 'unicodeEmoji' " class="emoji" :emoji="base" :normal="true"/>
+        <p v-else >{{base}}</p>
+        <rt>{{text}}</rt>
+    </ruby>
+</template>
diff --git a/packages/frontend/src/scripts/mfm-tags.ts b/packages/frontend/src/scripts/mfm-tags.ts
index 5968a56639..b1055a696b 100644
--- a/packages/frontend/src/scripts/mfm-tags.ts
+++ b/packages/frontend/src/scripts/mfm-tags.ts
@@ -1 +1 @@
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'skew', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'fgg', 'bgg', 'clip', 'move', 'mix'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'skew', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'fgg', 'bgg', 'clip', 'move', 'mix','ruby'];