@ptengine/inline-editor 0.0.0-stage → 0.1.1

package/dist/useInlineEditor.js

@@ -0,0 +1,346 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCanvasSession } from './kernel/useCanvasSession.js';
+import { useCanvasStream } from './kernel/useCanvasStream.js';
+import { useMobileFit } from './kernel/useMobileFit.js';
+import { useCanvasGeometry } from './kernel/selection/useCanvasGeometry.js';
+import { useSelectionRestore } from './kernel/selection/useSelectionRestore.js';
+import { useChangeList } from './kernel/changelist/useChangeList.js';
+import { runCapture } from './kernel/captureOrchestration.js';
+import { adaptDomTree, findIdBySelector, graftSubtree } from './tree/domTreeAdapter.js';
+import { pasteHtml } from './kernel/changelist/clipboard.js';
+import { isReady, pickTarget, shouldCapturePick, startMove as startMove_ } from './kernel/moveState.js';
+import { setPickMode, getAncestorChain, getDomTree, getElementCapabilities, getOuterHtml, captureElement, prepareElementCapture, setFixedHidden, setHoverTarget, scrollToSelector, setSelection, setTextEditing } from './kernel/canvasCommands.js';
+const PICK_MODE_MAX_RETRIES = 2;
+const PICK_MODE_RETRY_MS = 400;
+export function useInlineEditor(input) {
+    const geometry = useCanvasGeometry();
+    const changeListRef = useRef(null);
+    const [capturing, setCapturing] = useState(false);
+    const [clipboard, setClipboard] = useState(null);
+    const [tree, setTree] = useState(null);
+    const [move, setMove] = useState(null);
+    const moveRef = useRef(null);
+    moveRef.current = move;
+    const clipboardRef = useRef(null);
+    clipboardRef.current = clipboard;
+    const [textEditing, setTextEditing_] = useState(null);
+    const onTextEditCommit = useCallback((payload) => {
+        setTextEditing_(null);
+        if (!payload.committed)
+            return;
+        void changeListRef.current?.addContent({
+            identifier: payload.selector,
+            selector: payload.selector,
+            html: payload.html,
+            mode: 'replace',
+            isTextChange: true
+        });
+    }, []);
+    const [readySessionId, setReadySessionId] = useState(null);
+    const onLifecycle = useCallback((payload, eventSessionId) => {
+        if (payload.phase !== 'domReady' && payload.phase !== 'loaded')
+            return;
+        if (!eventSessionId)
+            return;
+        setReadySessionId(eventSessionId);
+    }, []);
+    const documentSizeRef = useRef(null);
+    const onDocumentSize = useCallback((payload) => {
+        documentSizeRef.current?.(payload);
+    }, []);
+    const stream = useCanvasStream(undefined, geometry.onGeometry, onTextEditCommit, onLifecycle, onDocumentSize);
+    const session = useCanvasSession({
+        url: input.url,
+        device: input.device,
+        onStreamEvent: stream.onStreamEvent
+    });
+    const sessionId = session.frameProps?.sessionId;
+    const changeList = useChangeList(sessionId, {
+        onInsertedRemoved: input.onInsertedRemoved,
+        onInsertedRestored: input.onInsertedRestored
+    });
+    changeListRef.current = changeList;
+    const restore = useSelectionRestore();
+    const domReady = readySessionId !== null && readySessionId === sessionId;
+    const mobileFit = useMobileFit({
+        sessionId,
+        device: input.device,
+        domReady,
+        capabilities: session.capabilities
+    });
+    documentSizeRef.current = mobileFit.onDocumentSize;
+    const [selection, setSelection_] = useState(null);
+    const rememberSelection = restore.remember;
+    const restoreSelection = restore.restore;
+    const pickedOriginal = stream.picked?.originalValue;
+    const refresh = useCallback(async (selector) => {
+        if (!sessionId)
+            return;
+        rememberSelection(selector);
+        if (!selector) {
+            setSelection_(null);
+            return;
+        }
+        const [caps, ancestors] = await Promise.all([
+            getElementCapabilities(sessionId, selector),
+            getAncestorChain(sessionId, selector)
+        ]);
+        const chain = ancestors?.chain ?? [];
+        setSelection_({
+            selector,
+            identifier: chain[0]?.selector ?? selector,
+            tag: chain[0]?.tag ?? '',
+            chain,
+            capabilities: caps ?? null,
+            declaredHtml: pickedOriginal?.html ?? '',
+            declaredStyles: pickedOriginal?.declaredStyles ?? {}
+        });
+    }, [pickedOriginal, rememberSelection, sessionId]);
+    const pickedSelector = stream.picked?.selector;
+    useEffect(() => {
+        if (!pickedSelector)
+            return;
+        if (shouldCapturePick(moveRef.current)) {
+            setMove(prev => (prev ? pickTarget(prev, pickedSelector) : prev));
+            return;
+        }
+        void refresh(pickedSelector);
+    }, [pickedSelector, refresh]);
+    const geometryReset = geometry.reset;
+    const streamReset = stream.reset;
+    useEffect(() => {
+        setSelection_(null);
+        setTree(null);
+        treeForRef.current = null;
+        revealAttemptedRef.current = new Set();
+        geometryReset();
+        streamReset();
+    }, [sessionId, geometryReset, streamReset]);
+    const treeForRef = useRef(null);
+    const wantTree = input.tree !== false;
+    useEffect(() => {
+        if (!wantTree)
+            return;
+        if (!domReady || !sessionId)
+            return;
+        if (treeForRef.current === sessionId)
+            return;
+        void getDomTree(sessionId, {})
+            .then(root => {
+            treeForRef.current = sessionId;
+            setTree(adaptDomTree(root, { renderIcon: input.renderNodeIcon }));
+        })
+            .catch(() => {
+        });
+    }, [domReady, sessionId, wantTree]);
+    const renderIconRef = useRef(input.renderNodeIcon);
+    renderIconRef.current = input.renderNodeIcon;
+    const treeRef = useRef(null);
+    treeRef.current = tree;
+    const graftAt = useCallback(async (anchorId, anchorSelector, maxDepth) => {
+        if (!sessionId)
+            return;
+        const root = await getDomTree(sessionId, maxDepth === undefined
+            ? { rootSelector: anchorSelector }
+            : { rootSelector: anchorSelector, maxDepth });
+        setTree(prev => prev
+            ? graftSubtree(prev, anchorId, root, { renderIcon: renderIconRef.current })
+            : prev);
+    }, [sessionId]);
+    const revealAttemptedRef = useRef(new Set());
+    const selectedSelector = selection?.selector ?? null;
+    const selectionChain = selection?.chain;
+    useEffect(() => {
+        if (!wantTree || !tree || !sessionId)
+            return;
+        if (!selectedSelector || !selectionChain?.length)
+            return;
+        if (findIdBySelector(tree, selectedSelector))
+            return;
+        if (revealAttemptedRef.current.has(selectedSelector))
+            return;
+        for (let depth = 1; depth < selectionChain.length; depth++) {
+            const anchorSelector = selectionChain[depth].selector;
+            const anchorId = findIdBySelector(tree, anchorSelector);
+            if (!anchorId)
+                continue;
+            revealAttemptedRef.current.add(selectedSelector);
+            void graftAt(anchorId, anchorSelector, depth).catch(() => { });
+            return;
+        }
+    }, [wantTree, tree, sessionId, selectedSelector, selectionChain, graftAt]);
+    const restoredForRef = useRef(null);
+    useEffect(() => {
+        if (!domReady || !sessionId)
+            return;
+        if (restoredForRef.current === sessionId)
+            return;
+        restoredForRef.current = sessionId;
+        void restoreSelection(sessionId).then(ok => {
+            if (!ok)
+                setSelection_(null);
+        });
+    }, [domReady, sessionId, restoreSelection]);
+    const pickEnabledForRef = useRef(null);
+    const [pickAttempt, setPickAttempt] = useState(0);
+    useEffect(() => {
+        if (!domReady || !sessionId)
+            return;
+        if (pickEnabledForRef.current === sessionId)
+            return;
+        let cancelled = false;
+        let timer;
+        void setPickMode(sessionId, true)
+            .then(() => {
+            if (!cancelled)
+                pickEnabledForRef.current = sessionId;
+        })
+            .catch(() => {
+            if (cancelled || pickAttempt >= PICK_MODE_MAX_RETRIES)
+                return;
+            timer = setTimeout(() => setPickAttempt(n => n + 1), PICK_MODE_RETRY_MS);
+        });
+        return () => {
+            cancelled = true;
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [domReady, sessionId, pickAttempt]);
+    useEffect(() => {
+        setPickAttempt(0);
+    }, [sessionId]);
+    const onChangesChange = input.onChangesChange;
+    const changes = changeList.changes;
+    useEffect(() => {
+        onChangesChange?.(changes);
+    }, [changes, onChangesChange]);
+    const commands = useMemo(() => ({
+        select: async (selector) => {
+            if (!sessionId)
+                return;
+            await setSelection(sessionId, selector);
+            await refresh(selector);
+        },
+        expandTreeNode: async (id) => {
+            const selector = treeRef.current?.nodes[id]?.selector;
+            if (!selector)
+                return;
+            await graftAt(id, selector).catch(() => { });
+        },
+        hover: async (selector) => {
+            if (!sessionId)
+                return;
+            await setHoverTarget(sessionId, selector);
+        },
+        reveal: async (selector) => {
+            if (!sessionId || !selector)
+                return;
+            await scrollToSelector(sessionId, selector);
+        },
+        readOuterHtml: (selector) => {
+            if (!sessionId)
+                return Promise.reject(new Error('no canvas session'));
+            return getOuterHtml(sessionId, selector);
+        },
+        startTextEdit: async (selector) => {
+            if (!sessionId)
+                return;
+            await setTextEditing(sessionId, true, selector);
+            setTextEditing_(selector ?? '');
+        },
+        copyElement: async (selector) => {
+            if (!sessionId)
+                throw new Error('no canvas session');
+            const { html } = await getOuterHtml(sessionId, selector);
+            setClipboard(html);
+        },
+        pasteInto: async (selector, mode) => {
+            const source = clipboardRef.current;
+            if (!source)
+                throw new Error('clipboard is empty');
+            await changeListRef.current?.addContent({
+                identifier: selector,
+                selector,
+                html: pasteHtml({ html: source }),
+                mode
+            });
+        },
+        startMove: (selector) => setMove(startMove_(selector)),
+        confirmMove: async (position) => {
+            const current = moveRef.current;
+            if (!isReady(current))
+                return;
+            await changeListRef.current?.addMove({
+                identifier: current.source,
+                selector: current.source,
+                targetIdentifier: current.target,
+                targetSelector: current.target,
+                mode: position
+            });
+            setMove(null);
+        },
+        cancelMove: () => setMove(null),
+        replaceAll: async (next, prevIds) => {
+            const cl = changeListRef.current;
+            if (!cl)
+                throw new Error('no canvas session');
+            return cl.replaceAll(next, prevIds);
+        },
+        captureSelectedElement: async (selector) => {
+            if (!sessionId)
+                throw new Error('no canvas session');
+            const iframe = input.iframeRef?.current;
+            if (!iframe)
+                throw new Error('no canvas iframe');
+            return runCapture(selector, {
+                prepare: s => prepareElementCapture(sessionId, s),
+                capture: (rect, slices) => captureElement(sessionId, rect, slices),
+                hideOverlays: async () => {
+                    setCapturing(true);
+                    await setFixedHidden(sessionId, true).catch(() => { });
+                    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+                },
+                showOverlays: () => {
+                    setCapturing(false);
+                    void setFixedHidden(sessionId, false).catch(() => { });
+                },
+                readViewport: () => {
+                    const r = iframe.getBoundingClientRect();
+                    return {
+                        iframeRect: { x: r.x, y: r.y, width: r.width, height: r.height },
+                        zoom: parseFloat(iframe.style.zoom || '1') || 1,
+                        devicePixelRatio: window.devicePixelRatio || 1
+                    };
+                }
+            });
+        }
+    }), [graftAt, input.iframeRef, refresh, sessionId]);
+    return useMemo(() => ({
+        session,
+        frameProps: session.frameProps,
+        domReady,
+        selection,
+        tree,
+        clipboard,
+        move,
+        capturing,
+        textEditing,
+        geometry,
+        mobileFit: mobileFit.state,
+        changeList,
+        commands
+    }), [
+        session,
+        domReady,
+        selection,
+        tree,
+        clipboard,
+        move,
+        capturing,
+        textEditing,
+        geometry,
+        mobileFit.state,
+        changeList,
+        commands
+    ]);
+}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
+  "license": "UNLICENSED",
+  "private": false,
+  "author": "Ptmind",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./dist/canvas-ui/index.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "@ptengine/design-components": ">=0.5.3 <1",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-i18next": ">=13"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "@ptengine/inline-core": "~0.2.0"
+  },
+  "devDependencies": {
+    "@ptengine/design-components": "^0.10.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/chrome": "^0.0.268",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-i18next": "^15.1.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.0.0",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:build": "node scripts/check-dist.mjs"
+  }
 }