@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/tests/model/node.test.ts

@@ -1,276 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest"
-import { Page } from "../../lib/model/page"
-import { ImageNode } from "../../lib/model/node/image"
-import { createTestEditor } from "../createTestEditor"
-
-// Using ImageNode as a concrete implementation of Node for testing
-describe("Node", () => {
-  let editor: ReturnType<typeof createTestEditor>
-  let page: Page
-
-  beforeEach(() => {
-    editor = createTestEditor()
-    page = new Page(editor, { id: "page-1" })
-  })
-
-  describe("construction", () => {
-    it("initializes with required properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-      })
-
-      expect(node.id).toBe("node-1")
-      expect(node.x).toBe(10)
-      expect(node.y).toBe(20)
-      expect(node.width).toBe(100)
-      expect(node.height).toBe(50)
-    })
-
-    it("applies default values for optional properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      expect(node.rotation).toBe(0)
-      expect(node.locked).toBe(false)
-      expect(node.role).toBeNull()
-      expect(node.css).toBe("")
-    })
-
-    it("accepts optional properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        rotation: 45,
-        locked: true,
-        role: ["header"],
-        css: "filter: blur(2px);",
-      })
-
-      expect(node.rotation).toBe(45)
-      expect(node.locked).toBe(true)
-      expect(node.role).toBe("header")
-      expect(node.css).toBe("filter: blur(2px);")
-    })
-
-    it("stores reference to parent page", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      expect(node.page).toBe(page)
-    })
-  })
-
-  describe("width and height constraints", () => {
-    it("enforces minimum width of 1", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      node.width = 0
-      expect(node.width).toBe(1)
-
-      node.width = -10
-      expect(node.width).toBe(1)
-    })
-
-    it("enforces minimum height of 1", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      node.height = 0
-      expect(node.height).toBe(1)
-
-      node.height = -10
-      expect(node.height).toBe(1)
-    })
-
-    it("allows setting width and height to exactly 1", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      node.width = 1
-      node.height = 1
-
-      expect(node.width).toBe(1)
-      expect(node.height).toBe(1)
-    })
-  })
-
-  describe("boundingBox", () => {
-    it("returns node rect when rotation is 0", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-        rotation: 0,
-      })
-
-      const bbox = node.boundingBox
-      expect(bbox.x).toBe(10)
-      expect(bbox.y).toBe(20)
-      expect(bbox.width).toBe(100)
-      expect(bbox.height).toBe(50)
-    })
-
-    it("expands bounding box for rotated node", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        rotation: 45,
-      })
-
-      const bbox = node.boundingBox
-      // A 100x100 square rotated 45 degrees has diagonal ~141.4
-      expect(bbox.width).toBeGreaterThan(100)
-      expect(bbox.height).toBeGreaterThan(100)
-    })
-  })
-
-  describe("blockMove", () => {
-    it("returns true when node is locked", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        locked: true,
-      })
-
-      const mockEvent = {} as React.PointerEvent
-      expect(node.blockMove(mockEvent)).toBe(true)
-    })
-
-    it("returns false when node is not locked", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        locked: false,
-      })
-
-      const mockEvent = {} as React.PointerEvent
-      expect(node.blockMove(mockEvent)).toBe(false)
-    })
-  })
-
-  describe("serialization", () => {
-    it("serializes required properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-      })
-
-      const serialized = node.serialize()
-
-      expect(serialized.name).toBe("image")
-      expect(serialized.props.id).toBe("node-1")
-      expect(serialized.props.x).toBe(10)
-      expect(serialized.props.y).toBe(20)
-      expect(serialized.props.width).toBe(100)
-      expect(serialized.props.height).toBe(50)
-    })
-
-    it("omits default optional properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      })
-
-      const props = node.props()
-
-      expect(props).not.toHaveProperty("rotation")
-      expect(props).not.toHaveProperty("locked")
-      expect(props).not.toHaveProperty("css")
-      expect(props).not.toHaveProperty("role")
-    })
-
-    it("includes non-default optional properties", () => {
-      const node = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        rotation: 90,
-        locked: true,
-        css: "opacity: 0.5;",
-        role: ["button"],
-      })
-
-      const props = node.props()
-
-      expect(props.rotation).toBe(90)
-      expect(props.locked).toBe(true)
-      expect(props.css).toBe("opacity: 0.5;")
-      expect(props.role).toEqual(["button"])
-    })
-  })
-
-  describe("deserialization round-trip", () => {
-    it("produces identical props after serialize -> deserialize -> serialize", () => {
-      const original = new ImageNode(editor, page, {
-        id: "node-1",
-        x: 50,
-        y: 100,
-        width: 200,
-        height: 150,
-        rotation: 30,
-        locked: true,
-        css: "border: 1px solid red;",
-        role: ["logo"],
-      })
-
-      const firstSerialized = original.serialize()
-
-      const restored = editor.deserializeNode(page, firstSerialized)
-      const secondSerialized = restored.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-    })
-  })
-})

package/tests/model/page.test.ts

