Merge pull request #3220 from dimaanj/expose-editor-focus-event-callb…

…acks

[event-editor] expose focus event callbacks

.changeset/soft-wolves-breathe.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-core": patch
+---
+
+[event-editor] expose focus event callbacks

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';

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,

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';

packages/core/src/shared/plugins/event-editor/useFocusEditorEvents.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import type { Value } from '@udecode/slate';
+
+import type { PlateEditor } from '../../types';
+
+import { BLUR_EDITOR_EVENT, FOCUS_EDITOR_EVENT } from './constants';
+
+export const useFocusEditorEvents = ({
+  editorRef,
+  onEditorBlur,
+  onEditorFocus,
+}: {
+  editorRef: PlateEditor<Value> | 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]);
+};