Allow to add HTML tags to cards (#36)

package.json

@@ -30,6 +30,7 @@
     "@supabase/supabase-js": "^2.38.0",
     "@twa-dev/sdk": "^6.9.0",
     "@types/luxon": "^3.3.2",
+    "@types/sanitize-html": "^2.9.5",
     "colord": "^2.9.3",
     "framer-motion": "^10.16.4",
     "grammy": "^1.19.1",
@@ -45,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.1",
     "react-lines-ellipsis": "^0.15.3",
+    "sanitize-html": "^2.11.0",
     "short-unique-id": "^5.0.3",
     "supabase": "^1.110.1",
     "zod": "^3.22.3"

src/lib/sanitize-html/sanitize.ts

@@ -0,0 +1,10 @@
+import sanitizeHtml from "sanitize-html";
+
+export const sanitize = (text: string) => {
+  return sanitizeHtml(text, {
+    allowedTags: ["small", "a", "big", "br", "b"],
+    allowedAttributes: {
+      a: ["href"],
+    },
+  });
+};

src/screens/deck-review/card-field-view.tsx

@@ -0,0 +1,13 @@
+import { sanitize } from "../../lib/sanitize-html/sanitize.ts";
+import React from "react";
+
+export const CardFieldView = (props: { text: string }) => {
+  const { text } = props;
+  return (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: sanitize(text)
+      }}
+    ></span>
+  );
+};

src/screens/deck-review/card.tsx

@@ -6,6 +6,7 @@ import { observer } from "mobx-react-lite";
 import { CardUnderReviewStore } from "./store/card-under-review-store.ts";
 import { HorizontalDivider } from "../../ui/horizontal-divider.tsx";
 import { CardSpeaker } from "./card-speaker.tsx";
+import { CardFieldView } from "./card-field-view.tsx";
 
 export const cardSize = 310;
 
@@ -44,19 +45,21 @@ export const Card = observer(({ card, style, animate }: Props) => {
         })}
       >
         <div>
-          {card.front} <CardSpeaker card={card} type={"front"} />
+          <CardFieldView text={card.front} />{" "}
+          <CardSpeaker card={card} type={"front"} />
         </div>
         {card.isOpened ? <HorizontalDivider /> : null}
         {card.isOpened ? (
           <div>
-            {card.back} <CardSpeaker card={card} type={"back"} />
+            <CardFieldView text={card.back} />{" "}
+            <CardSpeaker card={card} type={"back"} />
           </div>
         ) : null}
         {card.isOpened && card.example ? (
           <div
             className={css({ fontWeight: 400, fontSize: 14, paddingTop: 8 })}
           >
-            {card.example}
+            <CardFieldView text={card.example} />
           </div>
         ) : null}
       </span>