frontend: Implement MFM function x2, x3, x4

frontend/src/components/mfm/MfmEmoji.tsx

@@ -7,7 +7,7 @@ type Props =
   | { custom: true; code: string; srcMapper?: CustomEmojiMapper };
 
 export default function MfmEmoji(props: Props) {
-  let containerClassName = "inline-block align-bottom overflow-hidden h-6";
+  let containerClassName = "inline-block align-bottom overflow-hidden min-w-max h-[1.5em]";
   let id;
   let src;
   let alt;

frontend/src/components/mfm/MfmFunction.tsx

@@ -0,0 +1,34 @@
+import { MfmFn, MfmNode } from "mfm-js";
+
+import { CustomEmojiMapper } from "./Mfm";
+import MfmRenderer from "./MfmRenderer";
+
+export default function MfmFunction(
+  { props, children, customEmojiMapper }: MfmFn & { customEmojiMapper?: CustomEmojiMapper },
+) {
+  switch (props.name) {
+    case "x2":
+      return <MfmFnZoom scale={2} nodes={children} customEmojiMapper={customEmojiMapper} />;
+    case "x3":
+      return <MfmFnZoom scale={3} nodes={children} customEmojiMapper={customEmojiMapper} />;
+    case "x4":
+      return <MfmFnZoom scale={4} nodes={children} customEmojiMapper={customEmojiMapper} />;
+    default:
+      return <MfmRenderer nodes={children} customEmojiMapper={customEmojiMapper} />;
+  }
+}
+
+function MfmFnZoom(
+  { scale, nodes, customEmojiMapper }: {
+    scale: number;
+    nodes: MfmNode[];
+    customEmojiMapper?: CustomEmojiMapper;
+  },
+) {
+  const classNameMap = ["", "", "text-[2em]", "text-[3em]", "text-[4em]"];
+  return (
+    <span className={classNameMap[scale]}>
+      <MfmRenderer nodes={nodes} customEmojiMapper={customEmojiMapper} />
+    </span>
+  );
+}

frontend/src/components/mfm/MfmRenderer.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 
 import type { CustomEmojiMapper } from "./Mfm";
 import MfmEmoji from "./MfmEmoji";
+import MfmFunction from "./MfmFunction";
 
 interface Props {
   nodes: Mfm.MfmNode[];
@@ -73,6 +74,8 @@ export default function MfmRenderer({ nodes, customEmojiMapper }: Props) {
         return <MfmEmoji key={idx} code={node.props.emoji} />;
       case "emojiCode":
         return <MfmEmoji key={idx} custom code={node.props.name} srcMapper={customEmojiMapper} />;
+      case "fn":
+        return <MfmFunction key={idx} {...node} customEmojiMapper={customEmojiMapper} />;
       default:
         return null;
     }
@@ -90,7 +93,7 @@ function MfmText({ text }: Mfm.MfmText["props"]) {
     rendered.push(line);
   });
 
-  return <span>{rendered}</span>;
+  return <>{rendered}</>;
 }
 
 function MfmMention({ username, host }: Mfm.MfmMention["props"]) {
@@ -117,7 +120,7 @@ function MfmUrlLike(props: (Mfm.MfmUrl | Mfm.MfmLink) & { customEmojiMapper?: Cu
     text = props.props.url;
     href = props.props.url;
   } else {
-    text = <MfmRenderer nodes={props.children} />;
+    text = <MfmRenderer nodes={props.children} customEmojiMapper={props.customEmojiMapper} />;
     href = props.props.url;
   }
 

frontend/src/stories/Mfm.stories.ts

@@ -18,7 +18,7 @@ const meta = {
     Story =>
       React.createElement(
         "div",
-        { className: "border w-[320px] p-2" },
+        { className: "border overflow-hidden w-[320px] p-2" },
         React.createElement(Story),
       ),
   ],
@@ -61,6 +61,12 @@ export const CustomEmojis: Story = {
   },
 };
 
+export const EmojiZoom: Story = {
+  args: {
+    content: ":send_money:\n$[x2 :send_money:]\n$[x3 :send_money:]\n$[x4 :send_money:]",
+  },
+};
+
 export const RecruitSimulator: Story = {
   args: recruitSimulatorTestdata,
 };