From 904526e645a93454b0df2ef0bceba52e0b260111 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 28 May 2024 15:16:35 +0300 Subject: [PATCH 1/5] expose focus event callbacks --- .../shared/plugins/event-editor/constants.ts | 3 ++ .../event-editor/createEventEditorPlugin.ts | 13 ++++++ .../src/shared/plugins/event-editor/index.ts | 2 + .../event-editor/useFocusEditorEvents.ts | 42 +++++++++++++++++++ 4 files changed, 60 insertions(+) create mode 100644 packages/core/src/shared/plugins/event-editor/constants.ts create mode 100644 packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts diff --git a/packages/core/src/shared/plugins/event-editor/constants.ts b/packages/core/src/shared/plugins/event-editor/constants.ts new file mode 100644 index 0000000000..f80baf5323 --- /dev/null +++ b/packages/core/src/shared/plugins/event-editor/constants.ts @@ -0,0 +1,3 @@ +export const FOCUS_EDITOR_EVENT = 'focus-editor-event'; + +export const BLUR_EDITOR_EVENT = 'blur-editor-event'; diff --git a/packages/core/src/shared/plugins/event-editor/createEventEditorPlugin.ts b/packages/core/src/shared/plugins/event-editor/createEventEditorPlugin.ts index 1f65a2564c..419879df49 100644 --- a/packages/core/src/shared/plugins/event-editor/createEventEditorPlugin.ts +++ b/packages/core/src/shared/plugins/event-editor/createEventEditorPlugin.ts @@ -1,4 +1,5 @@ import { createPluginFactory } from '../../utils/createPluginFactory'; +import { BLUR_EDITOR_EVENT, FOCUS_EDITOR_EVENT } from './constants'; import { eventEditorActions, eventEditorSelectors } from './eventEditorStore'; export const KEY_EVENT_EDITOR = 'event-editor'; @@ -13,9 +14,21 @@ export const createEventEditorPlugin = createPluginFactory({ } eventEditorActions.blur(editor.id); + + document.dispatchEvent( + new CustomEvent(BLUR_EDITOR_EVENT, { + detail: { id: editor.id }, + }) + ); }, onFocus: (editor) => () => { eventEditorActions.focus(editor.id); + + document.dispatchEvent( + new CustomEvent(FOCUS_EDITOR_EVENT, { + detail: { id: editor.id }, + }) + ); }, }, key: KEY_EVENT_EDITOR, diff --git a/packages/core/src/shared/plugins/event-editor/index.ts b/packages/core/src/shared/plugins/event-editor/index.ts index 9e47e5c787..95a9d201a1 100644 --- a/packages/core/src/shared/plugins/event-editor/index.ts +++ b/packages/core/src/shared/plugins/event-editor/index.ts @@ -5,3 +5,5 @@ export * from './createEventEditorPlugin'; export * from './eventEditorStore'; export * from './getEventPlateId'; + +export * from './useFocusEditorEvents'; diff --git a/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts b/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts new file mode 100644 index 0000000000..4af1814450 --- /dev/null +++ b/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts @@ -0,0 +1,42 @@ +import { useEffect } from 'react'; + +import type { Value } from '@udecode/plate-common'; + +import type { PlateEditor } from '../../types'; + +import { BLUR_EDITOR_EVENT, FOCUS_EDITOR_EVENT } from './constants'; + +export const useFocusEditorEvents = ({ + editorRef, + onEditorBlur, + onEditorFocus, +}: { + editorRef: PlateEditor | null; + onEditorBlur?: () => void; + onEditorFocus?: () => void; +}) => { + useEffect(() => { + const onFocusEditor = (event: Event) => { + const id = (event as any).detail.id; + + if (!!onEditorFocus && editorRef && editorRef.id === id) { + onEditorFocus(); + } + }; + const onBlurEditor = (event: Event) => { + const id = (event as any).detail.id; + + if (!!onEditorBlur && editorRef && editorRef.id === id) { + onEditorBlur(); + } + }; + + document.addEventListener(FOCUS_EDITOR_EVENT, onFocusEditor); + document.addEventListener(BLUR_EDITOR_EVENT, onBlurEditor); + + return () => { + document.removeEventListener(FOCUS_EDITOR_EVENT, onFocusEditor); + document.removeEventListener(BLUR_EDITOR_EVENT, onBlurEditor); + }; + }, [editorRef, onEditorBlur, onEditorFocus]); +}; From b55e8e34add056f7b7eed631536c16cf9c5a6dfd Mon Sep 17 00:00:00 2001 From: Ziad Beyens Date: Tue, 28 May 2024 15:15:31 +0200 Subject: [PATCH 2/5] Create soft-wolves-breathe.md --- .changeset/soft-wolves-breathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/soft-wolves-breathe.md diff --git a/.changeset/soft-wolves-breathe.md b/.changeset/soft-wolves-breathe.md new file mode 100644 index 0000000000..3cb1354fb6 --- /dev/null +++ b/.changeset/soft-wolves-breathe.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-core": patch +--- + +[event-editor] expose focus event callbacks From b0e9bd7aecba1bfffb36f5de72258ba0a86cfe56 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 30 May 2024 14:34:35 +0300 Subject: [PATCH 3/5] change Value import --- .../src/shared/plugins/event-editor/useFocusEditorEvents.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts b/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts index 4af1814450..1a739deb52 100644 --- a/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts +++ b/packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -import type { Value } from '@udecode/plate-common'; +import type { Value } from '@udecode/slate'; import type { PlateEditor } from '../../types'; From 13e7f44f5bf7e112c941a049d29f81a89977f976 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 30 May 2024 14:56:52 +0300 Subject: [PATCH 4/5] fix test --- .../serializer-md/src/deserializer/utils/deserializeMd.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx b/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx index f8496a3be9..762cded4b4 100644 --- a/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx @@ -294,7 +294,7 @@ describe('deserializeMd', () => { Line 1 - {'\n'} + {'
'} Line 2 From 314138a001269d58b993262dac98f480dc964589 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 30 May 2024 15:58:46 +0300 Subject: [PATCH 5/5] revert unrelated test fix --- .../serializer-md/src/deserializer/utils/deserializeMd.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx b/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx index 762cded4b4..f8496a3be9 100644 --- a/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx @@ -294,7 +294,7 @@ describe('deserializeMd', () => { Line 1 - {'
'} + {'\n'} Line 2