@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/package.json

@@ -1,16 +1,10 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "typecheck": "tsc",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "format": "prettier . --write",
-    "preview": "vite preview",
-    "test": "vitest run"
-  },
+  "files": [
+    "lib"
+  ],
   "exports": {
     "./ui": "./lib/ui/index.ts",
     "./model": "./lib/model/index.ts",
@@ -66,5 +60,14 @@
   "prettier": {
     "semi": false,
     "printWidth": 90
+  },
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "preview": "vite preview",
+    "test": "vitest run"
   }
-}
+}

package/.claude/settings.local.json

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

package/.github/workflows/ci.yml

@@ -1,34 +0,0 @@
-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/demo/App.tsx

@@ -1,62 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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>
-  )
-}