diff --git a/packages/article-converter/src/plugins/mathPlugin.tsx b/packages/article-converter/src/plugins/mathPlugin.tsx index 53a6b244b8..cd1a16d8e3 100644 --- a/packages/article-converter/src/plugins/mathPlugin.tsx +++ b/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 ; + return ; }; diff --git a/packages/ndla-ui/src/Embed/MathEmbed.tsx b/packages/ndla-ui/src/Embed/MathEmbed.tsx new file mode 100644 index 0000000000..6deee6e08c --- /dev/null +++ b/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(null); + + useEffect(() => { + //@ts-expect-error - MathJax might exist! + window.MathJax?.typesetPromise?.([ref.current]); + }, []); + + return ( + + {/* @ts-expect-error - Math is not a valid HTML element according to react */} + + + ); +}; diff --git a/packages/ndla-ui/src/Embed/index.ts b/packages/ndla-ui/src/Embed/index.ts index 04c704974f..4a91e755e8 100644 --- a/packages/ndla-ui/src/Embed/index.ts +++ b/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"; diff --git a/packages/ndla-ui/src/index.ts b/packages/ndla-ui/src/index.ts index 3f2acb0645..57902ff035 100644 --- a/packages/ndla-ui/src/index.ts +++ b/packages/ndla-ui/src/index.ts @@ -33,6 +33,7 @@ export { InlineTriggerButton, ConceptInlineTriggerButton, EmbedWrapper, + MathEmbed, } from "./Embed"; export type { EmbedWrapperProps, EmbedWrapperVariantProps } from "./Embed";