@lazlon-platform/html-editor 0.1.0

package/lib/model/node/text.ts

@@ -0,0 +1,55 @@
+import { computed, state } from "react-bolt"
+import type { Editor } from "../editor"
+import type { Page } from "../page"
+import { EditableNode, type EditableNodeProps } from "./editable"
+import type { SerializedNode } from "../node"
+
+export type TextNodeProps = EditableNodeProps &
+  Partial<Pick<TextNode, "halign" | "scale">>
+
+export class TextNode extends EditableNode {
+  get name() {
+    return "text"
+  }
+
+  @state accessor halign: "left" | "center" | "right" | "justify"
+  @state accessor scale: number = 1
+  @state accessor contentHeight: number = 24
+
+  @computed get height(): number {
+    return this.contentHeight * this.scale
+  }
+
+  set height(n: number) {
+    this.scale = n / this.contentHeight
+  }
+
+  constructor(editor: Editor, page: Page, { halign, scale, ...props }: TextNodeProps) {
+    super(editor, page, props)
+    this.halign = halign ?? "center"
+    this.scale = scale ?? 1
+
+    this.tiptap.on("transaction", () => {
+      const height = this.tiptap.view.dom.clientHeight
+      if (height > 0) this.contentHeight = height
+    })
+  }
+
+  set contentRef(ref: HTMLElement | null) {
+    super.contentRef = ref
+    if (ref) this.contentHeight = ref.clientHeight
+  }
+
+  @computed get contentRef() {
+    return super.contentRef
+  }
+
+  props(): TextNodeProps {
+    const { halign, scale } = this
+    return { ...super.props(), halign, scale }
+  }
+
+  serialize(): SerializedNode<this["name"], TextNodeProps> {
+    return super.serialize()
+  }
+}

package/lib/model/node.ts

@@ -0,0 +1,101 @@
+import { computed, state } from "react-bolt"
+import type { Editor } from "./editor"
+import { rotatedAABB } from "./geometry"
+import type { Page } from "./page"
+
+export type Schema = Map<string, typeof Node>
+
+export type SerializedNode<
+  Name extends string = string,
+  Props extends NodeProps = NodeProps,
+> = {
+  name: Name
+  props: Props
+}
+
+export interface NodeProps
+  extends Pick<Node, "id" | "x" | "y" | "width" | "height">,
+    Partial<Pick<Node, "locked" | "rotation" | "css">> {
+  // serialized as a list in case we need to allow
+  // nodes to have multiple roles in the future
+  role?: string[]
+}
+
+export abstract class Node {
+  abstract get name(): string
+  readonly id: string
+  readonly page: Page
+
+  @state accessor ref: HTMLElement | null = null
+
+  @state private accessor _width: number
+  @state private accessor _height: number
+
+  @state accessor rotation: number
+  @state accessor role: string | null
+  @state accessor locked: boolean
+  @state accessor x: number
+  @state accessor y: number
+  @state accessor css: string
+
+  @computed get width() {
+    return this._width
+  }
+
+  set width(n: number) {
+    if (n < 1) n = 1
+    this._width = n
+  }
+
+  @computed get height() {
+    return this._height
+  }
+
+  set height(n: number) {
+    if (n < 1) n = 1
+    this._height = n
+  }
+
+  constructor(_: Editor, page: Page, props: NodeProps) {
+    this.page = page
+    this.id = props.id
+    this.x = props.x
+    this.y = props.y
+    this._width = props.width
+    this._height = props.height
+    this.role = props.role?.[0] || null
+    this.locked = props.locked ?? false
+    this.rotation = props.rotation ?? 0
+    this.css = props.css ?? ""
+  }
+
+  blockMove(_: React.PointerEvent): boolean {
+    return !!this.locked
+  }
+
+  props(): NodeProps {
+    const { id, role, locked, rotation, css, x, y, width, height } = this
+    return {
+      id,
+      x,
+      y,
+      width,
+      height,
+      ...(role && { role: [role] }),
+      ...(css && { css }),
+      ...(locked && { locked }),
+      ...(rotation && { rotation }),
+    }
+  }
+
+  serialize(): SerializedNode {
+    return {
+      name: this.name,
+      props: this.props(),
+    }
+  }
+
+  @computed get boundingBox() {
+    return rotatedAABB(this, this.rotation)
+  }
+}

package/lib/model/page.ts

