Fix embed video rendering for markdown
This commit is contained in:
parent
1b200d9d04
commit
8fff6ee395
@ -6,7 +6,7 @@ import {
|
|||||||
ImageProps,
|
ImageProps,
|
||||||
Link as UILink,
|
Link as UILink,
|
||||||
Message,
|
Message,
|
||||||
Embed,
|
Box,
|
||||||
} from "theme-ui";
|
} from "theme-ui";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
|
|
||||||
@ -30,7 +30,33 @@ function Heading({ level, ...props }: { level: number } & TextProps) {
|
|||||||
|
|
||||||
function Image(props: ImageProps) {
|
function Image(props: ImageProps) {
|
||||||
if (props.alt === "embed:") {
|
if (props.alt === "embed:") {
|
||||||
return <Embed as="span" sx={{ display: "block" }} src={props.src} my={2} />;
|
return (
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
sx={{
|
||||||
|
display: "block",
|
||||||
|
width: "100%",
|
||||||
|
height: 0,
|
||||||
|
paddingBottom: "56.25%",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
my={2}
|
||||||
|
>
|
||||||
|
<iframe
|
||||||
|
src={props.src}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
border: 0,
|
||||||
|
}}
|
||||||
|
title="Video"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
if (props.src?.endsWith(".mp4")) {
|
if (props.src?.endsWith(".mp4")) {
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user