feat: add MathEmbed

packages/article-converter/src/plugins/mathPlugin.tsx

@@ -7,9 +7,10 @@
  */
 
 import { attributesToProps } from "html-react-parser";
+import { MathEmbed } from "@ndla/ui";
 import { type PluginType } from "./types";
+
 export const mathPlugin: PluginType = (node) => {
   const { "data-math": mathContent, ...props } = attributesToProps(node.attribs);
-  // @ts-expect-error - math is a valid tag
-  return <math {...props} dangerouslySetInnerHTML={{ __html: mathContent }} />;
+  return <MathEmbed mathContent={mathContent as string} {...props} />;
 };

packages/ndla-ui/src/Embed/MathEmbed.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useEffect, useRef, type ComponentProps } from "react";
+
+interface Props extends ComponentProps<"span"> {
+  mathContent: string;
+}
+
+export const MathEmbed = ({ mathContent, ...props }: Props) => {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    //@ts-expect-error - MathJax might exist!
+    window.MathJax?.typesetPromise?.([ref.current]);
+  }, []);
+
+  return (
+    <span ref={ref}>
+      {/* @ts-expect-error - Math is not a valid HTML element according to react */}
+      <math {...props} dangerouslySetInnerHTML={{ __html: mathContent }} />
+    </span>
+  );
+};

packages/ndla-ui/src/Embed/index.ts

@@ -26,3 +26,4 @@ export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types"
 export { EmbedWrapper } from "./EmbedWrapper";
 export type { EmbedWrapperVariantProps, EmbedWrapperProps } from "./EmbedWrapper";
 export { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
+export { MathEmbed } from "./MathEmbed";

packages/ndla-ui/src/index.ts

@@ -33,6 +33,7 @@ export {
   InlineTriggerButton,
   ConceptInlineTriggerButton,
   EmbedWrapper,
+  MathEmbed,
 } from "./Embed";
 
 export type { EmbedWrapperProps, EmbedWrapperVariantProps } from "./Embed";