plane/apps/app/components/ui/markdown-to-component.tsx
Aaryan Khandelwal 4c2cb2368a
chore: update classnames according to the new theming structure (#1494)
* chore: store various shades of accent color

* refactor: custom theme selector

* refactor: custom theme selector

* chore: update custom theme input labels

* fix: color generator function logic

* fix: accent color preloaded data

* chore: new theming structure

* chore: update shades calculation logic

* refactor: variable names

* chore: update color scheming

* chore: new color scheming

* refactor: themes folder structure

* chore: update classnames to the new ones

* chore: update static colors

* chore: sidebar link colors

* chore: placeholder color

* chore: update border classnames
2023-07-10 12:47:00 +05:30

78 lines
2.0 KiB
TypeScript

import React from "react";
import ReactMarkdown from "react-markdown";
interface CustomComponentProps {
href: string;
children: React.ReactNode;
}
type CustomComponent = React.ComponentType<CustomComponentProps>;
interface Props {
markdown: string;
components?: {
a?: CustomComponent;
blockquote?: CustomComponent;
code?: CustomComponent;
del?: CustomComponent;
em?: CustomComponent;
heading?: CustomComponent;
hr?: CustomComponent;
image?: CustomComponent;
inlineCode?: CustomComponent;
link?: CustomComponent;
list?: CustomComponent;
listItem?: CustomComponent;
paragraph?: CustomComponent;
strong?: CustomComponent;
table?: CustomComponent;
tableCell?: CustomComponent;
tableHead?: CustomComponent;
tableRow?: CustomComponent;
};
options?: any;
}
const HeadingPrimary: CustomComponent = ({ children }) => (
<h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
);
const HeadingSecondary: CustomComponent = ({ children }) => (
<h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
);
const Paragraph: CustomComponent = ({ children }) => (
<p className="text-sm text-custom-text-200">{children}</p>
);
const OrderedList: CustomComponent = ({ children }) => (
<ol className="ml-8 mb-4 list-decimal text-sm text-custom-text-200">{children}</ol>
);
const UnorderedList: CustomComponent = ({ children }) => (
<ul className="ml-8 mb-4 list-disc text-sm text-custom-text-200">{children}</ul>
);
const Link: CustomComponent = ({ href, children }) => (
<a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
{children}
</a>
);
export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
const customComponents = {
h1: HeadingPrimary,
h3: HeadingSecondary,
p: Paragraph,
ol: OrderedList,
ul: UnorderedList,
a: Link,
};
return (
<ReactMarkdown components={customComponents} {...options}>
{markdown}
</ReactMarkdown>
);
};