@lazlon-platform/html-editor 0.1.0

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node --version:*)",
+      "Bash(pnpm tsc:*)",
+      "Bash(pnpm lint:*)"
+    ]
+  }
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test

package/README.md

@@ -0,0 +1,24 @@
+# HTML Editor
+
+Visual HTML editing library used in cakesanddays.com
+
+## Model
+
+Editor -\*> Page -\*> Node
+
+## Demo App
+
+The Demo App should demonstrate how to
+
+- display the Model,
+- use hooks such as `useMovable`, `useResize`, `useRotate`,
+- how to display an overlay toolbar over the selection using `useSelectionFrame`,
+- how to use action hooks such as `useAddNodeAction`, `useGroupAction` etc
+- how to use model mutating hooks such as `useNodeFieldBatch`
+
+## Hacking
+
+```sh
+pnpm install
+pnpm dev
+```

package/demo/App.tsx

@@ -0,0 +1,62 @@
+import { EditorContext } from "@lazlon/html-editor/hooks"
+import {
+  Editor,
+  GroupNode,
+  ImageNode,
+  Page,
+  PolygonNode,
+  TextNode,
+} from "@lazlon/html-editor/model"
+import EditorView from "./EditorView"
+import Hotkeys from "./hotkeys"
+import Navbar from "./Navbar"
+import SideBar from "./Sidebar"
+
+function createEditor() {
+  const state = localStorage.getItem("state")
+
+  const editor = new Editor({
+    ...(state && { init: JSON.parse(state) }),
+    schema: [GroupNode, TextNode, PolygonNode, ImageNode],
+    onChange() {
+      localStorage.setItem("state", JSON.stringify(editor.serialize()))
+    },
+  })
+
+  if (state) return editor
+
+  const page = new Page(editor, {
+    id: editor.id(),
+    background: "#ffffff",
+    width: 841,
+    height: 595,
+  })
+
+  const polygon = new PolygonNode(editor, page, {
+    id: editor.id(),
+    x: 50,
+    y: 50,
+    width: 100,
+    height: 100,
+  })
+
+  page.nodes = new Map([[polygon.id, polygon]])
+  editor.pages = new Map([[page.id, page]])
+
+  return editor
+}
+
+export default function App() {
+  return (
+    <EditorContext value={createEditor()}>
+      <div className="h-full flex flex-col bg-amber-50">
+        <Navbar />
+        <div className="h-full flex overflow-auto">
+          <SideBar />
+          <EditorView />
+        </div>
+      </div>
+      <Hotkeys />
+    </EditorContext>
+  )
+}

package/demo/EditorView/PageView/NodeContent.tsx

@@ -0,0 +1,35 @@
+import {
+  GroupNode,
+  ImageNode,
+  Node,
+  PolygonNode,
+  TextNode,
+} from "@lazlon/html-editor/model"
+import {
+  GroupContent,
+  ImageContent,
+  PolygonContent,
+  TextContent,
+} from "@lazlon/html-editor/ui"
+
+export default function NodeContent({ node }: { node: Node }) {
+  if (node instanceof PolygonNode) {
+    return <PolygonContent node={node} />
+  }
+
+  if (node instanceof TextNode) {
+    return <TextContent placeholder="Text..." node={node} />
+  }
+
+  if (node instanceof GroupNode) {
+    return (
+      <GroupContent node={node}>{(node) => <NodeContent node={node} />}</GroupContent>
+    )
+  }
+
+  if (node instanceof ImageNode) {
+    return <ImageContent node={node} />
+  }
+
+  throw Error(`unknown node: ${node.name}`)
+}

package/demo/EditorView/PageView/SnapLines.tsx

@@ -0,0 +1,28 @@
+import { usePage } from "@lazlon/html-editor/hooks"
+import { useStore } from "react-bolt"
+
+export default function SnapLines() {
+  const page = usePage()
+  const snapLines = useStore(page, "snapLines")
+  const [width, height] = useStore(page, "width", "height")
+
+  return (
+    <>
+      {snapLines.map(({ x, y, h, w }, i) => (
+        <div
+          key={i}
+          className="bg-black absolute"
+          style={{
+            top: `${y ?? 0}px`,
+            left: `${x ?? 0}px`,
+            width: `${w ?? (typeof y === "number" ? width : 1)}px`,
+            height: `${h ?? (typeof x === "number" ? height : 1)}px`,
+            background: "radial-gradient(circle, black 1px, transparent 1px",
+            backgroundSize: typeof y === "number" ? "5px 1px" : "1px 5px",
+            backgroundRepeat: typeof y === "number" ? "repeat-x" : "repeat-y",
+          }}
+        />
+      ))}
+    </>
+  )
+}

