fix(dnd): validate proposed hover destinations
This commit is contained in:
1 parent
c1f4f42b21
commit
8bc8fe85c3
5 files changed
+42
-3
No files matched your search
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@wrnexus/block-editor",
|
"name": "@wrnexus/block-editor",
|
||||||
"version": "0.1.2",
|
"version": "0.1.3",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "Hydrated accessible editor runtime for WRNexus block documents.",
|
"description": "Hydrated accessible editor runtime for WRNexus block documents.",
|
||||||
"exports": {
|
"exports": {
|
||||||
|
|||||||
@@ -7,6 +7,10 @@ export interface MountedEditor {
|
|||||||
export interface MountEditorOptions {
|
export interface MountEditorOptions {
|
||||||
direction?: "ltr" | "rtl";
|
direction?: "ltr" | "rtl";
|
||||||
announce?(announcement: DndAnnouncement): string;
|
announce?(announcement: DndAnnouncement): string;
|
||||||
|
canMove?(intent: {
|
||||||
|
nodeIds: string[];
|
||||||
|
to: { parentId: string; slot: string; index: number };
|
||||||
|
}): boolean;
|
||||||
onMove(intent: {
|
onMove(intent: {
|
||||||
nodeIds: string[];
|
nodeIds: string[];
|
||||||
to: { parentId: string; slot: string; index: number };
|
to: { parentId: string; slot: string; index: number };
|
||||||
@@ -37,6 +41,19 @@ export function mountBlockEditor(root: HTMLElement, options: MountEditorOptions)
|
|||||||
let gesture = 0;
|
let gesture = 0;
|
||||||
const groups = new Map<string, { parentId: string; slot: string }>();
|
const groups = new Map<string, { parentId: string; slot: string }>();
|
||||||
manager = createDndManager({
|
manager = createDndManager({
|
||||||
|
accept(ids, location) {
|
||||||
|
const destination = groups.get(String(location.group));
|
||||||
|
return (
|
||||||
|
!destroyed &&
|
||||||
|
generation === currentGeneration &&
|
||||||
|
!!destination &&
|
||||||
|
(options.canMove?.({
|
||||||
|
nodeIds: ids.map(String),
|
||||||
|
to: { ...destination, index: location.index },
|
||||||
|
}) ??
|
||||||
|
true)
|
||||||
|
);
|
||||||
|
},
|
||||||
direction:
|
direction:
|
||||||
options.direction ?? (view.getComputedStyle(root).direction === "rtl" ? "rtl" : "ltr"),
|
options.direction ?? (view.getComputedStyle(root).direction === "rtl" ? "rtl" : "ltr"),
|
||||||
reducedMotion: view.matchMedia("(prefers-reduced-motion: reduce)").matches,
|
reducedMotion: view.matchMedia("(prefers-reduced-motion: reduce)").matches,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@wrnexus/dnd",
|
"name": "@wrnexus/dnd",
|
||||||
"version": "0.1.1",
|
"version": "0.1.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "Stable accessible drag-and-drop primitives for WRNexus.",
|
"description": "Stable accessible drag-and-drop primitives for WRNexus.",
|
||||||
"exports": {
|
"exports": {
|
||||||
|
|||||||
@@ -36,7 +36,10 @@ export function createDndManager(options: DndManagerOptions): DndManager {
|
|||||||
const source = event.operation.source as
|
const source = event.operation.source as
|
||||||
(typeof event.operation.source & { group?: string | number; index?: number }) | null;
|
(typeof event.operation.source & { group?: string | number; index?: number }) | null;
|
||||||
if (!source) return;
|
if (!source) return;
|
||||||
const destination = { group: source.group ?? "default", index: source.index ?? 0 };
|
const target = event.operation.target as
|
||||||
|
(typeof event.operation.target & { group?: string | number; index?: number }) | null;
|
||||||
|
if (!target) return;
|
||||||
|
const destination = { group: target.group ?? "default", index: target.index ?? 0 };
|
||||||
if (options.accept && !options.accept(activeIds, destination)) {
|
if (options.accept && !options.accept(activeIds, destination)) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
options.announce?.({ type: "invalid", ids: activeIds, location: destination });
|
options.announce?.({ type: "invalid", ids: activeIds, location: destination });
|
||||||
|
|||||||
@@ -55,6 +55,17 @@ function fixture(overrides: Partial<DndManagerOptions> = {}) {
|
|||||||
instances,
|
instances,
|
||||||
start: (id: string) => listeners.dragstart!(event(id)),
|
start: (id: string) => listeners.dragstart!(event(id)),
|
||||||
end: (id: string) => listeners.dragend!(event(id)),
|
end: (id: string) => listeners.dragend!(event(id)),
|
||||||
|
over: (target: { group: string; index: number }) => {
|
||||||
|
let prevented = false;
|
||||||
|
listeners.dragover!({
|
||||||
|
...event("first"),
|
||||||
|
operation: { ...event("first").operation, target },
|
||||||
|
preventDefault: () => {
|
||||||
|
prevented = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return prevented;
|
||||||
|
},
|
||||||
get managerDestructions() {
|
get managerDestructions() {
|
||||||
return managerDestructions;
|
return managerDestructions;
|
||||||
},
|
},
|
||||||
@@ -82,6 +93,14 @@ test("late drop resolution cannot clear or announce a newer gesture", async () =
|
|||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("hover acceptance checks the proposed target instead of the source's old group", () => {
|
||||||
|
const f = fixture({ accept: (_ids, to) => to.group === "allowed" });
|
||||||
|
f.start("first");
|
||||||
|
expect(f.over({ group: "blocked", index: 2 })).toBe(true);
|
||||||
|
expect(f.announcements.at(-1)?.location).toEqual({ group: "blocked", index: 2 });
|
||||||
|
expect(f.over({ group: "allowed", index: 0 })).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
test("drop commit rejection reports cancellation and its original intent", async () => {
|
test("drop commit rejection reports cancellation and its original intent", async () => {
|
||||||
const failure = new Error("save failed");
|
const failure = new Error("save failed");
|
||||||
const errors: unknown[] = [];
|
const errors: unknown[] = [];
|
||||||
|
|||||||
Reference in new issue
Block a user