文字を重ねるMFMを追加

CHANGELOG.md

@@ -22,6 +22,9 @@
 - Enhance: 映像・音声の再生にブラウザのネイティブプレイヤーを使用できるように
 - Enhance: 映像・音声の再生メニューに「再生速度」「ループ再生」「ピクチャインピクチャ」を追加
 - Enhance: 映像・音声の再生にキーボードショートカットが使えるように
+- Enhance: 新しいMFM`$[overlap ... ...]`を追加
+  - 要素を下から上に重ねて表示します
+  - 要素はデフォルトでは空白区切りです。`.SEP`属性で区切り文字を`space`（空白）、`lf`（改行）、`semicolon`、`comma`から選べます。
 - Enhance: ノートについているリアクションの「もっと！」から、リアクションの一覧を表示できるように
 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
 - Fix: 周年の実績が閏年を考慮しない問題を修正

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -70,6 +70,25 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 		return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
 	};
 
+	const SEP = {
+		space: ' ',
+		lf: '\n',
+		comma: ',',
+		semicolon: ';',
+	} as const;
+	const separate = (ast: mfm.MfmNode[], sep: keyof typeof SEP = 'space'): mfm.MfmNode[][] => {
+		const tmp: mfm.MfmNode[][] = [[]];
+		for (const node of ast) {
+			if (node.type === 'text') {
+				const texts = node.props.text.split(SEP[sep]).map(t => [mfm.TEXT(t)]);
+				tmp.at(-1).push(texts[0][0]);
+				tmp.push(...texts.slice(1));
+			} else tmp.at(-1).push(node);
+		}
+		console.log(tmp);
+		return tmp;
+	};
+
 	const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
 
 	/**
@@ -307,6 +326,14 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 							}),
 						]);
 					}
+					case 'overlap': {
+						const children = separate(token.children, token.props.args.SEP);
+						return h('span', { style: 'position: relative;' }, children.map(
+							(v, i) => i === children.length - 1
+								? h('span', { style: 'position: relative;' }, genEl(v, scale))
+								: h('span', { style: 'position: absolute;' }, genEl(v, scale))
+						));
+					}
 					case 'clickable': {
 						return h('span', { onClick(ev: MouseEvent): void {
 							ev.stopPropagation();

packages/frontend/src/const.ts

@@ -109,7 +109,7 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime', 'overlap'];
 export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
 	tada: ['speed=', 'delay='],
 	jelly: ['speed=', 'delay='],
@@ -133,4 +133,5 @@ export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
 	rotate: ['deg='],
 	ruby: [],
 	unixtime: [],
+	overlap: ['SEP='],
 };