@node-edit-utils/core 2.3.2 → 2.3.4

package/src/lib/node-tools/select/selectNode.test.ts

@@ -0,0 +1,238 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as enterTextEditModeModule from "../text/helpers/enterTextEditMode";
+import type { NodeText } from "../text/types";
+import * as getElementsFromPointModule from "./helpers/getElementsFromPoint";
+import * as isInsideComponentModule from "./helpers/isInsideComponent";
+import * as isInsideViewportModule from "./helpers/isInsideViewport";
+import * as targetSameCandidatesModule from "./helpers/targetSameCandidates";
+import { selectNode } from "./selectNode";
+
+vi.mock("../text/helpers/enterTextEditMode");
+vi.mock("./helpers/getElementsFromPoint");
+vi.mock("./helpers/isInsideComponent");
+vi.mock("./helpers/isInsideViewport");
+vi.mock("./helpers/targetSameCandidates");
+
+describe("selectNode", () => {
+  let nodeProvider: HTMLElement;
+  let node1: HTMLElement;
+  let node2: HTMLElement;
+  let mockText: NodeText;
+  let mockEvent: MouseEvent;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+    document.body.appendChild(nodeProvider);
+
+    node1 = document.createElement("div");
+    node1.setAttribute("data-node-id", "node-1");
+    nodeProvider.appendChild(node1);
+
+    node2 = document.createElement("div");
+    node2.setAttribute("data-node-id", "node-2");
+    nodeProvider.appendChild(node2);
+
+    mockText = {
+      getEditableNode: vi.fn().mockReturnValue(null),
+      enableEditMode: vi.fn(),
+      blurEditMode: vi.fn(),
+      isEditing: vi.fn().mockReturnValue(false),
+    };
+
+    mockEvent = new MouseEvent("click", {
+      clientX: 100,
+      clientY: 200,
+      bubbles: true,
+    });
+
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2]);
+    vi.mocked(isInsideComponentModule.isInsideComponent).mockReturnValue(false);
+    vi.mocked(isInsideViewportModule.isInsideViewport).mockReturnValue(true);
+    vi.mocked(targetSameCandidatesModule.targetSameCandidates).mockReturnValue(false);
+    vi.mocked(enterTextEditModeModule.enterTextEditMode).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return null when no candidates", () => {
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBeNull();
+  });
+
+  it("should return first candidate when clickThrough is true (metaKey)", () => {
+    const event = new MouseEvent("click", {
+      clientX: 100,
+      clientY: 200,
+      metaKey: true,
+      bubbles: true,
+    });
+
+    const result = selectNode(event, nodeProvider, mockText);
+
+    expect(result).toBe(node1);
+  });
+
+  it("should return first candidate when clickThrough is true (ctrlKey)", () => {
+    const event = new MouseEvent("click", {
+      clientX: 100,
+      clientY: 200,
+      ctrlKey: true,
+      bubbles: true,
+    });
+
+    const result = selectNode(event, nodeProvider, mockText);
+
+    expect(result).toBe(node1);
+  });
+
+  it("should enter text edit mode when clicking same node with clickThrough", () => {
+    const event = new MouseEvent("click", {
+      clientX: 100,
+      clientY: 200,
+      metaKey: true,
+      bubbles: true,
+    });
+
+    // First click
+    selectNode(event, nodeProvider, mockText);
+    vi.clearAllMocks();
+
+    // Second click on same node
+    selectNode(event, nodeProvider, mockText);
+
+    expect(enterTextEditModeModule.enterTextEditMode).toHaveBeenCalledWith(node1, nodeProvider, mockText);
+  });
+
+  it("should return editable node if it's in candidates", () => {
+    mockText.getEditableNode = vi.fn().mockReturnValue(node1);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node1);
+  });
+
+  it("should cycle through candidates on repeated clicks", () => {
+    // First click - targetSameCandidates returns false initially, so attempt=0
+    // nodeIndex = 2-1-0 = 1, should get last candidate (node2)
+    const result1 = selectNode(mockEvent, nodeProvider, mockText);
+    expect(result1).toBe(node2);
+
+    // Second click - targetSameCandidates returns true, attempt increments to 1
+    // nodeIndex = 2-1-1 = 0, should get first candidate (node1)
+    vi.mocked(targetSameCandidatesModule.targetSameCandidates).mockReturnValue(true);
+    const result2 = selectNode(mockEvent, nodeProvider, mockText);
+    expect(result2).toBe(node1);
+
+    // Third click - attempt stays at 1 (clamped at candidates.length-2=0),
+    // but 1 <= 0 is false, so attempt doesn't increment further
+    // nodeIndex = 2-1-1 = 0, should get first candidate again (node1)
+    const result3 = selectNode(mockEvent, nodeProvider, mockText);
+    expect(result3).toBe(node1);
+  });
+
+  it("should reset attempt when candidates change", () => {
+    vi.mocked(targetSameCandidatesModule.targetSameCandidates).mockReturnValue(false);
+
+    selectNode(mockEvent, nodeProvider, mockText);
+
+    // Should start from last candidate
+    expect(vi.mocked(getElementsFromPointModule.getElementsFromPoint).mock.results[0].value[1]).toBe(node2);
+  });
+
+  it("should enter text edit mode when clicking same node", () => {
+    // Use a single node to ensure we select the same one
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1]);
+
+    // First click - select node1
+    const result1 = selectNode(mockEvent, nodeProvider, mockText);
+    expect(result1).toBe(node1);
+    vi.clearAllMocks();
+
+    // Second click on same node - should enter text edit mode
+    vi.mocked(targetSameCandidatesModule.targetSameCandidates).mockReturnValue(true);
+    const result2 = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result2).toBe(node1);
+    expect(enterTextEditModeModule.enterTextEditMode).toHaveBeenCalledWith(node1, nodeProvider, mockText);
+  });
+
+  it("should filter out ignored DOM elements", () => {
+    const svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([svgPath, node1]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node1);
+  });
+
+  it("should filter out select-none elements", () => {
+    node1.classList.add("select-none");
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should filter out content-layer elements", () => {
+    node1.classList.add("content-layer");
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should filter out resize-handle elements", () => {
+    node1.classList.add("resize-handle");
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should filter out resize-presets elements", () => {
+    node1.classList.add("resize-presets");
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should filter out elements inside components", () => {
+    vi.mocked(isInsideComponentModule.isInsideComponent).mockImplementation((el) => el === node1);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should filter out elements not inside viewport", () => {
+    vi.mocked(isInsideViewportModule.isInsideViewport).mockImplementation((el) => el === node2);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node2);
+  });
+
+  it("should handle multiple candidates correctly", () => {
+    const node3 = document.createElement("div");
+    nodeProvider.appendChild(node3);
+    vi.mocked(getElementsFromPointModule.getElementsFromPoint).mockReturnValue([node1, node2, node3]);
+
+    const result = selectNode(mockEvent, nodeProvider, mockText);
+
+    expect(result).toBe(node3); // Last candidate
+  });
+});

