frontend: Implement MFM blur function (#24)

* frontend: Allow signed numbers in MFM function paramteres * frontend: Implement MFM blur function
pbzweihander · Sep 4, 2023 · cbec4e1 · cbec4e1
1 parent e61c0b6
commit cbec4e1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/components/mfm/MfmFunction.tsx b/frontend/src/components/mfm/MfmFunction.tsx
@@ -5,7 +5,7 @@ import { CustomEmojiMapper } from "./Mfm";
 import MfmRenderer from "./MfmRenderer";
 
 function parseFloatWithDefault(value: string | true | undefined, defaultValue: string): string {
-  if (typeof value !== "string" || !/^\d+(:?\.\d+)?$/.test(value)) {
+  if (typeof value !== "string" || !/^[-+]?\d+(:?\.\d+)?$/.test(value)) {
     return defaultValue;
   }
   return value;
@@ -49,6 +49,10 @@ export default function MfmFunction(
       style = { transform: `rotate(${degrees}deg)` };
       break;
     }
+    case "blur": {
+      className = "transition duration-300 blur hover:blur-none";
+      break;
+    }
   }
 
   if (!className && !style) {

diff --git a/frontend/src/stories/Mfm.stories.ts b/frontend/src/stories/Mfm.stories.ts
@@ -3,6 +3,7 @@ import React from "react";
 
 import Mfm from "@/components/mfm/Mfm";
 
+import foodTestdata from "./assets/mfm-food.json";
 import transformsTestdata from "./assets/mfm-transforms.json";
 import plachta from "./assets/plachta.png";
 import recruitSimulatorTestdata from "./assets/recruit.json";
@@ -75,3 +76,7 @@ export const Transforms: Story = {
 export const RecruitSimulator: Story = {
   args: recruitSimulatorTestdata,
 };
+
+export const Food: Story = {
+  args: foodTestdata,
+};
diff --git a/frontend/src/stories/assets/mfm-food.json b/frontend/src/stories/assets/mfm-food.json
@@ -0,0 +1 @@
+{"content": "<center>\n오늘은 맛있는\n$[x2 $[position.x=1.8 $[blur $[position.y=0 $[x2 🍕]]]$[position.x=-3.45 $[sparkle $[position.y=0 $[x2 🍕]]]]]]\n**$[scale.x=1.41,y=1.4 피자]**\n</center>\n\n<center><small>#먹을거뽑기 : https://k.lapy.link/play/9gq5ly1t8a</small></center>"}