Add styling and control line breaks for custom components.

Plasmic Studio Questions
1

Thank you, I got it working! The video helped me finally wrap my brain around how you can feed custom components in Plasmic Studio. That’s awesome!

I managed to add styling support also. The process is somewhat explained here: https://docs.plasmic.app/learn/writing-code-components/#:~:text=following%20these%20tips.-,Allow%20p[…]ng%20via%20className%20prop,-If%20your%20code

Based on the video above, my final code for Markdown.tsx ended up as follows:

import {ReactMarkdown} from "react-markdown/lib/react-markdown";

export default function Markdown (props: {markdown?: string, className?: string}) {

`const defaultMarkdown = `# Hello *world*!`;`

`return (`
    `<div className={props.className}>`
    `<ReactMarkdown` 
        `children={props.markdown || defaultMarkdown}`
    `/>`
    `</div>` 
`);`

}

This adds support for styling the Markdown components in Studio via the Design tab

Now i just need to figure out if there’s a way to control those huge line/paragraph breaks