fix: refactor pc editor events

Author: qradle-yndx

common/types/actions.ts

@@ -10,14 +10,12 @@ export type EventMessageTypes = {
     ON_MOUSE_MOVE: {x: number; y: number};
     ON_HOVER_BLOCK: {rect?: DOMRect; position?: string};
     ON_CLICK_BLOCK: {path: number[]};
-    ON_RESIZE_BLOCK: {rect: DOMRect};
-    ON_UPDATE_SELECTED_BLOCK: {path: number[]; rect: DOMRect};
+    ON_UPDATE_BLOCK_SELECTION: {rect: DOMRect};
     ON_SUPPORTED_BLOCKS: Pick<EditorState, 'blocks' | 'subBlocks' | 'global'>;
     ON_INITIAL_CONTENT: PageContentWithNavigation;
 };
 
 export type ActionMessageTypes = {
     GET_SUPPORTED_BLOCKS: {};
     GET_INITIAL_CONTENT: {};
-    UPDATE_SELECTED_BLOCK: {path: number[]};
 };

editor-v2/containers/Overlay/Overlay.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import {usePostMessageAPIListener} from '../../../common/postMessage';
 import {useMainEditorStore} from '../../hooks/useMainEditorStore';
-import {useSelectedBlockBorders} from '../../hooks/useSelectedBlockBorders';
 import {editorCn} from '../../utils/cn';
 
 import './Overlay.scss';
@@ -37,9 +36,34 @@ const Overlay = ({className, canvasElement}: OverlayProps) => {
         undefined,
     );
     const [hoverBorders, setHoverBorders] = React.useState<DOMRect | null>(null);
+    const [blockBorders, setBlockBorders] = React.useState<DOMRect | null>(null);
 
-    // Use the hook to get blockBorders and handle auto-scrolling
-    const blockBorders = useSelectedBlockBorders(selectedBlock, canvasElement);
+    // Listen for updates to the selected block's position
+    usePostMessageAPIListener('ON_UPDATE_BLOCK_SELECTION', ({rect}) => {
+        setBlockBorders(rect || null);
+    });
+
+    // Update blockBorders when selectedBlock changes
+    React.useEffect(() => {
+        if (!selectedBlock) {
+            setBlockBorders(null);
+        }
+    }, [selectedBlock]);
+
+    // Auto scroll to the selected block when blockBorders changes
+    React.useEffect(() => {
+        if (blockBorders && canvasElement) {
+            // Calculate the scroll position to center the block in the viewport
+            const canvasHeight = canvasElement.clientHeight;
+            const scrollPosition = blockBorders.top - canvasHeight / 2 + blockBorders.height / 2;
+
+            // Scroll the canvas element to the calculated position with smooth behavior
+            canvasElement.scrollTo({
+                top: Math.max(0, scrollPosition),
+                behavior: 'smooth',
+            });
+        }
+    }, [blockBorders, canvasElement]);
 
     const margin = 0;
 

editor-v2/hooks/useSelectedBlockBorders.ts

@@ -4,12 +4,9 @@ import _ from 'lodash';
 
 import {getCursorPositionOverElement} from '../utils/editor';
 
-import {usePCEditorStore} from './usePCEditorStore';
-import {sendEventPostMessage, useInternalPostMessageAPIListener} from './usePostMessageAPI';
+import {sendEventPostMessage} from './usePostMessageAPI';
 
 const usePCEditorBlockMouseEvents = (arrayIndex: number[], element?: HTMLElement) => {
-    const {selectedBlock} = usePCEditorStore();
-
     const onMouseUp = React.useCallback(
         (e: React.MouseEvent) => {
             e.stopPropagation();
@@ -57,41 +54,6 @@ const usePCEditorBlockMouseEvents = (arrayIndex: number[], element?: HTMLElement
         [arrayIndex, element],
     );
 
-    const onResize = React.useCallback(() => {
-        if (element && _.isEqual(selectedBlock, arrayIndex)) {
-            const rect = element.getClientRects().item(0);
-            if (rect) {
-                sendEventPostMessage('ON_RESIZE_BLOCK', {rect});
-            }
-        }
-    }, [arrayIndex, element, selectedBlock]);
-
-    React.useEffect(() => {
-        window.addEventListener('resize', onResize);
-
-        return () => {
-            window.removeEventListener('resize', onResize);
-        };
-    }, [element, onResize]);
-
-    // Listen for the UPDATE_SELECTED_BLOCK action and handle it directly
-    const handleUpdateSelectedBlock = React.useCallback(
-        (data: {path?: number[]}) => {
-            if (data && data.path && Array.isArray(data.path) && _.isEqual(data.path, arrayIndex)) {
-                // Only proceed if the path matches arrayIndex
-                if (element) {
-                    const rect = element.getClientRects().item(0);
-                    if (rect) {
-                        sendEventPostMessage('ON_UPDATE_SELECTED_BLOCK', {rect, path: arrayIndex});
-                    }
-                }
-            }
-        },
-        [arrayIndex, element],
-    );
-
-    useInternalPostMessageAPIListener('UPDATE_SELECTED_BLOCK', handleUpdateSelectedBlock);
-
     return {
         onClick,
         onMouseMove,

src/hooks/usePCEditorBlockMouseEvents.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import _ from 'lodash';
+
+import {usePCEditorStore} from './usePCEditorStore';
+import {sendEventPostMessage} from './usePostMessageAPI';
+
+const usePCEditorBlockSelection = (arrayIndex: number[], element?: HTMLElement) => {
+    const {selectedBlock} = usePCEditorStore();
+
+    const onResize = React.useCallback(() => {
+        if (element && _.isEqual(selectedBlock, arrayIndex)) {
+            const rect = element.getClientRects().item(0);
+            if (rect) {
+                sendEventPostMessage('ON_UPDATE_BLOCK_SELECTION', {rect});
+            }
+        }
+    }, [JSON.stringify(arrayIndex), element, JSON.stringify(selectedBlock)]);
+
+    React.useEffect(() => {
+        window.addEventListener('resize', onResize);
+
+        return () => {
+            window.removeEventListener('resize', onResize);
+        };
+    }, [element, onResize]);
+
+    React.useEffect(() => {
+        onResize();
+    }, [onResize]);
+};
+
+export default usePCEditorBlockSelection;

src/hooks/usePCEditorBlockSelection.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {BlockIdContext} from '../context/blockIdContext';
 
 import usePCEditorBlockMouseEvents from './usePCEditorBlockMouseEvents';
+import usePCEditorBlockSelection from './usePCEditorBlockSelection';
 
 export function usePCEditorItemWrap(index = 0) {
     const [element, setElement] = React.useState<HTMLElement | undefined>();
@@ -15,6 +16,7 @@ export function usePCEditorItemWrap(index = 0) {
 
     const parentBlockId = React.useContext(BlockIdContext);
     const adminBlockMouseEvents = usePCEditorBlockMouseEvents([...parentBlockId, index], element);
+    usePCEditorBlockSelection([...parentBlockId, index], element);
 
     return {adminBlockMouseEvents, blockRef};
 }