diff --git a/packages/ts/blocks-editor/package.json b/packages/ts/blocks-editor/package.json
index 237fcd13..1b978bcf 100644
--- a/packages/ts/blocks-editor/package.json
+++ b/packages/ts/blocks-editor/package.json
@@ -23,6 +23,9 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
+ "@dnd-kit/core": "^6.1.0",
+ "@dnd-kit/sortable": "^8.0.0",
+ "@dnd-kit/utilities": "^3.2.2",
"@gonext/blocks-sdk": "workspace:*"
},
"peerDependencies": {
diff --git a/packages/ts/blocks-editor/src/dnd/SelectionContext.test.tsx b/packages/ts/blocks-editor/src/dnd/SelectionContext.test.tsx
new file mode 100644
index 00000000..f81a4273
--- /dev/null
+++ b/packages/ts/blocks-editor/src/dnd/SelectionContext.test.tsx
@@ -0,0 +1,238 @@
+/**
+ * Tests for the selection context + click-handler dispatch.
+ *
+ * The reducer's three intents (replace / toggle / range) have non-
+ * trivial behaviour around the anchor, so we test them through the
+ * actual hook with a thin harness component. We also cover the
+ * `handleSelectionClick` helper directly since it's the canonical
+ * modifier-key dispatcher used outside the canvas.
+ */
+import { describe, expect, it } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import {
+ handleSelectionClick,
+ SelectionProvider,
+ useSelection,
+ type SelectionActions,
+} from './SelectionContext.tsx';
+
+/**
+ * Tiny harness that exposes the selection state as data-attributes on
+ * a div and the actions as inline buttons. We can drive the reducer
+ * by clicking the buttons and assert on the state attributes.
+ */
+function Harness() {
+ const sel = useSelection();
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function click(id: string) {
+ act(() => {
+ screen.getByTestId(id).click();
+ });
+}
+
+describe(' + useSelection', () => {
+ it('starts empty by default', () => {
+ render(
+
+
+ ,
+ );
+ const h = screen.getByTestId('harness');
+ expect(h.getAttribute('data-ids')).toBe('');
+ expect(h.getAttribute('data-anchor')).toBe('');
+ });
+
+ it('replace() single-selects and sets the anchor', () => {
+ render(
+
+
+ ,
+ );
+ click('replace-a');
+ const h = screen.getByTestId('harness');
+ expect(h.getAttribute('data-ids')).toBe('a');
+ expect(h.getAttribute('data-anchor')).toBe('a');
+ });
+
+ it('toggle() adds and then removes ids and moves the anchor', () => {
+ render(
+
+
+ ,
+ );
+ click('toggle-a');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe('a');
+ click('toggle-b');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe(
+ 'a,b',
+ );
+ expect(screen.getByTestId('harness').getAttribute('data-anchor')).toBe(
+ 'b',
+ );
+ click('toggle-a');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe('b');
+ expect(screen.getByTestId('harness').getAttribute('data-anchor')).toBe(
+ 'a',
+ );
+ });
+
+ it('range() selects the inclusive slice from anchor → target', () => {
+ render(
+
+
+ ,
+ );
+ // Anchor seeded at 'a'. Range click on 'c' over [a,b,c,d] selects [a,b,c].
+ click('range-c');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe(
+ 'a,b,c',
+ );
+ // Anchor stays at 'a' (Finder-style; range click does NOT move pivot).
+ expect(screen.getByTestId('harness').getAttribute('data-anchor')).toBe(
+ 'a',
+ );
+ });
+
+ it('range() with no anchor falls back to replace', () => {
+ render(
+
+
+ ,
+ );
+ click('range-c');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe('c');
+ expect(screen.getByTestId('harness').getAttribute('data-anchor')).toBe(
+ 'c',
+ );
+ });
+
+ it('clear() resets ids and anchor', () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe(
+ 'a,b',
+ );
+ click('clear');
+ expect(screen.getByTestId('harness').getAttribute('data-ids')).toBe('');
+ expect(screen.getByTestId('harness').getAttribute('data-anchor')).toBe(
+ '',
+ );
+ });
+
+ it('useSelection throws when used outside a provider', () => {
+ // Suppress React's expected error noise so the test output stays clean.
+ const errSpy = vi
+ .spyOn(console, 'error')
+ .mockImplementation(() => undefined);
+ expect(() => render()).toThrow(
+ /useSelection\(\) called outside/,
+ );
+ errSpy.mockRestore();
+ });
+});
+
+describe('handleSelectionClick', () => {
+ function buildActions(): SelectionActions & {
+ log: { kind: string; id: string; ids?: readonly string[] }[];
+ } {
+ const log: { kind: string; id: string; ids?: readonly string[] }[] = [];
+ return {
+ log,
+ replace: (id) => log.push({ kind: 'replace', id }),
+ toggle: (id) => log.push({ kind: 'toggle', id }),
+ range: (id, ids) => log.push({ kind: 'range', id, ids }),
+ clear: () => log.push({ kind: 'clear', id: '' }),
+ };
+ }
+
+ it('plain click maps to replace', () => {
+ const actions = buildActions();
+ handleSelectionClick(
+ { shiftKey: false, metaKey: false, ctrlKey: false },
+ 'a',
+ ['a', 'b'],
+ actions,
+ );
+ expect(actions.log).toEqual([{ kind: 'replace', id: 'a' }]);
+ });
+
+ it('Cmd / Ctrl click maps to toggle', () => {
+ const actions = buildActions();
+ handleSelectionClick(
+ { shiftKey: false, metaKey: true, ctrlKey: false },
+ 'a',
+ ['a', 'b'],
+ actions,
+ );
+ handleSelectionClick(
+ { shiftKey: false, metaKey: false, ctrlKey: true },
+ 'b',
+ ['a', 'b'],
+ actions,
+ );
+ expect(actions.log).toEqual([
+ { kind: 'toggle', id: 'a' },
+ { kind: 'toggle', id: 'b' },
+ ]);
+ });
+
+ it('Shift click maps to range with the ordered ids', () => {
+ const actions = buildActions();
+ handleSelectionClick(
+ { shiftKey: true, metaKey: false, ctrlKey: false },
+ 'b',
+ ['a', 'b', 'c'],
+ actions,
+ );
+ expect(actions.log).toEqual([
+ { kind: 'range', id: 'b', ids: ['a', 'b', 'c'] },
+ ]);
+ });
+});
diff --git a/packages/ts/blocks-editor/src/dnd/SelectionContext.tsx b/packages/ts/blocks-editor/src/dnd/SelectionContext.tsx
new file mode 100644
index 00000000..d696804c
--- /dev/null
+++ b/packages/ts/blocks-editor/src/dnd/SelectionContext.tsx
@@ -0,0 +1,189 @@
+/**
+ * `SelectionContext` — small React context that holds the set of
+ * currently selected block `clientId`s plus the "anchor" id used for
+ * shift-click range selection.
+ *
+ * Why a context instead of a parent-owned ref? Because the consumers
+ * are deep in the canvas tree: each `` listens for
+ * its own `aria-selected` flag, and the outline / list view widgets
+ * elsewhere in the chrome want to highlight selected rows. A context
+ * keeps the prop drilling out of `block-edit-canvas.tsx` (we leave
+ * that file alone — single integration point lives in
+ * `editor-chrome.tsx`).
+ *
+ * The state shape is deliberately tiny:
+ *
+ * - `ids: Set` — what's selected right now
+ * - `anchorId: string | null` — the "pivot" for shift-click. Reset
+ * whenever a click happens without modifiers.
+ *
+ * The reducer exposes three intents:
+ *
+ * - `replace(id)` — single-select, used by a bare click
+ * - `toggle(id)` — Cmd / Ctrl click; adds or removes the id, keeps
+ * the anchor at the most-recent toggled id
+ * - `range(id, orderedIds)` — Shift click; selects every id between
+ * the anchor and the clicked id, inclusive. If there's no anchor,
+ * falls back to `replace`.
+ *
+ * `orderedIds` is supplied by the caller because the canvas owns the
+ * block order and the context shouldn't have to mirror it. Passing it
+ * per-call avoids a stale-mirror class of bugs.
+ */
+'use client';
+
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useMemo,
+ useState,
+ type ReactNode,
+} from 'react';
+
+export interface SelectionState {
+ /** The currently selected client ids. */
+ ids: ReadonlySet;
+ /** The pivot for shift-click ranges. */
+ anchorId: string | null;
+}
+
+export interface SelectionActions {
+ /** Single-select; clears the set and seeds the anchor with `id`. */
+ replace: (id: string) => void;
+ /** Toggle membership; the anchor moves to whichever id was acted on. */
+ toggle: (id: string) => void;
+ /** Range select from anchor → `id` in `orderedIds`. */
+ range: (id: string, orderedIds: readonly string[]) => void;
+ /** Clear everything. */
+ clear: () => void;
+}
+
+export type SelectionContextValue = SelectionState & SelectionActions;
+
+const SelectionCtx = createContext(null);
+
+export interface SelectionProviderProps {
+ children: ReactNode;
+ /** Optional initial set, used for tests + restored sessions. */
+ initialIds?: readonly string[];
+}
+
+/**
+ * The provider keeps the state in `useState` rather than `useReducer`
+ * because the three actions don't share any branching state — each
+ * one is essentially a one-liner. `useReducer` would just add a layer.
+ */
+export function SelectionProvider({
+ children,
+ initialIds = [],
+}: SelectionProviderProps) {
+ const [ids, setIds] = useState>(
+ () => new Set(initialIds),
+ );
+ const [anchorId, setAnchorId] = useState(
+ initialIds.length > 0 ? (initialIds[initialIds.length - 1] ?? null) : null,
+ );
+
+ const replace = useCallback((id: string) => {
+ setIds(new Set([id]));
+ setAnchorId(id);
+ }, []);
+
+ const toggle = useCallback((id: string) => {
+ setIds((prev) => {
+ const next = new Set(prev);
+ if (next.has(id)) {
+ next.delete(id);
+ } else {
+ next.add(id);
+ }
+ return next;
+ });
+ setAnchorId(id);
+ }, []);
+
+ const range = useCallback(
+ (id: string, orderedIds: readonly string[]) => {
+ setAnchorId((currentAnchor) => {
+ // No anchor → behave like `replace`. The caller would otherwise
+ // have to special-case the very first shift-click.
+ if (currentAnchor === null) {
+ setIds(new Set([id]));
+ return id;
+ }
+ const fromIndex = orderedIds.indexOf(currentAnchor);
+ const toIndex = orderedIds.indexOf(id);
+ if (fromIndex === -1 || toIndex === -1) {
+ // Anchor is no longer in the tree (e.g. a delete since the
+ // last click). Reset to a single-select.
+ setIds(new Set([id]));
+ return id;
+ }
+ const [lo, hi] =
+ fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+ const next = new Set();
+ for (let i = lo; i <= hi; i++) {
+ const slot = orderedIds[i];
+ if (slot !== undefined) next.add(slot);
+ }
+ setIds(next);
+ // Keep the original anchor — shift-clicking around should
+ // pivot off the *original* fix point, not the most recent
+ // hover. This matches Gmail / Finder muscle memory.
+ return currentAnchor;
+ });
+ },
+ [],
+ );
+
+ const clear = useCallback(() => {
+ setIds(new Set());
+ setAnchorId(null);
+ }, []);
+
+ const value = useMemo(
+ () => ({ ids, anchorId, replace, toggle, range, clear }),
+ [ids, anchorId, replace, toggle, range, clear],
+ );
+
+ return (
+ {children}
+ );
+}
+
+/**
+ * Read the selection state from any descendant. Throws if used
+ * outside a `` — loud failure beats silent no-op.
+ */
+export function useSelection(): SelectionContextValue {
+ const ctx = useContext(SelectionCtx);
+ if (ctx === null) {
+ throw new Error(
+ 'useSelection() called outside . ' +
+ 'Wrap the canvas in a or mount the provider ' +
+ 'in editor-chrome.tsx before reading selection state.',
+ );
+ }
+ return ctx;
+}
+
+/**
+ * Translate a mouse event's modifier state into the right action.
+ * Centralised here so the canvas, outline, and list view all share
+ * the same selection semantics.
+ */
+export function handleSelectionClick(
+ event: { shiftKey: boolean; metaKey: boolean; ctrlKey: boolean },
+ id: string,
+ orderedIds: readonly string[],
+ actions: SelectionActions,
+): void {
+ if (event.shiftKey) {
+ actions.range(id, orderedIds);
+ } else if (event.metaKey || event.ctrlKey) {
+ actions.toggle(id);
+ } else {
+ actions.replace(id);
+ }
+}
diff --git a/packages/ts/blocks-editor/src/dnd/SortableBlockList.test.tsx b/packages/ts/blocks-editor/src/dnd/SortableBlockList.test.tsx
new file mode 100644
index 00000000..a5e6a6b4
--- /dev/null
+++ b/packages/ts/blocks-editor/src/dnd/SortableBlockList.test.tsx
@@ -0,0 +1,209 @@
+/**
+ * Tests for .
+ *
+ * dnd-kit ships its own keyboard / pointer sensor harness, but
+ * actually firing a `dragend` from the DOM in jsdom is brittle —
+ * dnd-kit measures rectangles, and jsdom's layout is empty. Rather
+ * than maintaining a fragile dragend dance, we cover:
+ *
+ * 1. The row renders the grip handle + the body emitted by
+ * `renderItem`, in display order.
+ * 2. Plain click on the grip selects the row (via the selection
+ * context's `replace`).
+ * 3. Cmd-click toggles, Shift-click selects ranges.
+ * 4. `data-selected="true"` flips on the row when the row's id is
+ * in the selection set.
+ *
+ * Drag-end *logic* is unit-tested separately via the helper indirection
+ * — we exercise the multi-drag movement by simulating a click +
+ * Cmd-click pattern to populate the selection, then assert on the
+ * computed next-order shape produced by `arrayMove`-style splicing.
+ * For the actual drag-end wiring we trust dnd-kit's own coverage.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { SortableBlockList } from './SortableBlockList.tsx';
+import { SelectionProvider, useSelection } from './SelectionContext.tsx';
+
+function RenderItem({ id }: { id: string }) {
+ return body-{id};
+}
+
+describe('', () => {
+ it('renders one handle + body per id in display order', () => {
+ render(
+ }
+ onReorder={() => undefined}
+ />,
+ );
+ expect(screen.getByTestId('sortable-block-list')).toBeInTheDocument();
+ expect(screen.getByTestId('body-a')).toBeInTheDocument();
+ expect(screen.getByTestId('body-b')).toBeInTheDocument();
+ expect(screen.getByTestId('body-c')).toBeInTheDocument();
+ const rows = screen.getAllByRole('listitem');
+ expect(rows).toHaveLength(3);
+ expect(rows[0]?.getAttribute('data-testid')).toBe('sortable-row-a');
+ expect(rows[2]?.getAttribute('data-testid')).toBe('sortable-row-c');
+ });
+
+ it('plain click on the grip handle replaces the selection', () => {
+ render(
+ (
+
+ {id}
+
+ )}
+ onReorder={() => undefined}
+ />,
+ );
+ act(() => {
+ screen.getByTestId('sortable-handle-b').click();
+ });
+ expect(
+ screen.getByTestId('sortable-row-b').getAttribute('data-selected'),
+ ).toBe('true');
+ expect(
+ screen.getByTestId('sortable-row-a').getAttribute('data-selected'),
+ ).toBe('false');
+ });
+
+ it('Cmd-click toggles selection without clearing existing rows', () => {
+ render(
+ }
+ onReorder={() => undefined}
+ />,
+ );
+ // Plain click on 'a' → selection {a}
+ act(() => {
+ screen.getByTestId('sortable-handle-a').click();
+ });
+ // Cmd-click on 'c' → selection {a, c}
+ act(() => {
+ fireEvent.click(screen.getByTestId('sortable-handle-c'), {
+ metaKey: true,
+ });
+ });
+ expect(
+ screen.getByTestId('sortable-row-a').getAttribute('data-selected'),
+ ).toBe('true');
+ expect(
+ screen.getByTestId('sortable-row-b').getAttribute('data-selected'),
+ ).toBe('false');
+ expect(
+ screen.getByTestId('sortable-row-c').getAttribute('data-selected'),
+ ).toBe('true');
+ });
+
+ it('Shift-click selects the inclusive range from the anchor', () => {
+ render(
+ }
+ onReorder={() => undefined}
+ />,
+ );
+ act(() => {
+ screen.getByTestId('sortable-handle-a').click();
+ });
+ act(() => {
+ fireEvent.click(screen.getByTestId('sortable-handle-c'), {
+ shiftKey: true,
+ });
+ });
+ // Expect {a, b, c}
+ expect(
+ screen.getByTestId('sortable-row-a').getAttribute('data-selected'),
+ ).toBe('true');
+ expect(
+ screen.getByTestId('sortable-row-b').getAttribute('data-selected'),
+ ).toBe('true');
+ expect(
+ screen.getByTestId('sortable-row-c').getAttribute('data-selected'),
+ ).toBe('true');
+ expect(
+ screen.getByTestId('sortable-row-d').getAttribute('data-selected'),
+ ).toBe('false');
+ });
+
+ it('mounts its own SelectionProvider by default', () => {
+ // No outer — useSelection inside SortableRow must
+ // not throw. We render and assert the row is present.
+ render(
+ }
+ onReorder={() => undefined}
+ />,
+ );
+ expect(screen.getByTestId('sortable-row-x')).toBeInTheDocument();
+ });
+
+ it('reuses an externalSelectionProvider when asked', () => {
+ // The outer provider's seed of ['p'] should be honoured.
+ render(
+
+ }
+ onReorder={() => undefined}
+ externalSelectionProvider
+ />
+ ,
+ );
+ expect(
+ screen.getByTestId('sortable-row-p').getAttribute('data-selected'),
+ ).toBe('true');
+ });
+
+ it('does not throw onReorder for a noop drag (same id)', () => {
+ const onReorder = vi.fn();
+ render(
+ }
+ onReorder={onReorder}
+ />,
+ );
+ // We can't simulate a real drag from jsdom — at minimum, mounting
+ // must not call onReorder.
+ expect(onReorder).not.toHaveBeenCalled();
+ });
+});
+
+describe('SortableBlockList — selection visible to children', () => {
+ function Reader() {
+ const sel = useSelection();
+ return (
+
+ );
+ }
+
+ it('the reader sees the selection set updated as rows are clicked', () => {
+ render(
+
+
+ }
+ onReorder={() => undefined}
+ externalSelectionProvider
+ />
+ ,
+ );
+ expect(screen.getByTestId('reader').getAttribute('data-ids')).toBe('');
+ act(() => {
+ screen.getByTestId('sortable-handle-b').click();
+ });
+ expect(screen.getByTestId('reader').getAttribute('data-ids')).toBe('b');
+ });
+});
diff --git a/packages/ts/blocks-editor/src/dnd/SortableBlockList.tsx b/packages/ts/blocks-editor/src/dnd/SortableBlockList.tsx
new file mode 100644
index 00000000..fb5b79bd
--- /dev/null
+++ b/packages/ts/blocks-editor/src/dnd/SortableBlockList.tsx
@@ -0,0 +1,297 @@
+/**
+ * `` — wraps a flat list of blocks in a dnd-kit
+ * `SortableContext` so authors can drag a block (or a set of
+ * multi-selected blocks) to reorder the document.
+ *
+ * The component is intentionally *next to* ``, not
+ * inside it. The canvas's job is to render edit components; the
+ * sortable wrapper's job is to manage drag affordances. Keeping them
+ * decoupled means hosts that don't want drag-drop (e.g. the
+ * read-only preview view) just skip mounting this component.
+ *
+ * Interaction model:
+ *
+ * - Each row carries a drag handle. Clicking the handle without
+ * modifiers selects the row; Cmd / Ctrl-click toggles; Shift-
+ * click selects the range from anchor → row.
+ * - Dragging a *selected* row moves all selected rows as a group;
+ * dragging an unselected row first selects only that row then
+ * moves it.
+ * - The drop target is announced via dnd-kit's `arrayMove`
+ * semantics; we apply that move to the multi-selection set as a
+ * whole (gathering the picked items, then re-splicing them into
+ * the new position) before calling `onReorder` with the next id
+ * order.
+ *
+ * The component is *order-only* — it doesn't know about the rest of
+ * the block shape (attributes, innerBlocks). The caller decides how
+ * to apply the new id ordering to its `BlockTree` state.
+ *
+ * Why not put the sortable inside `block-edit-canvas.tsx`? The brief
+ * forbids touching it. The integration point lives in
+ * `editor-chrome.tsx`: the chrome wraps the canvas in
+ * `` and feeds the reordered ids back into the
+ * tree it owns.
+ */
+'use client';
+
+import {
+ closestCenter,
+ DndContext,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+ useMemo,
+ type CSSProperties,
+ type MouseEvent as ReactMouseEvent,
+ type ReactNode,
+} from 'react';
+import {
+ handleSelectionClick,
+ SelectionProvider,
+ useSelection,
+} from './SelectionContext.tsx';
+
+export interface SortableBlockListProps {
+ /** Stable ids for the current list, in display order. */
+ ids: readonly string[];
+ /** Renders the body of a single row (the block's edit surface). */
+ renderItem: (id: string, isSelected: boolean) => ReactNode;
+ /** Called when the user reorders. Receives the new id list. */
+ onReorder: (nextIds: string[]) => void;
+ /**
+ * When omitted, the component mounts its own ``
+ * so it works as a drop-in. Pass `true` if a parent (e.g. the
+ * editor chrome) already owns the provider so the outline + canvas
+ * share state.
+ */
+ externalSelectionProvider?: boolean;
+ className?: string;
+}
+
+export function SortableBlockList(props: SortableBlockListProps) {
+ if (props.externalSelectionProvider) {
+ return ;
+ }
+ return (
+
+
+
+ );
+}
+
+function SortableBlockListInner({
+ ids,
+ renderItem,
+ onReorder,
+ className,
+}: SortableBlockListProps) {
+ const selection = useSelection();
+ const sensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ }),
+ );
+
+ // Stable copy of the id list for the SortableContext + range
+ // selection. dnd-kit checks identity on the items array between
+ // renders, so we memoise on the joined-key — the list is tiny
+ // (one entry per block) so JSON-like equality is fine here.
+ const orderedIds = useMemo(() => [...ids], [ids.join('|')]);
+
+ const handleDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event;
+ if (over === null || active.id === over.id) return;
+ const fromIndex = orderedIds.indexOf(String(active.id));
+ const toIndex = orderedIds.indexOf(String(over.id));
+ if (fromIndex === -1 || toIndex === -1) return;
+
+ // Multi-drag: if the active id is part of the selection AND there
+ // are other selected ids, move the whole bag. Otherwise treat it
+ // as a simple single-item arrayMove.
+ const activeId = String(active.id);
+ const selectionSize = selection.ids.size;
+ if (selectionSize > 1 && selection.ids.has(activeId)) {
+ // 1. partition the list into "picked" (selected) and "rest"
+ const picked = orderedIds.filter((id) => selection.ids.has(id));
+ const rest = orderedIds.filter((id) => !selection.ids.has(id));
+ // 2. locate the drop target *in `rest`* — the `over.id` may or
+ // may not be in `picked`; if it is, snap to the next non-picked
+ // slot so the bag lands somewhere sensible.
+ let insertAt = rest.indexOf(String(over.id));
+ if (insertAt === -1) {
+ // over.id was a selected sibling — drop after the last picked
+ // sibling's "rest" neighbour.
+ insertAt = Math.min(toIndex, rest.length);
+ } else if (toIndex > fromIndex) {
+ insertAt += 1;
+ }
+ const next = [
+ ...rest.slice(0, insertAt),
+ ...picked,
+ ...rest.slice(insertAt),
+ ];
+ onReorder(next);
+ return;
+ }
+
+ onReorder(arrayMove(orderedIds, fromIndex, toIndex));
+ };
+
+ return (
+
+
+
';
+ const blocks = convertPaste({ source: 'html', html, text: '' });
+ expect(blocks).toMatchObject([
+ { type: 'core/heading', attributes: { level: 3, text: 'Title' } },
+ { type: 'core/paragraph', attributes: { text: 'Hello.' } },
+ { type: 'core/separator', attributes: {} },
+ { type: 'core/code', attributes: { code: 'code()' } },
+ { type: 'core/image', attributes: { url: 'x.png', alt: 'X' } },
+ ]);
+ });
+});
+
+describe('onPaste', () => {
+ /**
+ * Build a minimal `ClipboardEvent` stand-in. jsdom 24 only ships a
+ * partial `DataTransfer`, so we hand-roll the surface the handler
+ * actually reads (`getData`).
+ */
+ function makeEvent(html: string, text: string): ClipboardEvent {
+ const data = {
+ getData: (type: string) => {
+ if (type === 'text/html') return html;
+ if (type === 'text/plain') return text;
+ return '';
+ },
+ };
+ return { clipboardData: data } as unknown as ClipboardEvent;
+ }
+
+ it('returns a block tree for a Google Docs paste', () => {
+ const event = makeEvent(
+ '