@lazlon-platform/html-editor 0.3.6 → 0.5.0

package/lib/hooks/pointer/selector.ts

@@ -1,53 +1,64 @@
-import { isPointerInSelectionRect } from "../../ui/selection"
+import { useRef } from "react"
+import {
+  type Rect,
+  box,
+  boxContainsPoint,
+  pointSubtract,
+  rect,
+  boxIntersects,
+} from "../../model/geometry/math"
 import { useEditor } from "../editor"
-import { usePointer } from "./pointer"
+import { cursorPosition, usePointer } from "./pointer"
 
-export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null> }) {
+function clientPoint(event: { clientX: number; clientY: number }) {
+  return { x: event.clientX, y: event.clientY }
+}
+
+export function useSelector(view: (props: null | Rect) => void) {
   const editor = useEditor()
 
+  const dragAnchor = useRef({
+    clientX: 0,
+    clientY: 0,
+  })
+
   return usePointer({
     onDown(event) {
-      const isPointerInsideRect = isPointerInSelectionRect(editor.selection, event)
+      for (const node of editor.nodes.values()) {
+        if (boxContainsPoint(box(node), cursorPosition(event, node))) {
+          return false
+        }
+      }
 
-      if (!isPointerInsideRect && !editor.action.action) {
+      if (!editor.action.action) {
         editor.action = { action: "select" }
+        dragAnchor.current = event
       }
-
-      return !isPointerInsideRect
     },
-    onMove({ event, start }) {
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
+    onMove(event) {
       if (editor.action.action !== "select") return
+      const stage = editor.ref!.getBoundingClientRect()
 
-      const rect = editor.ref!.getBoundingClientRect()
-
-      const x = event.clientX - start.clientX
-      const y = event.clientY - start.clientY
-      const width = Math.floor(Math.abs(x))
-      const height = Math.floor(Math.abs(y))
-      const tx = (x > 0 ? start.clientX : start.clientX - width) - rect.x
-      const ty = (y > 0 ? start.clientY : start.clientY - height) - rect.y
-
-      const { left, right, top, bottom } = div.getBoundingClientRect()
+      /* world view */ {
+        const p1 = clientPoint(dragAnchor.current)
+        const p2 = clientPoint(event)
+        view(rect(pointSubtract(p1, stage), pointSubtract(p2, stage)))
+      }
 
-      editor.selection = new Set(
-        editor.nodes.values().filter(({ ref }) => {
-          const node = ref?.getBoundingClientRect()
-          if (!node) throw Error("node.ref is null")
-          return !(
-            node.right <= left || // node is left of selection
-            node.left >= right || // node is right of selection
-            node.bottom <= top || // node is above selection
-            node.top >= bottom // node is below selection
-          )
-        }),
-      )
+      const selection = editor.pages
+        .values()
+        .toArray()
+        .flatMap((page) => {
+          const p1 = cursorPosition(dragAnchor.current, page)
+          const p2 = cursorPosition(event, page)
+          const selection = box(rect(p1, p2))
+          return page.nodes
+            .values()
+            .toArray()
+            .filter((node) => boxIntersects(selection, box(node)))
+        })
 
-      div.style.width = `${width}px`
-      div.style.height = `${height}px`
-      div.style.transform = `translate(${tx}px, ${ty}px)`
-      div.style.display = "block"
+      editor.selection = new Set(selection)
     },
     onCancel() {
       editor.selection = new Set() // click away
@@ -55,10 +66,7 @@ export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null>
     },
     onEnd() {
       editor.action = {}
-
-      const div = props.ref.current
-      if (!div) throw Error("selector div ref is null")
-      div.style.display = "none"
+      view(null)
     },
   })
 }

package/lib/hooks/pointer/snap.ts

@@ -1,4 +1,4 @@
-import type { Rect } from "../../model/geometry"
+import { type Rect, box, boxBounds, rect } from "../../model/geometry/math"
 import type { Node } from "../../model/node"
 import type { Page } from "../../model/page"
 import { useEditor, usePage } from "../editor"
@@ -17,13 +17,13 @@ export function useSnap() {
 
   function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { y, height } = n.boundingBox
+      const { y, height } = boxBounds(box(n))
       return [y, y + height]
     })
 
     const hlines = [0, page.height, ...nodelines]
-    const top = hlines.find(shouldSnap(rect.y))
-    const bottom = hlines.find(shouldSnap(rect.y + rect.height))
+    const top = hlines.find(shouldSnap(rect.top))
+    const bottom = hlines.find(shouldSnap(rect.bottom))
 
     if (isN(top) && isN(bottom)) {
       return [
@@ -46,15 +46,15 @@ export function useSnap() {
     return [rect.y]
   }
 
-  function xSnap(nodes: Node[], box: Rect): [number, ...Lines] {
+  function xSnap(nodes: Node[], rect: Rect): [number, ...Lines] {
     const nodelines = nodes.flatMap((n) => {
-      const { x, width } = n.boundingBox
+      const { x, width } = boxBounds(box(n))
       return [x, x + width]
     })
 
     const hlines = [0, page.width, ...nodelines]
-    const left = hlines.find(shouldSnap(box.x))
-    const right = hlines.find(shouldSnap(box.x + box.width))
+    const left = hlines.find(shouldSnap(rect.left))
+    const right = hlines.find(shouldSnap(rect.right))
 
     if (isN(left) && isN(right)) {
       return [left, { x: left - 1 }, { x: right }]
@@ -65,16 +65,16 @@ export function useSnap() {
     }
 
     if (isN(right)) {
-      return [right - box.width, { x: right }]
+      return [right - rect.width, { x: right }]
     }
 
-    return [box.x]
+    return [rect.x]
   }
 
-  return function snap(snap: boolean, rect: Rect): Rect {
+  return function snap(snap: boolean, r: Rect): Rect {
     if (!snap) {
       page.snapLines = []
-      return rect
+      return r
     }
 
     const nodes = page.nodes
@@ -82,16 +82,16 @@ export function useSnap() {
       .filter((node) => !editor.selection.has(node))
       .toArray()
 
-    const [left, ...hlines] = xSnap(nodes, rect)
-    const [top, ...vlines] = ySnap(nodes, rect)
+    const [x, ...hlines] = xSnap(nodes, r)
+    const [y, ...vlines] = ySnap(nodes, r)
 
     page.snapLines = [...vlines, ...hlines]
 
-    return {
-      x: left,
-      y: top,
-      width: rect.width,
-      height: rect.height,
-    }
+    return rect({
+      x,
+      y,
+      width: r.width,
+      height: r.height,
+    })
   }
 }

package/lib/hooks/textMarks.ts

@@ -1,10 +1,10 @@
 import { isEqual } from "es-toolkit"
-import { useEffect, useState } from "react"
-import { useComputed } from "react-bolt"
+import { useCallback, useRef, useSyncExternalStore } from "react"
+import { effect, useComputed } from "react-bolt"
 import { TextNode } from "../model"
 import { EditableNode } from "../model/node/editable"
 import { FormattableNode } from "../model/node/formattable"
-import { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+import { useBatchSet, useNodeFieldBatch } from "./batch"
 
 function mergeField<T>(values: T[]): T | null {
   if (values.length === 0) return null
@@ -12,14 +12,17 @@ function mergeField<T>(values: T[]): T | null {
   return rest.some((v) => v !== first) ? null : first
 }
 
-function selector(node: EditableNode) {
+function editableProps(node: EditableNode) {
   const e = node.tiptap
   const { color, fontSize, fontFamily, letterSpacing, lineHeight } =
     e.getAttributes("textStyle")
 
-  const size = fontSize
-    ? parseInt(fontSize)
-    : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
+  const size =
+    node instanceof TextNode
+      ? node.size
+      : fontSize
+        ? parseInt(fontSize)
+        : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
 
   return {
     node,
@@ -39,28 +42,36 @@ function selector(node: EditableNode) {
 }
 
 function useTiptapState(editables: Array<EditableNode>) {
-  const [state, setState] = useState(() => editables.map(selector))
+  const props = useRef(editables.map(editableProps))
 
-  useNodeField(
-    editables.filter((n) => n instanceof TextNode),
-    "scale",
-    NaN,
+  return useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        editables.map((e) => e.tiptap.on("transaction", callback))
+        const textNodes = editables.filter((e) => e instanceof TextNode)
+        // HACK: react-bolt does not expose .subscribe on store fields
+        const dispose = effect(() => {
+          for (const text of textNodes) {
+            void text.size
+          }
+          callback()
+        })
+        return () => {
+          dispose()
+          editables.map((e) => e.tiptap.off("transaction", callback))
+        }
+      },
+      [editables],
+    ),
+    useCallback(() => {
+      const nextProps = editables.map(editableProps)
+      if (isEqual(props.current, nextProps)) {
+        return props.current
+      } else {
+        return (props.current = nextProps)
+      }
+    }, [editables]),
   )
-
-  useEffect(() => {
-    function update() {
-      const newState = editables.map(selector)
-      if (!isEqual(newState, state)) setState(newState)
-    }
-
-    editables.map((e) => e.tiptap.on("transaction", update))
-    return () => void editables.map((e) => e.tiptap.off("transaction", update))
-  }, [editables, state, setState])
-
-  return state.map(({ node, ...s }) => {
-    const scale = node instanceof TextNode ? node.scale : 1
-    return { ...s, size: s.size * scale }
-  })
 }
 
 function formattableProps(node: FormattableNode) {
@@ -150,19 +161,24 @@ function useTextMarksState(
 }
 
 function useFocusedTiptap(editables: EditableNode[]) {
-  const [focused, setFocused] = useState(EditableNode.getFocused(editables))
-
-  useEffect(() => {
-    const dispose = editables.map((e) => {
-      const onFocus = () => setFocused(e)
-      e.tiptap.on("focus", onFocus)
-      return () => e.tiptap.off("focus", onFocus)
-    })
-
-    return () => void dispose.map((cb) => cb())
-  }, [editables, setFocused])
+  return useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        const dispose = editables.map((e) => {
+          e.tiptap.on("focus", callback)
+          return () => e.tiptap.off("focus", callback)
+        })
 
-  return focused
+        return () => {
+          dispose.forEach((cb) => cb())
+        }
+      },
+      [editables],
+    ),
+    useCallback(() => {
+      return EditableNode.getFocused(editables)
+    }, [editables]),
+  )
 }
 
 // don't forget a unique key `selection.map((n) => n.id).join("")` on the parent component
@@ -207,18 +223,19 @@ export function useTextMarks(props: {
     },
     setSize(size: number) {
       if (focused) {
-        const scale = focused instanceof TextNode ? focused.scale : 1
-        focused.tiptap.commands.setFontSize(`${size / scale}px`)
+        if (focused instanceof TextNode) {
+          batchSet([focused], { size })
+        } else {
+          focused.tiptap.commands.setFontSize(`${size}px`)
+        }
       } else {
-        editables.map((e) => {
-          const scale = e instanceof TextNode ? e.scale : 1
-          e.tiptap
-            .chain()
-            .selectAll()
-            .setFontSize(`${size / scale}px`)
-            .run()
-        })
-        batchSet(formattables, { size })
+        editables
+          .filter((e) => !(e instanceof TextNode))
+          .map((e) => {
+            e.tiptap.chain().selectAll().setFontSize(`${size}px`).run()
+          })
+        const textNodes = editables.filter((e) => e instanceof TextNode)
+        batchSet([...formattables, ...textNodes], { size })
       }
     },
     setFamily(family: string | null) {