@lazlon-platform/html-editor 0.1.0

package/lib/hooks/pointer/rotation.ts

@@ -0,0 +1,111 @@
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import { angle, type Point } from "../../model/geometry"
+import type { HistoryAction } from "../../model/history"
+import type { Node } from "../../model/node"
+import { getTargetDOMRect } from "../../ui/selection"
+import { useEditor } from "../editor"
+import { usePointer } from "./pointer"
+
+type RotationState = {
+  anchor: Point
+  center: Point
+  deg: number
+  nodes: Array<{ node: Node; deg: number }>
+}
+
+export function useRotation() {
+  const start = useRef<RotationState | null>(null)
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const selectionArray = selection.values().toArray()
+
+  return usePointer({
+    onDown(event) {
+      const { x, y, width, height } = getTargetDOMRect(selection)
+      const anchor = {
+        x: x + width / 2,
+        y: height,
+      }
+      const center = {
+        x: x + width / 2,
+        y: y + height / 2,
+      }
+      const deg = angle(center, anchor, {
+        x: event.clientX,
+        y: event.clientY,
+      })
+      start.current = {
+        anchor,
+        center,
+        deg,
+        nodes: selectionArray.map((node) => ({
+          node,
+          deg: node.rotation,
+        })),
+      }
+      editor.action = { action: "rotate", payload: { deg: 0 } }
+    },
+    onMove({ event }) {
+      if (!start.current) return
+      const { center, anchor, deg, nodes } = start.current
+
+      const next =
+        angle(center, anchor, {
+          x: event.clientX,
+          y: event.clientY,
+        }) - deg
+
+      for (const n of nodes) {
+        n.node.rotation = (n.deg + next) % 360
+      }
+
+      editor.action = {
+        action: "rotate",
+        payload: { deg: nodes.length === 1 ? nodes[0].node.rotation : next },
+      }
+    },
+    onCancel() {
+      editor.action = {}
+      start.current = null
+    },
+    onEnd({ event }) {
+      const s = start.current
+      if (!s) return
+
+      const deg =
+        angle(s.center, s.anchor, {
+          x: event.clientX,
+          y: event.clientY,
+        }) - s.deg
+
+      if (s.nodes.length === 0) {
+        const [n] = s.nodes
+        const rotation = (n.deg + deg) % 360
+        editor.history.push({
+          redo: ["set-node-props", [n.node.id, { rotation }]],
+          undo: ["set-node-props", [n.node.id, { rotation: n.deg }]],
+        })
+        n.node.rotation = rotation
+      } else {
+        const redo: HistoryAction[] = []
+        const undo: HistoryAction[] = []
+
+        for (const n of s.nodes) {
+          const rotation = (n.deg + deg) % 360
+          redo.push(["set-node-props", [n.node.id, { rotation }]])
+          undo.push(["set-node-props", [n.node.id, { rotation: n.deg }]])
+          n.node.rotation = rotation
+        }
+
+        editor.history.push({
+          redo: ["batch", redo],
+          undo: ["batch", undo],
+        })
+      }
+
+      editor.action = {}
+      start.current = null
+    },
+  })
+}

