feat: remove SSR error

PupoSDC · Feb 21, 2024 · 7b3b586 · 7b3b586
1 parent 766aca2
commit 7b3b586
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 12 deletions.
diff --git a/libs/content/question-bank-type/content/B737/B737.06/questions.yaml b/libs/content/question-bank-type/content/B737/B737.06/questions.yaml
@@ -4,7 +4,8 @@
   annexes: []
   learningObjectives:
     - B737.06
-  explanation: ""
+  explanation: |
+    ![B737 Electical System](/content/type/media/ABHHH4RTVH.jpg)
   variant:
     type: simple
     question: Which of the following is NOT powered by the standby Power system?

diff --git a/libs/providers/question-bank/src/executors/question-bank-connect.ts b/libs/providers/question-bank/src/executors/question-bank-connect.ts
@@ -150,6 +150,27 @@ export const connectQuestionBank = ({
         ...q.learningObjectives,
       ]);
     });
+
+    keepUnique(
+      Array.from(q.explanation.matchAll(ANNEX_MATCH), (m) => m[1]),
+    ).forEach((annexId) => {
+      const annex = annexesMap[annexId];
+      if (!annex)
+        throw new Error(
+          "Missing annex " + annexId + " in question Explanation " + q.id,
+        );
+      annex.questions = keepUnique([...annex.docs, q.id]);
+      annex.learningObjectives = keepUnique([
+        ...annex.learningObjectives,
+        ...q.learningObjectives,
+      ]);
+      q.explanation = q.explanation.replaceAll(ANNEX_MATCH, (match, cg1) =>
+        match.replace(
+          `annex:${annexId}`,
+          `/content/${questionBank}/media/${cg1}.${annex.format}`,
+        ),
+      );
+    });
   });
 
   // Link docs to annexes
@@ -171,7 +192,6 @@ export const connectQuestionBank = ({
           `/content/${questionBank}/media/${cg1}.${annex.format}`,
         ),
       );
-      console.log(doc.content);
     });
   });
 

diff --git a/libs/react/markdown/src/common/components.tsx b/libs/react/markdown/src/common/components.tsx
@@ -1,4 +1,6 @@
+import { Children } from "react";
 import { Box, Divider, Link, Sheet, Table, Typography } from "@mui/joy";
+import type { FunctionComponent } from "react";
 import type { Components } from "react-markdown";
 
 export const markdownComponents: Partial<Components> = {
@@ -42,14 +44,26 @@ export const markdownComponents: Partial<Components> = {
       children={children}
     />
   ),
-  p: ({ children }) => (
-    <Typography
-      sx={{ mt: "0.5em" }}
-      level="body-md"
-      component="p"
-      children={children}
-    />
-  ),
+  p: ({ children }) => {
+    const defaultOutput = (
+      <Typography
+        sx={{ mt: "0.5em" }}
+        level="body-md"
+        component="p"
+        children={children}
+      />
+    );
+
+    const childrenArray = Children.toArray(children);
+    if (childrenArray.length > 1) return defaultOutput;
+
+    const onlyChild = childrenArray[0] as unknown as {
+      type?: FunctionComponent;
+    };
+    if (onlyChild?.type?.displayName !== "img") return defaultOutput;
+
+    return <>{children}</>;
+  },
   hr: () => <Divider orientation="horizontal" sx={{ width: "100%", my: 2 }} />,
   a: ({ children, href }) => <Link href={href} children={children} />,
   ul: ({ children }) => (
@@ -58,13 +72,28 @@ export const markdownComponents: Partial<Components> = {
     </Box>
   ),
   img: ({ src, alt }) => (
-    <Sheet sx={{ width: "100%", p: 0.5, display: "block" }} component="span">
+    <Sheet
+      sx={{
+        width: "100%",
+        p: 0.5,
+        display: "flex",
+        mx: 0,
+        flexDirection: "column",
+      }}
+      component="figure"
+    >
       <Box
         component={"img"}
         src={src}
         alt={alt}
-        sx={{ maxWidth: "100%", height: "auto" }}
+        sx={{
+          maxWidth: "100%",
+          height: "auto",
+          maxHeight: "500px",
+          mx: "auto",
+        }}
       />
+      <Divider sx={{ my: 1 }} />
       <Box component="figcaption" sx={{ textAlign: "center", fontSize: "sm" }}>
         {alt}
       </Box>
@@ -92,3 +121,5 @@ export const markdownComponents: Partial<Components> = {
     />
   ),
 };
+
+(markdownComponents.img as FunctionComponent).displayName = "img";