Merge pull request #2400 from visualize-admin/fix/user-chart-names

fix: Markdown in user profile chart titles

Author: bprusinowski

CHANGELOG.md

@@ -27,6 +27,7 @@ You can also check the
     filters section
   - Dataset browse view is now correctly displayed on mobile devices
   - Database-related actions are now hidden in preview mode (copy URL, share)
+  - Chart titles in user profile are now correctly rendered
 - Security
   - Added additional protection against data source URL injection
   - Removed feature flag for custom GraphQL endpoint

app/components/markdown.tsx

@@ -69,6 +69,39 @@ export const Markdown = (
   );
 };
 
+export const InlineMarkdown = ({
+  children,
+  ...rest
+}: Omit<ComponentProps<typeof ReactMarkdown>, "components">) => {
+  const inlineMarkdown = children?.replace(/\r?\n|\r/g, " ");
+
+  return (
+    <ReactMarkdown
+      components={{
+        p: ({ children }) => <>{children}</>,
+        strong: ({ children }) => <strong>{children}</strong>,
+        em: ({ children }) => <em>{children}</em>,
+        a: ({ children, href }) => <a href={href}>{children}</a>,
+        h1: () => null,
+        h2: () => null,
+        h3: () => null,
+        h4: () => null,
+        h5: () => null,
+        h6: () => null,
+        ul: () => null,
+        li: () => null,
+        blockquote: () => null,
+        code: ({ children }) => <code>{children}</code>,
+        br: () => <> </>,
+      }}
+      skipHtml
+      {...rest}
+    >
+      {inlineMarkdown}
+    </ReactMarkdown>
+  );
+};
+
 const componentsInheritFonts: ComponentProps<
   typeof ReactMarkdown
 >["components"] = {

app/login/components/profile-tables.tsx

@@ -21,6 +21,7 @@ import sortBy from "lodash/sortBy";
 import NextLink from "next/link";
 import { ReactNode, useMemo, useState } from "react";
 
+import { InlineMarkdown, Markdown } from "@/components/markdown";
 import { MenuActionProps } from "@/components/menu-action-item";
 import { OverflowTooltip } from "@/components/overflow-tooltip";
 import {
@@ -361,9 +362,13 @@ const ProfileVisualizationsRow = (props: {
           legacyBehavior
         >
           <Link>
-            <OverflowTooltip arrow title={chartTitle} color="primary.main">
-              <Typography variant="body3" noWrap>
-                {chartTitle}
+            <OverflowTooltip
+              arrow
+              title={<Markdown>{chartTitle}</Markdown>}
+              color="primary.main"
+            >
+              <Typography variant="body3" component="p" noWrap>
+                <InlineMarkdown>{chartTitle}</InlineMarkdown>
               </Typography>
             </OverflowTooltip>
           </Link>