package/lib/hooks/pointer/selectionFrame.ts

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from "react"
+import { useComputed, useStore } from "react-bolt"
+import { getTargetDOMRect } from "../../ui/selection"
+import { useEditor } from "../editor"
+
+function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false
+
+  for (let i = 0; i < a.length; i++) {
+    if (!Object.is(a[i], b[i])) return false
+  }
+
+  return true
+}
+
+function useObserver(onChange: () => void) {
+  const editor = useEditor()
+  const nodeRefs = useComputed({
+    equals: arraysEqual,
+    fn: () =>
+      editor.selection
+        .values()
+        .map((node) => node.ref)
+        .filter((ref) => ref instanceof HTMLElement)
+        .toArray(),
+  })
+  const editorRef = useStore(editor, "ref")
+  const zoom = useStore(editor, "zoom")
+  const pages = useStore(editor, "pages")
+    .values()
+    .map((page) => page.ref)
+    .toArray()
+
+  useEffect(() => {
+    const mObserver = new MutationObserver(onChange)
+    const rObserver = new ResizeObserver(onChange)
+
+    for (const node of nodeRefs) {
+      mObserver.observe(node, { attributeFilter: ["style"] })
+      rObserver.observe(node)
+    }
+
+    for (const page of pages) {
+      if (page) {
+        rObserver.observe(page)
+      }
+    }
+
+    if (editorRef) {
+      editorRef.addEventListener("scroll", onChange)
+      rObserver.observe(editorRef)
+    }
+
+    return () => {
+      mObserver.disconnect()
+      rObserver.disconnect()
+      editorRef?.removeEventListener("scroll", onChange)
+    }
+  }, [onChange, nodeRefs, zoom, editor, pages, editorRef])
+}
+
+export function useSelectionFrame<E extends HTMLElement>(props?: {
+  accountForSingleSelection?: boolean
+}) {
+  const ref = useRef<E>(null)
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const zoom = useStore(editor, "zoom")
+
+  useObserver(() => {
+    const frame = ref.current
+    const stage = editor.ref!.getBoundingClientRect()
+
+    if (props?.accountForSingleSelection && selection.size === 1 && frame) {
+      const [firstNode] = selection
+      const { page } = firstNode
+
+      const { x, y, width, height, rotation } = firstNode
+      const relative = page.ref!.getBoundingClientRect()
+      const tx = relative.x - stage.x + x * zoom
+      const ty = relative.y - stage.y + y * zoom
+
+      frame.style.height = `${height * zoom}px`
+      frame.style.width = `${width * zoom}px`
+      frame.style.transform = `translate(${tx}px, ${ty}px) rotate(${rotation}deg)`
+    } else if (frame) {
+      const { x, y, width, height } = getTargetDOMRect(selection)
+      const tx = x - stage.x
+      const ty = y - stage.y
+      frame.style.height = `${height}px`
+      frame.style.width = `${width}px`
+      frame.style.transform = `translate(${tx}px, ${ty}px)`
+    }
+  })
+
+  return ref
+}

package/lib/hooks/pointer/selector.ts

@@ -0,0 +1,64 @@
+import { isPointerInSelectionRect } from "../../ui/selection"
+import { useEditor } from "../editor"
+import { usePointer } from "./pointer"
+
+export function useSelector(props: { ref: React.RefObject<HTMLDivElement | null> }) {
+  const editor = useEditor()
+
+  return usePointer({
+    onDown(event) {
+      const isPointerInsideRect = isPointerInSelectionRect(editor.selection, event)
+
+      if (!isPointerInsideRect && !editor.action.action) {
+        editor.action = { action: "select" }
+      }
+
+      return !isPointerInsideRect
+    },
+    onMove({ event, start }) {
+      const div = props.ref.current
+      if (!div) throw Error("selector div ref is null")
+      if (editor.action.action !== "select") return
+
+      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()
+
+      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
+          )
+        }),
+      )
+
+      div.style.width = `${width}px`
+      div.style.height = `${height}px`
+      div.style.transform = `translate(${tx}px, ${ty}px)`
+      div.style.display = "block"
+    },
+    onCancel() {
+      editor.selection = new Set() // click away
+      editor.action = {}
+    },
+    onEnd() {
+      editor.action = {}
+
+      const div = props.ref.current
+      if (!div) throw Error("selector div ref is null")
+      div.style.display = "none"
+    },
+  })
+}

package/lib/hooks/pointer/snap.ts

@@ -0,0 +1,97 @@
+import type { Rect } from "../../model/geometry"
+import type { Node } from "../../model/node"
+import type { Page } from "../../model/page"
+import { useEditor, usePage } from "../editor"
+
+type Lines = Page["snapLines"]
+const isN = (n?: number) => typeof n === "number"
+
+export function useSnap() {
+  const page = usePage()
+  const editor = useEditor()
+  const threshold = editor.options.snapThreshold
+
+  function shouldSnap(point: number) {
+    return (line: number) => line + threshold > point && point > line - threshold
+  }
+
+  function ySnap(nodes: Node[], rect: Rect): [number, ...Lines] {
+    const nodelines = nodes.flatMap((n) => {
+      const { y, height } = n.boundingBox
+      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))
+
+    if (isN(top) && isN(bottom)) {
+      return [
+        // FIXME: snap the the side thats closer to the box
+        top,
+        // FIXME: only show both lines if they are exactly on the box
+        { y: top - 1 },
+        { y: bottom },
+      ]
+    }
+
+    if (isN(top)) {
+      return [top, { y: top - 1 }]
+    }
+
+    if (isN(bottom)) {
+      return [bottom - rect.height, { y: bottom }]
+    }
+
+    return [rect.y]
+  }
+
+  function xSnap(nodes: Node[], box: Rect): [number, ...Lines] {
+    const nodelines = nodes.flatMap((n) => {
+      const { x, width } = n.boundingBox
+      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))
+
+    if (isN(left) && isN(right)) {
+      return [left, { x: left - 1 }, { x: right }]
+    }
+
+    if (isN(left)) {
+      return [left, { x: left - 1 }]
+    }
+
+    if (isN(right)) {
+      return [right - box.width, { x: right }]
+    }
+
+    return [box.x]
+  }
+
+  return function snap(snap: boolean, rect: Rect): Rect {
+    if (!snap) {
+      page.snapLines = []
+      return rect
+    }
+
+    const nodes = page.nodes
+      .values()
+      .filter((node) => !editor.selection.has(node))
+      .toArray()
+
+    const [left, ...hlines] = xSnap(nodes, rect)
+    const [top, ...vlines] = ySnap(nodes, rect)
+
+    page.snapLines = [...vlines, ...hlines]
+
+    return {
+      x: left,
+      y: top,
+      width: rect.width,
+      height: rect.height,
+    }
+  }
+}

