zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat(BlockEditor): add multi-block selection with ctrl+a and delete support

Browse Source 
- add `isSelected` prop and overlay highlight to Block component
- implement double ctrl+a: first selects block content, second selects all blocks
- add `onSelectAllBlocks` callback prop to Block
- add `selectedBlockIds` state and `selectAllBlocks`/`deleteSelectedBlocks` helpers in BlockEditor
- detect cross-block native selection via `selectionchange` and convert to block selection
- handle backspace/delete key to remove all selected blocks
- clear block selection on click outside or focus change
- update README to document multi-block selection behaviour
- export new icons used by the feature
This commit is contained in:
Hyko
2026-04-25 18:01:18 -04:00
parent 8bed913459
commit 0d7b654a2d
4 changed files with 199 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/icons/index.js
+17
View File
@@ -537,4 +537,21 @@ export const Menu01Icon = (props) => (
<path fillRule="evenodd" clipRule="evenodd" d="M3 12C3 11.4477 3.44772 11 4 11L20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L4 13C3.44772 13 3 12.5523 3 12Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M3 19C3 18.4477 3.44772 18 4 18L20 18C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20L4 20C3.44772 20 3 19.5523 3 19Z" fill="currentColor"></path>
</svg>
);
export const PlusSignIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12 2.75C12.6904 2.75 13.25 3.30964 13.25 4V10.75H20C20.6904 10.75 21.25 11.3096 21.25 12C21.25 12.6904 20.6904 13.25 20 13.25H13.25V20C13.25 20.6904 12.6904 21.25 12 21.25C11.3096 21.25 10.75 20.6904 10.75 20V13.25H4C3.30964 13.25 2.75 12.6904 2.75 12C2.75 11.3096 3.30964 10.75 4 10.75H10.75V4C10.75 3.30964 11.3096 2.75 12 2.75Z" fill="currentColor" />
</svg>
);
export const DragDropVerticalIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M15 7.75C15.9665 7.75 16.75 6.9665 16.75 6C16.75 5.0335 15.9665 4.25 15 4.25C14.0335 4.25 13.25 5.0335 13.25 6C13.25 6.9665 14.0335 7.75 15 7.75Z" fill="currentColor" />
<path d="M9 7.75C9.9665 7.75 10.75 6.9665 10.75 6C10.75 5.0335 9.9665 4.25 9 4.25C8.0335 4.25 7.25 5.0335 7.25 6C7.25 6.9665 8.0335 7.75 9 7.75Z" fill="currentColor" />
<path d="M15 19.75C15.9665 19.75 16.75 18.9665 16.75 18C16.75 17.0335 15.9665 16.25 15 16.25C14.0335 16.25 13.25 17.0335 13.25 18C13.25 18.9665 14.0335 19.75 15 19.75Z" fill="currentColor" />
<path d="M15 13.75C15.9665 13.75 16.75 12.9665 16.75 12C16.75 11.0335 15.9665 10.25 15 10.25C14.0335 10.25 13.25 11.0335 13.25 12C13.25 12.9665 14.0335 13.75 15 13.75Z" fill="currentColor" />
<path d="M9 19.75C9.9665 19.75 10.75 18.9665 10.75 18C10.75 17.0335 9.9665 16.25 9 16.25C8.0335 16.25 7.25 17.0335 7.25 18C7.25 18.9665 8.0335 19.75 9 19.75Z" fill="currentColor" />
<path d="M9 13.75C9.9665 13.75 10.75 12.9665 10.75 12C10.75 11.0335 9.9665 10.25 9 10.25C8.0335 10.25 7.25 11.0335 7.25 12C7.25 12.9665 8.0335 13.75 9 13.75Z" fill="currentColor" />
</svg>
);