feat: unselect block on deletion

Author: qradle-yndx

common/store.ts

@@ -11,7 +11,7 @@ export interface EditorState {
     zoom: number;
 
     manipulateOverlayMode: 'insert' | 'reorder' | false;
-    selectedBlock?: number[];
+    selectedBlock: number[] | null;
     initialized: boolean;
 
     content: PageContentWithNavigation;
@@ -28,7 +28,7 @@ export const initialStore: EditorState = {
     deviceWidth: '100%',
     zoom: 100,
     manipulateOverlayMode: false,
-    selectedBlock: undefined,
+    selectedBlock: null,
     initialized: false,
     content: {blocks: []},
     blocks: [],

editor-v2/store.ts

@@ -19,7 +19,7 @@ import {
 
 export interface EditorMethods {
     initialize(): void;
-    setSelectedBlock(path?: number[]): void;
+    setSelectedBlock(path: number[] | null): void;
     setHeight(height: number): void;
     setDeviceWidth(deviceWidth: string): void;
     setZoom(zoom: number): void;
@@ -108,10 +108,8 @@ export const createEditorStore = initializeStore<EditorState, EditorMethods>(
             set((state) => ({
                 ...state,
                 content: {...state.content, blocks: newBlocksConfig},
+                selectedBlock: arrayPath,
             }));
-
-            // Set the inserted block as selected
-            get().setSelectedBlock(arrayPath);
         },
         enableInsertMode(blockType: string) {
             set((state) => ({
@@ -166,10 +164,10 @@ export const createEditorStore = initializeStore<EditorState, EditorMethods>(
             const blocksConfig = get().content.blocks;
 
             const newBlocksConfig = modifyObjectByPath(blocksConfig, arrayPath, removeFromArray);
-
             set((state) => ({
                 ...state,
                 content: {...state.content, blocks: newBlocksConfig},
+                selectedBlock: null,
             }));
         },
         duplicateBlock: (arrayPath) => {
@@ -234,9 +232,8 @@ export const createEditorStore = initializeStore<EditorState, EditorMethods>(
             set((state) => ({
                 ...state,
                 content: {...state.content, blocks: newBlocksConfig},
+                selectedBlock: finalDestinationPath,
             }));
-
-            get().setSelectedBlock(finalDestinationPath);
         },
         resetInitialize: () => {
             set((state) => ({

src/hooks/usePCEditorBlockSelection.ts

@@ -14,7 +14,7 @@ const usePCEditorBlockSelection = (arrayIndex: number[], element?: HTMLElement)
                 sendEventPostMessage('ON_UPDATE_BLOCK_SELECTION', {rect});
             }
         }
-    }, [JSON.stringify(arrayIndex), element, JSON.stringify(selectedBlock)]);
+    }, [arrayIndex, element, selectedBlock]);
 
     React.useEffect(() => {
         window.addEventListener('resize', onResize);
@@ -24,6 +24,7 @@ const usePCEditorBlockSelection = (arrayIndex: number[], element?: HTMLElement)
         };
     }, [element, onResize]);
 
+    // Update blockBorders when selectedBlock changes
     React.useEffect(() => {
         onResize();
     }, [onResize]);