package/lib/hooks/textMarks.ts

@@ -0,0 +1,276 @@
+import { isEqual } from "es-toolkit"
+import { useEffect, useState } from "react"
+import { useComputed } from "react-bolt"
+import { EditableNode } from "../model/node/editable"
+import { FormattableNode } from "../model/node/formattable"
+import { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+import { TextNode } from "../model"
+
+function mergeField<T>(values: T[]): T | null {
+  if (values.length === 0) return null
+  const [first, ...rest] = values
+  return rest.some((v) => v !== first) ? null : first
+}
+
+function selector(node: EditableNode) {
+  const e = node.tiptap
+  const { color, fontSize, fontFamily, letterSpacing } = e.getAttributes("textStyle")
+  const size = fontSize
+    ? parseInt(fontSize)
+    : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
+
+  return {
+    node,
+    isEmpty: e.isEmpty,
+    isBold: e.isActive("bold"),
+    isItalic: e.isActive("italic"),
+    isUnderline: e.isActive("underline"),
+    isStrike: e.isActive("strike"),
+    isSuperscript: e.isActive("superscript"),
+    isSubscript: e.isActive("subscript"),
+    color: color as string | null,
+    size: size,
+    spacing: letterSpacing ? parseFloat(letterSpacing) : 0,
+    family: fontFamily as string | null,
+  }
+}
+
+function useTiptapState(editables: Array<EditableNode>) {
+  const [state, setState] = useState(() => editables.map(selector))
+
+  useNodeField(
+    editables.filter((n) => n instanceof TextNode),
+    "scale",
+    NaN,
+  )
+
+  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) {
+  return {
+    isBold: node.bold,
+    isItalic: node.italic,
+    isUnderline: node.underline,
+    isStrike: node.strike,
+    isSuperscript: node.superscript,
+    isSubscript: node.subscript,
+    color: node.color,
+    size: node.size,
+    spacing: node.spacing,
+    family: node.family,
+  }
+}
+
+type TextMarks = {
+  isBold: boolean
+  isItalic: boolean
+  isUnderline: boolean
+  isStrike: boolean
+  isSuperscript: boolean
+  isSubscript: boolean
+  color: string | null
+  size: number | null
+  spacing: number
+  family: string | null
+}
+
+function mergeState(states: TextMarks[]) {
+  return {
+    isBold: mergeField(states.map((s) => s.isBold)),
+    isItalic: mergeField(states.map((s) => s.isItalic)),
+    isUnderline: mergeField(states.map((s) => s.isUnderline)),
+    isStrike: mergeField(states.map((s) => s.isStrike)),
+    isSuperscript: mergeField(states.map((s) => s.isSuperscript)),
+    isSubscript: mergeField(states.map((s) => s.isSubscript)),
+    color: mergeField(states.map((s) => s.color)),
+    size: mergeField(states.map((s) => s.size)),
+    spacing: mergeField(states.map((s) => s.spacing)),
+    family: mergeField(states.map((s) => s.family)),
+  }
+}
+
+function useFormattableState(formattables: Array<FormattableNode>) {
+  return useComputed({
+    equals: isEqual,
+    fn: () => formattables.map(formattableProps),
+  })
+}
+
+function useTextMarksState(
+  editables: Array<EditableNode>,
+  formattables: Array<FormattableNode>,
+) {
+  const editableState = useTiptapState(editables)
+  const formattableState = useFormattableState(formattables)
+
+  if (editables.length + formattables.length) {
+    const state = mergeState([
+      ...editableState.filter((s) => !s.isEmpty),
+      ...formattableState,
+    ])
+
+    return {
+      isBold: state.isBold ?? false,
+      isItalic: state.isItalic ?? false,
+      isUnderline: state.isUnderline ?? false,
+      isStrike: state.isStrike ?? false,
+      isSuperscript: state.isSuperscript ?? false,
+      isSubscript: state.isSubscript ?? false,
+      color: state.color,
+      size:
+        state.size ??
+        Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize)),
+      spacing: state.spacing ?? 0,
+      family: state.family ?? "Inter",
+    }
+  }
+
+  return null
+}
+
+// HACK:
+// Clicking on the toolbar blurs the editor, but for editing actions we need to track it.
+// We cannot do it purely in the `useFocusedTiptap` hook because the component using it
+// might render *after* the blur, e.g the sidebar, but the `useTextMarks` hook operates
+// on locally selected editor instances, e.g CalendarFields in the sidebar. We might be
+// able to preserve the local state with an <Activity> but I feel like it makes more sense
+// to handle it here, since there might only be one focused editor at a time either way.
+let lastFocusedEditor: EditableNode | null = null
+
+function getFocusedEditor(node: EditableNode[]) {
+  const focused = node.find((e) => e.tiptap.isFocused)
+
+  if (focused) {
+    return (lastFocusedEditor = focused)
+  }
+
+  if (lastFocusedEditor && node.includes(lastFocusedEditor)) {
+    return lastFocusedEditor
+  }
+
+  return null
+}
+
+export function blurNode(node: EditableNode) {
+  if (lastFocusedEditor === node) {
+    lastFocusedEditor = null
+  }
+}
+
+function useFocusedTiptap(editables: EditableNode[]) {
+  const [focused, setFocused] = useState(getFocusedEditor(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 focused
+}
+
+// don't forget a unique key `selection.map((n) => n.id).join("")` on the parent component
+export function useTextMarks(props: {
+  editables: Array<EditableNode>
+  formattables: Array<FormattableNode>
+}) {
+  const { editables, formattables } = props
+  const state = useTextMarksState(editables, formattables)
+  const focused = useFocusedTiptap(editables)
+  const formattableColors = useNodeFieldBatch(formattables, "color", "")
+  const formattableSpacings = useNodeFieldBatch(formattables, "spacing", 0)
+  const batchSet = useBatchSet()
+
+  return {
+    state,
+    toggle(
+      mark: "Bold" | "Italic" | "Underline" | "Strike" | "Superscript" | "Subscript",
+    ) {
+      if (focused) {
+        focused.tiptap.commands[`toggle${mark}`]()
+      } else {
+        const key = mark.toLowerCase() as Lowercase<typeof mark>
+        const isMark = state && state[`is${mark}`]
+        const action = isMark ? "unset" : "set"
+        editables.map((e) => e.tiptap.chain().selectAll()[`${action}${mark}`]().run())
+        batchSet(formattables, { [key]: !isMark })
+      }
+    },
+    setColor(color: string, opts: { end: boolean }) {
+      if (focused) {
+        focused.tiptap.commands.setColor(color)
+      } else {
+        editables.map((e) => e.tiptap.chain().selectAll().setColor(color).run())
+        if (opts.end) {
+          formattableColors.onChangeEnd(color)
+        } else {
+          formattableColors.onChange(color)
+        }
+      }
+    },
+    setSize(size: number) {
+      if (focused) {
+        const scale = focused instanceof TextNode ? focused.scale : 1
+        focused.tiptap.commands.setFontSize(`${size / scale}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 })
+      }
+    },
+    setFamily(family: string | null) {
+      if (focused) {
+        if (family) {
+          focused.tiptap.commands.setFontFamily(family)
+        } else {
+          focused.tiptap.commands.unsetFontFamily()
+        }
+      } else {
+        if (family) {
+          editables.map((e) => e.tiptap.chain().selectAll().setFontFamily(family).run())
+        } else {
+          editables.map((e) => e.tiptap.chain().selectAll().unsetFontFamily().run())
+        }
+        batchSet(formattables, { family })
+      }
+    },
+    setSpacing(spacing: number, opts: { end: boolean }) {
+      if (focused) {
+        focused.tiptap.commands.setLetterSpacing(`${spacing}px`)
+      } else {
+        editables.map((e) =>
+          e.tiptap.chain().selectAll().setLetterSpacing(`${spacing}px`).run(),
+        )
+        if (opts.end) {
+          formattableSpacings.onChangeEnd(spacing)
+        } else {
+          formattableSpacings.onChange(spacing)
+        }
+      }
+    },
+  }
+}