Slot for markdown links (#1002)

Co-authored-by: Dylan Decrulle <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"description": "Library of questionnaire components",
 	"type": "module",
 	"repository": {

src/components/shared/HOC/slottableComponent.tsx

@@ -49,6 +49,7 @@ import type { CustomCheckboxGroup } from '../../CheckboxGroup/CustomCheckboxGrou
 import type { RouterLink } from '../MDLabel/RouterLink';
 import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
 import type { LunaticComponentProps } from '../../type';
+import type { MarkdownLink } from '../MDLabel/MarkdownLink';
 
 /**
  * Contains the type of every customizable component
@@ -119,6 +120,7 @@ export type LunaticSlotComponents = {
 	ComponentWrapper: ComponentType<
 		PropsWithChildren<LunaticComponentProps & { index: number }>
 	>;
+	MarkdownLink: typeof MarkdownLink;
 };
 
 const empty = {} as Partial<LunaticSlotComponents> | undefined;

src/components/shared/MDLabel/MDLabel.tsx

@@ -1,39 +1,36 @@
-import type { ComponentProps } from 'react';
-import Markdown from 'react-markdown';
-import { MDLabelLink } from './MDLabelLink';
+import { Fragment, type PropsWithChildren } from 'react';
+import Markdown, { type Components } from 'react-markdown';
+import { MarkdownLink } from './MarkdownLink';
 import remarkBreaks from 'remark-breaks';
 import emoji from 'remark-emoji';
 
 type Props = { expression: string };
 
-export const MDLabel = ({ expression }: Props) => {
+export function MDLabel({ expression }: Props) {
+	const hasParagraphs = /\n\n/.test(expression);
+	const components = {
+		p: hasParagraphs ? 'p' : Fragment,
+		br: 'br',
+		a: MarkdownA,
+	} as Partial<Components>;
 	return (
 		<Markdown
-			components={renderComponentsFor(expression)}
+			components={components}
 			remarkPlugins={[[emoji, { accessible: true }], remarkBreaks]}
 		>
 			{expression}
 		</Markdown>
 	);
-};
-
-const renderComponentsFor = (
-	expression: string
-): ComponentProps<typeof Markdown>['components'] => {
-	const components = {
-		p: (props) => <>{props.children}</>,
-		br: 'br',
-		a: (props) => (
-			<MDLabelLink {...({ ...props } as ComponentProps<typeof MDLabelLink>)} />
-		),
-	} satisfies ComponentProps<typeof Markdown>['components'];
-
-	if (/\n\n/.test(expression)) {
-		return {
-			...components,
-			p: 'p',
-		};
-	}
-
-	return components;
+}
+const MarkdownA = ({
+	title,
+	href,
+	children,
+}: PropsWithChildren<{ title?: string; href: string }>) => {
+	const tooltip = title ? <MDLabel expression={title} /> : null;
+	return (
+		<MarkdownLink href={href} tooltip={tooltip}>
+			{children}
+		</MarkdownLink>
+	);
 };

src/components/shared/MDLabel/MarkdownLink.tsx

@@ -0,0 +1,43 @@
+import { useId, type PropsWithChildren, type ReactNode } from 'react';
+import { Tooltip } from 'react-tooltip';
+import { RouterLink } from './RouterLink';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{ href: string; tooltip?: ReactNode }>;
+
+export const MarkdownLink = slottableComponent<Props>(
+	'MarkdownLink',
+	({ href, children, tooltip }) => {
+		const id = useId();
+
+		const extraProps = tooltip
+			? { 'data-tooltip-id': `tooltip-${id}`, className: 'link-md' }
+			: {};
+		const isAbsoluteLink = href.trim().startsWith('/');
+
+		return (
+			<>
+				{isAbsoluteLink ? (
+					<RouterLink to={href} id={id} {...extraProps}>
+						{children}
+					</RouterLink>
+				) : (
+					<a
+						href={href}
+						target="_blank"
+						rel="noopener noreferrer"
+						id={id}
+						{...extraProps}
+					>
+						{children}
+					</a>
+				)}
+				{tooltip && (
+					<Tooltip className="tooltip-content" id={`tooltip-${id}`}>
+						{tooltip}
+					</Tooltip>
+				)}
+			</>
+		);
+	}
+);

src/stories/utils/orchestrator.jsx

@@ -1,13 +1,17 @@
 import './custom-lunatic.scss';
 import './orchestrator.scss';
 
-import { useLunatic, Button, components, ModalControls } from '../..';
-import React, { memo, useCallback, useState, useEffect } from 'react';
+import {
+	Button,
+	components,
+	LunaticComponents,
+	ModalControls,
+	useLunatic,
+} from '../..';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { Logger } from '../../utils/logger';
 import { Overview } from './overview';
-import Waiting from './waiting';
-import { LunaticComponents } from '../..';
 import { SchemaValidator } from './SchemaValidator.jsx';
 
 const Input = components.Input;
@@ -247,11 +251,6 @@ function OrchestratorForStories({
 							isCritical={errorsForModal.isCritical}
 						/>
 					)}
-					<Waiting status={waiting}>
-						<div className="waiting-orchestrator">
-							Initialisation des données de suggestion...
-						</div>
-					</Waiting>
 				</aside>
 			</div>
 		</Provider>