fix decorate bug (#4277) without adding extra layers of render tree #4421
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
The combination of #4152 and #4138 broke decoration in
Editable
: thedecorate
function is not called on immediate children of the editor (because the function is retrieved from a React context before the context is set).I fixed this in #4394 by adding a wrapper component around each child in
useChildren
, so the context is set by the time we retrieve thedecorate
function.But after some discussion with @ulion (on #4277 and #4394) I think it's better not to wrap every child, but only the immediate children of
Editable
; this achieves the same thing without adding extra layers to the render tree. And since the immediate children ofEditable
are not passed torenderLeaf
, it's not necessary to wrap them individually for #4152. So this change reverts the changes touse-children.tsx
from #4394, and adds back aChildren
component inEditable
in order to defer the call touseDecorate
.Issue
Fixes: #4277
Example
See test—
decorate
is called on all children of editor.Context
As above, the issue is that a React context (added in #4138) is used before being set (because #4152 replaced the
Children
component with a call touseChildren
). In order to fix the bug without defeating the goals of these two changes, we wrap aChildren
component around theuseChildren
call inEditable
to defer the use of the context.Checks
yarn test
.yarn lint
. (Fix errors withyarn fix
.)yarn start
.)yarn changeset add
.) No changeset needed; no functionality is affected by this change.