init commit,

99_references/beacon-main/src/components/markdown.tsx

@@ -0,0 +1,83 @@
+/**
+ * @file Markdown renderer component
+ */
+
+import {Schema} from "hast-util-sanitize";
+import {FC} from "react";
+import ReactMarkdown, {Options} from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+
+import styles from "~/components/markdown.module.css";
+
+/**
+ * Sanitization schema
+ * @see https://github.com/syntax-tree/hast-util-sanitize#schema
+ */
+const schema = {
+  allowComments: false,
+  allowDoctypes: false,
+  ancestors: {},
+  attributes: {},
+  strip: ["script"],
+  tagNames: [
+    "b",
+    "blockquote",
+    "br",
+    "code",
+    "del",
+    "details",
+    "em",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "hr",
+    "i",
+    "ins",
+    "li",
+    "ol",
+    "p",
+    "pre",
+    "s",
+    "strike",
+    "strong",
+    "sub",
+    "summary",
+    "sup",
+    "table",
+    "td",
+    "th",
+    "u",
+    "tr",
+    "ul",
+  ],
+} as Schema;
+
+/**
+ * Markdown renderer component props
+ */
+interface MarkdownProps extends Options {
+  /**
+   * Raw Github-Flavored Markdown (GFM) content
+   */
+  raw: string;
+}
+
+/**
+ * Markdown renderer component
+ * @returns JSX
+ */
+export const Markdown: FC<MarkdownProps> = ({raw, ...props}) => (
+  <ReactMarkdown
+    {...props}
+    className={`${styles.markdown} ${props.className ?? ""}`}
+    remarkPlugins={[remarkGfm]}
+    rehypePlugins={[[rehypeRaw], [rehypeSanitize, schema]]}
+  >
+    {raw}
+  </ReactMarkdown>
+);