diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index 726e91e51..1244a7113 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -2,7 +2,6 @@ import { Box, BoxProps, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; import { forwardRef, HTMLProps, PropsWithChildren, useCallback } from "react"; -import Markdown from "react-markdown"; import { ChartPanelLayoutCanvas, @@ -12,6 +11,7 @@ import { ChartPanelLayoutTall } from "@/components/chart-panel-layout-tall"; import { ChartPanelLayoutVertical } from "@/components/chart-panel-layout-vertical"; import { ChartSelectionTabs } from "@/components/chart-selection-tabs"; import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters"; +import { Markdown } from "@/components/markdown"; import { ChartConfig, Layout, LayoutDashboard } from "@/config-types"; import { hasChartConfigs, LayoutBlock, LayoutTextBlock } from "@/configurator"; import { useConfiguratorState, useLocale } from "@/src"; diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx new file mode 100644 index 000000000..3661e7ce6 --- /dev/null +++ b/app/components/markdown.tsx @@ -0,0 +1,10 @@ +import { ComponentProps } from "react"; +import ReactMarkdown from "react-markdown"; + +const components: ComponentProps<typeof ReactMarkdown>["components"] = {}; + +export const Markdown = ( + props: Omit<ComponentProps<typeof ReactMarkdown>, "components"> +) => { + return <ReactMarkdown components={components} {...props} />; +}; diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx index 277d30b03..7d51bbe8d 100644 --- a/app/configurator/components/annotators.tsx +++ b/app/configurator/components/annotators.tsx @@ -2,8 +2,8 @@ import { Trans } from "@lingui/macro"; import { Theme, Typography, TypographyProps } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; -import Markdown from "react-markdown"; +import { Markdown } from "@/components/markdown"; import { getChartConfig } from "@/config-types"; import { ControlSection, @@ -41,10 +41,17 @@ type Props = TypographyProps & { smaller?: boolean; }; -export const Title = (props: Props) => { - const { text, lighterColor, smaller, onClick, className, sx, ...rest } = - props; +export const Title = ({ + text, + lighterColor, + smaller, + onClick, + className, + sx, + ...rest +}: Props) => { const classes = useStyles({ interactive: !!onClick }); + return ( <Typography {...rest} @@ -67,9 +74,15 @@ export const Title = (props: Props) => { ); }; -export const Description = (props: Props) => { - const { text, lighterColor, smaller, onClick, className, sx, ...rest } = - props; +export const Description = ({ + text, + lighterColor, + smaller, + onClick, + className, + sx, + ...rest +}: Props) => { const classes = useStyles({ interactive: !!onClick }); return (