Markdown component for use with Framer.com

Markdown.tsx

// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/

import ReactMarkdown from "https://cdn.skypack.dev/react-markdown@7?min"
import remarkGfm from "https://esm.sh/remark-gfm@3?bundle"
import { addPropertyControls, ControlType } from "framer"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/docs/guides/auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Markdown(props) {
    // This is a React component containing an Example component
    // - Replace <Example /> with your own code
    // - Find inspiration: https://www.framer.com/developers/

    return (
        <div style={containerStyle}>
            <ReactMarkdown
                children={props.content}
                remarkPlugins={[remarkGfm]}
                components={renderers}
            />
        </div>
    )
}

Markdown.defaultProps = {
    content: `## Hello *World*`,
}

addPropertyControls(Markdown, {
    content: {
        type: ControlType.String,
        title: "Content",
        displayTextArea: true,
    },
})

const renderers = {
    img: (props) => <img {...props} style={imageStyle} />,
    a: (props) => <a {...props} style={anchorStyle} />,
}

// Styles are written in object syntax
// Learn more: https://reactjs.org/docs/dom-elements.html#style
const containerStyle = {
    width: "100%",
    overflow: "hidden",
}

const imageStyle = {
    maxWidth: "100%",
    height: "auto",
    display: "block",
    marginBottom: "48px",
}

const anchorStyle = {
    color: "#000000",
}