fix(dnd): defer drop node moves to prevent removeChild RuntimeError (#5070) - #5074
Closed
Samarth1306w wants to merge 1 commit into
Closed
fix(dnd): defer drop node moves to prevent removeChild RuntimeError (#5070)#5074Samarth1306w wants to merge 1 commit into
Samarth1306w wants to merge 1 commit into
Conversation
…5070) When dragging and dropping blocks, useDomDropNode executed editor.update.nodes.move synchronously inside the drop handler. Plite/Slate mutated its model and triggered React DOM re-rendering/unmounting before HTML5 DnD disengaged, causing: NotFoundError: Failed to execute 'removeChild' on 'Node' Fix: - Defer editor.update calls in useDomDropNode drop handler to setTimeout(..., 0). - Defer replaceChildren in block-draggable.tsx resetPreview to setTimeout. - Generate patch changeset for @platejs/dnd. Closes #5070
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
dosubot
Bot
added
the
size:M
🦋 Changeset detectedLatest commit: 79c9c66 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dosubot
Bot
added
bug
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
3 participants
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.
Summary
Fixes #5070 — Homepage block drag and drop crashes with
removeChildRuntimeError onnext.Root Cause
When dragging and dropping blocks in the homepage playground editor,
useDomDropNodeexecutededitor.update.nodes.movesynchronously inside the HTML5dropevent callback. Plite/Slate mutated its model and triggered React DOM re-rendering/unmounting before the browser native HTML5 drag engine completed itsdragendlifecycle. React attemptedparentElement.removeChild(childNode)on DOM nodes that were reparented or detached by the browser drag host, throwing:Fix Description
packages/dnd/src/useDndNode.ts: Wrapeditor.updatecalls insideuseDomDropNode.drop()insetTimeout(..., 0). Deferring model state updates to the next event loop tick allows the native browserdrop/dragenddisengagement to finish before React DOM reconciliation occurs.apps/www/src/registry/ui/block-draggable.tsx: DeferreplaceChildren()inresetPreview()tosetTimeout(..., 0)so imperatively clearing preview nodes does not collide with active React renders..changeset/fix-dnd-removechild-runtime-error.md: Added patch changeset for@platejs/dnd.Verification
editor.updateguarantees native HTML5 DnD disengages cleanly before React unmounts DOM nodes, eliminatingremoveChildRuntimeError collisions.@platejs/dnd.