Skip to content

feat(markdown): add lu-markdown component to display markdown content - #5326

Merged
jeremie-lucca merged 8 commits into
release/22.1from
feat/markdown
Sep 14, 2026
Merged

feat(markdown): add lu-markdown component to display markdown content#5326
jeremie-lucca merged 8 commits into
release/22.1from
feat/markdown

Conversation

@JeSuisCharlie1

@JeSuisCharlie1 JeSuisCharlie1 commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Description

Displaying markdown in an app meant parsing it by hand and wiring the styles yourself.
The new lu-markdown component takes a markdown string and renders it with the Text
flow styles: headings, paragraphs, lists, links, bold, italic and code.

Its headingLevel input sets the semantic level of the top-level # heading. Markdown
usually comes from somewhere else (an API field, a CMS, user input) and lands in a page
that already has its own <h1>, which breaks the heading outline for screen reader
users. With headingLevel="2", # Title renders an <h2> styled like an <h1>: the
tag follows the page, the style follows the markdown.

  • New @lucca-front/ng/markdown with component and method.
  • Output is sanitized with DOMPurify, like LuSafeHtmlPipe.
  • Documentation and QA stories added.

@JeSuisCharlie1 JeSuisCharlie1 added this to the 22.1 milestone Sep 10, 2026
@JeSuisCharlie1
JeSuisCharlie1 requested review from a team as code owners September 10, 2026 12:37
@JeSuisCharlie1 JeSuisCharlie1 added 🔖✨ Feature New feature (even a very small one) 📖 Documentation changes Requires a Prisme update 🤖 Produced by AI Some code was produced by AI. (Autocompleted code doesn't require to be labeled) labels Sep 10, 2026
@JeSuisCharlie1 JeSuisCharlie1 mentioned this pull request Sep 10, 2026
Closed
@github-actions

github-actions Bot commented Sep 10, 2026

Copy link
Copy Markdown

🚀 Storybook preview deployed: https://pub-dc6d99acd6874e2aaff6219dd8a13ae2.r2.dev/PR-5326/index.html

@jeremie-lucca
jeremie-lucca merged commit 6a3e960 into release/22.1 Sep 14, 2026
9 of 10 checks passed
@jeremie-lucca
jeremie-lucca deleted the feat/markdown branch September 14, 2026 14:09
@jeremie-lucca jeremie-lucca mentioned this pull request Oct 7, 2026
Merged
jeremie-lucca added a commit that referenced this pull request Oct 16, 2026
@jeremie-lucca @JeSuisCharlie1
@vvalentin-lucca @shajz @claude @guillerot @ymalie-lucca @Supamiu @alex-delaunay-lucca @GuillaumeNury
chore(release): 22.1 (#5459)
c6b7404 
### 🎉 Features

- [Markdown] New component, renders a markdown string with the Text flow
styles, with a `headingLevel` input to fit the page heading outline
[#5326](#5326)
- [PriorityLevels] New component, displays the priority level of an item
[#5407](#5407)
- [Kbd] New component, displays keyboard shortcuts, translates named
keys and adapts them to the platform
[#5468](#5468)
- [SimpleSelect/MultiSelect] Open the panel as a bottom sheet dialog on
smaller screens
[#5313](#5313)
[#5517](#5517)
- [FilterBar] Group the optional filter pills and make them searchable
[#5377](#5377)
- [FilterBar] Display segmented control tabs at the end of the bar with
the `segmentedControlTabs` input, and add `icon` and `hiddenLabel`
inputs to `lu-segmented-control-tabs-panel`
[#5448](#5448)
- [FilterBar] Display the results count with the `resultsCount` input
[#5487](#5487)
- [DateRangeInput] Allow a range with only a start or an end date, for
"from" and "until" filters
[#5379](#5379)
[#5460](#5460)
- [Form] Focus the first invalid field on submit with the opt-in
`focusInvalidOnSubmit` input
[#5264](#5264)
- [FancyBox] Color the bubbles from the palette, add a bottom-left
foreground illustration, type the illustrations and allow overriding
them with a URL
[#5288](#5288)
- Draw random visual variations (skeletons, `lu-bubble-icon` direction)
from the `LU_RANDOM` token, to get a stable rendering in UI diffs
[#5515](#5515)
- [Tag] Allow icon-only tags, decorative or with a hidden label
[#5261](#5261)
[#5335](#5335)
- [DateInput] Add the `humanized` input to display dates in natural
language ("Today", "March 2026")
[#5316](#5316)
- [Impersonation] Add the optional `operationIds`, `uniqueOperationIds`
and `appInstanceId` user scoping inputs
[#5352](#5352)
- [ActivityFeed] Add the `icon` input on `lu-activity-feed-step`
[#5381](#5381)
- [TextInput/SimpleSelect/MultiSelect] Add the `width` input, and a new
`10` width value
[#5384](#5384)
- [NumberInput/NumberFormatInput] Add the `width` input
[#5470](#5470)
- [DataTable] Make group rows sticky along with the `stickyColumn` mod
[#5385](#5385)
- [UserPopover/Link] Open the user name as an external link, and add the
`neutral` input to `luLink`
[#5426](#5426)
- [HighlightData] Color the bubbles from the `palette` and `theme`
inputs [#5439](#5439)
- [Loading] Add a default accessible label, visually hidden unless
`hiddenLabel` is `false`
[#5467](#5467)
- [BubbleIcon] Override the default `bubbleDirection` with the
`LU_BUBBLE_ICON_DEFAULT_DIRECTION` token
[#5514](#5514)

### 🎨 UI update

- [ActivityFeed] Reduce the icons size
[#5397](#5397)

### 🩹 Fixes

- [DataTable/IndexTable] Never emit `null` from the `sortChange` output
of header cells
[#5489](#5489)
- [DateInput/DateRangeInput] Type `calendarMode` as non-nullable,
defaulting to `mode`
[#5490](#5490)
[#5492](#5492)
- [TextInput] Type `inputElementRef()` as non-nullable
[#5491](#5491)

### 📖 Documentation

- [FilterBar] Extend the QA stories and clean up the documentation
[#5449](#5449)

### 🔨 Technical

- 💥 [UserPopover] Remove the deprecated `USER_POPOVER_IS_ACTIVATED`
token [#5412](#5412)
- Clear the npm audit advisories and drop unused devDependencies
[#5290](#5290)

### 💀 Deprecated

- [FancyBox] `foreground` is deprecated, use `foregroundStartEnd`
instead [#5288](#5288)
- [FancyBox] `backgroundLeft` is deprecated, use `backgroundEndStart`
instead [#5288](#5288)
- [FancyBox] `backgroundRight` is deprecated, use `backgroundStartEnd`
instead [#5288](#5288)

---------

Co-authored-by: Charlie JEANNEAU <35218368+JeSuisCharlie1@users.noreply.github.com>
Co-authored-by: Vincent Valentin <64789527+vvalentin-lucca@users.noreply.github.com>
Co-authored-by: Corentin <2089620+shajz@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Adèle Guillerot <aguillerot@luccasoftware.com>
Co-authored-by: Yoan Malié <128475140+ymalie-lucca@users.noreply.github.com>
Co-authored-by: Flavien Normand <contact@flavien-normand.fr>
Co-authored-by: Flavien Normand <11519203+Supamiu@users.noreply.github.com>
Co-authored-by: alex-delaunay-lucca <117659925+alex-delaunay-lucca@users.noreply.github.com>
Co-authored-by: Guillaume Nury <GuillaumeNury@users.noreply.github.com>

This branch was previously deployed

1 inactive deployment
staging — f2115a8f Deployed Sep 10, 2026 by JeSuisCharlie1 via Deploy Lucca Front staging #1118
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Supamiu Supamiu Supamiu approved these changes
@jeremie-lucca jeremie-lucca jeremie-lucca approved these changes

Assignees

No one assigned

Labels

📖 Documentation changes Requires a Prisme update 🔖✨ Feature New feature (even a very small one) 🤖 Produced by AI Some code was produced by AI. (Autocompleted code doesn't require to be labeled)

Projects

None yet

Milestone

22.1

Development

Successfully merging this pull request may close these issues.

3 participants

@JeSuisCharlie1 @Supamiu @jeremie-lucca