package/demo/EditorView/PageView/index.tsx

@@ -0,0 +1,45 @@
+import { useEditor, useMoveable, usePage } from "@lazlon/html-editor/hooks"
+import { getReadableForeground, NodeView } from "@lazlon/html-editor/ui"
+import { useStore } from "react-bolt"
+import NodeContent from "./NodeContent"
+import SnapLines from "./SnapLines"
+
+export default function PageView() {
+  const page = usePage()
+  const zoom = useStore(useEditor(), "zoom")
+  const [width, height, background] = useStore(page, "width", "height", "background")
+  const nodes = useStore(page, "nodes").values().toArray()
+  const movable = useMoveable()
+
+  return (
+    <div
+      className="m-auto shrink-0"
+      style={{
+        width: Math.round(width * zoom),
+        height: Math.round(height * zoom),
+      }}
+    >
+      <div
+        ref={(ref) => void (page.ref = ref)}
+        className="origin-top-left relative shadow-xl"
+        style={{
+          width,
+          height,
+          background,
+          transform: `scale(${zoom})`,
+          color: getReadableForeground(background),
+        }}
+        onPointerDown={(event) => {
+          movable.onPointerDown(event)
+        }}
+      >
+        {nodes.map((node) => (
+          <NodeView key={node.id} node={node}>
+            <NodeContent node={node} />
+          </NodeView>
+        ))}
+        <SnapLines />
+      </div>
+    </div>
+  )
+}

package/demo/EditorView/SelectionFrame/Corner.tsx

@@ -0,0 +1,24 @@
+import { useResize } from "@lazlon/html-editor/hooks"
+import clsx from "clsx"
+
+export default function Corner(props: {
+  className?: string
+  corner: "ne" | "nw" | "se" | "sw"
+}) {
+  const { className, corner } = props
+  const { onPointerDown } = useResize(corner)
+
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      className={clsx(
+        className,
+        "bg-black size-2 pointer-events-auto absolute select-none",
+        corner == "ne" && "hover:cursor-ne-resize",
+        corner == "nw" && "hover:cursor-nw-resize",
+        corner == "se" && "hover:cursor-se-resize",
+        corner == "sw" && "hover:cursor-nesw-resize",
+      )}
+    />
+  )
+}

package/demo/EditorView/SelectionFrame/Edge.tsx

@@ -0,0 +1,21 @@
+import { useResize } from "@lazlon/html-editor/hooks"
+import clsx from "clsx"
+
+export default function Edge(props: { className?: string; side: "n" | "s" | "w" | "e" }) {
+  const { className, side } = props
+  const { onPointerDown } = useResize(side)
+
+  return (
+    <div
+      onPointerDown={onPointerDown}
+      className={clsx(
+        className,
+        "bg-black pointer-events-auto absolute select-none",
+        side == "n" && "hover:cursor-n-resize",
+        side == "s" && "hover:cursor-s-resize",
+        side == "e" && "hover:cursor-e-resize",
+        side == "w" && "hover:cursor-w-resize",
+      )}
+    />
+  )
+}

package/demo/EditorView/SelectionFrame/index.tsx

@@ -0,0 +1,27 @@
+import { useEditor, useSelectionFrame } from "@lazlon/html-editor/hooks"
+import { useStore } from "react-bolt"
+import Corner from "./Corner"
+import Edge from "./Edge"
+
+export default function SelectionFrame() {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const selectionFrameRef = useSelectionFrame<HTMLDivElement>({
+    accountForSingleSelection: true,
+  })
+
+  return (
+    selection.size > 0 && (
+      <div ref={selectionFrameRef} className="pointer-events-none absolute inset-0">
+        <Edge className="-top-1 h-1 w-full" side="n" />
+        <Edge className="-right-1 h-full w-1" side="e" />
+        <Edge className="-bottom-1 h-1 w-full" side="s" />
+        <Edge className="-left-1 h-full w-1" side="w" />
+        <Corner className="-top-1.5 -right-1.5" corner="ne" />
+        <Corner className="-right-1.5 -bottom-1.5" corner="se" />
+        <Corner className="-bottom-1.5 -left-1.5" corner="sw" />
+        <Corner className="-top-1.5 -left-1.5" corner="nw" />
+      </div>
+    )
+  )
+}

