diff --git a/.changeset/curvy-seals-attack.md b/.changeset/curvy-seals-attack.md new file mode 100644 index 0000000000..aa574f471b --- /dev/null +++ b/.changeset/curvy-seals-attack.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +fix: sync built-in state on undo when editor is unfocused diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index f1945d53ae..98ee43887a 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -1042,8 +1042,31 @@ export const Editable = forwardRef( op() } deferredOperations.current = [] + + // COMPAT: Since `beforeinput` doesn't fully `preventDefault`, + // there's a chance that content might be placed in the browser's undo stack. + // This means undo can be triggered even when the div is not focused, + // and it only triggers the input event for the node. (2024/10/09) + if (!ReactEditor.isFocused(editor)) { + const native = event.nativeEvent as InputEvent + const maybeHistoryEditor: any = editor + if ( + native.inputType === 'historyUndo' && + typeof maybeHistoryEditor.undo === 'function' + ) { + maybeHistoryEditor.undo() + return + } + if ( + native.inputType === 'historyRedo' && + typeof maybeHistoryEditor.redo === 'function' + ) { + maybeHistoryEditor.redo() + return + } + } }, - [attributes.onInput] + [attributes.onInput, editor] )} onBlur={useCallback( (event: React.FocusEvent) => {