@@ -0,0 +1,51 @@
+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">> {
+  id: string
+  nodes?: Node[]
+}
+
+export interface SerializedPage extends Omit<PageProps, "nodes"> {
+  nodes: SerializedNode[]
+}
+
+export class Page {
+  readonly id: string
+
+  ref: HTMLElement | null = null
+
+  @state accessor nodes = new Map<string, Node>()
+  @state accessor background: string
+  @state accessor width = 841
+  @state accessor height = 595
+
+  @state accessor snapLines: Array<
+    | { x: number; y?: number; h?: number; w?: never } // horizontal
+    | { y: number; x?: number; w?: number; h?: never } // vertical
+  > = []
+
+  constructor(_: Editor, props: PageProps) {
+    this.id = props.id
+    this.background = props.background ?? "#ffffff"
+    this.width = props.width ?? 841
+    this.height = props.height ?? 595
+    this.nodes = new Map((props.nodes ?? []).map((node) => [node.id, node]))
+  }
+
+  serialize(): SerializedPage {
+    return {
+      id: this.id,
+      background: this.background,
+      width: this.width,
+      height: this.height,
+      nodes: this.nodes
+        .values()
+        .map((node) => node.serialize())
+        .toArray(),
+    }
+  }
+}

package/lib/model/traversal.ts

@@ -0,0 +1,21 @@
+import { Node } from "./node"
+import { GroupNode } from "./node/group"
+import { Page } from "./page"
+
+export function flattenNodes(root: Node | Page): Array<Node> {
+  if (root instanceof Page) {
+    return [...root.nodes.values()].reduce(
+      (acc, node) => [...acc, ...flattenNodes(node)],
+      new Array<Node>(),
+    )
+  }
+
+  if (root instanceof GroupNode) {
+    return [...root.nodes].reduce(
+      (acc, node) => [...acc, ...flattenNodes(node)],
+      new Array<Node>(root),
+    )
+  }
+
+  return [root]
+}

package/lib/ui/colors.ts

