@node-edit-utils/core 2.3.3 → 2.3.4

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

package/src/lib/node-tools/text/helpers/enterTextEditMode.test.ts

@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { NodeText } from "../types";
+import { enterTextEditMode } from "./enterTextEditMode";
+
+describe("enterTextEditMode", () => {
+  let node: HTMLElement;
+  let nodeProvider: HTMLElement;
+  let mockText: NodeText;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    nodeProvider = document.createElement("div");
+    nodeProvider.setAttribute("data-role", "node-provider");
+
+    mockText = {
+      enableEditMode: vi.fn(),
+      blurEditMode: vi.fn(),
+      getEditableNode: vi.fn(),
+      isEditing: vi.fn(),
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should call enableEditMode when node and nodeProvider are provided", () => {
+    enterTextEditMode(node, nodeProvider, mockText);
+
+    expect(mockText.enableEditMode).toHaveBeenCalledWith(node, nodeProvider);
+  });
+
+  it("should not call enableEditMode when node is null", () => {
+    enterTextEditMode(null as unknown as HTMLElement, nodeProvider, mockText);
+
+    expect(mockText.enableEditMode).not.toHaveBeenCalled();
+  });
+
+  it("should not call enableEditMode when nodeProvider is null", () => {
+    enterTextEditMode(node, null, mockText);
+
+    expect(mockText.enableEditMode).not.toHaveBeenCalled();
+  });
+
+  it("should not call enableEditMode when both are null", () => {
+    enterTextEditMode(null as unknown as HTMLElement, null, mockText);
+
+    expect(mockText.enableEditMode).not.toHaveBeenCalled();
+  });
+});

package/src/lib/node-tools/text/helpers/handleTextChange.test.ts

@@ -0,0 +1,201 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as sendPostMessageModule from "../../../post-message/sendPostMessage";
+import { handleTextChange } from "./handleTextChange";
+
+vi.mock("../../../post-message/sendPostMessage");
+
+describe("handleTextChange", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.setAttribute("data-node-id", "test-node-1");
+    node.textContent = "Initial text";
+    document.body.appendChild(node);
+
+    vi.mocked(sendPostMessageModule.sendPostMessage).mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+    vi.clearAllMocks();
+  });
+
+  it("should send postMessage when text content changes", () => {
+    node.textContent = "Updated text";
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("textContentChanged", {
+      nodeId: "test-node-1",
+      textContent: "Updated text",
+      final: false,
+    });
+  });
+
+  it("should send postMessage with final flag when final is true", () => {
+    node.textContent = "Final text";
+    const mutations: MutationRecord[] = [];
+
+    handleTextChange(node, mutations, true);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("textContentChanged", {
+      nodeId: "test-node-1",
+      textContent: "Final text",
+      final: true,
+    });
+  });
+
+  it("should not send postMessage when no text change and final is false", () => {
+    const mutations: MutationRecord[] = [
+      {
+        type: "attributes",
+        target: node,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: "class",
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations, false);
+
+    expect(sendPostMessageModule.sendPostMessage).not.toHaveBeenCalled();
+  });
+
+  it("should send postMessage when mutations include childList changes", () => {
+    const newChild = document.createTextNode("New child");
+    const mutations: MutationRecord[] = [
+      {
+        type: "childList",
+        target: node,
+        addedNodes: [newChild] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalled();
+  });
+
+  it("should send postMessage when mutations include removed nodes", () => {
+    const removedChild = document.createTextNode("Removed");
+    const mutations: MutationRecord[] = [
+      {
+        type: "childList",
+        target: node,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [removedChild] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalled();
+  });
+
+  it("should handle empty textContent", () => {
+    node.textContent = "";
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("textContentChanged", {
+      nodeId: "test-node-1",
+      textContent: "",
+      final: false,
+    });
+  });
+
+  it("should handle null textContent", () => {
+    node.textContent = null as unknown as string;
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("textContentChanged", {
+      nodeId: "test-node-1",
+      textContent: "",
+      final: false,
+    });
+  });
+
+  it("should handle missing data-node-id", () => {
+    node.removeAttribute("data-node-id");
+    node.textContent = "Text without id";
+    const mutations: MutationRecord[] = [
+      {
+        type: "characterData",
+        target: node.firstChild!,
+        addedNodes: [] as unknown as NodeList,
+        removedNodes: [] as unknown as NodeList,
+        previousSibling: null,
+        nextSibling: null,
+        attributeName: null,
+        attributeNamespace: null,
+        oldValue: null,
+      } as MutationRecord,
+    ];
+
+    handleTextChange(node, mutations);
+
+    expect(sendPostMessageModule.sendPostMessage).toHaveBeenCalledWith("textContentChanged", {
+      nodeId: null,
+      textContent: "Text without id",
+      final: false,
+    });
+  });
+});

package/src/lib/node-tools/text/helpers/hasTextContent.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { hasTextContent } from "./hasTextContent";
+
+describe("hasTextContent", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+  });
+
+  it("should return true when node has text content", () => {
+    node.textContent = "Hello World";
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return true when node has text node child", () => {
+    const textNode = document.createTextNode("Hello");
+    node.appendChild(textNode);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when node has no text content", () => {
+    const result = hasTextContent(node);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when node only has whitespace", () => {
+    node.textContent = "   \n\t  ";
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true when node has text with whitespace", () => {
+    node.textContent = "  Hello  ";
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when node only has element children", () => {
+    const child = document.createElement("span");
+    node.appendChild(child);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return true when node has both text and element children", () => {
+    node.textContent = "Hello";
+    const child = document.createElement("span");
+    node.appendChild(child);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return true when node has text node with content", () => {
+    const textNode = document.createTextNode("Test");
+    node.appendChild(textNode);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false when node has empty text node", () => {
+    const textNode = document.createTextNode("");
+    node.appendChild(textNode);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false when node has whitespace-only text node", () => {
+    const textNode = document.createTextNode("   ");
+    node.appendChild(textNode);
+
+    const result = hasTextContent(node);
+
+    expect(result).toBe(false);
+  });
+});