@@ -1,150 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest"
-import { Page } from "../../lib/model/page"
-import { createTestEditor } from "../createTestEditor"
-
-describe("Page", () => {
-  let editor: ReturnType<typeof createTestEditor>
-
-  beforeEach(() => {
-    editor = createTestEditor()
-  })
-
-  describe("construction", () => {
-    it("creates a page with required id", () => {
-      const page = new Page(editor, { id: "page-1" })
-      expect(page.id).toBe("page-1")
-    })
-
-    it("applies default dimensions (A4 landscape)", () => {
-      const page = new Page(editor, { id: "page-1" })
-      expect(page.width).toBe(841)
-      expect(page.height).toBe(595)
-    })
-
-    it("applies default white background", () => {
-      const page = new Page(editor, { id: "page-1" })
-      expect(page.background).toBe("#ffffff")
-    })
-
-    it("accepts custom dimensions", () => {
-      const page = new Page(editor, { id: "page-1", width: 1920, height: 1080 })
-      expect(page.width).toBe(1920)
-      expect(page.height).toBe(1080)
-    })
-
-    it("accepts custom background", () => {
-      const page = new Page(editor, { id: "page-1", background: "#ff0000" })
-      expect(page.background).toBe("#ff0000")
-    })
-
-    it("initializes with empty nodes map", () => {
-      const page = new Page(editor, { id: "page-1" })
-      expect(page.nodes.size).toBe(0)
-    })
-
-    it("initializes with empty snapLines", () => {
-      const page = new Page(editor, { id: "page-1" })
-      expect(page.snapLines).toEqual([])
-    })
-  })
-
-  describe("serialization", () => {
-    it("serializes all page properties", () => {
-      const page = new Page(editor, {
-        id: "page-1",
-        width: 800,
-        height: 600,
-        background: "#cccccc",
-      })
-
-      const serialized = page.serialize()
-
-      expect(serialized).toEqual({
-        id: "page-1",
-        width: 800,
-        height: 600,
-        background: "#cccccc",
-        nodes: [],
-      })
-    })
-
-    it("serializes with default values", () => {
-      const page = new Page(editor, { id: "page-1" })
-      const serialized = page.serialize()
-
-      expect(serialized).toEqual({
-        id: "page-1",
-        width: 841,
-        height: 595,
-        background: "#ffffff",
-        nodes: [],
-      })
-    })
-
-    it("serializes contained nodes", () => {
-      const page = new Page(editor, { id: "page-1" })
-
-      // Add a node via the editor's deserialize method
-      const node = editor.deserializeNode(page, {
-        name: "image",
-        props: { id: "img-1", x: 10, y: 20, width: 100, height: 100 },
-      })
-      page.nodes = new Map([["img-1", node]])
-
-      const serialized = page.serialize()
-
-      expect(serialized.nodes).toHaveLength(1)
-      expect(serialized.nodes[0].name).toBe("image")
-      expect(serialized.nodes[0].props.id).toBe("img-1")
-    })
-  })
-
-  describe("deserialization round-trip", () => {
-    it("produces identical output after serialize -> load -> serialize", () => {
-      const page = new Page(editor, {
-        id: "page-1",
-        width: 1024,
-        height: 768,
-        background: "#f0f0f0",
-      })
-
-      // Add nodes
-      const node = editor.deserializeNode(page, {
-        name: "image",
-        props: {
-          id: "img-1",
-          x: 50,
-          y: 100,
-          width: 200,
-          height: 150,
-          url: "https://example.com/image.png",
-          fit: "cover",
-          roundness: 10,
-          borderWidth: 2,
-          borderColor: "#333333",
-        },
-      })
-      page.nodes = new Map([["img-1", node]])
-
-      const firstSerialized = page.serialize()
-
-      // Create new page from serialized data
-      const restoredPage = new Page(editor, {
-        id: firstSerialized.id,
-        width: firstSerialized.width,
-        height: firstSerialized.height,
-        background: firstSerialized.background,
-      })
-      restoredPage.nodes = new Map(
-        firstSerialized.nodes.map((n) => [
-          n.props.id,
-          editor.deserializeNode(restoredPage, n),
-        ]),
-      )
-
-      const secondSerialized = restoredPage.serialize()
-
-      expect(secondSerialized).toEqual(firstSerialized)
-    })
-  })
-})

package/tests/setup.ts

@@ -1,7 +0,0 @@
-import "@testing-library/jest-dom/vitest"
-import { cleanup } from "@testing-library/react"
-import { afterEach } from "vitest"
-
-afterEach(() => {
-  cleanup()
-})

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    "moduleResolution": "Bundler",
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    "paths": {
-      "@lazlon/html-editor/ui": ["./lib/ui/index.ts"],
-      "@lazlon/html-editor/model": ["./lib/model/index.ts"],
-      "@lazlon/html-editor/hooks": ["./lib/hooks/index.ts"]
-    }
-  },
-  "include": ["lib", "demo"]
-}

package/vite.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import tailwindcss from "@tailwindcss/vite"
-import tsconfigPaths from "vite-tsconfig-paths"
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss(), tsconfigPaths()],
-})

package/vitest.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from "vitest/config"
-import react from "@vitejs/plugin-react"
-import tsconfigPaths from "vite-tsconfig-paths"
-
-export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
-  test: {
-    globals: true,
-    environment: "happy-dom",
-    setupFiles: ["./tests/setup.ts"],
-    include: ["tests/**/*.test.{ts,tsx}"],
-  },
-})