Skip to content

[lexical-playground] Bug Fix: Export ParagraphNode as div role="paragraph" when it contains block DOM#7906

Merged
etrepum merged 1 commit intofacebook:mainfrom
etrepum:figure-export-div
Oct 7, 2025
Merged

[lexical-playground] Bug Fix: Export ParagraphNode as div role="paragraph" when it contains block DOM#7906
etrepum merged 1 commit intofacebook:mainfrom
etrepum:figure-export-div

Conversation

@etrepum
Copy link
Copy Markdown
Collaborator

@etrepum etrepum commented Oct 6, 2025

Description

Follow-up to #7900 which added <figure> export to <img> nodes with caption.

The HTML spec does not allow the p tag to contain block-level elements (mdn). figure and figcaption are block-level elements (as are some other things rendered by decorators that may end up inline). There's no way for us to say that the <figure> node is actually not used inline in this case, nor is it possible to really attach any other sort of HTML caption to an img node (the alt or title could be used, but is not advised by mdn)

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

Using an element without Tag Omission such as the div element (mdn) in these cases will allow us to serialize the figure node inside of a logical paragraph

Test plan

Before

The symptom of this is that when you use a DOMParser that conforms to the HTML5 spec is that you will split <p> tags at every <figure> or other block-level element.

After

When a block-level child of a <p> tag is detected in the playground's html export override for ParagraphNode, it will replace that <p> tag with <div role="paragraph"> which avoids the issue.

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 6, 2025
@vercel
Copy link
Copy Markdown

vercel bot commented Oct 6, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
lexical Ready Ready Preview Comment Oct 6, 2025 5:24pm
lexical-playground Ready Ready Preview Comment Oct 6, 2025 5:24pm

@@ -1,11 +1,3 @@
/**
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

This environment is not needed anymore now that we are using vitest


return importMap;
}
function buildExportMap(): DOMExportOutputMap {
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

This is the new functionality to override paragraph export

? undefined
: $prepopulatedRichText,
html: {import: buildImportMap()},
html: buildHTMLConfig(),
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

all of the import/export code was extracted to another file because some imports in App.tsx are not importable from node (excalidraw stuff)

@etrepum etrepum added this pull request to the merge queue Oct 7, 2025
Merged via the queue into facebook:main with commit 0c9e1eb Oct 7, 2025
46 checks passed
@etrepum etrepum mentioned this pull request Oct 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants