feat: support markdown

ui/components/Markdown/renderer/thematicBreak.tsx

@@ -0,0 +1,35 @@
+import { css, cx } from "@emotion/css";
+import type { ThematicBreak } from "@yozora/ast";
+import React from "react";
+import { astClasses } from "../context";
+
+/**
+ * Render `thematicBreak`.
+ *
+ * @see https://www.npmjs.com/package/@yozora/ast#thematicBreak
+ * @see https://www.npmjs.com/package/@yozora/tokenizer-thematic-break
+ */
+export class ThematicBreakRenderer extends React.Component<ThematicBreak> {
+  public override shouldComponentUpdate(): boolean {
+    return false;
+  }
+
+  public override render(): React.ReactElement {
+    return <hr className={cls} />;
+  }
+}
+
+const cls = cx(
+  astClasses.thematicBreak,
+  css({
+    boxSizing: "content-box",
+    display: "block",
+    height: 0,
+    width: "100%",
+    padding: 0,
+    border: 0,
+    borderBottom: `1px solid #dadada`,
+    outline: 0,
+    margin: "1.5em 0px",
+  }),
+);