package/demo/EditorView/SelectionOverlay/ActionHud.tsx

@@ -0,0 +1,32 @@
+import { useEditor } from "@lazlon/html-editor/hooks"
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+
+export default function ActionHud(props: { className?: string }) {
+  const editor = useEditor()
+  const { action, payload } = useStore(editor, "action")
+
+  return (
+    payload && (
+      <div
+        className={clsx(
+          "select-none rounded-lg py-1 px-2 text-sm shadow-lg",
+          "ring-black/8 ring-1 ring-inset",
+          props.className,
+        )}
+      >
+        {action === "resize" && (
+          <span className="text-nowrap">
+            w:{payload.width}, h:{payload.height}
+          </span>
+        )}
+        {action === "move" && (
+          <span className="text-nowrap">
+            x:{payload.x}, y:{payload.y}
+          </span>
+        )}
+        {action === "rotate" && <span className="text-nowrap">r:{payload.deg}°</span>}
+      </div>
+    )
+  )
+}

package/demo/EditorView/SelectionOverlay/Rotation.tsx

@@ -0,0 +1,39 @@
+import { useEditor, useNodeField, useRotation } from "@lazlon/html-editor/hooks"
+import clsx from "clsx"
+import { useStore } from "react-bolt"
+
+export default function Rotation(props: { className?: string }) {
+  const { onPointerDown } = useRotation()
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const { action } = useStore(editor, "action")
+  const isLocked = useNodeField(selection, "locked", false)
+  const shouldShow = !action && !isLocked
+
+  return (
+    shouldShow && (
+      <div
+        className={clsx(
+          props.className,
+          "bg-white rounded-full shadow-lg",
+          "ring-black/8 ring-1 ring-inset",
+        )}
+      >
+        <div onPointerDown={onPointerDown} className="p-2">
+          <RotateIcon />
+        </div>
+      </div>
+    )
+  )
+}
+
+function RotateIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M15.25 18.48V15a.75.75 0 1 0-1.5 0v4c0 .97.78 1.75 1.75 1.75h4a.75.75 0 1 0 0-1.5h-2.6a8.75 8.75 0 0 0-2.07-15.53.75.75 0 1 0-.49 1.42 7.25 7.25 0 0 1 .91 13.34zM8.75 5.52V9a.75.75 0 0 0 1.5 0V5c0-.97-.78-1.75-1.75-1.75h-4a.75.75 0 0 0 0 1.5h2.6a8.75 8.75 0 0 0 2.18 15.57.75.75 0 0 0 .47-1.43 7.25 7.25 0 0 1-1-13.37z"
+      />
+    </svg>
+  )
+}

package/demo/EditorView/SelectionOverlay/Toolbar.tsx