@@ -0,0 +1,23 @@
+function toLinear(c: number) {
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+/**
+ * Returns "#000000" or "#ffffff" based on contrast against a hex background.
+ */
+export function getReadableForeground(hex: string): "#000000" | "#ffffff" {
+  if (!/^#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) {
+    throw new Error("Expected #RRGGBB or #RRGGBBAA hex color")
+  }
+
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+
+  const l = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+
+  const black = (l + 0.05) / 0.05
+  const white = 1.05 / (l + 0.05)
+
+  return black > white ? "#000000" : "#ffffff"
+}

package/lib/ui/extractor.ts

@@ -0,0 +1,57 @@
+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 { Page } from "../model/page"
+import { flattenNodes } from "../model/traversal"
+
+function getMarks({
+  content = [],
+  marks = [],
+}: JSONContent): NonNullable<JSONContent["marks"]> {
+  return [...marks, ...content.flatMap(getMarks)]
+}
+
+function getMarkKey(nodes: Node[], key: string) {
+  return nodes
+    .filter((n) => n instanceof EditableNode)
+    .flatMap((n) => getMarks(n.content))
+    .filter((m) => m.type === "textStyle")
+    .map((m) => m.attrs)
+    .filter((m) => !!m)
+    .map((m) => m[key] as string)
+    .filter((f) => !!f)
+}
+
+export function getFontFamilies(root: Node | Page) {
+  const nodes = flattenNodes(root)
+
+  const editableFamilies = getMarkKey(nodes, "fontFamily")
+
+  const formattableFamilies = nodes
+    .filter((n) => n instanceof FormattableNode)
+    .map((n) => n.family)
+    .filter((f) => typeof f === "string")
+
+  return uniq([...editableFamilies, ...formattableFamilies])
+}
+
+export function getColors(root: Node | Page) {
+  const nodes = flattenNodes(root)
+
+  const editableColors = getMarkKey(nodes, "color")
+
+  const formattableColors = nodes
+    .filter((n) => n instanceof FormattableNode)
+    .map((n) => n.color)
+    .filter((c) => typeof c === "string")
+
+  const shapeColors = nodes
+    .filter((n) => n instanceof ShapeNode)
+    .map((n) => n.background)
+    .filter((c) => typeof c === "string")
+
+  return uniq([...editableColors, ...formattableColors, ...shapeColors])
+}

package/lib/ui/index.ts

@@ -0,0 +1,8 @@
+export { getReadableForeground } from "./colors"
+export { getColors, getFontFamilies } from "./extractor"
+export { EditableContent } from "./node/EditableContent"
+export { GroupContent } from "./node/GroupContent"
+export { ImageContent } from "./node/ImageContent"
+export { NodeView } from "./node/NodeView"
+export { PolygonContent } from "./node/PolygonContent"
+export { TextContent } from "./node/TextContent"

package/lib/ui/node/EditableContent.tsx

@@ -0,0 +1,101 @@
+import { EditorContent, useEditorState } from "@tiptap/react"
+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 { blurNode } from "../../hooks/textMarks"
+import type { EditableNode, EditableNodeProps } from "../../model/node/editable"
+import { useDoubleClick } from "./useDoubleClick"
+
+export function EditableContent(props: {
+  node: EditableNode
+  className?: string
+  style?: React.CSSProperties
+  isStatic?: boolean
+  placeholder?: string
+}) {
+  const { node, className, placeholder, isStatic, style } = props
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const { action } = useStore(editor, "action")
+  const prevContent = useRef(node.tiptap.getJSON())
+  const [clicked, setClicked] = useState(false)
+  const onDoubleClick = useDoubleClick(
+    useCallback(() => {
+      setClicked(true)
+      node.tiptap.commands.focus()
+    }, [node, setClicked]),
+  )
+
+  const html = useEditorState({
+    editor: node.tiptap,
+    selector: (s) => s.editor.getHTML(),
+  })
+
+  useEffect(() => {
+    if (!selection.has(node)) {
+      node.tiptap.commands.blur()
+      blurNode(node)
+      setClicked(false)
+    }
+  }, [selection, node])
+
+  useEffect(() => {
+    const onUpdate = debounce(() => {
+      const next = node.tiptap.getJSON()
+      const prev = prevContent.current
+      if (!isEqual(prev, next)) {
+        editor.history.push<EditableNodeProps>({
+          undo: ["set-node-props", [node.id, { content: prev }]],
+          redo: ["set-node-props", [node.id, { content: next }]],
+        })
+        prevContent.current = next
+      }
+    }, 500)
+
+    node.tiptap.on("update", onUpdate)
+    return () => void node.tiptap.off("update", onUpdate)
+  }, [editor, node])
+
+  const isFocused = useEditorState({
+    editor: node.tiptap,
+    selector: (s) => s.editor.isFocused,
+  })
+
+  const isEmpty = useEditorState({
+    editor: node.tiptap,
+    selector: (s) => s.editor.isEmpty,
+  })
+
+  const lineHeight = useStore(node, "lineHeight")
+  const showEditor = !isStatic && selection.has(node) && !action && clicked
+
+  return (
+    <div
+      ref={(ref) => void (node.contentRef = ref)}
+      className={clsx("relative min-w-[min(80%,6ch)]", className)}
+      onPointerDown={onDoubleClick}
+      style={{ ...style, ...(!isEmpty && { lineHeight }) }}
+    >
+      {showEditor && isEmpty && placeholder && (
+        <span className="absolute inset-0 text-nowrap opacity-50">{placeholder}</span>
+      )}
+      {showEditor ? (
+        <EditorContent
+          onDragStart={(e) => e.preventDefault()}
+          editor={node.tiptap}
+          className={clsx("*:outline-none", !isFocused && "*:pointer-events-none")}
+        />
+      ) : !isEmpty ? (
+        <div
+          className="tiptap ProseMirror select-none [&_p]:empty:before:content-['\00a0']"
+          // `select-none` does not work on `EditorContent` because its always contenteditable
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : (
+        placeholder && <span className="text-nowrap opacity-50">{placeholder}</span>
+      )}
+    </div>
+  )
+}

package/lib/ui/node/GroupContent.tsx

@@ -0,0 +1,46 @@
+import { useStore } from "react-bolt"
+import type { Node } from "../../model/node"
+import type { GroupNode } from "../../model/node/group"
+
+function GroupedNodeContent(props: { node: Node; children: React.ReactNode }) {
+  const { node, children } = props
+
+  const [x, y, width, height, rotation] = useStore(
+    node,
+    "x",
+    "y",
+    "width",
+    "height",
+    "rotation",
+  )
+
+  return (
+    <div
+      className="absolute"
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate(${x}px,${y}px) rotate(${rotation}deg)`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function GroupContent(props: {
+  node: GroupNode
+  children(node: Node): React.ReactNode
+}) {
+  const [nodes] = useStore(props.node, "nodes", "x", "y")
+
+  return (
+    <div className="relative size-full">
+      {[...nodes].map((node) => (
+        <GroupedNodeContent key={node.id} node={node}>
+          {props.children(node)}
+        </GroupedNodeContent>
+      ))}
+    </div>
+  )
+}

package/lib/ui/node/ImageContent.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+import type { ImageNode } from "../../model/node/image"
+
+export function ImageContent(props: { node: ImageNode; fallback?: React.ReactNode }) {
+  const { node, fallback } = props
+
+  const [url, fit, roundness, borderWidth, borderColor] = useStore(
+    node,
+    "url",
+    "fit",
+    "roundness",
+    "borderWidth",
+    "borderColor",
+  )
+
+  return url ? (
+    <img
+      src={url}
+      draggable={false}
+      className={clsx(
+        "size-full",
+        fit === "cover" && "object-cover",
+        fit === "contain" && "object-contain",
+        fit === "fill" && "object-fill",
+      )}
+      style={{
+        borderColor,
+        borderWidth,
+        borderRadius: `${roundness}px`,
+      }}
+    />
+  ) : (
+    <div className="flex size-full items-center justify-center">{fallback}</div>
+  )
+}

package/lib/ui/node/NodeView.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from "react"
+import { useStore } from "react-bolt"
+import { useEditor } from "../../hooks/editor"
+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
+  children: React.ReactNode
+  className?: string
+}) {
+  const { node, children, className } = props
+  const editor = useEditor()
+
+  const [id, x, y, width, height, rotation, css] = useStore(
+    node,
+    "id",
+    "x",
+    "y",
+    "width",
+    "height",
+    "rotation",
+    "css",
+  )
+
+  useEffect(() => {
+    for (const family of getFontFamilies(node)) {
+      if (!isLoaded(family)) {
+        editor.options.loadFonts(family).then((fonts) => {
+          for (const font of fonts) {
+            loadFont(font)
+          }
+        })
+      }
+    }
+  }, [node, editor])
+
+  return (
+    <div
+      id={id}
+      data-node={node.name}
+      ref={(ref) => void (node.ref = ref)}
+      className={className}
+      style={{
+        position: "absolute",
+        width: `${width}px`,
+        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>}
+    </div>
+  )
+}

package/lib/ui/node/PolygonContent.tsx

@@ -0,0 +1,81 @@
+import clsx from "clsx"
+import { useId } from "react"
+import { useStore } from "react-bolt"
+import { type PolygonNode } from "../../model/node/shape/polygon"
+import { EditableContent } from "./EditableContent"
+
+export function PolygonContent(props: { node: PolygonNode; isStatic?: boolean }) {
+  const maskId = useId()
+  const { node, isStatic } = props
+
+  const [valign, halign, background, borderWidth, borderColor, sides] = useStore(
+    node,
+    "valign",
+    "halign",
+    "background",
+    "borderWidth",
+    "borderColor",
+    "sides",
+  )
+
+  const [w, h, d] = useStore(node, "width", "height", "svgPathData")
+
+  const radii = useStore(
+    node,
+    "cornerTopLeft",
+    "cornerTopRight",
+    "cornerBottomRight",
+    "cornerBottomLeft",
+  )
+
+  return (
+    <div className="relative size-full">
+      {sides !== 4 ? (
+        <svg width={w} height={h} 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>
+      ) : (
+        <div
+          className="absolute inset-0 size-full"
+          onDragStart={(e) => e.preventDefault()}
+          style={{
+            borderRadius: radii.map((r) => `${r}px`).join(" "),
+            background: background,
+            border: `${borderWidth}px solid ${borderColor}`,
+          }}
+        />
+      )}
+      <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

@@ -0,0 +1,40 @@
+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 { EditableContent } from "./EditableContent"
+
+export function TextContent(props: {
+  node: TextNode
+  placeholder?: string
+  isStatic?: boolean
+}) {
+  const { node, placeholder, isStatic } = props
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const [halign, scale, height] = useStore(node, "halign", "scale", "height")
+
+  useEffect(() => {
+    if (node.tiptap.isEmpty && !selection.has(node)) {
+      // TODO: remove node and make sure history is still valid
+    }
+  }, [node, selection])
+
+  return (
+    <div style={{ height }} className="overflow-clip m-auto">
+      <EditableContent
+        node={node}
+        isStatic={isStatic}
+        placeholder={placeholder}
+        style={{ transform: `scale(${scale})` }}
+        className={clsx(
+          halign === "left" && "text-left origin-top-left",
+          halign === "center" && "text-center origin-top",
+          halign === "right" && "text-right origin-top-right",
+          halign === "justify" && "text-justify *:w-full origin-top",
+        )}
+      />
+    </div>
+  )
+}