feat(BlockEditor): add single block selection via drag handle click

- add `onSelectBlock` prop to Block component wired to drag handle click
- implement `selectBlock` function in BlockEditor to select a single block and clear text selection
This commit is contained in:
2026-04-25 18:55:51 -04:00
parent 97ebaf0635
commit 0000f22066
2 changed files with 10 additions and 0 deletions
@@ -41,6 +41,7 @@ const Block = forwardRef(function Block(
onSlashOpen,
onSlashClose,
onSelectAllBlocks,
onSelectBlock,
onShortcutMatch,
onFocus,
onDragStart,
@@ -298,6 +299,7 @@ const Block = forwardRef(function Block(
tabIndex={-1}
title="Glisser pour réordonner"
onMouseDown={handleHandleMouseDown}
onClick={() => onSelectBlock?.(block.id)}
disabled={disabled}
className="w-5 h-5 flex items-center justify-center rounded text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700/60 hover:text-neutral-900 dark:hover:text-white text-xs cursor-grab active:cursor-grabbing leading-none"
>
@@ -86,6 +86,13 @@ export default function BlockEditor({
if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
}
function selectBlock(id) {
setSelectedBlockIds(new Set([id]));
const sel = typeof window !== 'undefined' ? window.getSelection() : null;
sel?.removeAllRanges();
if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
}
function deleteSelectedBlocks() {
if (selectedBlockIds.size === 0) return;
const next = blocks.filter(b => !selectedBlockIds.has(b.id));
@@ -820,6 +827,7 @@ export default function BlockEditor({
onSlashOpen={handleSlashOpen}
onSlashClose={handleSlashClose}
onSelectAllBlocks={handleBlockSelectAll}
onSelectBlock={selectBlock}
onDragStart={() => setDragOver(null)}
onDragEnd={handleDragEnd}
onDragOver={handleDragOver}