@node-edit-utils/core 2.3.3 → 2.3.4

package/src/lib/node-tools/select/helpers/isInsideViewport.test.ts

@@ -0,0 +1,82 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { isInsideViewport } from "./isInsideViewport";
+
+describe("isInsideViewport", () => {
+  let nodeProvider: HTMLElement;
+  let viewport: HTMLElement;
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+    document.body.appendChild(nodeProvider);
+
+    viewport = document.createElement("div");
+    viewport.classList.add("viewport");
+    nodeProvider.appendChild(viewport);
+
+    element = document.createElement("div");
+    viewport.appendChild(element);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(nodeProvider)) {
+      document.body.removeChild(nodeProvider);
+    }
+  });
+
+  it("should return true when element is inside viewport", () => {
+    const result = isInsideViewport(element);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return true when element is nested inside viewport", () => {
+    const nested = document.createElement("div");
+    element.appendChild(nested);
+
+    const result = isInsideViewport(nested);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when element is not inside viewport", () => {
+    const outsideElement = document.createElement("div");
+    document.body.appendChild(outsideElement);
+
+    const result = isInsideViewport(outsideElement);
+
+    expect(result).toBe(false);
+    document.body.removeChild(outsideElement);
+  });
+
+  it("should stop at node-provider", () => {
+    const elementOutsideViewport = document.createElement("div");
+    nodeProvider.appendChild(elementOutsideViewport);
+
+    const result = isInsideViewport(elementOutsideViewport);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when element is direct child of node-provider", () => {
+    const directChild = document.createElement("div");
+    nodeProvider.appendChild(directChild);
+
+    const result = isInsideViewport(directChild);
+
+    expect(result).toBe(false);
+  });
+
+  it("should handle multiple viewports", () => {
+    const viewport2 = document.createElement("div");
+    viewport2.classList.add("viewport");
+    nodeProvider.appendChild(viewport2);
+    const element2 = document.createElement("div");
+    viewport2.appendChild(element2);
+
+    expect(isInsideViewport(element)).toBe(true);
+    expect(isInsideViewport(element2)).toBe(true);
+  });
+});
+

package/src/lib/node-tools/select/helpers/targetSameCandidates.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest";
+import { targetSameCandidates } from "./targetSameCandidates";
+
+describe("targetSameCandidates", () => {
+  const element1 = document.createElement("div");
+  const element2 = document.createElement("div");
+  const element3 = document.createElement("div");
+
+  it("should return true when arrays are identical", () => {
+    const cache = [element1, element2, element3];
+    const current = [element1, element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when arrays have different lengths", () => {
+    const cache = [element1, element2];
+    const current = [element1, element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when arrays have same length but different elements", () => {
+    const cache = [element1, element2];
+    const current = [element2, element3];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when arrays have same elements in different order", () => {
+    const cache = [element1, element2];
+    const current = [element2, element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true for empty arrays", () => {
+    const cache: Element[] = [];
+    const current: Element[] = [];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when one array is empty", () => {
+    const cache: Element[] = [];
+    const current = [element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true for single element arrays with same element", () => {
+    const cache = [element1];
+    const current = [element1];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false for single element arrays with different elements", () => {
+    const cache = [element1];
+    const current = [element2];
+
+    const result = targetSameCandidates(cache, current);
+
+    expect(result).toBe(false);
+  });
+});
+

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);
+  });
+});
+