@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/tests/hooks/textMarks.test.tsx

@@ -1,624 +0,0 @@
-import { act, renderHook } from "@testing-library/react"
-import { beforeEach, describe, expect, it } from "vitest"
-import { EditorContext } from "../../lib/hooks/editor"
-import { blurNode, useTextMarks } from "../../lib/hooks/textMarks"
-import {
-  FormattableNode,
-  type FormattableNodeProps,
-} from "../../lib/model/node/formattable"
-import { TextNode, TextNodeProps } from "../../lib/model/node/text"
-import { Page } from "../../lib/model/page"
-import { createTestEditor } from "../createTestEditor"
-import { EditableNode } from "../../lib/model"
-
-// Concrete FormattableNode implementation for testing
-class TestFormattableNode extends FormattableNode {
-  get name() {
-    return "test-formattable"
-  }
-}
-
-describe("useTextMarks", () => {
-  let editor: ReturnType<typeof createTestEditor>
-  let page: Page
-
-  beforeEach(() => {
-    editor = createTestEditor()
-    page = new Page(editor, { id: "page-1" })
-    editor.pages = new Map([["page-1", page]])
-  })
-
-  function wrapper({ children }: { children: React.ReactNode }) {
-    return <EditorContext value={editor}>{children}</EditorContext>
-  }
-
-  function createTextNode(props: Partial<TextNodeProps> = {}): TextNode {
-    return new TextNode(editor, page, {
-      id: editor.id(),
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 50,
-      ...props,
-    })
-  }
-
-  function createFormattableNode(
-    props: Partial<FormattableNodeProps> = {},
-  ): TestFormattableNode {
-    return new TestFormattableNode(editor, page, {
-      id: editor.id(),
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 50,
-      ...props,
-    })
-  }
-
-  describe("with empty selection", () => {
-    it("returns null state when no nodes provided", () => {
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      expect(result.current.state).toBeNull()
-    })
-  })
-
-  describe("with EditableNodes (TextNode)", () => {
-    it("returns text marks state from single editable node", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      // Default state values
-      expect(result.current.state).not.toBeNull()
-      expect(result.current.state?.isBold).toBe(false)
-      expect(result.current.state?.isItalic).toBe(false)
-      expect(result.current.state?.isUnderline).toBe(false)
-      expect(result.current.state?.isStrike).toBe(false)
-    })
-
-    it("toggleBold toggles bold on all selected nodes", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      // Add some text content so it's not empty
-      node.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Hello" }] }],
-      })
-      node.tiptap.commands.selectAll()
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.toggle("Bold")
-      })
-
-      // Verify bold was applied via Tiptap
-      expect(node.tiptap.isActive("bold")).toBe(true)
-    })
-
-    it("setColor sets color on editable nodes", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      node.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Hello" }] }],
-      })
-      node.tiptap.commands.selectAll()
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setColor("#ff0000", { end: true })
-      })
-
-      // Color is applied via Tiptap textStyle mark
-      const attrs = node.tiptap.getAttributes("textStyle")
-      expect(attrs.color).toBe("#ff0000")
-    })
-
-    it("setSize sets font size on editable nodes", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      node.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Hello" }] }],
-      })
-      node.tiptap.commands.selectAll()
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setSize(24)
-      })
-
-      const attrs = node.tiptap.getAttributes("textStyle")
-      expect(attrs.fontSize).toBe("24px")
-    })
-
-    it("setFamily sets font family on editable nodes", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      node.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Hello" }] }],
-      })
-      node.tiptap.commands.selectAll()
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setFamily("Arial")
-      })
-
-      const attrs = node.tiptap.getAttributes("textStyle")
-      expect(attrs.fontFamily).toBe("Arial")
-    })
-
-    it("setFamily with null unsets font family", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      node.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Hello" }] }],
-      })
-      node.tiptap.commands.selectAll()
-      node.tiptap.commands.setFontFamily("Arial")
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setFamily(null)
-      })
-
-      const attrs = node.tiptap.getAttributes("textStyle")
-      expect(attrs.fontFamily).toBeUndefined()
-    })
-  })
-
-  describe("with FormattableNodes", () => {
-    it("returns text marks state from single formattable node", () => {
-      const node = createFormattableNode({
-        bold: true,
-        italic: false,
-        color: "#333333",
-        size: 18,
-        family: "Roboto",
-        spacing: 1.5,
-      })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      expect(result.current.state).not.toBeNull()
-      expect(result.current.state?.isBold).toBe(true)
-      expect(result.current.state?.isItalic).toBe(false)
-      expect(result.current.state?.color).toBe("#333333")
-      expect(result.current.state?.size).toBe(18)
-      expect(result.current.state?.family).toBe("Roboto")
-      expect(result.current.state?.spacing).toBe(1.5)
-    })
-
-    it("toggle updates formattable node properties", () => {
-      const node = createFormattableNode({ bold: false })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.toggle("Bold")
-      })
-
-      expect(node.bold).toBe(true)
-    })
-
-    it("toggle turns off mark when already active", () => {
-      const node = createFormattableNode({ bold: true })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.toggle("Bold")
-      })
-
-      expect(node.bold).toBe(false)
-    })
-
-    it("setColor updates formattable node color with history", () => {
-      const node = createFormattableNode({ color: "#000000" })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setColor("#ff0000", { end: true })
-      })
-
-      expect(node.color).toBe("#ff0000")
-      expect(editor.history.undoHistory.length).toBeGreaterThan(0)
-    })
-
-    it("setColor with end:false does not create history entry", () => {
-      const node = createFormattableNode({ color: "#000000" })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      const historyLengthBefore = editor.history.undoHistory.length
-
-      act(() => {
-        result.current.setColor("#ff0000", { end: false })
-      })
-
-      expect(node.color).toBe("#ff0000")
-      expect(editor.history.undoHistory.length).toBe(historyLengthBefore)
-    })
-
-    it("setSize updates formattable node size with history", () => {
-      const node = createFormattableNode({ size: 16 })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setSize(24)
-      })
-
-      expect(node.size).toBe(24)
-      expect(editor.history.undoHistory.length).toBeGreaterThan(0)
-    })
-
-    it("setFamily updates formattable node family", () => {
-      const node = createFormattableNode({ family: null })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setFamily("Georgia")
-      })
-
-      expect(node.family).toBe("Georgia")
-    })
-
-    it("setSpacing updates formattable node spacing", () => {
-      const node = createFormattableNode({ spacing: 0 })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.setSpacing(2.5, { end: true })
-      })
-
-      expect(node.spacing).toBe(2.5)
-      expect(editor.history.undoHistory.length).toBeGreaterThan(0)
-    })
-  })
-
-  describe("with mixed EditableNodes and FormattableNodes", () => {
-    it("merges state from both node types", () => {
-      const textNode = createTextNode()
-      const formattableNode = createFormattableNode({
-        bold: true,
-        color: "#ff0000",
-      })
-      page.nodes = new Map<string, EditableNode | FormattableNode>([
-        [textNode.id, textNode],
-        [formattableNode.id, formattableNode],
-      ])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [textNode],
-            formattables: [formattableNode],
-          }),
-        { wrapper },
-      )
-
-      // State should be merged - since textNode is empty, only formattable state is used
-      expect(result.current.state).not.toBeNull()
-    })
-
-    it("toggle updates both editable and formattable nodes", () => {
-      const textNode = createTextNode()
-      const formattableNode = createFormattableNode({ italic: false })
-      page.nodes = new Map<string, EditableNode | FormattableNode>([
-        [textNode.id, textNode],
-        [formattableNode.id, formattableNode],
-      ])
-
-      // Add content to text node
-      textNode.tiptap.commands.setContent({
-        type: "doc",
-        content: [{ type: "paragraph", content: [{ type: "text", text: "Test" }] }],
-      })
-      textNode.tiptap.commands.selectAll()
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [textNode],
-            formattables: [formattableNode],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.toggle("Italic")
-      })
-
-      expect(textNode.tiptap.isActive("italic")).toBe(true)
-      expect(formattableNode.italic).toBe(true)
-    })
-  })
-
-  describe("state merging", () => {
-    it("returns null for conflicting boolean values", () => {
-      const node1 = createFormattableNode({ bold: true })
-      const node2 = createFormattableNode({ bold: false })
-      page.nodes = new Map([
-        [node1.id, node1],
-        [node2.id, node2],
-      ])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node1, node2],
-          }),
-        { wrapper },
-      )
-
-      // When values differ, merged value becomes null but state.isBold defaults to false
-      expect(result.current.state?.isBold).toBe(false)
-    })
-
-    it("returns consistent value when all nodes match", () => {
-      const node1 = createFormattableNode({ bold: true, color: "#ff0000" })
-      const node2 = createFormattableNode({ bold: true, color: "#ff0000" })
-      page.nodes = new Map([
-        [node1.id, node1],
-        [node2.id, node2],
-      ])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node1, node2],
-          }),
-        { wrapper },
-      )
-
-      expect(result.current.state?.isBold).toBe(true)
-      expect(result.current.state?.color).toBe("#ff0000")
-    })
-
-    it("returns null color for conflicting colors", () => {
-      const node1 = createFormattableNode({ color: "#ff0000" })
-      const node2 = createFormattableNode({ color: "#00ff00" })
-      page.nodes = new Map([
-        [node1.id, node1],
-        [node2.id, node2],
-      ])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node1, node2],
-          }),
-        { wrapper },
-      )
-
-      expect(result.current.state?.color).toBeNull()
-    })
-  })
-
-  describe("blurNode", () => {
-    it("clears the last focused editor reference", () => {
-      const node = createTextNode()
-      page.nodes = new Map([[node.id, node]])
-
-      // Focus the editor
-      node.tiptap.commands.focus()
-
-      // Render the hook to establish the focused editor tracking
-      renderHook(
-        () =>
-          useTextMarks({
-            editables: [node],
-            formattables: [],
-          }),
-        { wrapper },
-      )
-
-      // blurNode should clear the reference
-      blurNode(node)
-
-      // This test mainly verifies blurNode doesn't throw
-      expect(true).toBe(true)
-    })
-  })
-
-  describe("all toggle marks", () => {
-    it.each([
-      ["Bold", "bold"],
-      ["Italic", "italic"],
-      ["Underline", "underline"],
-      ["Strike", "strike"],
-      ["Superscript", "superscript"],
-      ["Subscript", "subscript"],
-    ] as const)("toggle %s updates formattable node %s property", (mark, prop) => {
-      const node = createFormattableNode({ [prop]: false })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      act(() => {
-        result.current.toggle(mark)
-      })
-
-      expect(node[prop]).toBe(true)
-    })
-  })
-
-  describe("default values", () => {
-    it("uses default size from computed style when none specified", () => {
-      const node = createFormattableNode()
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      // Size should be the node's size (default 16) or computed font size
-      expect(result.current.state?.size).toBe(16)
-    })
-
-    it("uses Inter as default font family", () => {
-      const node = createFormattableNode({ family: null })
-      page.nodes = new Map([[node.id, node]])
-
-      const { result } = renderHook(
-        () =>
-          useTextMarks({
-            editables: [],
-            formattables: [node],
-          }),
-        { wrapper },
-      )
-
-      // When all families are null, default is Inter
-      expect(result.current.state?.family).toBe("Inter")
-    })
-  })
-})