package/src/lib/node-tools/text/events/setupKeydownHandler.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as insertLineBreakModule from "../helpers/insertLineBreak";
+import { setupKeydownHandler } from "./setupKeydownHandler";
+
+vi.mock("../helpers/insertLineBreak");
+
+describe("setupKeydownHandler", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.contentEditable = "true";
+    document.body.appendChild(node);
+
+    vi.mocked(insertLineBreakModule.insertLineBreak).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function", () => {
+    const cleanup = setupKeydownHandler(node);
+
+    expect(typeof cleanup).toBe("function");
+  });
+
+  it("should call insertLineBreak on Enter key", () => {
+    setupKeydownHandler(node);
+
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    node.dispatchEvent(event);
+
+    expect(insertLineBreakModule.insertLineBreak).toHaveBeenCalled();
+  });
+
+  it("should prevent default on Enter key", () => {
+    setupKeydownHandler(node);
+
+    const event = new KeyboardEvent("keydown", { key: "Enter", cancelable: true });
+    const preventDefaultSpy = vi.spyOn(event, "preventDefault");
+    node.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it("should stop propagation on Enter key", () => {
+    setupKeydownHandler(node);
+
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    const stopPropagationSpy = vi.spyOn(event, "stopPropagation");
+    node.dispatchEvent(event);
+
+    expect(stopPropagationSpy).toHaveBeenCalled();
+  });
+
+  it("should not call insertLineBreak on other keys", () => {
+    setupKeydownHandler(node);
+
+    const event = new KeyboardEvent("keydown", { key: "a" });
+    node.dispatchEvent(event);
+
+    expect(insertLineBreakModule.insertLineBreak).not.toHaveBeenCalled();
+  });
+
+  it("should remove event listener on cleanup", () => {
+    const cleanup = setupKeydownHandler(node);
+
+    cleanup();
+
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    node.dispatchEvent(event);
+
+    expect(insertLineBreakModule.insertLineBreak).not.toHaveBeenCalled();
+  });
+
+  it("should handle multiple Enter key presses", () => {
+    setupKeydownHandler(node);
+
+    const event1 = new KeyboardEvent("keydown", { key: "Enter" });
+    const event2 = new KeyboardEvent("keydown", { key: "Enter" });
+    node.dispatchEvent(event1);
+    node.dispatchEvent(event2);
+
+    expect(insertLineBreakModule.insertLineBreak).toHaveBeenCalledTimes(2);
+  });
+});
+

