[lexical-code-core] Bug Fix: restore the code block theme from data-theme on import - #8988
Closed
LeSingh1 wants to merge 1 commit into
Closed
[lexical-code-core] Bug Fix: restore the code block theme from data-theme on import#8988LeSingh1 wants to merge 1 commit into
LeSingh1 wants to merge 1 commit into
Conversation
…heme on import
## Description
`CodeNode.exportDOM` writes the theme next to the language:
```ts
const language = this.getLanguage();
if (language) {
element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
...
}
const theme = this.getTheme();
if (theme) {
element.setAttribute(THEME_DATA_ATTRIBUTE, theme); // 'data-theme'
}
```
but nothing ever read `data-theme` back. `$convertPreElement` (used for both
`<pre>` and multi-line `<code>` on the legacy path) and the `PreRule` /
`MultilineCodeRule` import rules on the `@lexical/html` path all built the node
with `$createCodeNode(el.getAttribute(LANGUAGE_DATA_ATTRIBUTE))` and dropped the
theme. A repo-wide grep for `data-theme` found only writers, no readers.
`CodeNode` has had a `theme` since the two-argument `$createCodeNode(language,
theme)`; it is part of `SerializedCodeNode` and survives JSON round-trips, and
`@lexical/code-shiki` sets it on real documents. Only the HTML round trip lost
it, so copy/pasting a code block between editors — or
`$generateHtmlFromNodes` -> `$generateNodesFromDOM` — silently reverted the
block to the default theme while keeping its language.
Read `data-theme` in all three converters, mirroring how `data-language` is
already handled. The heuristic converters for pasted third-party code
(`<div style="font-family: monospace">`, GitHub code tables) are untouched —
they never carry a Lexical `data-theme`.
## Test plan
Two new cases in
`packages/lexical-code-core/src/__tests__/unit/CodeImportExtension.test.ts`
(the `@lexical/html` rule pipeline) and one export -> import round trip in
`packages/lexical-code-core/src/__tests__/unit/CodeNode.test.ts` (the legacy
`importDOM` path). The round trip asserts the export side too, so it pins both
halves of the contract.
### Before
Verified by restoring `CodeNode.ts` and `CodeImportExtension.ts` to their
pre-fix contents with the new tests in place:
```
$ npx vitest run packages/lexical-code-core/src/__tests__/unit/CodeNode.test.ts \
packages/lexical-code-core/src/__tests__/unit/CodeImportExtension.test.ts
⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯
FAIL |unit| .../CodeImportExtension.test.ts > CodeImportExtension > <pre data-theme="poimandres"> restores the theme
FAIL |unit| .../CodeImportExtension.test.ts > CodeImportExtension > multi-line <code data-theme> restores the theme
FAIL |unit| .../CodeNode.test.ts > CodeNode > round-trips the theme through exportDOM/importDOM
AssertionError: expected undefined to be 'poimandres' // Object.is equality
- Expected:
"poimandres"
+ Received:
undefined
Tests 3 failed | 14 passed (17)
```
### After
```
$ npx vitest run packages/lexical-code-core packages/lexical-code
Test Files 11 passed (11)
Tests 271 passed | 1 skipped (272)
```
LeSingh1
requested review from
acywatson,
etrepum,
fantactuka,
ivailop7,
potatowagon and
zurfyx
as code owners
August 9, 2026 01:11
|
@LeSingh1 is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
CodeNode.exportDOMwrites the theme next to the language:but nothing ever read
data-themeback.$convertPreElement(used for both<pre>and multi-line<code>on the legacy path) and thePreRule/MultilineCodeRuleimport rules on the@lexical/htmlpath all built the nodewith
$createCodeNode(el.getAttribute(LANGUAGE_DATA_ATTRIBUTE))and dropped thetheme. A repo-wide grep for
data-themefound only writers, no readers.CodeNodehas had athemesince the two-argument$createCodeNode(language, theme); it is part ofSerializedCodeNodeand survives JSON round-trips, and@lexical/code-shikisets it on real documents. Only the HTML round trip lostit, so copy/pasting a code block between editors — or
$generateHtmlFromNodes->$generateNodesFromDOM— silently reverted theblock to the default theme while keeping its language.
Read
data-themein all three converters, mirroring howdata-languageisalready handled. The heuristic converters for pasted third-party code
(
<div style="font-family: monospace">, GitHub code tables) are untouched —they never carry a Lexical
data-theme.Test plan
Two new cases in
packages/lexical-code-core/src/__tests__/unit/CodeImportExtension.test.ts(the
@lexical/htmlrule pipeline) and one export -> import round trip inpackages/lexical-code-core/src/__tests__/unit/CodeNode.test.ts(the legacyimportDOMpath). The round trip asserts the export side too, so it pins bothhalves of the contract.
Before
Verified by restoring
CodeNode.tsandCodeImportExtension.tsto theirpre-fix contents with the new tests in place:
After