@@ -0,0 +1,128 @@
+import {
+  useAlignAction,
+  useBatchSet,
+  useDistributeAction,
+  useDuplicateAction,
+  useEditor,
+  useGroupAction,
+  useNodeField,
+  useStackOrderAction,
+  useToggleLockAction,
+  useTrashAction,
+} from "@lazlon/html-editor/hooks"
+import { GroupNode } from "@lazlon/html-editor/model"
+import clsx from "clsx"
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  SubmenuTrigger,
+} from "react-aria-components"
+import { useStore } from "react-bolt"
+
+export default function Toolbar(props: { className?: string }) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const [firstNode, ...restNode] = selection
+  const { action } = useStore(editor, "action")
+  const trash = useTrashAction()
+  const duplicate = useDuplicateAction()
+  const { group, ungroup } = useGroupAction()
+  const toggleLock = useToggleLockAction()
+  const align = useAlignAction()
+  const distribute = useDistributeAction()
+  const stack = useStackOrderAction()
+  const isLocked = useNodeField(selection, "locked", false)
+  const batchSet = useBatchSet()
+
+  return (
+    !action && (
+      <div
+        className={clsx(
+          props.className,
+          "flex gap-2 rounded-lg bg-white border-black/8 border shadow-lg px-2 py-1",
+        )}
+      >
+        <button onClick={() => trash()}>del</button>
+        <button onClick={() => duplicate()}>dup</button>
+        {restNode.length > 0 && <button onClick={() => group()}>group</button>}
+        {firstNode instanceof GroupNode && (
+          <button onClick={() => ungroup(firstNode)}>ungroup</button>
+        )}
+        <button onClick={() => toggleLock()}>{isLocked ? "unlock" : "lock"}</button>
+        <MenuTrigger>
+          <Button>menu</Button>
+          <Popover
+            offset={12}
+            placement="right top"
+            className="bg-white border-black/8 border shadow-lg px-2 py-1 rounded-lg w-52"
+          >
+            <Menu>
+              <SubmenuTrigger>
+                <MenuItem>align</MenuItem>
+                <Popover
+                  offset={12}
+                  className="bg-white border-black/8 border shadow-lg px-2 py-1 rounded-lg w-52"
+                >
+                  <Menu>
+                    <MenuItem onClick={align.right}>right</MenuItem>
+                    <MenuItem onClick={align.center}>center</MenuItem>
+                    <MenuItem onClick={align.left}>left</MenuItem>
+                    <MenuItem onClick={align.top}>top</MenuItem>
+                    <MenuItem onClick={align.middle}>middle</MenuItem>
+                    <MenuItem onClick={align.bottom}>bottom</MenuItem>
+                  </Menu>
+                </Popover>
+              </SubmenuTrigger>
+              <SubmenuTrigger>
+                <MenuItem>distribute</MenuItem>
+                <Popover
+                  offset={12}
+                  className="bg-white border-black/8 border shadow-lg px-2 py-1 rounded-lg w-52"
+                >
+                  <Menu>
+                    <MenuItem onClick={distribute.vertical}>vertically</MenuItem>
+                    <MenuItem onClick={distribute.horizontal}>horizontally</MenuItem>
+                  </Menu>
+                </Popover>
+              </SubmenuTrigger>
+              <SubmenuTrigger>
+                <MenuItem>stack</MenuItem>
+                <Popover
+                  offset={12}
+                  className="bg-white border-black/8 border shadow-lg px-2 py-1 rounded-lg w-52"
+                >
+                  <Menu>
+                    <MenuItem
+                      isDisabled={!stack.canBringBackward}
+                      onClick={stack.bringBackward}
+                    >
+                      bring backward
+                    </MenuItem>
+                    <MenuItem
+                      isDisabled={!stack.canBringForward}
+                      onClick={stack.bringForward}
+                    >
+                      bring forward
+                    </MenuItem>
+                    <MenuItem onClick={stack.bringToFront}>bring to front</MenuItem>
+                    <MenuItem onClick={stack.bringToBack}>bring to back</MenuItem>
+                  </Menu>
+                </Popover>
+              </SubmenuTrigger>
+              <MenuItem
+                onClick={() =>
+                  batchSet(selection, (n) => ({ rotation: n.rotation + 90 }))
+                }
+              >
+                rotate 90°
+              </MenuItem>
+            </Menu>
+          </Popover>
+        </MenuTrigger>
+      </div>
+    )
+  )
+}

package/demo/EditorView/SelectionOverlay/index.tsx

@@ -0,0 +1,21 @@
+import { useEditor, useSelectionFrame } from "@lazlon/html-editor/hooks"
+import { useStore } from "react-bolt"
+import ActionHud from "./ActionHud"
+import Rotation from "./Rotation"
+import Toolbar from "./Toolbar"
+
+export default function SelectionOverlay() {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const frameRef = useSelectionFrame<HTMLDivElement>()
+
+  return (
+    selection.size > 0 && (
+      <div ref={frameRef} className="pointer-events-none absolute inset-0">
+        <ActionHud className="absolute -bottom-14 left-1/2 -translate-x-1/2" />
+        <Rotation className="pointer-events-auto absolute -bottom-18 left-1/2 -translate-x-1/2" />
+        <Toolbar className="pointer-events-auto absolute -top-18 left-1/2 -translate-x-1/2" />
+      </div>
+    )
+  )
+}

