diff --git a/.changeset/two-grapes-pump.md b/.changeset/two-grapes-pump.md new file mode 100644 index 000000000..e1fcad6b0 --- /dev/null +++ b/.changeset/two-grapes-pump.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Fix move_node triggers nodes re-render diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts index 15a8d7065..21d0ff10b 100644 --- a/packages/slate-react/src/plugin/with-react.ts +++ b/packages/slate-react/src/plugin/with-react.ts @@ -6,6 +6,7 @@ import { Node, Operation, Path, + PathRef, Point, Range, Transforms, @@ -122,6 +123,7 @@ export const withReact = ( // as apply() changes the object reference and hence invalidates the NODE_TO_KEY entry e.apply = (op: Operation) => { const matches: [Path, Key][] = [] + const pathRefMatches: [PathRef, Key][] = [] const pendingDiffs = EDITOR_TO_PENDING_DIFFS.get(e) if (pendingDiffs?.length) { @@ -183,6 +185,21 @@ export const withReact = ( Path.parent(op.newPath) ) matches.push(...getMatches(e, commonPath)) + + let changedPath: Path + if (Path.isBefore(op.path, op.newPath)) { + matches.push(...getMatches(e, Path.parent(op.path))) + changedPath = op.newPath + } else { + matches.push(...getMatches(e, Path.parent(op.newPath))) + changedPath = op.path + } + + const changedNode = Node.get(editor, Path.parent(changedPath)) + const changedNodeKey = ReactEditor.findKey(e, changedNode) + const changedPathRef = Editor.pathRef(e, Path.parent(changedPath)) + pathRefMatches.push([changedPathRef, changedNodeKey]) + break } } @@ -193,6 +210,13 @@ export const withReact = ( const [node] = Editor.node(e, path) NODE_TO_KEY.set(node, key) } + + for (const [pathRef, key] of pathRefMatches) { + if (pathRef.current) { + const [node] = Editor.node(e, pathRef.current) + NODE_TO_KEY.set(node, key) + } + } } e.setFragmentData = (data: Pick) => {