From 68915e8cfadd9d8dd545dbcd8c33b6b69827a287 Mon Sep 17 00:00:00 2001
From: Ravi Lamkoti <44892121+RavenColEvol@users.noreply.github.com>
Date: Sat, 22 Mar 2025 02:38:03 +0530
Subject: [PATCH] fix: context menu undo support (#5822)

* fix: context menu undo support

* chore: add change set for context menu undo fix

* chore: fix lint
---
 .changeset/fifty-walls-search.md              |  5 +++
 .../slate-react/src/components/editable.tsx   | 39 +++++++++++--------
 2 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/fifty-walls-search.md

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 = <E extends Event>(
 
   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
+  }
+}