[lexical-list] Fix: updating list type to/from check type updates child DOM elements#7800
Conversation
…child DOM elements
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
f9bbff3 to
1f49427
Compare
| config: EditorConfig, | ||
| ) { | ||
| const parent = this.getParent(); | ||
| if ($isListNode(parent) && parent.getListType() === 'check') { |
There was a problem hiding this comment.
Drive-by: if the parent becomes not-check, then we should be removing the check attributes.
|
I don't think it's more elegant but this dependency could also be expressed with a MutationListener or updateDOM change to ListNode that manually calls updateDOM on its existing children when checked changes. I think we might have some other ways to express this kind of thing once extensions land, so maybe we should avoid adding new code to the reconciler in the meantime? |
This reverts commit 1f49427.
|
Forgot |
| test('Should update list children when switching from checklist to bullet', async () => { | ||
| const {editor} = testEnv; | ||
|
|
||
| await waitForReact(() => { |
There was a problem hiding this comment.
fwiw {discrete: true} or even just await should be sufficient for the updateDOM to have already occurred (since the deferred update was scheduled earlier on the microtask queue than the await), waitForReact is probably only useful for decorators
Description
ListItemNodereconciliation depends on the properties of the parent node. Specifically, attributes are added/removed depending on whether the list type ischecked. If the type changes to/fromcheckedbut the children are not manually marked as dirty, then they are not updated.One option is a
ListNodenode transform which marks the children as dirty, however that doesn't work for collab which sets node properties directly. (NB: the reason this isn't currently failing in collab tests is that$insertListreplaces the parent list node which causes the entire list tree to be recreated in Yjs and on other clients.)Another option, which I've included in this PR to demonstrate, is to add a function to
LexicalNodewhich allows a node to indicate to the reconciler that it depends on its parent in some way. The reconciler can check this when iteratingElementNodechildren and reconcile such nodes.Other options considered:
ElementNodes to mark their children as dirty when they're marked as dirty. Slightly bigger change but might be the better way to go.ListItemNodeto not depend on its parent. To do this I think we'd have to droplistitemUncheckedfrom the theme (could use:not(.listitemChecked)instead) as well asrole/aria-checked/tabIndexfrom thelielement.Test plan
Added an example failing test case which passes with the
reconcilerupdateDOMchange.