diff --git a/apps/web/src/components/MemoEditorHeaderActions.tsx b/apps/web/src/components/MemoEditorHeaderActions.tsx
index ce3750ec..c26a4605 100644
--- a/apps/web/src/components/MemoEditorHeaderActions.tsx
+++ b/apps/web/src/components/MemoEditorHeaderActions.tsx
@@ -10,6 +10,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
+import { IconTooltip } from "@/components/editor/EditorPaneChrome";
import { cn } from "@/lib/utils";
export const MemoEditorHeaderActions = ({
@@ -43,17 +44,16 @@ export const MemoEditorHeaderActions = ({
/>
-
+
-
+
{
const memo = memoContextMenu?.memo;
- if (!memo || memo.diagramKind || memo.structuredTable || memo.infographic || wechatCopyPendingRef.current) return;
+ if (!memo || memo.diagramKind || memo.structuredTable || memo.infographic || memo.poster || wechatCopyPendingRef.current) return;
setMemoContextMenu(null);
wechatCopyPendingRef.current = true;
if (wechatCopyNoticeTimerRef.current !== null) {
@@ -1674,7 +1674,7 @@ export const MemoListPane = ({
void handleCopyContextMemoToWeChat()}
diff --git a/apps/web/src/components/NotebookPane.tsx b/apps/web/src/components/NotebookPane.tsx
index c7c6a78f..ce0a2f28 100644
--- a/apps/web/src/components/NotebookPane.tsx
+++ b/apps/web/src/components/NotebookPane.tsx
@@ -346,6 +346,11 @@ const CreateMemoTypeItems = ({ onCreateMemo }: { onCreateMemo: (kind?: NoteCreat
{t("infographic.name")}
Beta
+ onCreateMemo("poster")}>
+ {t("poster.name")}
+ Beta
+
onCreateMemo("table")}>
{t("structuredTable.name")}
diff --git a/apps/web/src/components/PosterEditorPane.tsx b/apps/web/src/components/PosterEditorPane.tsx
new file mode 100644
index 00000000..0c6ac060
--- /dev/null
+++ b/apps/web/src/components/PosterEditorPane.tsx
@@ -0,0 +1,2133 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ ArrowLeft,
+ ChevronDown,
+ Copy,
+ Download,
+ Grid3X3,
+ Hand,
+ ImagePlus,
+ LoaderCircle,
+ Maximize2,
+ MousePointer2,
+ PanelLeftClose,
+ PanelRightClose,
+ Pencil,
+ RectangleHorizontal,
+ Redo2,
+ Save,
+ ScanLine,
+ Shapes,
+ Sparkles,
+ Type,
+ Undo2,
+} from "lucide-react";
+import { PencilBrush, Textbox, type FabricObject } from "fabric";
+import {
+ parsePosterDocument,
+ posterFallbackMarkdown,
+ PosterDocumentSchema,
+ createPosterDocument,
+ resizePosterDocument,
+ type MemoDetail,
+ type MemoEditSession,
+ type Notebook,
+ type PosterDocument,
+ type PosterElement,
+} from "@edgeever/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSeparator,
+ ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { api } from "@/lib/api";
+import type { EdgeEverRepository } from "@/lib/repository";
+import {
+ Canvas,
+ ActiveSelection,
+ makePosterGradient,
+ posterObject,
+ posterElementFromObject,
+ renderPosterBlob,
+} from "@/lib/poster-canvas";
+import {
+ buildPosterDesign,
+ PLATFORMS,
+ posterCopy,
+ posterPrimitiveFromObject,
+ platformFor,
+} from "@/lib/poster-design/templates";
+import { savePosterMemo } from "@/lib/poster-save";
+import { copyImageBlobToClipboard } from "@/lib/clipboard";
+import { compressImageForUpload } from "@/lib/image-compression";
+import {
+ createLocalEditSession,
+ requiresLocalEditSession,
+} from "./editor/editor-pane-helpers";
+import { downloadBlob } from "@/lib/infographic-image-export";
+import { PosterTool } from "./poster/PosterControls";
+import { PosterTemplatePanel } from "./poster/PosterTemplatePanel";
+import { PosterInspector, type PosterAlign } from "./poster/PosterInspector";
+import { PosterCanvasSettings } from "./poster/PosterCanvasSettings";
+import { PosterLayers } from "./poster/PosterLayers";
+import { PosterAssetsPanel } from "./poster/PosterAssetsPanel";
+import { z } from "zod";
+import { MemoEditorHeaderActions } from "./MemoEditorHeaderActions";
+import { MemoEditorMetadataRow } from "./MemoEditorMetadataRow";
+import { MemoEditorFocusModeButton, MemoEditorTopRowLeading } from "./MemoEditorTopRowLeading";
+import { MEMO_EDITOR_TOP_ROW_CLASS_NAME, MEMO_EDITOR_METADATA_ROW_CLASS_NAME } from "./MemoEditorChromeDensity";
+import { MemoTitleInput } from "./MemoTitleInput";
+import { IconTooltip } from "./editor/EditorPaneChrome";
+import { AiSidebar, readAiSidebarOpen, writeAiSidebarOpen } from "./ai-sidebar/AiSidebar";
+import { AiSidebarErrorBoundary } from "./ai-sidebar/AiSidebarErrorBoundary";
+import { getNotebookMoveOptions } from "@/lib/app-helpers";
+import { parseTagsText } from "@/lib/utils";
+
+const artwork = (document: PosterDocument) =>
+ JSON.stringify({ ...document, previewResourceId: undefined });
+const snapshot = (title: string, document: PosterDocument) =>
+ JSON.stringify([title, artwork(document)]);
+type Props = {
+ memo: MemoDetail;
+ repository: EdgeEverRepository;
+ readOnly: boolean;
+ companionAvailable?: boolean;
+ beforeCompanionApply?: () => Promise;
+ onCompanionNotesChanged?: () => Promise;
+ onSaved: (memo: MemoDetail) => Promise;
+ onBackToList: () => void;
+ onOpenCompanionNote?: (id: string, notebookId: string) => void;
+ notebooks?: Notebook[];
+ desktopFocusMode?: boolean;
+ onOpenExecutionCenter?: () => void;
+ onToggleDesktopFocusMode?: () => void;
+ aiAssistantOpenToken?: number;
+ shortcutSettings?: unknown;
+};
+export default function PosterEditorPane({
+ memo,
+ repository,
+ readOnly,
+ onSaved,
+ onBackToList,
+ onOpenCompanionNote,
+ notebooks = [], desktopFocusMode = false, onToggleDesktopFocusMode,
+ onOpenExecutionCenter, aiAssistantOpenToken,
+ companionAvailable = false, beforeCompanionApply, onCompanionNotesChanged,
+}: Props) {
+ const { t, i18n } = useTranslation();
+ const zh = i18n.language.startsWith("zh");
+ const initial = useMemo(
+ () => parsePosterDocument(memo.contentMarkdown),
+ [memo.contentMarkdown],
+ );
+ const [document, setDocument] = useState(
+ initial ?? createPosterDocument(),
+ );
+ const [aiAssistantOpen, setAiAssistantOpen] = useState(readAiSidebarOpen);
+ const setAiSidebarOpen = useCallback((open: boolean) => {
+ setAiAssistantOpen(open);
+ writeAiSidebarOpen(open);
+ }, []);
+ const handledAiToken = useRef(aiAssistantOpenToken);
+ useEffect(() => {
+ if (handledAiToken.current === aiAssistantOpenToken) return;
+ handledAiToken.current = aiAssistantOpenToken;
+ if (!readOnly) setAiSidebarOpen(true);
+ }, [aiAssistantOpenToken, readOnly, setAiSidebarOpen]);
+ const notebookOptions = useMemo(() => getNotebookMoveOptions(notebooks), [notebooks]);
+ const [mobileNotebookPickerOpen, setMobileNotebookPickerOpen] = useState(false);
+ const [notebookUpdatePending, setNotebookUpdatePending] = useState(false);
+ const [tagsText, setTagsText] = useState(memo.tags.join(", "));
+ const [savedTags, setSavedTags] = useState(memo.tags.join(", "));
+ const [title, setTitle] = useState(memo.title ?? "");
+ const [saved, setSaved] = useState(
+ initial?.previewResourceId ? snapshot(memo.title ?? "", document) : "",
+ );
+ const [selectedIds, setSelectedIds] = useState([]);
+ const [busy, setBusy] = useState(false),
+ [canvasReady, setCanvasReady] = useState(false),
+ [canvasRevision, setCanvasRevision] = useState(0),
+ [saving, setSaving] = useState(false),
+ [ready, setReady] = useState(false);
+ const [error, setError] = useState(
+ initial ? null : t("poster.invalid"),
+ );
+ const [leftTab, setLeftTab] = useState<"templates" | "assets">(
+ "templates",
+ ),
+ [rightTab, setRightTab] = useState<"properties" | "layers" | "canvas">(
+ "canvas",
+ );
+ const [leftOpen, setLeftOpen] = useState(() => window.innerWidth >= 760),
+ [rightOpen, setRightOpen] = useState(() => window.innerWidth >= 1100);
+ const [tool, setTool] = useState<"select" | "hand" | "draw">("select"),
+ [spaceHeld, setSpaceHeld] = useState(false);
+ const [brushColor, setBrushColor] = useState("#16a06e"),
+ [brushWidth, setBrushWidth] = useState(8);
+ const [zoom, setZoom] = useState(0.4),
+ [fitZoom, setFitZoom] = useState(0.4),
+ [autoFit, setAutoFit] = useState(true);
+ const [grid, setGrid] = useState(false),
+ [safeArea, setSafeArea] = useState(false),
+ [snap, setSnap] = useState(true),
+ [guides, setGuides] = useState<{ x?: number; y?: number }>({});
+ const [exportOpen, setExportOpen] = useState(false),
+ [exportFormat, setExportFormat] = useState<"png" | "jpeg" | "webp">("png"),
+ [exportScale, setExportScale] = useState(1),
+ [exportQuality, setExportQuality] = useState(0.92);
+ const [toast, setToast] = useState("");
+ const [recovery, setRecovery] = useState<{
+ title: string;
+ document: PosterDocument;
+ baseHash: string;
+ tagsText?: string;
+ } | null>(null);
+ const [, setHistoryVersion] = useState(0);
+ const workbenchHost = useRef(null);
+ const canvasHost = useRef(null),
+ viewport = useRef(null);
+ const fileInput = useRef(null),
+ canvas = useRef(null);
+ const objectsRef = useRef([]);
+ const selectionSync = useRef(false);
+ const session = useRef(null),
+ currentMemo = useRef(memo);
+ const current = useRef({ title, document, tagsText });
+ current.current = { title, document, tagsText };
+ const selected = useRef(selectedIds);
+ selected.current = selectedIds;
+ const options = useRef({ zoom, snap, readOnly, busy, tool, spaceHeld });
+ options.current = { zoom, snap, readOnly, busy, tool, spaceHeld };
+ const loadedArt = useRef(artwork(document));
+ const undo = useRef([]),
+ redo = useRef([]);
+ const saveLock = useRef | null>(null),
+ saveRef = useRef<() => Promise>(async () => false);
+ const onSavedRef = useRef(onSaved);
+ onSavedRef.current = onSaved;
+ const actions = useRef<{ commit: typeof commit; add: typeof add }>(
+ {} as never,
+ );
+ const panStart = useRef<{
+ x: number;
+ y: number;
+ left: number;
+ top: number;
+ } | null>(null);
+ const draftKey = `edgeever:poster-draft:${memo.id}`;
+ const dirty = snapshot(title, document) !== saved || tagsText !== savedTags;
+ const editable = !readOnly && Boolean(initial) && ready && !busy;
+ const selectedElements = document.elements.filter((element) =>
+ selectedIds.includes(element.id),
+ );
+ const active =
+ selectedElements.length === 1 ? selectedElements[0] : undefined;
+ const platform = platformFor(
+ document.width,
+ document.height,
+ document.platformId,
+ );
+ const readResource = useMemo(() => {
+ const cache = new Map>();
+ return (id: string) => {
+ if (!cache.has(id))
+ cache.set(
+ id,
+ repository.readResource(id).catch((error) => {
+ cache.delete(id);
+ throw error;
+ }),
+ );
+ return cache.get(id)!;
+ };
+ }, [repository]);
+
+ const commit = (next: PosterDocument, redraw = true) => {
+ const validated = PosterDocumentSchema.safeParse(next);
+ if (!validated.success) {
+ setError(t("poster.invalid"));
+ if (!redraw) setCanvasRevision((version) => version + 1);
+ return;
+ }
+ if (artwork(next) === artwork(current.current.document)) return;
+ undo.current = [...undo.current.slice(-49), current.current.document];
+ redo.current = [];
+ current.current.document = validated.data;
+ setDocument(validated.data);
+ if (redraw) setCanvasRevision((version) => version + 1);
+ setHistoryVersion((version) => version + 1);
+ setError(null);
+ };
+ const patchIds = (
+ ids: string[],
+ patch: Partial,
+ allowLocked = false,
+ ) => {
+ const value = current.current.document;
+ const next = {
+ ...value,
+ elements: value.elements.map((element) =>
+ ids.includes(element.id) && (!element.locked || allowLocked)
+ ? ({
+ ...element,
+ ...patch,
+ ...("text" in patch && patch.text !== undefined
+ ? { sourceText: patch.text }
+ : {}),
+ } as PosterElement)
+ : element,
+ ),
+ };
+ if ("text" in patch) {
+ const copy = { ...posterCopy(value) };
+ for (const role of ["title", "subtitle", "badge"] as const)
+ if (
+ value.elements.some(
+ (element) =>
+ ids.includes(element.id) &&
+ element.role === role &&
+ (!element.locked || allowLocked),
+ )
+ )
+ copy[role] = next.elements
+ .filter(
+ (element) => element.type === "text" && element.role === role,
+ )
+ .map((element) =>
+ element.type === "text"
+ ? (element.sourceText ?? element.text)
+ : "",
+ )
+ .join("\n");
+ next.copy = copy;
+ }
+ commit(next);
+ };
+ const updateElement = (patch: Partial) =>
+ patchIds(selected.current, patch, "locked" in patch || "name" in patch);
+ const travel = (back: boolean) => {
+ const from = back ? undo.current : redo.current,
+ to = back ? redo.current : undo.current;
+ const next = from.pop();
+ if (!next) return;
+ to.push(current.current.document);
+ current.current.document = next;
+ setDocument(next);
+ setCanvasRevision((version) => version + 1);
+ setHistoryVersion((version) => version + 1);
+ };
+ const syncSelection = (ids: string[]) => {
+ setSelectedIds(ids);
+ selected.current = ids;
+ const instance = canvas.current;
+ if (!instance) return;
+ selectionSync.current = true;
+ instance.discardActiveObject();
+ const objects = objectsRef.current.filter((_, index) =>
+ ids.includes(current.current.document.elements[index]?.id),
+ );
+ if (objects.length === 1) instance.setActiveObject(objects[0]);
+ else if (objects.length > 1)
+ instance.setActiveObject(
+ new ActiveSelection(objects, { canvas: instance }),
+ );
+ instance.requestRenderAll();
+ setSelectedIds(ids);
+ selected.current = ids;
+ selectionSync.current = false;
+ };
+ const selectLayer = (id: string, append: boolean) => {
+ const element = current.current.document.elements.find(
+ (entry) => entry.id === id,
+ );
+ const ids =
+ element?.groupId && !append
+ ? current.current.document.elements
+ .filter((entry) => entry.groupId === element.groupId)
+ .map((entry) => entry.id)
+ : [id];
+ syncSelection(
+ append
+ ? selected.current.includes(id)
+ ? selected.current.filter((entry) => entry !== id)
+ : [...selected.current, id]
+ : ids,
+ );
+ };
+ const removeSelected = () => {
+ const value = current.current.document;
+ commit({
+ ...value,
+ elements: value.elements.filter(
+ (element) => !selected.current.includes(element.id) || element.locked,
+ ),
+ });
+ syncSelection([]);
+ };
+ const duplicate = () => {
+ const value = current.current.document,
+ groupIds = new Map();
+ const copies = value.elements
+ .filter(
+ (element) => selected.current.includes(element.id) && !element.locked,
+ )
+ .map((element) => {
+ if (element.groupId && !groupIds.has(element.groupId))
+ groupIds.set(element.groupId, crypto.randomUUID());
+ return {
+ ...element,
+ id: crypto.randomUUID(),
+ x: element.x + 24,
+ y: element.y + 24,
+ groupId: element.groupId ? groupIds.get(element.groupId) : undefined,
+ };
+ });
+ commit({ ...value, elements: [...value.elements, ...copies] });
+ selected.current = copies.map((element) => element.id);
+ setSelectedIds(selected.current);
+ };
+ const add = (element: PosterElement) => {
+ commit({
+ ...current.current.document,
+ elements: [...current.current.document.elements, element],
+ });
+ selected.current = [element.id];
+ setSelectedIds([element.id]);
+ setRightTab("properties");
+ setRightOpen(true);
+ setTool("select");
+ };
+ const addText = (style: "heading" | "subtitle" | "body" | "badge") => {
+ const value = current.current.document,
+ size =
+ style === "heading"
+ ? Math.min(value.width * 0.13, value.height * 0.18)
+ : style === "subtitle"
+ ? 48
+ : 32;
+ add({
+ id: crypto.randomUUID(),
+ name: t(`poster.design.textStyles.${style}`),
+ type: "text",
+ text: t(`poster.design.textStyles.${style}`),
+ x: value.width * 0.12,
+ y: value.height * 0.35,
+ width: value.width * 0.76,
+ height: size * 1.5,
+ rotation: 0,
+ opacity: 1,
+ locked: false,
+ fill: style === "badge" ? "#ffffff" : "#07130b",
+ fontSize: Math.round(size),
+ fontFamily: zh
+ ? style === "heading"
+ ? "思源黑体 Heavy"
+ : "思源黑体"
+ : "Inter",
+ fontWeight: "normal",
+ textAlign: "left",
+ ...(style === "badge"
+ ? {
+ badge: {
+ background: "#16a06e",
+ padX: 0.6,
+ padY: 0.35,
+ radius: 0.5,
+ },
+ }
+ : {}),
+ });
+ };
+ const addShape = (shape: string) => {
+ const value = current.current.document,
+ width = value.width * 0.3,
+ height = value.height * 0.15;
+ const base = {
+ id: crypto.randomUUID(),
+ name: t(`poster.design.shapes.${shape}`),
+ x: value.width * 0.35,
+ y: value.height * 0.4,
+ width,
+ height,
+ rotation: 0,
+ opacity: 1,
+ locked: false,
+ fill: "#16a06e",
+ };
+ if (["rect", "pill", "ellipse"].includes(shape))
+ add({
+ ...base,
+ type: shape === "ellipse" ? "ellipse" : "rect",
+ radius: shape === "pill" ? height / 2 : 0,
+ });
+ else {
+ const paths: Record = {
+ line: "M 0 0 L 200 0",
+ arrow: "M 0 120 L 150 0 M 85 0 L 150 0 L 150 65",
+ star: "M 100 0 L 124 70 L 200 72 L 140 118 L 160 192 L 100 148 L 40 192 L 60 118 L 0 72 L 76 70 Z",
+ sparkle:
+ "M 100 0 Q 100 100 200 100 Q 100 100 100 200 Q 100 100 0 100 Q 100 100 100 0 Z",
+ };
+ add({
+ ...base,
+ type: "path",
+ path: paths[shape] ?? paths.star,
+ height: shape === "line" ? 1 : width,
+ ...(shape === "line" || shape === "arrow"
+ ? { fill: "rgba(0,0,0,0)", stroke: "#16a06e", strokeWidth: 8 }
+ : {}),
+ });
+ }
+ };
+ const align = (direction: PosterAlign) => {
+ const value = current.current.document,
+ chosen = value.elements.filter(
+ (element) => selected.current.includes(element.id) && !element.locked,
+ );
+ if (!chosen.length) return;
+ const bounds =
+ chosen.length === 1
+ ? { left: 0, right: value.width, top: 0, bottom: value.height }
+ : {
+ left: Math.min(...chosen.map((element) => element.x)),
+ right: Math.max(
+ ...chosen.map((element) => element.x + element.width),
+ ),
+ top: Math.min(...chosen.map((element) => element.y)),
+ bottom: Math.max(
+ ...chosen.map((element) => element.y + element.height),
+ ),
+ };
+ commit({
+ ...value,
+ elements: value.elements.map((element) =>
+ !chosen.includes(element)
+ ? element
+ : {
+ ...element,
+ ...(direction === "left"
+ ? { x: bounds.left }
+ : direction === "right"
+ ? { x: bounds.right - element.width }
+ : direction === "center"
+ ? { x: (bounds.left + bounds.right - element.width) / 2 }
+ : direction === "top"
+ ? { y: bounds.top }
+ : direction === "bottom"
+ ? { y: bounds.bottom - element.height }
+ : {
+ y:
+ (bounds.top + bounds.bottom - element.height) / 2,
+ }),
+ },
+ ),
+ });
+ };
+ const group = (ungroup: boolean) => {
+ patchIds(selected.current, {
+ groupId: ungroup ? undefined : crypto.randomUUID(),
+ });
+ };
+ const moveLayer = (front: boolean, oneStep = false) => {
+ const value = current.current.document,
+ selectedElements = value.elements.filter(
+ (element) => selected.current.includes(element.id) && !element.locked,
+ ),
+ rest = value.elements.filter(
+ (element) => !selectedElements.includes(element),
+ );
+ if (!selectedElements.length) return;
+ if (oneStep && selectedElements.length === 1) {
+ const index = value.elements.indexOf(selectedElements[0]);
+ rest.splice(
+ Math.max(0, Math.min(rest.length, index + (front ? 1 : -1))),
+ 0,
+ selectedElements[0],
+ );
+ } else if (front) rest.push(...selectedElements);
+ else rest.unshift(...selectedElements);
+ commit({ ...value, elements: rest });
+ };
+ actions.current = { commit, add };
+ useEffect(() => {
+ if (!initial || readOnly) return;
+ let cancelled = false;
+ if (requiresLocalEditSession(memo)) {
+ session.current = createLocalEditSession(memo);
+ setReady(true);
+ } else
+ void api
+ .createMemoEditSession(memo.id)
+ .then(({ editSession }) => {
+ if (!cancelled) {
+ session.current = editSession;
+ setReady(true);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) setError(t("poster.error"));
+ });
+ try {
+ const raw = localStorage.getItem(draftKey);
+ if (raw) {
+ const stored = JSON.parse(raw);
+ const document = PosterDocumentSchema.parse(stored.document);
+ if (
+ typeof stored.title === "string" &&
+ typeof stored.baseHash === "string" &&
+ (snapshot(stored.title, document) !==
+ snapshot(memo.title ?? "", initial) ||
+ (typeof stored.tagsText === "string" && stored.tagsText !== memo.tags.join(", ")))
+ )
+ setRecovery({ ...stored, document });
+ }
+ } catch {
+ setError(t("poster.recoveryError"));
+ }
+ return () => {
+ cancelled = true;
+ };
+ }, [memo.id, readOnly]);
+
+ useEffect(() => {
+ if (memo.contentHash === currentMemo.current.contentHash) return;
+ if (dirty || saveLock.current) {
+ setError(t("poster.remoteChanged"));
+ return;
+ }
+ const next = parsePosterDocument(memo.contentMarkdown);
+ if (!next) {
+ setError(t("poster.invalid"));
+ return;
+ }
+ if (
+ snapshot(memo.title ?? "", next) ===
+ snapshot(current.current.title, current.current.document)
+ ) {
+ currentMemo.current = memo;
+ setTagsText(memo.tags.join(", "));
+ setSavedTags(memo.tags.join(", "));
+ setSaved(snapshot(memo.title ?? "", next));
+ return;
+ }
+ currentMemo.current = memo;
+ setTagsText(memo.tags.join(", "));
+ setSavedTags(memo.tags.join(", "));
+ loadedArt.current = next.previewResourceId ? artwork(next) : "";
+ setDocument(next);
+ setCanvasRevision((version) => version + 1);
+ setTitle(memo.title ?? "");
+ setSaved(next.previewResourceId ? snapshot(memo.title ?? "", next) : "");
+ undo.current = [];
+ redo.current = [];
+ setHistoryVersion((version) => version + 1);
+ }, [memo.contentHash]);
+
+ useEffect(() => {
+ const host = workbenchHost.current;
+ if (!host) return;
+ const observer = new ResizeObserver(([entry]) => {
+ if (entry.contentRect.width < 760) setLeftOpen(false);
+ if (entry.contentRect.width < 1000) setRightOpen(false);
+ });
+ observer.observe(host);
+ return () => observer.disconnect();
+ }, []);
+ useEffect(() => {
+ if (!canvasHost.current) return;
+ // Fabric owns this subtree. React must not manage a canvas that Fabric wraps and moves.
+ const node = window.document.createElement("canvas");
+ node.setAttribute("aria-label", t("poster.canvas"));
+ canvasHost.current.appendChild(node);
+ const instance = new Canvas(node, {
+ preserveObjectStacking: true,
+ selection: true,
+ selectionKey: ["shiftKey", "ctrlKey", "metaKey"],
+ });
+ canvas.current = instance;
+ const pick = () => {
+ if (selectionSync.current) return;
+ const ids = instance
+ .getActiveObjects()
+ .map(
+ (object) =>
+ current.current.document.elements[
+ objectsRef.current.indexOf(object)
+ ]?.id,
+ )
+ .filter((id): id is string => Boolean(id));
+ if (ids.length === 1) {
+ const groupId = current.current.document.elements.find(
+ (element) => element.id === ids[0],
+ )?.groupId;
+ if (groupId) {
+ syncSelection(
+ current.current.document.elements
+ .filter(
+ (element) => element.groupId === groupId && !element.locked,
+ )
+ .map((element) => element.id),
+ );
+ setRightTab("properties");
+ return;
+ }
+ }
+ selected.current = ids;
+ setSelectedIds(ids);
+ if (ids.length) setRightTab("properties");
+ };
+ instance.on("selection:created", pick);
+ instance.on("selection:updated", pick);
+ instance.on("selection:cleared", pick);
+ const changed = () => {
+ if (options.current.readOnly) return;
+ const value = current.current.document;
+ const elements = value.elements.map((element, index) =>
+ objectsRef.current[index]
+ ? posterElementFromObject(element, objectsRef.current[index])
+ : element,
+ );
+ const copy = { ...posterCopy(value) };
+ for (const role of ["title", "subtitle", "badge"] as const)
+ if (
+ elements.some(
+ (element, index) =>
+ element.type === "text" &&
+ element.role === role &&
+ value.elements[index]?.type === "text" &&
+ element.text !==
+ (
+ value.elements[index] as Extract<
+ PosterElement,
+ { type: "text" }
+ >
+ ).text,
+ )
+ )
+ copy[role] = elements
+ .filter(
+ (element) => element.type === "text" && element.role === role,
+ )
+ .map((element) =>
+ element.type === "text"
+ ? (element.sourceText ?? element.text)
+ : "",
+ )
+ .join("\n");
+ actions.current.commit({ ...value, elements, copy }, false);
+ };
+ instance.on("object:modified", changed);
+ instance.on("text:editing:exited", changed);
+ instance.on("object:moving", ({ target }) => {
+ if (!target || !options.current.snap || target instanceof ActiveSelection)
+ return;
+ const value = current.current.document,
+ threshold = 6 / options.current.zoom;
+ const bounds = target.getBoundingRect(),
+ axes = {
+ x: [0, value.width / 2, value.width],
+ y: [0, value.height / 2, value.height],
+ };
+ for (const object of objectsRef.current)
+ if (object !== target && object.visible) {
+ const other = object.getBoundingRect();
+ axes.x.push(
+ other.left,
+ other.left + other.width / 2,
+ other.left + other.width,
+ );
+ axes.y.push(
+ other.top,
+ other.top + other.height / 2,
+ other.top + other.height,
+ );
+ }
+ const found: { x?: number; y?: number } = {};
+ for (const axis of ["x", "y"] as const) {
+ const start = axis === "x" ? bounds.left : bounds.top,
+ size = axis === "x" ? bounds.width : bounds.height;
+ let best = threshold,
+ delta = 0;
+ for (const anchor of [start, start + size / 2, start + size])
+ for (const guide of axes[axis])
+ if (Math.abs(guide - anchor) < best) {
+ best = Math.abs(guide - anchor);
+ found[axis] = guide;
+ delta = guide - anchor;
+ }
+ if (found[axis] !== undefined)
+ target.set(
+ axis === "x" ? "left" : "top",
+ (axis === "x" ? target.left : target.top) + delta,
+ );
+ }
+ setGuides(found);
+ });
+ instance.on("mouse:up", () => setGuides({}));
+ instance.on("path:created", ({ path }) => {
+ const element = posterPrimitiveFromObject(path, 0);
+ if (!element) return;
+ actions.current.add({
+ ...element,
+ id: crypto.randomUUID(),
+ name: t("poster.design.drawing"),
+ });
+ setTool("draw");
+ syncSelection([]);
+ });
+ return () => {
+ canvas.current = null;
+ const wrapper = instance.wrapperEl;
+ void instance.dispose().then(() => {
+ node.remove();
+ wrapper.remove();
+ });
+ };
+ }, []);
+ useEffect(() => {
+ const instance = canvas.current;
+ if (!instance) return;
+ let cancelled = false;
+ setCanvasReady(false);
+ const value = current.current.document,
+ ids = [...selected.current];
+ void Promise.all(
+ value.elements.map((element) => posterObject(element, readResource)),
+ )
+ .then((objects) => {
+ if (cancelled) return;
+ instance.discardActiveObject();
+ instance.clear();
+ instance.backgroundColor = value.backgroundGradient
+ ? makePosterGradient(
+ value.backgroundGradient,
+ value.width,
+ value.height,
+ )
+ : value.background;
+ objectsRef.current = objects;
+ for (let index = 0; index < objects.length; index++) {
+ const element = value.elements[index],
+ object = objects[index];
+ object.set({
+ selectable:
+ !readOnly && !element.locked && element.visible !== false,
+ evented: !readOnly && !element.locked && element.visible !== false,
+ hasControls: !readOnly && !element.locked,
+ lockMovementX: Boolean(element.locked),
+ lockMovementY: Boolean(element.locked),
+ });
+ if (object instanceof Textbox)
+ object.editable = !readOnly && !element.locked;
+ instance.add(object);
+ }
+ syncSelection(
+ ids.filter((id) =>
+ value.elements.some(
+ (element) => element.id === id && !element.locked,
+ ),
+ ),
+ );
+ instance.requestRenderAll();
+ setCanvasReady(true);
+ })
+ .catch((caught) => {
+ if (!cancelled)
+ setError(
+ caught instanceof Error ? caught.message : t("poster.error"),
+ );
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [canvasRevision, readOnly, readResource]);
+ useEffect(() => {
+ const instance = canvas.current;
+ if (!instance) return;
+ instance.setDimensions({
+ width: document.width * zoom,
+ height: document.height * zoom,
+ });
+ instance.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
+ instance.requestRenderAll();
+ }, [zoom, document.width, document.height, canvasReady]);
+ useEffect(() => {
+ const host = viewport.current;
+ if (!host) return;
+ const fit = () => {
+ const next = Math.max(
+ 0.1,
+ Math.min(
+ 1,
+ (host.clientWidth - 112) / document.width,
+ (host.clientHeight - 112) / document.height,
+ ),
+ );
+ setFitZoom(next);
+ if (autoFit) setZoom(next);
+ };
+ const observer = new ResizeObserver(fit);
+ observer.observe(host);
+ fit();
+ return () => observer.disconnect();
+ }, [document.width, document.height, autoFit, leftOpen, rightOpen]);
+ useEffect(() => {
+ const instance = canvas.current;
+ if (!instance) return;
+ const hand = tool === "hand" || spaceHeld;
+ instance.isDrawingMode = tool === "draw" && !readOnly && !busy;
+ instance.selection = !hand && tool === "select" && !readOnly && !busy;
+ instance.skipTargetFind = hand || readOnly || busy;
+ instance.defaultCursor = hand ? "grab" : "default";
+ instance.hoverCursor = hand ? "grab" : "move";
+ if (instance.isDrawingMode) {
+ const brush = new PencilBrush(instance);
+ brush.color = brushColor;
+ brush.width = brushWidth;
+ instance.freeDrawingBrush = brush;
+ }
+ }, [tool, spaceHeld, readOnly, busy, brushColor, brushWidth, canvasReady]);
+ useEffect(() => {
+ const host = viewport.current;
+ if (!host) return;
+ const wheel = (event: WheelEvent) => {
+ if (!event.ctrlKey && !event.metaKey) return;
+ event.preventDefault();
+ setAutoFit(false);
+ setZoom((value) =>
+ Math.max(0.1, Math.min(2, value * Math.exp(-event.deltaY * 0.002))),
+ );
+ };
+ host.addEventListener("wheel", wheel, { passive: false });
+ return () => host.removeEventListener("wheel", wheel);
+ }, []);
+
+ saveRef.current = () => {
+ if (saveLock.current) return saveLock.current;
+ const editing = canvas.current?.getActiveObject();
+ if (
+ editing &&
+ "exitEditing" in editing &&
+ typeof editing.exitEditing === "function"
+ )
+ editing.exitEditing();
+ const data = { ...current.current };
+ if (snapshot(data.title, data.document) === saved && data.tagsText === savedTags)
+ return Promise.resolve(true);
+ if (!session.current || !canvasReady || readOnly || !initial)
+ return Promise.resolve(false);
+ const operation = (async () => {
+ setSaving(true);
+ setError(null);
+ try {
+ const captured = snapshot(data.title, data.document);
+ const preview =
+ artwork(data.document) !== loadedArt.current ||
+ !data.document.previewResourceId
+ ? await renderPosterBlob(data.document, readResource, "png", true)
+ : undefined;
+ const result = await savePosterMemo(
+ repository,
+ currentMemo.current,
+ data.document,
+ data.title,
+ session.current!.id,
+ preview,
+ parseTagsText(data.tagsText),
+ );
+ currentMemo.current = result.memo;
+ loadedArt.current = artwork(data.document);
+ setSaved(captured);
+ setSavedTags(data.tagsText);
+ setDocument((latest) => ({
+ ...latest,
+ previewResourceId: result.document.previewResourceId,
+ }));
+ try {
+ if (
+ snapshot(current.current.title, current.current.document) ===
+ captured && current.current.tagsText === data.tagsText
+ )
+ localStorage.removeItem(draftKey);
+ } catch {
+ /* Saved data remains in the repository. */
+ }
+ await onSavedRef.current(result.memo);
+ return true;
+ } catch (caught) {
+ setError(caught instanceof Error ? caught.message : t("poster.error"));
+ return false;
+ } finally {
+ setSaving(false);
+ saveLock.current = null;
+ }
+ })();
+ saveLock.current = operation;
+ return operation;
+ };
+ useEffect(() => {
+ if (!dirty || readOnly || !initial) return;
+ try {
+ localStorage.setItem(
+ draftKey,
+ JSON.stringify({
+ title,
+ document,
+ tagsText,
+ baseHash: currentMemo.current.contentHash,
+ }),
+ );
+ } catch {
+ setError(t("poster.recoveryError"));
+ }
+ if (!ready || !canvasReady || saving || busy || recovery || error) return;
+ const timer = window.setTimeout(() => void saveRef.current(), 2000);
+ return () => window.clearTimeout(timer);
+ }, [
+ title,
+ document,
+ tagsText,
+ dirty,
+ ready,
+ canvasReady,
+ saving,
+ busy,
+ recovery,
+ error,
+ ]);
+ useEffect(() => {
+ if (!dirty) return;
+ const handler = (event: BeforeUnloadEvent) => {
+ event.preventDefault();
+ };
+ window.addEventListener("beforeunload", handler);
+ return () => window.removeEventListener("beforeunload", handler);
+ }, [dirty]);
+
+ const run = async (action: () => Promise) => {
+ if (busy) return;
+ setBusy(true);
+ setError(null);
+ try {
+ await action();
+ } catch (caught) {
+ setError(
+ caught instanceof z.ZodError || caught instanceof SyntaxError
+ ? t("poster.aiInvalid")
+ : caught instanceof Error
+ ? caught.message
+ : t("poster.error"),
+ );
+ } finally {
+ setBusy(false);
+ }
+ };
+ const exportImage = (format: "png" | "jpeg" | "webp") =>
+ run(async () => {
+ const editing = canvas.current?.getActiveObject();
+ if (
+ editing &&
+ "exitEditing" in editing &&
+ typeof editing.exitEditing === "function"
+ )
+ editing.exitEditing();
+ const blob = await renderPosterBlob(
+ current.current.document,
+ readResource,
+ format,
+ false,
+ exportScale,
+ exportQuality,
+ );
+ downloadBlob(
+ blob,
+ `${title.trim().replace(/[\\/:*?"<>|]/g, "_") || "poster"}.${format === "jpeg" ? "jpg" : format}`,
+ );
+ });
+ const insertInSource = () =>
+ run(async () => {
+ const sourceId = document.sourceMemoId;
+ if (!sourceId) return;
+ if (!navigator.onLine) throw new Error(t("poster.offline"));
+ if (!(await saveRef.current())) return;
+ const { memo: source } = await repository.getMemo(sourceId);
+ if (
+ source.isDeleted ||
+ /`)).toBeNull();
+ }
+ expect(parsePosterDocument("ordinary note")).toBeNull();
+ expect(PosterDocumentSchema.safeParse({ ...createPosterDocument(), elements: [createPosterDocument().elements[0], createPosterDocument().elements[0]] }).success).toBe(false);
+ });
+ test("resizing preserves IDs, source and locked elements with proportional geometry", () => {
+ const document = createPosterDocument("Hello");
+ const next = resizePosterDocument(document, 1080, 1080);
+ expect(next.elements.map((element) => element.id)).toEqual(document.elements.map((element) => element.id));
+ expect(next.elements[0].y).toBeCloseTo(document.elements[0].y * .75);
+ expect(document.height).toBe(1440);
+ });
+ test("legacy Markdown shows text without allowing injected markup", () => {
+ const fallback = posterFallbackMarkdown(createPosterDocument('', ''));
+ expect(fallback).not.toContain('