package/src/lib/node-tools/text/events/setupMutationObserver.test.ts

@@ -0,0 +1,213 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as connectMutationObserverModule from "../../../helpers/observer/connectMutationObserver";
+import * as refreshHighlightFrameModule from "../../highlight/refreshHighlightFrame";
+import * as handleTextChangeModule from "../helpers/handleTextChange";
+import { setupMutationObserver } from "./setupMutationObserver";
+
+vi.mock("../../../helpers/observer/connectMutationObserver");
+vi.mock("../../highlight/refreshHighlightFrame");
+vi.mock("../helpers/handleTextChange");
+
+describe("setupMutationObserver", () => {
+  let node: HTMLElement;
+  let nodeProvider: HTMLElement;
+  let mockDisconnect: ReturnType<typeof vi.fn>;
+  let mockObserver: { disconnect: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node");
+    node.textContent = "Initial text";
+    document.body.appendChild(node);
+
+    nodeProvider = document.createElement("div");
+    document.body.appendChild(nodeProvider);
+
+    mockDisconnect = vi.fn();
+    mockObserver = { disconnect: mockDisconnect };
+
+    vi.mocked(connectMutationObserverModule.connectMutationObserver).mockReturnValue(
+      mockObserver as unknown as ReturnType<typeof connectMutationObserverModule.connectMutationObserver>
+    );
+    vi.mocked(refreshHighlightFrameModule.refreshHighlightFrame).mockImplementation(() => {});
+    vi.mocked(handleTextChangeModule.handleTextChange).mockImplementation(() => {});
+
+    // Mock requestAnimationFrame
+    global.requestAnimationFrame = vi.fn((cb) => {
+      setTimeout(cb, 0);
+      return 1;
+    }) as unknown as typeof requestAnimationFrame;
+    global.cancelAnimationFrame = vi.fn() as unknown as typeof cancelAnimationFrame;
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function", () => {
+    const cleanup = setupMutationObserver(node, nodeProvider);
+
+    expect(typeof cleanup).toBe("function");
+  });
+
+  it("should call connectMutationObserver", () => {
+    setupMutationObserver(node, nodeProvider);
+
+    expect(connectMutationObserverModule.connectMutationObserver).toHaveBeenCalledWith(
+      node,
+      expect.any(Function)
+    );
+  });
+
+  it("should call refreshHighlightFrame on mutation", () => {
+    setupMutationObserver(node, nodeProvider);
+
+    const callback = vi.mocked(connectMutationObserverModule.connectMutationObserver).mock.calls[0][1];
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    callback(mutations);
+
+    expect(refreshHighlightFrameModule.refreshHighlightFrame).toHaveBeenCalledWith(node, nodeProvider, "canvas");
+  });
+
+  it("should use custom canvas name", () => {
+    setupMutationObserver(node, nodeProvider, "custom-canvas");
+
+    const callback = vi.mocked(connectMutationObserverModule.connectMutationObserver).mock.calls[0][1];
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    callback(mutations);
+
+    expect(refreshHighlightFrameModule.refreshHighlightFrame).toHaveBeenCalledWith(node, nodeProvider, "custom-canvas");
+  });
+
+  it("should accumulate mutations", async () => {
+    setupMutationObserver(node, nodeProvider);
+
+    const callback = vi.mocked(connectMutationObserverModule.connectMutationObserver).mock.calls[0][1];
+    const mutations1: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+    const mutations2: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    callback(mutations1);
+    callback(mutations2);
+
+    // Wait for RAF callbacks
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(handleTextChangeModule.handleTextChange).toHaveBeenCalled();
+  });
+
+  it("should disconnect observer on cleanup", () => {
+    const cleanup = setupMutationObserver(node, nodeProvider);
+
+    cleanup();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it("should cancel pending animation frames on cleanup", () => {
+    const cleanup = setupMutationObserver(node, nodeProvider);
+
+    // Trigger a mutation to schedule RAF
+    const callback = vi.mocked(connectMutationObserverModule.connectMutationObserver).mock.calls[0][1];
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+    callback(mutations);
+
+    cleanup();
+
+    expect(global.cancelAnimationFrame).toHaveBeenCalled();
+  });
+
+  it("should process mutations after double RAF", async () => {
+    setupMutationObserver(node, nodeProvider);
+
+    const callback = vi.mocked(connectMutationObserverModule.connectMutationObserver).mock.calls[0][1];
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as NodeList,
+        removedNodes: [] as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    callback(mutations);
+
+    // Wait for double RAF
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(handleTextChangeModule.handleTextChange).toHaveBeenCalledWith(node, mutations, false);
+  });
+});
+

package/src/lib/node-tools/text/events/setupNodeListeners.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as setupKeydownHandlerModule from "./setupKeydownHandler";
+import * as setupMutationObserverModule from "./setupMutationObserver";
+import { setupNodeListeners } from "./setupNodeListeners";
+
+vi.mock("./setupKeydownHandler");
+vi.mock("./setupMutationObserver");
+
+describe("setupNodeListeners", () => {
+  let node: HTMLElement;
+  let nodeProvider: HTMLElement;
+  let blurHandler: ReturnType<typeof vi.fn>;
+  let keydownCleanup: ReturnType<typeof vi.fn>;
+  let mutationCleanup: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.contentEditable = "true";
+    document.body.appendChild(node);
+
+    nodeProvider = document.createElement("div");
+    document.body.appendChild(nodeProvider);
+
+    blurHandler = vi.fn();
+    keydownCleanup = vi.fn();
+    mutationCleanup = vi.fn();
+
+    vi.mocked(setupKeydownHandlerModule.setupKeydownHandler).mockReturnValue(keydownCleanup);
+    vi.mocked(setupMutationObserverModule.setupMutationObserver).mockReturnValue(mutationCleanup);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should return cleanup function", () => {
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    expect(typeof cleanup).toBe("function");
+  });
+
+  it("should return no-op cleanup when nodeProvider is null", () => {
+    const cleanup = setupNodeListeners(node, null, blurHandler);
+
+    expect(typeof cleanup).toBe("function");
+    expect(setupKeydownHandlerModule.setupKeydownHandler).not.toHaveBeenCalled();
+    expect(setupMutationObserverModule.setupMutationObserver).not.toHaveBeenCalled();
+  });
+
+  it("should setup blur listener", () => {
+    setupNodeListeners(node, nodeProvider, blurHandler);
+
+    const blurEvent = new FocusEvent("blur");
+    node.dispatchEvent(blurEvent);
+
+    expect(blurHandler).toHaveBeenCalled();
+  });
+
+  it("should setup keydown handler", () => {
+    setupNodeListeners(node, nodeProvider, blurHandler);
+
+    expect(setupKeydownHandlerModule.setupKeydownHandler).toHaveBeenCalledWith(node);
+  });
+
+  it("should setup mutation observer", () => {
+    setupNodeListeners(node, nodeProvider, blurHandler);
+
+    expect(setupMutationObserverModule.setupMutationObserver).toHaveBeenCalledWith(node, nodeProvider, "canvas");
+  });
+
+  it("should use custom canvas name", () => {
+    setupNodeListeners(node, nodeProvider, blurHandler, "custom-canvas");
+
+    expect(setupMutationObserverModule.setupMutationObserver).toHaveBeenCalledWith(node, nodeProvider, "custom-canvas");
+  });
+
+  it("should remove blur listener on cleanup", () => {
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    cleanup();
+
+    const blurEvent = new FocusEvent("blur");
+    node.dispatchEvent(blurEvent);
+
+    expect(blurHandler).not.toHaveBeenCalled();
+  });
+
+  it("should call keydown cleanup on cleanup", () => {
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    cleanup();
+
+    expect(keydownCleanup).toHaveBeenCalled();
+  });
+
+  it("should call mutation cleanup on cleanup", () => {
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    cleanup();
+
+    expect(mutationCleanup).toHaveBeenCalled();
+  });
+
+  it("should handle cleanup when mutation cleanup is undefined", () => {
+    vi.mocked(setupMutationObserverModule.setupMutationObserver).mockReturnValue(undefined);
+
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    expect(() => {
+      cleanup();
+    }).not.toThrow();
+  });
+
+  it("should cleanup all listeners", () => {
+    const cleanup = setupNodeListeners(node, nodeProvider, blurHandler);
+
+    cleanup();
+
+    expect(keydownCleanup).toHaveBeenCalled();
+    expect(mutationCleanup).toHaveBeenCalled();
+    
+    const blurEvent = new FocusEvent("blur");
+    node.dispatchEvent(blurEvent);
+    expect(blurHandler).not.toHaveBeenCalled();
+  });
+});
+