[lexical-playground] Feature: HTML conversion button by levensta · Pull Request #8379 · facebook/lexical

levensta · 2026-04-20T23:24:08Z

Description

Here are some minor UI improvements to the lexical-playground:

The Markdown mode button now has an active state.
The settings block can be scrolled, as not all buttons are visible at small viewport, especially with the DevTools panel open at the bottom

I also added a button for converting to and from HTML, similar to Markdown. Unlike the "export DOM" button in the "debug view" panel, this mode clearly demonstrates how serialization to and from HTML works, enabling debugging of exportDOM/importDOM operations and providing a new way to write tests.

Test plan

Before

Screen.Recording.2026-04-21.at.02.22.24.mov

After

Screen.Recording.2026-04-21.at.02.21.03.mov

vercel · 2026-04-20T23:24:12Z

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

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Apr 21, 2026 10:29pm
lexical-playground	Ready	Preview, Comment	Apr 21, 2026 10:29pm

etrepum

All of these look like positive changes, but maybe since it enables adding tests we should write a test or two to confirm that it does the expected thing (convert to html and then convert back from html). We should probably make some sort of change while it's in html view so we can confirm that it's the actual import.

etrepum

I think this is a great idea but we probably want to integrate something like prettier in here so that it's more usable. The node-state-style example does something like that for its html view

etrepum · 2026-04-22T01:37:06Z

+    await toggleItalic(page);
+    await insertDateTime(page);
+
+    const expectedViewHtml = `<h1 class="PlaygroundEditorTheme__h1" dir="auto">


why not use the html template string here?

Suggested change

const expectedViewHtml = `<h1 class="PlaygroundEditorTheme__h1" dir="auto">