package/demo/EditorView/Toolbar/index.tsx

@@ -0,0 +1,68 @@
+import { useEditor, useTextMarks } from "@lazlon/html-editor/hooks"
+import { EditableNode, FormattableNode } from "@lazlon/html-editor/model"
+import { getReadableForeground } from "@lazlon/html-editor/ui"
+import clsx from "clsx"
+import { ColorField, Input, NumberField, Separator } from "react-aria-components"
+import { useStore } from "react-bolt"
+
+export default function Toolbar() {
+  const editor = useEditor()
+  const [page] = useStore(editor, "pages").values()
+  const selection = useStore(editor, "selection").values().toArray()
+
+  const { state, toggle, setColor, setSize } = useTextMarks({
+    editables: selection.filter((n) => n instanceof EditableNode),
+    formattables: selection.filter((n) => n instanceof FormattableNode),
+  })
+
+  return (
+    <div
+      className={clsx(
+        "absolute top-4 left-1/2 -translate-x-1/2",
+        "bg-white rounded-lg border-black/8 border shadow-lg px-2 py-1 ",
+        "flex gap-4 items-center",
+      )}
+    >
+      <div className="flex gap-2">
+        <button onClick={() => (editor.zoom += 0.05)}>zoom+</button>
+        <button onClick={() => (editor.zoom -= 0.05)}>zoom-</button>
+      </div>
+
+      {state && (
+        <>
+          <Separator className="h-7 bg-black w-px" />
+          <div className="flex gap-2">
+            {page && (
+              <ColorField
+                aria-label="color"
+                value={state.color ?? getReadableForeground(page.background)}
+                onChange={(c) =>
+                  setColor(c?.toString("hex") ?? getReadableForeground(page.background), {
+                    end: true,
+                  })
+                }
+              >
+                <Input
+                  className="w-18"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      // HACK: ReactAria does not apply changes on enter by default
+                      e.currentTarget.blur()
+                      e.currentTarget.focus()
+                    }
+                  }}
+                />
+              </ColorField>
+            )}
+            <button onClick={() => toggle("Bold")}>bold</button>
+            <button onClick={() => toggle("Italic")}>italic</button>
+            <button onClick={() => toggle("Underline")}>underline</button>
+            <NumberField value={state.size} aria-label="font size" onChange={setSize}>
+              <Input className="w-8" />
+            </NumberField>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/demo/EditorView/index.tsx

@@ -0,0 +1,47 @@
+import { PageContext, useEditor, useSelector } from "@lazlon/html-editor/hooks"
+import clsx from "clsx"
+import { useRef } from "react"
+import { useStore } from "react-bolt"
+import PageView from "./PageView"
+import SelectionFrame from "./SelectionFrame"
+import SelectionOverlay from "./SelectionOverlay"
+import Toolbar from "./Toolbar"
+
+export default function EditorView(props: { className?: string }) {
+  const editor = useEditor()
+  const selection = useStore(editor, "selection")
+  const selectorRef = useRef<HTMLDivElement>(null)
+  const pages = useStore(editor, "pages").values().toArray()
+  const selector = useSelector({ ref: selectorRef })
+  const key = selection
+    .values()
+    .toArray()
+    .map((n) => n.id)
+    .join("")
+
+  return (
+    <div className={clsx("relative size-full overflow-auto", props.className)}>
+      <div
+        ref={(ref) => void (editor.ref = ref)}
+        className="relative flex size-full overflow-auto p-14 gap-4"
+        onPointerDown={(event) => {
+          selector.onPointerDown(event)
+        }}
+      >
+        {pages.map((page) => (
+          <PageContext key={page.id} value={page}>
+            <PageView />
+          </PageContext>
+        ))}
+      </div>
+      <div
+        ref={selectorRef}
+        className="absolute inset-0 border"
+        style={{ display: "none" }}
+      />
+      <SelectionOverlay />
+      <SelectionFrame />
+      <Toolbar key={key} />
+    </div>
+  )
+}