package.json

@@ -1,6 +1,6 @@
 {
     "name": "onyxia-ui",
-    "version": "6.0.2",
+    "version": "6.1.0",
     "description": "The Onyxia UI toolkit",
     "repository": {
         "type": "git",
@@ -58,7 +58,7 @@
         "run-exclusive": "^2.2.19",
         "tsafe": "^1.7.5",
         "tss-react": "^4.9.13",
-        "react-markdown": "^5.0.3"
+        "react-markdown": "^9.0.1"
     },
     "devDependencies": {
         "@emotion/react": "^11.11.1",

src/Markdown.tsx

@@ -10,8 +10,6 @@ export type MarkdownProps = {
     children: string;
     getLinkProps?: MarkdownProps.GetLinkProps;
     /** Default: false */
-    allowHtml?: boolean;
-    /** Default: false */
     inline?: boolean;
     /** For accessibility only */
     lang?: string;
@@ -32,31 +30,25 @@ export const Markdown = memo((props: MarkdownProps) => {
             ...(!href.startsWith("/") ? { target: "blank" } : {}),
         })),
         inline: isInline = false,
-        allowHtml: doAllowHtml = false,
         lang = undefined,
     } = props;
 
-    const renderers = useMemo(
-        () => ({
-            link: ({
-                href,
-                children,
-            }: {
-                children: React.ReactNode;
-                href: string;
-            }) => <MuiLink {...getLinkProps({ href })}>{children}</MuiLink>,
-            paragraph: ({ children }: { children: React.ReactNode }) =>
-                createElement(isInline ? "span" : "p", { children }),
-        }),
-        [getLinkProps, isInline],
-    );
-
     const { classes, cx } = useStyles();
 
     return createElement(
         isInline ? "span" : "div",
         { lang: lang, className: cx(classes.root, className) },
-        <ReactMarkdown allowDangerousHtml={doAllowHtml} renderers={renderers}>
+        <ReactMarkdown
+            components={{
+                a: ({ href, children }) => {
+                    const linkProps =
+                        href === undefined ? {} : getLinkProps({ href });
+                    return <MuiLink {...linkProps}>{children}</MuiLink>;
+                },
+                p: ({ children }) =>
+                    createElement(isInline ? "span" : "p", { children }),
+            }}
+        >
             {children}
         </ReactMarkdown>,
     );

src/stories/Markdown.stories.tsx

@@ -10,8 +10,13 @@ const { meta, getStory } = getStoryFactory({
 
 export default meta;
 
-export const VueNoTitle = getStory({
+export const DefaultView = getStory({
     children: `# This is a title  
 This is a paragraph with [a link](https://www.example.com)  
 `,
 });
+
+export const InlineView = getStory({
+    inline: true,
+    children: `Hello [with a link](https://www.example.com) world`,
+});