From 92b28b9ff365e1ef605bb20cd50b39f4fd1a8d74 Mon Sep 17 00:00:00 2001 From: marcospereira1 Date: Wed, 3 Jan 2024 22:07:29 -0400 Subject: [PATCH 1/6] fix: implement dom to react synthetic event conversion --- packages/core/src/utils/pipeHandler.ts | 31 ++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/core/src/utils/pipeHandler.ts b/packages/core/src/utils/pipeHandler.ts index 299b6f73fd..0022569898 100644 --- a/packages/core/src/utils/pipeHandler.ts +++ b/packages/core/src/utils/pipeHandler.ts @@ -5,6 +5,29 @@ import { PlateEditor } from '../types/PlateEditor'; import { DOMHandlers, HandlerReturnType } from '../types/plugin/DOMHandlers'; import { TEditableProps } from '../types/slate-react/TEditableProps'; +function convertDomEventToSyntheticEvent(domEvent: Event) { + const syntheticEvent = { + ...domEvent, + nativeEvent: domEvent, + currentTarget: domEvent.currentTarget as EventTarget, + target: domEvent.target as EventTarget, + bubbles: domEvent.bubbles, + cancelable: domEvent.cancelable, + defaultPrevented: domEvent.defaultPrevented, + eventPhase: domEvent.eventPhase, + isTrusted: domEvent.isTrusted, + timeStamp: domEvent.timeStamp, + type: domEvent.type, + isDefaultPrevented: () => domEvent.defaultPrevented, + isPropagationStopped: () => false, + preventDefault: () => domEvent.preventDefault(), + stopPropagation: () => domEvent.stopPropagation(), + }; + + return syntheticEvent; +} + + /** * Check if an event is overrided by a handler. */ @@ -54,11 +77,15 @@ export const pipeHandler = >( if (pluginsHandlers.length === 0 && !propsHandler) return; return (event: any) => { + const isDomEvent = event instanceof Event; + const handledEvent = isDomEvent ? convertDomEventToSyntheticEvent(event) : event; + const eventIsHandled = pluginsHandlers.some((handler) => - isEventHandled(event, handler) + isEventHandled(handledEvent, handler) ); if (eventIsHandled) return true; - return isEventHandled(event, propsHandler); + return isEventHandled(handledEvent, propsHandler); }; }; + From 1a38ded97f6f775c9cf4a1fe589a26fe5cabeabd Mon Sep 17 00:00:00 2001 From: marcospereira1 Date: Thu, 4 Jan 2024 11:24:41 -0400 Subject: [PATCH 2/6] refactor: convert function to arrow syntax and implement dynamic isPropagationStopped --- packages/core/src/utils/pipeHandler.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core/src/utils/pipeHandler.ts b/packages/core/src/utils/pipeHandler.ts index 0022569898..954ecca3cd 100644 --- a/packages/core/src/utils/pipeHandler.ts +++ b/packages/core/src/utils/pipeHandler.ts @@ -5,7 +5,9 @@ import { PlateEditor } from '../types/PlateEditor'; import { DOMHandlers, HandlerReturnType } from '../types/plugin/DOMHandlers'; import { TEditableProps } from '../types/slate-react/TEditableProps'; -function convertDomEventToSyntheticEvent(domEvent: Event) { +export const convertDomEventToSyntheticEvent = (domEvent: Event) => { + let propagationStopped = false + const syntheticEvent = { ...domEvent, nativeEvent: domEvent, @@ -19,9 +21,12 @@ function convertDomEventToSyntheticEvent(domEvent: Event) { timeStamp: domEvent.timeStamp, type: domEvent.type, isDefaultPrevented: () => domEvent.defaultPrevented, - isPropagationStopped: () => false, + isPropagationStopped: () => propagationStopped, preventDefault: () => domEvent.preventDefault(), - stopPropagation: () => domEvent.stopPropagation(), + stopPropagation: () => { + propagationStopped = true; + domEvent.stopPropagation(); + }, }; return syntheticEvent; From f17b4a788cfe40839b4c177fff2473fbf9645197 Mon Sep 17 00:00:00 2001 From: marcospereira1 Date: Thu, 4 Jan 2024 11:50:10 -0400 Subject: [PATCH 3/6] docs: Update CHANGELOG.md for PR #2854 --- packages/core/CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 364b038d40..7347c18f87 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1977,3 +1977,12 @@ To migrate, find and replace all occurrences of: ### Patch Changes - [#658](https://github.com/udecode/slate-plugins/pull/658) [`201a7993`](https://github.com/udecode/slate-plugins/commit/201a799342ff88405e120182d8554e70b726beea) Thanks [@zbeyens](https://github.com/zbeyens)! - test + + +## Unreleased + +### Patch Changes + +- [#2854](https://github.com/udecode/plate/pull/2854) by [@MarcosPereira1] – + - Fix issue [#2794](https://github.com/udecode/plate/issues/2794): The problem involved unexpected behavior when users attempted to perform a specific action within the editor. The implemented solution corrects this behavior by adjusting the editor's internal state management, ensuring that the action now produces the expected outcome without causing any side effects. + From ccbd757d00ad08609ba65508fa735f6406408678 Mon Sep 17 00:00:00 2001 From: marcospereira1 Date: Thu, 4 Jan 2024 12:39:58 -0400 Subject: [PATCH 4/6] refactor: adjust convertDomEventToSyntheticEvent function --- .changeset/violet-years-train.md | 5 +++++ packages/core/CHANGELOG.md | 9 --------- packages/core/src/utils/pipeHandler.ts | 12 +++++++----- 3 files changed, 12 insertions(+), 14 deletions(-) create mode 100644 .changeset/violet-years-train.md diff --git a/.changeset/violet-years-train.md b/.changeset/violet-years-train.md new file mode 100644 index 0000000000..7da8959b55 --- /dev/null +++ b/.changeset/violet-years-train.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-core": major +--- + +The problem involved unexpected behavior when users attempted to perform a specific action within the editor. The implemented solution corrects this behavior by adjusting the editor's internal state management, ensuring that the action now produces the expected outcome without causing any side effects. diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 7347c18f87..364b038d40 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1977,12 +1977,3 @@ To migrate, find and replace all occurrences of: ### Patch Changes - [#658](https://github.com/udecode/slate-plugins/pull/658) [`201a7993`](https://github.com/udecode/slate-plugins/commit/201a799342ff88405e120182d8554e70b726beea) Thanks [@zbeyens](https://github.com/zbeyens)! - test - - -## Unreleased - -### Patch Changes - -- [#2854](https://github.com/udecode/plate/pull/2854) by [@MarcosPereira1] – - - Fix issue [#2794](https://github.com/udecode/plate/issues/2794): The problem involved unexpected behavior when users attempted to perform a specific action within the editor. The implemented solution corrects this behavior by adjusting the editor's internal state management, ensuring that the action now produces the expected outcome without causing any side effects. - diff --git a/packages/core/src/utils/pipeHandler.ts b/packages/core/src/utils/pipeHandler.ts index 954ecca3cd..9b8b9f61c7 100644 --- a/packages/core/src/utils/pipeHandler.ts +++ b/packages/core/src/utils/pipeHandler.ts @@ -5,14 +5,16 @@ import { PlateEditor } from '../types/PlateEditor'; import { DOMHandlers, HandlerReturnType } from '../types/plugin/DOMHandlers'; import { TEditableProps } from '../types/slate-react/TEditableProps'; -export const convertDomEventToSyntheticEvent = (domEvent: Event) => { - let propagationStopped = false +export const convertDomEventToSyntheticEvent = ( + domEvent: Event +): React.SyntheticEvent => { + let propagationStopped = false const syntheticEvent = { ...domEvent, nativeEvent: domEvent, - currentTarget: domEvent.currentTarget as EventTarget, - target: domEvent.target as EventTarget, + currentTarget: domEvent.currentTarget as unknown as EventTarget, + target: domEvent.target as unknown as EventTarget, bubbles: domEvent.bubbles, cancelable: domEvent.cancelable, defaultPrevented: domEvent.defaultPrevented, @@ -27,7 +29,7 @@ export const convertDomEventToSyntheticEvent = (domEvent: Event) => { propagationStopped = true; domEvent.stopPropagation(); }, - }; + } as unknown as React.SyntheticEvent; return syntheticEvent; } From 6e33c982271634f16d6ba0d41dd7c5ab67a5d6aa Mon Sep 17 00:00:00 2001 From: Joe Anderson Date: Thu, 4 Jan 2024 16:41:43 +0000 Subject: [PATCH 5/6] State return type on convertDomEventToSyntheticEvent --- packages/core/src/utils/pipeHandler.ts | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/core/src/utils/pipeHandler.ts b/packages/core/src/utils/pipeHandler.ts index 954ecca3cd..1bd78e9f0a 100644 --- a/packages/core/src/utils/pipeHandler.ts +++ b/packages/core/src/utils/pipeHandler.ts @@ -5,10 +5,12 @@ import { PlateEditor } from '../types/PlateEditor'; import { DOMHandlers, HandlerReturnType } from '../types/plugin/DOMHandlers'; import { TEditableProps } from '../types/slate-react/TEditableProps'; -export const convertDomEventToSyntheticEvent = (domEvent: Event) => { - let propagationStopped = false +export const convertDomEventToSyntheticEvent = ( + domEvent: Event +): React.SyntheticEvent => { + let propagationStopped = false; - const syntheticEvent = { + return { ...domEvent, nativeEvent: domEvent, currentTarget: domEvent.currentTarget as EventTarget, @@ -22,16 +24,18 @@ export const convertDomEventToSyntheticEvent = (domEvent: Event) => { type: domEvent.type, isDefaultPrevented: () => domEvent.defaultPrevented, isPropagationStopped: () => propagationStopped, + persist: () => { + throw new Error( + 'persist is not implemented for synthetic events created using convertDomEventToSyntheticEvent' + ); + }, preventDefault: () => domEvent.preventDefault(), stopPropagation: () => { propagationStopped = true; domEvent.stopPropagation(); }, }; - - return syntheticEvent; -} - +}; /** * Check if an event is overrided by a handler. @@ -83,7 +87,9 @@ export const pipeHandler = >( return (event: any) => { const isDomEvent = event instanceof Event; - const handledEvent = isDomEvent ? convertDomEventToSyntheticEvent(event) : event; + const handledEvent = isDomEvent + ? convertDomEventToSyntheticEvent(event) + : event; const eventIsHandled = pluginsHandlers.some((handler) => isEventHandled(handledEvent, handler) @@ -93,4 +99,3 @@ export const pipeHandler = >( return isEventHandled(handledEvent, propsHandler); }; }; - From 049745722e03fb97293ba046df085b5e5163db67 Mon Sep 17 00:00:00 2001 From: Joe Anderson Date: Thu, 4 Jan 2024 16:47:58 +0000 Subject: [PATCH 6/6] Update changeset --- .changeset/violet-years-train.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/violet-years-train.md b/.changeset/violet-years-train.md index 7da8959b55..c03cf926c8 100644 --- a/.changeset/violet-years-train.md +++ b/.changeset/violet-years-train.md @@ -1,5 +1,5 @@ --- -"@udecode/plate-core": major +"@udecode/plate-core": patch --- -The problem involved unexpected behavior when users attempted to perform a specific action within the editor. The implemented solution corrects this behavior by adjusting the editor's internal state management, ensuring that the action now produces the expected outcome without causing any side effects. +Ensure that beforeinput event is handled as a React.SyntheticEvent rather than a native DOM event