forge-joniko/ldc-ovoteam
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(Recipes): enhance list formatting for ingredients and preparation steps

Browse source 
Improved the formatList function to convert plain text into structured lists.
This commit is contained in:
Jérémy Munsch 2026-07-09 12:46:38 +02:00
parent 04d038a61d
commit 5a7230ca9a
Signed by: forge-joniko
GPG key ID: D7EFE2F5CB6CC0E4
1 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
resources/ts/front/Pages/Recipes/Show.tsx
View file

@ -65,6 +65,22 @@ export default function Show({ recipe }: Readonly<ShowProps>) {
return match?.label ?? value;
};
// * Format a string into a list (ul or ol) if it doesn't already contain one.
const formatList = (html: string | undefined | null, type: "ul" | "ol") => {
if (!html) return "";
if (html.includes("<ul") || html.includes("<ol")) return html;
const items = html
.replace(/<\/?p[^>]*>/gi, "<br>")
.split(/<br\s*\/?>|\n/i)
.map((i) => i.trim())
.filter((i) => i.length > 0);
if (items.length === 0) return html;
return `<${type}>${items.map((item) => `<li>${item}</li>`).join("")}</${type}>`;
};
const badges = [
getLabel(productCategoryEnum, recipe.productRange),
getLabel(consumptionTimeEnum, recipe.consomptionTime),
@ -93,16 +109,16 @@ export default function Show({ recipe }: Readonly<ShowProps>) {
}
.list-egg-bullets ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
padding-left: 2rem;
margin-bottom: 0.75rem;
}
.list-egg-bullets ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.4rem;
width: 0.6rem;
height: 0.8rem;
top: 0.2rem;
width: 1rem;
height: 1.33rem;
background-color: white;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
display: inline-block;
@ -122,9 +138,9 @@ export default function Show({ recipe }: Readonly<ShowProps>) {
content: counter(prep-counter) ". ";
position: absolute;
left: 0;
top: -0.1rem;
font-weight: bold;
font-size: 1.25rem;
top: -0.25rem;
font-weight: 800;
font-size: 1.75rem;
color: inherit;
}
`}</style>
@ -221,7 +237,7 @@ export default function Show({ recipe }: Readonly<ShowProps>) {
</div>
<div className="tiptap text-primary-foreground/90 max-w-none list-egg-bullets">
<SafeHtml html={recipe.ingredientsList} />
<SafeHtml html={formatList(recipe.ingredientsList, "ul")} />
</div>
</div>
</Section>
@ -233,7 +249,7 @@ export default function Show({ recipe }: Readonly<ShowProps>) {
Préparation
</h2>
<div className="tiptap text-primary-foreground/80 max-w-none preparation-steps-list">
<SafeHtml html={recipe.preparationSteps} />
<SafeHtml html={formatList(recipe.preparationSteps, "ol")} />
</div>
</div>
</Section>