Isolate block drag handles from selection and editing
This commit is contained in:
1 parent
640dadaa75
commit
01c1aa567e
3 files changed
+15
-1
No files matched your search
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@wrnexus/block-editor",
|
"name": "@wrnexus/block-editor",
|
||||||
"version": "0.1.10",
|
"version": "0.1.11",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "Hydrated accessible editor runtime for WRNexus block documents.",
|
"description": "Hydrated accessible editor runtime for WRNexus block documents.",
|
||||||
"exports": {
|
"exports": {
|
||||||
|
|||||||
@@ -22,6 +22,10 @@ export function mountBlockCanvas(root: HTMLElement, tree: BlockNode, options: Mo
|
|||||||
handle.setAttribute("aria-label", `Move ${node.type}`);
|
handle.setAttribute("aria-label", `Move ${node.type}`);
|
||||||
handle.style.touchAction = "none";
|
handle.style.touchAction = "none";
|
||||||
handle.textContent = "⋮⋮";
|
handle.textContent = "⋮⋮";
|
||||||
|
// Clicks must not bubble into selection or inline-edit handlers.
|
||||||
|
// Pointer/keyboard sensor events remain available to the DnD backend.
|
||||||
|
for (const name of ["click", "dblclick"])
|
||||||
|
handle.addEventListener(name, event => { event.preventDefault(); event.stopPropagation(); });
|
||||||
element.prepend(handle);
|
element.prepend(handle);
|
||||||
cleanup.push(() => handle.remove());
|
cleanup.push(() => handle.remove());
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,16 @@ test("canvas annotates exact node locations and cleans editor decorations withou
|
|||||||
expect(column.getAttribute("data-block-slot")).toBe("content");
|
expect(column.getAttribute("data-block-slot")).toBe("content");
|
||||||
expect(column.getAttribute("draggable")).toBe("false");
|
expect(column.getAttribute("draggable")).toBe("false");
|
||||||
expect(root.querySelectorAll("[data-block-handle]")).toHaveLength(1);
|
expect(root.querySelectorAll("[data-block-handle]")).toHaveLength(1);
|
||||||
|
const handle = root.querySelector("[data-block-handle]")!;
|
||||||
|
let clicks = 0, pointers = 0;
|
||||||
|
column.addEventListener("click", () => clicks++);
|
||||||
|
column.addEventListener("dblclick", () => clicks++);
|
||||||
|
column.addEventListener("pointerdown", () => pointers++);
|
||||||
|
handle.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
|
||||||
|
handle.dispatchEvent(new window.MouseEvent("dblclick", { bubbles: true }));
|
||||||
|
handle.dispatchEvent(new window.PointerEvent("pointerdown", { bubbles: true }));
|
||||||
|
expect(clicks).toBe(0);
|
||||||
|
expect(pointers).toBe(1);
|
||||||
expect(root.querySelector("[data-block-slot-target]")?.getAttribute("data-block-parent")).toBe("column");
|
expect(root.querySelector("[data-block-slot-target]")?.getAttribute("data-block-parent")).toBe("column");
|
||||||
expect(JSON.stringify(tree)).toBe(before);
|
expect(JSON.stringify(tree)).toBe(before);
|
||||||
mounted.destroy(); mounted.destroy();
|
mounted.destroy(); mounted.destroy();
|
||||||
|
|||||||
Reference in new issue
Block a user