@lazlon-platform/html-editor 0.1.0

package/lib/ui/node/useDoubleClick.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef } from "react"
+
+export function useDoubleClick(
+  onDoubleClick: (event: React.PointerEvent) => void,
+  threshold = 250,
+): React.PointerEventHandler {
+  const lastClickTimeRef = useRef(0)
+  const lastEventRef = useRef<React.PointerEvent | null>(null)
+
+  useEffect(
+    () => () => {
+      lastClickTimeRef.current = 0
+      lastEventRef.current = null
+    },
+    [onDoubleClick],
+  )
+
+  return useCallback(
+    function handlePointerDown(event) {
+      if (!event.isPrimary || event.button !== 0) return
+
+      const now = performance.now()
+      const delta = now - lastClickTimeRef.current
+
+      if (delta <= threshold && lastEventRef.current) {
+        lastClickTimeRef.current = 0
+        lastEventRef.current = null
+        onDoubleClick(event)
+        return
+      }
+
+      lastClickTimeRef.current = now
+      lastEventRef.current = event
+    },
+    [onDoubleClick, threshold],
+  )
+}

package/lib/ui/selection.ts

@@ -0,0 +1,38 @@
+import { boundingBox } from "../model/geometry"
+import type { Node } from "../model/node"
+
+export function getTargetDOMRect(selection: Set<Node>) {
+  const rects = selection
+    .values()
+    .map((node) => node.ref)
+    .filter((dom) => dom instanceof HTMLElement)
+    .map((dom) => dom.getBoundingClientRect())
+    .toArray()
+
+  return boundingBox(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
+
+  return (
+    event.clientX >= rect.x &&
+    event.clientX <= right &&
+    event.clientY >= rect.y &&
+    event.clientY <= bottom
+  )
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@lazlon-platform/html-editor",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "exports": {
+    "./ui": "./lib/ui/index.ts",
+    "./model": "./lib/model/index.ts",
+    "./model/geometry": "./lib/model/geometry.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/pm": "^3.20.0",
+    "@tiptap/react": "^3.20.0",
+    "clsx": "^2.1.1",
+    "es-toolkit": "^1.45.0",
+    "react": "^19.2.0",
+    "react-aria-components": "^1.15.1",
+    "react-bolt": "^1.4.1",
+    "react-dom": "^19.2.0",
+    "react-hotkeys-hook": "^5.2.4",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.10.1",
+    "@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",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.8.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.0"
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 90
+  }
+}

package/tests/createTestEditor.ts

@@ -0,0 +1,19 @@
+import { Editor, type NodeConstructor } from "@lazlon/html-editor/model"
+import { TextNode } from "../lib/model/node/text"
+import { ImageNode } from "../lib/model/node/image"
+import { PolygonNode } from "../lib/model/node/shape/polygon"
+import { GroupNode } from "../lib/model/node/group"
+
+export function createTestEditor(options?: {
+  schema?: NodeConstructor[]
+  maxHistory?: number
+}) {
+  return new Editor({
+    schema: options?.schema ?? [TextNode, ImageNode, PolygonNode, GroupNode],
+    options: {
+      loadFonts: async () => [],
+      maxHistory: options?.maxHistory ?? 100,
+      snapThreshold: 8,
+    },
+  })
+}