const expectedViewHtml = html`<h1 class="PlaygroundEditorTheme__h1" dir="auto">

levensta · 2026-04-22T21:22:58Z

I think this is a great idea but we probably want to integrate something like prettier in here so that it's more usable. The node-state-style example does something like that for its html view

We could automatically run Prettier when switching to HTML mode, but since text elements with the inline style white-space: "pre-wrap"; are sensitive to whitespace during re-import, we'll need to add the following settings:

{
  htmlWhitespaceSensitivity: 'css',
  printWidth: Number.MAX_SAFE_INTEGER
}

It will look like this. It's not very convenient, but it's better than cramming everything into a single line

Another question is which specific Prettier to run. I could try running the Prettier that’s already in the CodeActionPlugin
https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
Probably it'll have to handle using the React context.

Or run it as a separate instance within the current ActionsPlugin. But then we'll have to set the same Prettier settings in both places so that the result is consistent

etrepum · 2026-04-22T21:34:07Z

We can also normalize the html a bit first to make it less sensitive to whitespace and export fewer theme classes

levensta · 2026-04-22T21:46:30Z

If this is done via DOMExtension, it will mislead users, as it may appear to be a original export of built-in nodes

etrepum · 2026-04-22T21:52:40Z

Well if it was used in a normal way it would affect all exports, unless it was dispatching based on some render context that was only set for the html view

commit 5d1bc33 Author: Sathvik Veerapaneni <98241593+Sathvik-Chowdary-Veerapaneni@users.noreply.github.com> Date: Thu Apr 23 13:12:21 2026 -0400 [lexical-list] Bug Fix: Merge nested list into parent <li> during HTML export (facebook#8313) Co-authored-by: Bob Ippolito <bob@redivi.com> commit 2c37dc2 Author: Bob Ippolito <bob@redivi.com> Date: Thu Apr 23 07:14:14 2026 -0700 [lexical-clipboard][lexical-rich-text][lexical-plain-text] Bug Fix: Drag-and-drop within the same block (facebook#8373) Co-authored-by: Claude <noreply@anthropic.com> commit ca2aa31 Author: Bob Ippolito <bob@redivi.com> Date: Thu Apr 23 07:12:43 2026 -0700 [lexical][lexical-utils][lexical-list] Bug Fix: Clean up and test $insertNodeToNearestRootAtCaret edge cases (facebook#8384) commit 207648e Author: Bob Ippolito <bob@redivi.com> Date: Thu Apr 23 07:11:52 2026 -0700 [lexical-html][lexical-playground] Feature: Implement a well-defined ordering for DOMRenderExtension overrides and add $decorateDOM (facebook#8368) commit 1ca42f1 Author: Agyei Holy <agyeiholy978@gmail.com> Date: Wed Apr 22 15:39:37 2026 -0500 [lexical][lexical-code-core][lexical-list][lexical-table][lexical-yjs] Refactor: make runtime style updates CSP-safe (facebook#8372) commit ca0ce82 Author: Bob Ippolito <bob@redivi.com> Date: Wed Apr 22 12:57:28 2026 -0700 [lexical-list] Bug Fix: Ensure that ListItemNode always has a ListItem parent (facebook#8382) commit f4c44e1 Author: Sherry <potatowagon@meta.com> Date: Thu Apr 23 00:28:54 2026 +0530 [lexical-markdown] Bug Fix: Code spans take precedence over inline formatting in shortcuts (facebook#8381) commit 4a43cb0 Author: Sergey Gorbachev <grbchv.s@gmail.com> Date: Wed Apr 22 18:31:21 2026 +0300 [lexical-playground] Feature: HTML conversion button (facebook#8379)

levensta added 2 commits April 21, 2026 01:41

add html conversion button

81b1bdd

add scroll to switches block

7b1368c

levensta requested review from acywatson, etrepum, fantactuka, ivailop7, potatowagon, takuyakanbr and zurfyx as code owners April 20, 2026 23:24

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 Apr 20, 2026

vercel Bot deployed to Preview – lexical-playground April 20, 2026 23:25 View deployment

vercel Bot deployed to Preview – lexical April 20, 2026 23:25 View deployment

etrepum added the extended-tests Run extended e2e tests on a PR label Apr 21, 2026

etrepum reviewed Apr 21, 2026

View reviewed changes

levensta added 2 commits April 22, 2026 01:15

add test

21957a1

Merge branch 'main' into html-conversion-button

7a4e781

vercel Bot deployed to Preview – lexical-playground April 21, 2026 22:16 View deployment

vercel Bot deployed to Preview – lexical April 21, 2026 22:17 View deployment

skip tests in plain text mode

4b2379a

vercel Bot deployed to Preview – lexical-playground April 21, 2026 22:29 View deployment

vercel Bot deployed to Preview – lexical April 21, 2026 22:29 View deployment

etrepum reviewed Apr 22, 2026

View reviewed changes

etrepum approved these changes Apr 22, 2026

View reviewed changes

etrepum added this pull request to the merge queue Apr 22, 2026

Merged via the queue into facebook:main with commit 4a43cb0 Apr 22, 2026
44 checks passed

vishisht31 pushed a commit that referenced this pull request Apr 23, 2026

[lexical-playground] Feature: HTML conversion button (#8379)

e4fcb20

etrepum mentioned this pull request Apr 23, 2026

[lexical-playground] Feature: Format HTML conversion with prettier #8386

Merged

etrepum mentioned this pull request Apr 27, 2026

v0.44.0 #8394

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lexical-playground] Feature: HTML conversion button#8379

[lexical-playground] Feature: HTML conversion button#8379
etrepum merged 5 commits intofacebook:mainfrom
levensta:html-conversion-button

levensta commented Apr 20, 2026

Uh oh!

vercel Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

etrepum left a comment

Uh oh!

etrepum left a comment

Uh oh!

etrepum Apr 22, 2026

Uh oh!

Uh oh!

levensta commented Apr 22, 2026

Uh oh!

etrepum commented Apr 22, 2026

Uh oh!

levensta commented Apr 22, 2026 •

edited

Loading

Uh oh!

etrepum commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const expectedViewHtml = `<h1 class="PlaygroundEditorTheme__h1" dir="auto">
	const expectedViewHtml = html`<h1 class="PlaygroundEditorTheme__h1" dir="auto">

Conversation

levensta commented Apr 20, 2026

Description

Test plan

Before

After

Uh oh!

vercel Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

etrepum Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

levensta commented Apr 22, 2026

Uh oh!

etrepum commented Apr 22, 2026

Uh oh!

levensta commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Apr 20, 2026 •

edited

Loading

levensta commented Apr 22, 2026 •

edited

Loading