Newer
Older
import React from "react";
import katex from "katex";
import splitAtDelimiters from "./splitAtDelimiters";
import "katex/dist/katex.css";
import "./mediaarea.css";
import { DescriptiveReference } from "../../../common/graph/node";
interface MediaAreaProps {
description: string;
image?: string;
video?: string;
references?: DescriptiveReference[];
/**
* This component displays media-related information associated with a specific node.
* @param description The node description.
* @param image Link to an image.
* @param video Link to a video.
* @param references List of additional reference links.
* @constructor
*/
function MediaArea({ description, image, video, references }: MediaAreaProps) {

Matthias Konitzny
committed
const text = splitAtDelimiters(description ?? "", [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: true },
]);
<div className={"media-area"}>
{image && <img src={image} />}
<p
className={"media-area-description"}
// dangerouslySetInnerHTML={{
// __html: katex.renderToString(description, options),
// }}
>
{text.map((textObj, idx) => {
if (textObj.type == "math") {
return (
<span
key={idx}
dangerouslySetInnerHTML={{
__html: katex.renderToString(textObj.data),
}}
></span>
);
} else {
return <span key={idx}>{textObj.data}</span>;
}
})}
</p>
className={"media-area-video"}

Matthias Konitzny
committed
{references && references.length > 0 && (
<div className={"media-area-references"}>
<h6>Weiterführende Links</h6>
<References references={references} />
</div>
)}
<div className={"media-area-spacer"}></div>
</div>
);
}
export default MediaArea;