package/src/lib/node-tools/text/helpers/insertLineBreak.test.ts

@@ -0,0 +1,96 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { insertLineBreak } from "./insertLineBreak";
+
+describe("insertLineBreak", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    node.textContent = "Hello World";
+    document.body.appendChild(node);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+  });
+
+  it("should insert br element at cursor position", () => {
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.setStart(node.firstChild!, 5);
+    range.setEnd(node.firstChild!, 5);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    insertLineBreak();
+
+    expect(node.innerHTML).toContain("<br>");
+  });
+
+  it("should delete contents at cursor position before inserting br", () => {
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.setStart(node.firstChild!, 5);
+    range.setEnd(node.firstChild!, 11); // Select "World"
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    insertLineBreak();
+
+    expect(node.innerHTML).toContain("<br>");
+    expect(node.textContent).not.toContain("World");
+  });
+
+  it("should move cursor after the br element", () => {
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.setStart(node.firstChild!, 5);
+    range.setEnd(node.firstChild!, 5);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    insertLineBreak();
+
+    const newRange = selection?.getRangeAt(0);
+    expect(newRange?.startContainer).toBe(node);
+    expect(newRange?.startOffset).toBeGreaterThan(0);
+  });
+
+  it("should not throw when no selection exists", () => {
+    window.getSelection()?.removeAllRanges();
+
+    expect(() => {
+      insertLineBreak();
+    }).not.toThrow();
+  });
+
+  it("should not throw when selection has no ranges", () => {
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+
+    expect(() => {
+      insertLineBreak();
+    }).not.toThrow();
+  });
+
+  it("should work with empty node", () => {
+    node.textContent = "";
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    range.setStart(node, 0);
+    range.setEnd(node, 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    expect(() => {
+      insertLineBreak();
+    }).not.toThrow();
+    expect(node.innerHTML).toContain("<br>");
+  });
+});

package/src/lib/node-tools/text/helpers/makeNodeEditable.test.ts

@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { makeNodeEditable } from "./makeNodeEditable";
+
+describe("makeNodeEditable", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    document.body.appendChild(node);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+  });
+
+  it("should set contentEditable to true", () => {
+    makeNodeEditable(node);
+
+    expect(node.contentEditable).toBe("true");
+  });
+
+  it("should add is-editable class", () => {
+    makeNodeEditable(node);
+
+    expect(node.classList.contains("is-editable")).toBe(true);
+  });
+
+  it("should set outline to none", () => {
+    makeNodeEditable(node);
+
+    expect(node.style.outline).toBe("none");
+  });
+
+  it("should work on node that already has contentEditable set", () => {
+    node.contentEditable = "false";
+    makeNodeEditable(node);
+
+    expect(node.contentEditable).toBe("true");
+  });
+
+  it("should work on node that already has is-editable class", () => {
+    node.classList.add("is-editable");
+    makeNodeEditable(node);
+
+    expect(node.classList.contains("is-editable")).toBe(true);
+  });
+
+  it("should override existing outline style", () => {
+    node.style.outline = "2px solid red";
+    makeNodeEditable(node);
+
+    expect(node.style.outline).toBe("none");
+  });
+});

package/src/lib/node-tools/text/helpers/makeNodeNonEditable.test.ts

@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { makeNodeNonEditable } from "./makeNodeNonEditable";
+
+describe("makeNodeNonEditable", () => {
+  let node: HTMLElement;
+
+  beforeEach(() => {
+    node = document.createElement("div");
+    document.body.appendChild(node);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(node)) {
+      document.body.removeChild(node);
+    }
+  });
+
+  it("should set contentEditable to false", () => {
+    node.contentEditable = "true";
+    makeNodeNonEditable(node);
+
+    expect(node.contentEditable).toBe("false");
+  });
+
+  it("should remove is-editable class", () => {
+    node.classList.add("is-editable");
+    makeNodeNonEditable(node);
+
+    expect(node.classList.contains("is-editable")).toBe(false);
+  });
+
+  it("should set outline to none", () => {
+    makeNodeNonEditable(node);
+
+    expect(node.style.outline).toBe("none");
+  });
+
+  it("should work on node that is not editable", () => {
+    node.contentEditable = "false";
+    makeNodeNonEditable(node);
+
+    expect(node.contentEditable).toBe("false");
+  });
+
+  it("should work on node that does not have is-editable class", () => {
+    makeNodeNonEditable(node);
+
+    expect(node.classList.contains("is-editable")).toBe(false);
+  });
+
+  it("should override existing outline style", () => {
+    node.style.outline = "2px solid red";
+    makeNodeNonEditable(node);
+
+    expect(node.style.outline).toBe("none");
+  });
+});