Skip to content

feat(RTE): replace pseudo list elements#2673

Merged
fulopdaniel merged 2 commits intomainfrom
CU-869cg98vw_Test-custom-blocks_Daniel-Fulop
Mar 23, 2026
Merged

feat(RTE): replace pseudo list elements#2673
fulopdaniel merged 2 commits intomainfrom
CU-869cg98vw_Test-custom-blocks_Daniel-Fulop

Conversation

@fulopdaniel
Copy link
Copy Markdown
Contributor

@fulopdaniel fulopdaniel commented Mar 19, 2026

  1. Bullets and decimals are now rendered inside a span instead of being just a simple ::before element. This way it does not interfere with identations and does not affect the line height of <li>
  2. Max nesting depth is now 3. There were no built-in options so I manually enforce it, and fix violating slate blocks.
  3. Various bugfixes, e.g. li could not be changed to link or button. Margins and line-heights were inconsistent. Align-right did not work in lists. and so on.

@fulopdaniel fulopdaniel requested a review from a team as a code owner March 19, 2026 11:55
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 19, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: c594468

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@frontify/fondue-rte Patch
@frontify/fondue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 19, 2026 •
edited
Loading

✅ Deploy Preview for fondue-docs ready!

Name Link
🔨 Latest commit 686d3a0
🔍 Latest deploy log https://app.netlify.com/projects/fondue-docs/deploys/69bc02fc1244c8000862771d
😎 Deploy Preview https://deploy-preview-2673.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-advanced-security[bot]
github-advanced-security AI found potential problems Mar 19, 2026
View reviewed changes
Comment thread packages/rte/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts
},
[ELEMENT_UL]: ({ classNames, children }) => `<ul dir="auto" class="${UL_CLASSES} ${classNames}">${children}</ul>`,
[ELEMENT_OL]: ({ classNames, children }) => `<ol dir="auto" class="${OL_CLASSES} ${classNames}">${children}</ol>`,
[ELEMENT_LI]: ({ classNames, children, node, styles }) =>

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
Comment thread packages/rte/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts
[ELEMENT_UL]: ({ classNames, children }) => `<ul dir="auto" class="${UL_CLASSES} ${classNames}">${children}</ul>`,
[ELEMENT_OL]: ({ classNames, children }) => `<ol dir="auto" class="${OL_CLASSES} ${classNames}">${children}</ol>`,
[ELEMENT_LI]: ({ classNames, children, node, styles }) =>
`<li dir="auto" class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
Comment thread packages/rte/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts
[ELEMENT_LIC]: ({ classNames, children, node, bulletHtml }) =>
`<p dir="auto" class="${classNames} ${getLicElementClassNames(node, false)}">${bulletHtml}<span class="${LIST_ITEM_SPAN_CLASSES}">${children}</span></p>`,
[ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),
[ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
@fulopdaniel fulopdaniel requested a review from a team as a code owner March 19, 2026 11:57
@fulopdaniel fulopdaniel requested a review from syeo66 March 19, 2026 11:57
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 19, 2026

✅ Deploy Preview for fondue-components ready!

Name Link
🔨 Latest commit 491fc56
🔍 Latest deploy log https://app.netlify.com/projects/fondue-components/deploys/69bbe4434fb10b0008dcc6b2
😎 Deploy Preview https://deploy-preview-2673.components.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 19, 2026 •
edited
Loading

✅ Deploy Preview for fondue-components ready!

Name Link
🔨 Latest commit c594468
🔍 Latest deploy log https://app.netlify.com/projects/fondue-components/deploys/69c105e13b8e98000889bdc9
😎 Deploy Preview https://deploy-preview-2673.components.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

peter-tudosa
peter-tudosa reviewed Mar 19, 2026
View reviewed changes
Comment thread packages/rte/src/components/RichTextEditor/Plugins/ListPlugin/ListPlugin.ts Outdated
if (originalOnKeyDown) {
subPlugin.handlers = {
...subPlugin.handlers,
onKeyDown: (editor, plugin) => {
Copy link
Copy Markdown
Contributor

@peter-tudosa peter-tudosa Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we extract this fn? It's getting kinda crazy in here.

Copy link
Copy Markdown
Contributor Author

@fulopdaniel fulopdaniel Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure! Moved some stuff around

@fulopdaniel fulopdaniel force-pushed the CU-869cg98vw_Test-custom-blocks_Daniel-Fulop branch from 2a50556 to f47f71e Compare March 23, 2026 09:18
@SamuelAlev SamuelAlev removed the request for review from syeo66 March 23, 2026 13:37
@fulopdaniel fulopdaniel merged commit 4e620ee into main Mar 23, 2026
12 checks passed
@fulopdaniel fulopdaniel deleted the CU-869cg98vw_Test-custom-blocks_Daniel-Fulop branch March 23, 2026 14:21
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

Lead time: 5 hours, 2 minutes, 43 seconds (5.05 total hours) from first commit to close.
Review time: 4 days, 2 hours, 25 minutes, 35 seconds (98.43 total hours) from ready for review to close.

  • First commit: 23.3.2026, 10:18:35.
  • Ready for review: 19.3.2026, 12:55:43.
  • Closed: 23.3.2026, 15:21:18.

@github-actions github-actions Bot mentioned this pull request Mar 23, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@peter-tudosa peter-tudosa peter-tudosa approved these changes

@SamuelAlev SamuelAlev SamuelAlev approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@fulopdaniel @peter-tudosa @SamuelAlev @github-advanced-security