@lazlon-platform/html-editor 0.4.0 → 0.6.0

package/lib/model/page.ts

@@ -1,7 +1,6 @@
 import { state } from "react-bolt"
 import type { Editor } from "./editor"
 import { Node, type SerializedNode } from "./node"
-// import { createRef } from "react"
 
 export interface PageProps
   extends Partial<Pick<Page, "background" | "width" | "height">> {
@@ -15,6 +14,7 @@ export interface SerializedPage extends Omit<PageProps, "nodes"> {
 
 export class Page {
   readonly id: string
+  readonly editor: Editor
 
   ref: HTMLElement | null = null
 
@@ -28,7 +28,8 @@ export class Page {
     | { y: number; x?: number; w?: number; h?: never } // vertical
   > = []
 
-  constructor(_: Editor, props: PageProps) {
+  constructor(editor: Editor, props: PageProps) {
+    this.editor = editor
     this.id = props.id
     this.background = props.background ?? "#ffffff"
     this.width = props.width ?? 841
@@ -44,7 +45,7 @@ export class Page {
       height: this.height,
       nodes: this.nodes
         .values()
-        .map((node) => node.serialize())
+        .map((node) => this.editor.serializeNode(node))
         .toArray(),
     }
   }

package/lib/model/traversal.ts

@@ -1,5 +1,5 @@
 import { Node } from "./node"
-import { GroupNode } from "./node/group"
+import { GroupNode } from "./node/groupNode"
 import { Page } from "./page"
 
 export function flattenNodes(root: Node | Page): Array<Node> {

package/lib/ui/extractor.ts

@@ -1,9 +1,9 @@
 import type { JSONContent } from "@tiptap/core"
 import { uniq } from "es-toolkit"
 import { Node } from "../model/node"
-import { EditableNode } from "../model/node/editable"
-import { FormattableNode } from "../model/node/formattable"
-import { ShapeNode } from "../model/node/shape/shape"
+import { EditableNode } from "../model/node/editableNode"
+import { FormattableNode } from "../model/node/formattableNode"
+import { ShapeNode } from "../model/node/shapeNode"
 import { Page } from "../model/page"
 import { flattenNodes } from "../model/traversal"
 

package/lib/ui/index.ts

@@ -1,11 +1,9 @@
 export { getReadableForeground } from "./colors"
 export { getColors, getFontFamilies } from "./extractor"
-export { ArrowContent } from "./node/ArrowContent"
 export { EditableContent } from "./node/EditableContent"
-export { EllipseContent } from "./node/EllipseContent"
 export { GroupContent } from "./node/GroupContent"
 export { ImageContent } from "./node/ImageContent"
+export { LineContent } from "./node/LineContent"
 export { NodeView } from "./node/NodeView"
-export { PolygonContent } from "./node/PolygonContent"
-export { StarContent } from "./node/StarContent"
+export { ShapeContent } from "./node/ShapeContent"
 export { TextContent } from "./node/TextContent"

package/lib/ui/node/{EditableContent.tsx → EditableContent/index.tsx}

@@ -3,8 +3,8 @@ import clsx from "clsx"
 import { debounce, isEqual } from "es-toolkit"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useStore } from "react-bolt"
-import { useEditor } from "../../hooks/editor"
-import type { EditableNode, EditableNodeProps } from "../../model/node/editable"
+import { useEditor } from "../../../hooks/editor"
+import type { EditableNode } from "../../../model"
 import { useDoubleClick } from "./useDoubleClick"
 
 export function EditableContent(props: {
@@ -38,6 +38,7 @@ export function EditableContent(props: {
   useEffect(() => {
     if (!selection.has(node)) {
       node.blur()
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setClicked(false)
     }
   }, [selection, node])
@@ -47,7 +48,7 @@ export function EditableContent(props: {
       const next = node.tiptap.getJSON()
       const prev = prevContent.current
       if (!isEqual(prev, next)) {
-        editor.history.push<EditableNodeProps>({
+        editor.history.push<EditableNode>({
           undo: ["set-node-props", [node.id, { content: prev }]],
           redo: ["set-node-props", [node.id, { content: next }]],
         })

package/lib/ui/node/GroupContent.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "react-bolt"
 import type { Node } from "../../model/node"
-import type { GroupNode } from "../../model/node/group"
+import type { GroupNode } from "../../model"
 
 function GroupedNodeContent(props: { node: Node; children: React.ReactNode }) {
   const { node, children } = props

package/lib/ui/node/ImageContent.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx"
 import { useStore } from "react-bolt"
-import type { ImageNode } from "../../model/node/image"
+import type { ImageNode } from "../../model"
 
 export function ImageContent(props: { node: ImageNode; fallback?: React.ReactNode }) {
   const { node, fallback } = props

package/lib/ui/node/LineContent.tsx

@@ -0,0 +1,32 @@
+import { useStore } from "react-bolt"
+import type { LineNode } from "../../model/node/lineNode"
+
+export function LineContent(props: { node: LineNode }) {
+  const [width, height, points, strokeWidth, strokeColor] = useStore(
+    props.node,
+    "width",
+    "height",
+    "points",
+    "strokeWidth",
+    "strokeColor",
+  )
+
+  const polylinePoints = points.map(({ x, y }) => `${x},${y}`).join(" ")
+
+  return (
+    <svg
+      className="absolute inset-0 overflow-visible"
+      width={width}
+      height={height}
+      fill="none"
+    >
+      <polyline
+        points={polylinePoints}
+        stroke={strokeColor}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/lib/ui/node/NodeView.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from "react"
 import { useStore } from "react-bolt"
 import { useEditor } from "../../hooks/editor"
+import { isLoaded, loadFont } from "../../lib/googleFonts"
 import { Node } from "../../model/node"
 import { getFontFamilies } from "../../ui/extractor"
-import { isLoaded, loadFont } from "../../lib/googleFonts"
-import { isPointerInSelectionRect } from "../selection"
 
 export function NodeView(props: {
   node: Node
@@ -49,17 +48,6 @@ export function NodeView(props: {
         height: `${height}px`,
         transform: `translate(${x}px,${y}px) rotate(${rotation ?? 0}deg)`,
       }}
-      onDragStart={(e) => e.preventDefault()}
-      onPointerDown={(event) => {
-        if (event.button !== 0) return
-
-        const { selection } = editor
-        if (selection.size === 0 || event.shiftKey) {
-          editor.selection = new Set([...selection, node])
-        } else if (!isPointerInSelectionRect(selection, event)) {
-          editor.selection = new Set([node])
-        }
-      }}
     >
       {children}
       {css && <style>{`#${id} { ${css} }`}</style>}

package/lib/ui/node/ShapeContent/ArrowContent.tsx

@@ -0,0 +1,57 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { ArrowShape, ShapeNode } from "../../../model/node/shapeNode"
+
+function arrowPath(props: { height: number; width: number; roundness: number }) {
+  const { height, width, roundness } = props
+  const bodyRight = width * 0.68
+  const inset = height * 0.28
+
+  const arrowPoints = [
+    { x: 0, y: inset },
+    { x: bodyRight, y: inset },
+    { x: bodyRight, y: 0 },
+    { x: width, y: height / 2 },
+    { x: bodyRight, y: height },
+    { x: bodyRight, y: height - inset },
+    { x: 0, y: height - inset },
+  ]
+
+  return roundedPathData(arrowPoints, roundness)
+}
+
+export function ArrowContent(props: { node: ShapeNode; shape: ArrowShape["props"] }) {
+  const maskId = useId()
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  const [width, height] = useStore(node, "width", "height")
+  const { roundness } = shape
+  const d = arrowPath({ width, height, roundness })
+
+  return (
+    <svg width={width} height={height} className="absolute inset-0">
+      <defs>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <path d={d} fill="white" />
+        </mask>
+      </defs>
+
+      <path d={d} fill={background} />
+      <path
+        d={d}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+        mask={`url(#${maskId})`}
+      />
+    </svg>
+  )
+}

package/lib/ui/node/ShapeContent/EllipseContent.tsx

@@ -0,0 +1,37 @@
+import { useStore } from "react-bolt"
+import type { ShapeNode } from "../../../model/node/shapeNode"
+
+export function EllipseContent(props: { node: ShapeNode }) {
+  const { node } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  return (
+    <svg
+      aria-hidden="true"
+      className="absolute"
+      onDragStart={(e) => e.preventDefault()}
+      style={{
+        inset: borderWidth / 2,
+        width: `calc(100% - ${borderWidth}px)`,
+        height: `calc(100% - ${borderWidth}px)`,
+        overflow: "visible",
+      }}
+    >
+      <ellipse
+        cx="50%"
+        cy="50%"
+        rx="50%"
+        ry="50%"
+        fill={background}
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+      />
+    </svg>
+  )
+}

package/lib/ui/node/ShapeContent/PolygonContent.tsx

@@ -0,0 +1,62 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import type { Point } from "../../../model/geometry/math"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { PolygonShape, ShapeNode } from "../../../model/node/shapeNode"
+
+function regularPolygonPoints(props: {
+  width: number
+  height: number
+  sides: number
+}): Point[] {
+  const { width, height, sides } = props
+  const rotation = sides % 2 === 0 ? Math.PI / sides : 0
+  const cx = width / 2
+  const cy = height / 2
+  const rx = width / 2
+  const ry = height / 2
+
+  return Array.from({ length: sides }, (_, i) => {
+    const angle = (i * Math.PI * 2) / sides - Math.PI / 2 + rotation
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}
+
+export function PolygonContent(props: { node: ShapeNode; shape: PolygonShape["props"] }) {
+  const maskId = useId()
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  const [width, height] = useStore(node, "width", "height")
+  const { sides, roundness } = shape
+
+  const d = roundedPathData(regularPolygonPoints({ width, height, sides }), roundness)
+
+  return (
+    <svg width={width} height={height} className="absolute inset-0">
+      <defs>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <path d={d} fill="white" />
+        </mask>
+      </defs>
+
+      <path d={d} fill={background} />
+      <path
+        d={d}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+        mask={`url(#${maskId})`}
+      />
+    </svg>
+  )
+}

package/lib/ui/node/ShapeContent/RectangleContent.tsx

@@ -0,0 +1,35 @@
+import { useStore } from "react-bolt"
+import type { RectangleShape, ShapeNode } from "../../../model/node/shapeNode"
+
+export function RectangleShape(props: {
+  node: ShapeNode
+  shape: RectangleShape["props"]
+}) {
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+
+  const radii = [
+    shape["cornerTopLeft"],
+    shape["cornerTopRight"],
+    shape["cornerBottomRight"],
+    shape["cornerBottomLeft"],
+  ]
+
+  return (
+    <div
+      className="absolute inset-0 size-full border-4"
+      onDragStart={(e) => e.preventDefault()}
+      style={{
+        borderRadius: radii.map((r) => `${r}px`).join(" "),
+        background: background,
+        border: `${borderWidth}px solid ${borderColor}`,
+      }}
+    />
+  )
+}

package/lib/ui/node/ShapeContent/StarContent.tsx

@@ -0,0 +1,75 @@
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import type { Point } from "../../../model/geometry/math"
+import { roundedPathData } from "../../../model/geometry/svg"
+import type { ShapeNode, StarShape } from "../../../model/node/shapeNode"
+
+function starPoints(props: {
+  width: number
+  height: number
+  corners: number
+  depth: number
+}): Point[] {
+  const { width, height, corners, depth } = props
+  const cx = width / 2
+  const cy = height / 2
+  const outerRx = width / 2
+  const outerRy = height / 2
+  const innerRx = outerRx * depth
+  const innerRy = outerRy * depth
+
+  return Array.from({ length: corners * 2 }, (_, i) => {
+    const angle = (i * Math.PI) / corners - Math.PI / 2
+    const isOuter = i % 2 === 0
+    const rx = isOuter ? outerRx : innerRx
+    const ry = isOuter ? outerRy : innerRy
+
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+}
+
+export function StarContent(props: { node: ShapeNode; shape: StarShape["props"] }) {
+  const maskId = useId()
+  const { node, shape } = props
+
+  const [background, borderWidth, borderColor] = useStore(
+    node,
+    "background",
+    "borderWidth",
+    "borderColor",
+  )
+  const [width, height] = useStore(node, "width", "height")
+  const { corners, depth, roundness } = shape
+
+  const d = roundedPathData(
+    starPoints({
+      width,
+      height,
+      corners,
+      depth,
+    }),
+    roundness,
+  )
+
+  return (
+    <svg width={width} height={height} className="absolute inset-0">
+      <defs>
+        <mask id={maskId} maskUnits="userSpaceOnUse">
+          <path d={d} fill="white" />
+        </mask>
+      </defs>
+
+      <path d={d} fill={background} />
+      <path
+        d={d}
+        fill="none"
+        stroke={borderColor}
+        strokeWidth={borderWidth}
+        mask={`url(#${maskId})`}
+      />
+    </svg>
+  )
+}

package/lib/ui/node/ShapeContent/index.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+import type { ShapeNode } from "../../../model"
+import { EditableContent } from "../EditableContent"
+import { ArrowContent } from "./ArrowContent"
+import { EllipseContent } from "./EllipseContent"
+import { PolygonContent } from "./PolygonContent"
+import { RectangleShape } from "./RectangleContent"
+import { StarContent } from "./StarContent"
+
+export function ShapeContent(props: { node: ShapeNode; isStatic?: boolean }) {
+  const { node, isStatic } = props
+  const [valign, halign, shape] = useStore(node, "valign", "halign", "shape")
+
+  return (
+    <div className="relative size-full">
+      {shape.name === "rectangle" && <RectangleShape node={node} shape={shape.props} />}
+      {shape.name === "polygon" && <PolygonContent node={node} shape={shape.props} />}
+      {shape.name === "star" && <StarContent node={node} shape={shape.props} />}
+      {shape.name === "ellipse" && <EllipseContent node={node} />}
+      {shape.name === "arrow" && <ArrowContent node={node} shape={shape.props} />}
+
+      <div
+        className={clsx(
+          "flex size-full",
+          valign === "top" && "items-start",
+          valign === "center" && "items-center",
+          valign === "bottom" && "items-end",
+          halign === "left" && "justify-start text-left",
+          halign === "center" && "justify-center text-center",
+          halign === "right" && "justify-end text-right",
+          halign === "justify" && "w-full text-justify",
+        )}
+      >
+        <EditableContent
+          isStatic={isStatic}
+          node={node}
+          className={clsx(halign === "justify" && "w-full")}
+        />
+      </div>
+    </div>
+  )
+}

package/lib/ui/node/TextContent.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx"
 import { useEffect } from "react"
 import { useStore } from "react-bolt"
 import { useEditor } from "../../hooks/editor"
-import type { TextNode } from "../../model/node/text"
+import type { TextNode } from "../../model"
 import { EditableContent } from "./EditableContent"
 
 export function TextContent(props: {

package/lib/ui/selection.ts

@@ -1,38 +1,21 @@
-import { boundingBox } from "../model/geometry"
+import { box, boxBounds, rect, type Box, type Rect } from "../model/geometry/math"
 import type { Node } from "../model/node"
 
-export function getTargetDOMRect(selection: Set<Node>) {
+export function selectionDOMRect(selection: Set<Node>): Rect {
   const rects = selection
     .values()
     .map((node) => node.ref)
     .filter((dom) => dom instanceof HTMLElement)
     .map((dom) => dom.getBoundingClientRect())
-    .toArray()
 
-  return boundingBox(rects)
+  return rect(...rects)
 }
 
-export function getTargetRect(selection: Set<Node>) {
-  const rects = selection
-    .values()
-    .map((node) => node.boundingBox)
-    .toArray()
-
-  return boundingBox(rects)
-}
-
-export function isPointerInSelectionRect(
-  selection: Set<Node>,
-  event: React.PointerEvent,
-) {
-  const rect = getTargetDOMRect(selection)
-  const right = rect.x + rect.width
-  const bottom = rect.y + rect.height
+export function selectionBox(selection: Set<Node>): Box {
+  if (selection.size === 1) {
+    const [node] = selection
+    return box(node)
+  }
 
-  return (
-    event.clientX >= rect.x &&
-    event.clientX <= right &&
-    event.clientY >= rect.y &&
-    event.clientY <= bottom
-  )
+  return box(boxBounds(...selection.values().map(box)))
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "files": [
     "lib"
@@ -8,55 +8,55 @@
   "exports": {
     "./ui": "./lib/ui/index.ts",
     "./model": "./lib/model/index.ts",
-    "./model/geometry": "./lib/model/geometry.ts",
+    "./model/geometry": "./lib/model/geometry/math.ts",
     "./hooks": "./lib/hooks/index.ts",
     "./googleFonts": "./lib/lib/googleFonts.ts"
   },
   "dependencies": {
-    "@tiptap/core": "^3.20.0",
-    "@tiptap/extension-bold": "^3.20.0",
-    "@tiptap/extension-document": "^3.20.0",
-    "@tiptap/extension-hard-break": "^3.20.0",
-    "@tiptap/extension-italic": "^3.20.0",
-    "@tiptap/extension-paragraph": "^3.20.0",
-    "@tiptap/extension-strike": "^3.20.0",
-    "@tiptap/extension-subscript": "^3.20.0",
-    "@tiptap/extension-superscript": "^3.20.0",
-    "@tiptap/extension-text": "^3.20.0",
-    "@tiptap/extension-text-style": "^3.20.0",
-    "@tiptap/extension-underline": "^3.20.0",
-    "@tiptap/extensions": "^3.22.4",
-    "@tiptap/pm": "^3.20.0",
-    "@tiptap/react": "^3.20.0",
+    "@tiptap/core": "^3.23.1",
+    "@tiptap/extension-bold": "^3.23.1",
+    "@tiptap/extension-document": "^3.23.1",
+    "@tiptap/extension-hard-break": "^3.23.1",
+    "@tiptap/extension-italic": "^3.23.1",
+    "@tiptap/extension-paragraph": "^3.23.1",
+    "@tiptap/extension-strike": "^3.23.1",
+    "@tiptap/extension-subscript": "^3.23.1",
+    "@tiptap/extension-superscript": "^3.23.1",
+    "@tiptap/extension-text": "^3.23.1",
+    "@tiptap/extension-text-style": "^3.23.1",
+    "@tiptap/extension-underline": "^3.23.1",
+    "@tiptap/extensions": "^3.23.1",
+    "@tiptap/pm": "^3.23.1",
+    "@tiptap/react": "^3.23.1",
     "clsx": "^2.1.1",
-    "es-toolkit": "^1.45.0",
-    "react": "^19.2.0",
-    "react-aria-components": "^1.15.1",
+    "es-toolkit": "^1.46.1",
+    "react": "^19.2.6",
+    "react-aria-components": "^1.17.0",
     "react-bolt": "^1.4.1",
-    "react-dom": "^19.2.0",
-    "react-hotkeys-hook": "^5.2.4",
-    "tailwindcss": "^4.2.1"
+    "react-dom": "^19.2.6",
+    "react-hotkeys-hook": "^5.3.2",
+    "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@tailwindcss/vite": "^4.2.1",
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.12.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/coverage-v8": "^4.1.0",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "happy-dom": "^20.8.3",
+    "happy-dom": "^20.9.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^7.3.3",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.5"
   },
   "prettier": {
     "semi": false,