feat: support markdown

ui/components/Markdown/renderer/inner/ImageRendererInner.tsx

@@ -0,0 +1,59 @@
+import { css } from "@emotion/css";
+import React from "react";
+
+interface IProps {
+  src: string;
+  alt: string;
+  title: string | undefined;
+  srcSet: string | undefined;
+  sizes: string | undefined;
+  loading: "eager" | "lazy" | undefined;
+  className: string;
+}
+
+export class ImageRendererInner extends React.Component<IProps> {
+  public override shouldComponentUpdate(nextProps: IProps): boolean {
+    const props = this.props;
+    return (
+      props.src !== nextProps.src ||
+      props.alt !== nextProps.alt ||
+      props.title !== nextProps.title ||
+      props.srcSet !== nextProps.srcSet ||
+      props.sizes !== nextProps.sizes ||
+      props.loading !== nextProps.loading ||
+      props.className !== nextProps.className
+    );
+  }
+
+  public override render(): React.ReactElement {
+    const { src, alt, title, srcSet, sizes, loading, className } = this.props;
+    return (
+      <figure className={`${className} ${cls}`}>
+        <img alt={alt} src={src} title={title} srcSet={srcSet} sizes={sizes} loading={loading} />
+        {title && <figcaption>{title}</figcaption>}
+      </figure>
+    );
+  }
+}
+
+const cls = css({
+  boxSizing: "border-box",
+  maxWidth: "80%", // Prevent images from overflowing the container.
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  margin: 0,
+  "> img": {
+    flex: "1 0 auto",
+    boxSizing: "border-box",
+    maxWidth: "100%",
+    border: "1px solid var(--colorBorderImage)",
+    boxShadow: "0 0 20px 1px rgba(126, 125, 150, 0.6)",
+  },
+  "> figcaption": {
+    textAlign: "center",
+    fontStyle: "italic",
+    fontSize: "1em",
+    color: "var(--colorImageTitle)",
+  },
+});