refactor: Consolidate Markdown usage

...so that we will be able to define components in a single place.

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";

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} />;
+};

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 (