diff --git a/.changeset/fifty-walls-search.md b/.changeset/fifty-walls-search.md new file mode 100644 index 000000000..3ceff3f8e --- /dev/null +++ b/.changeset/fifty-walls-search.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +add context menu undo support diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 1503b7e40..6a821f597 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -506,6 +506,7 @@ export const Editable = forwardRef( // https://github.com/facebook/react/issues/11211 const onDOMBeforeInput = useCallback( (event: InputEvent) => { + handleNativeHistoryEvents(editor, event) const el = ReactEditor.toDOMNode(editor, editor) const root = el.getRootNode() @@ -1077,22 +1078,10 @@ export const Editable = forwardRef( // 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 - } + handleNativeHistoryEvents( + editor, + event.nativeEvent as InputEvent + ) } }, [attributes.onInput, editor] @@ -1976,3 +1965,21 @@ export const isDOMEventHandled = ( return event.defaultPrevented } + +const handleNativeHistoryEvents = (editor: Editor, event: InputEvent) => { + const maybeHistoryEditor: any = editor + if ( + event.inputType === 'historyUndo' && + typeof maybeHistoryEditor.undo === 'function' + ) { + maybeHistoryEditor.undo() + return + } + if ( + event.inputType === 'historyRedo' && + typeof maybeHistoryEditor.redo === 'function' + ) { + maybeHistoryEditor.redo() + return + } +}