@ptengine/inline-editor 0.1.5 → 0.1.7

package/dist/reviewLocales.js

@@ -0,0 +1,143 @@
+export const reviewLocales = {
+    'zh-CN': {
+        pageLoadFailed: '目标页面无法加载',
+        pageLoadHint: '请返回检查页面地址、网站访问权限和网络连接后重试。',
+        backFromFailed: '返回修改',
+        generating: '正在生成截图…',
+        noLayers: '没有匹配的图层', clearSearch: '清除搜索', searchLayers: '搜索图层',
+        linkCopied: '链接已复制',
+        copyLinkManual: '复制失败，请从下方手动复制链接',
+        uploadError: '上传失败，可重试；本地图片仍可下载',
+        screenshot: '元素截图',
+        enlarge: '放大预览',
+        shotTruncated: '元素超出可视区，只截到可见部分',
+        shotScale: '截图分辨率约为原图的 {{scale}}%',
+        downloadImage: '下载图片',
+        imageCopied: '图片已复制',
+        copyError: '复制失败，请下载图片',
+        copyImage: '复制图片',
+        uploading: '正在上传…',
+        copyLink: '复制链接',
+        shotLink: '截图链接',
+        reset: '清除覆盖',
+        colorSwatch: '选择颜色',
+        saveDraft: '保存草稿',
+        versions: '版本管理',
+        removeEmptyVersion: '移除空版本',
+        versionLimit: '最多 4 个版本',
+        imageLimit: '请选择不超过 10 MB 的图片',
+        currentMedia: '当前媒体',
+        uploadFile: '上传文件',
+        useLink: '使用链接',
+        replaceImage: '替换当前图片',
+        replaceBackground: '替换背景图片',
+        insertImage: '插入新图片',
+        dropImage: '拖入图片或选择文件，支持图片格式，最大 10 MB。上传只准备素材，应用后才修改画布。',
+        pendingMedia: '待应用媒体',
+        altHelp: '替代文本用于描述图片内容。装饰图片可留空。',
+        videoLinkHint: '支持视频文件链接和 YouTube 嵌入链接。加载就绪后应用到画布。',
+        mediaPreview: '媒体预览',
+        loading: '正在加载预览…',
+        loadError: '预览加载失败',
+        retry: '重试',
+        ready: '媒体已就绪，应用后修改画布',
+        align_left: '左对齐',
+        align_center: '居中',
+        align_right: '右对齐',
+        align_justify: '两端对齐'
+    },
+    'en-US': {
+        pageLoadFailed: 'Unable to load the target page',
+        pageLoadHint: 'Go back to check the page URL, site permissions and network connection, then retry.',
+        backFromFailed: 'Go back',
+        generating: 'Generating screenshot…',
+        noLayers: 'No matching layers', clearSearch: 'Clear search', searchLayers: 'Search layers',
+        linkCopied: 'Link copied',
+        copyLinkManual: 'Copy failed. Copy the link below manually.',
+        uploadError: 'Upload failed. Retry or download the local image.',
+        screenshot: 'Element screenshot',
+        enlarge: 'Enlarge preview',
+        shotTruncated: 'Only the visible part of the element was captured.',
+        shotScale: 'Screenshot resolution is about {{scale}}% of the original.',
+        downloadImage: 'Download image',
+        imageCopied: 'Image copied',
+        copyError: 'Copy failed. Download the image instead.',
+        copyImage: 'Copy image',
+        uploading: 'Uploading…',
+        copyLink: 'Copy link',
+        shotLink: 'Screenshot link',
+        reset: 'Clear override',
+        colorSwatch: 'Choose color',
+        saveDraft: 'Save draft',
+        versions: 'Manage versions',
+        removeEmptyVersion: 'Remove empty version',
+        versionLimit: 'Maximum 4 versions',
+        imageLimit: 'Choose an image up to 10 MB.',
+        currentMedia: 'Current media',
+        uploadFile: 'Upload file',
+        useLink: 'Use link',
+        replaceImage: 'Replace current image',
+        replaceBackground: 'Replace background image',
+        insertImage: 'Insert new image',
+        dropImage: 'Drop an image or choose a file, up to 10 MB. Upload prepares the asset; Apply changes the canvas.',
+        pendingMedia: 'Media to apply',
+        altHelp: 'Describe the image for assistive technology. Leave blank for decorative images.',
+        videoLinkHint: 'Use a video file URL or YouTube embed link. Apply after the preview is ready.',
+        mediaPreview: 'Media preview',
+        loading: 'Loading preview…',
+        loadError: 'Preview failed to load',
+        retry: 'Retry',
+        ready: 'Ready. Apply to update the canvas.',
+        align_left: 'Align left',
+        align_center: 'Center',
+        align_right: 'Align right',
+        align_justify: 'Justify'
+    },
+    'ja-JP': {
+        pageLoadFailed: '対象ページを読み込めません',
+        pageLoadHint: '戻ってページ URL、サイトへのアクセス権限、ネットワーク接続を確認して再試行してください。',
+        backFromFailed: '戻って修正',
+        generating: 'スクリーンショットを生成中…',
+        noLayers: '一致するレイヤーがありません', clearSearch: '検索をクリア', searchLayers: 'レイヤーを検索',
+        linkCopied: 'リンクをコピーしました',
+        copyLinkManual: 'コピーできませんでした。下のリンクを手動でコピーしてください。',
+        uploadError: 'アップロードできませんでした。再試行または画像をダウンロードしてください。',
+        screenshot: '要素のスクリーンショット',
+        enlarge: 'プレビューを拡大',
+        shotTruncated: '表示されている部分のみ撮影しました。',
+        shotScale: '解像度は元の約 {{scale}}% です。',
+        downloadImage: '画像をダウンロード',
+        imageCopied: '画像をコピーしました',
+        copyError: 'コピーできませんでした。画像をダウンロードしてください。',
+        copyImage: '画像をコピー',
+        uploading: 'アップロード中…',
+        copyLink: 'リンクをコピー',
+        shotLink: 'スクリーンショットのリンク',
+        reset: '上書きを解除',
+        colorSwatch: '色を選択',
+        saveDraft: '下書きを保存',
+        versions: 'バージョン管理',
+        removeEmptyVersion: '空のバージョンを削除',
+        versionLimit: '最大4バージョン',
+        imageLimit: '10 MB 以下の画像を選択してください。',
+        currentMedia: '現在のメディア',
+        uploadFile: 'ファイルをアップロード',
+        useLink: 'リンクを使用',
+        replaceImage: '現在の画像を置き換え',
+        replaceBackground: '背景画像を置き換え',
+        insertImage: '新しい画像を挿入',
+        dropImage: '画像をドロップするか選択してください（最大10 MB）。アップロードで素材を準備し、適用でキャンバスを変更します。',
+        pendingMedia: '適用するメディア',
+        altHelp: '画像の内容を説明してください。装飾用の画像は空欄にできます。',
+        videoLinkHint: '動画ファイルのURLまたはYouTube埋め込みリンクを入力し、読み込み後に適用してください。',
+        mediaPreview: 'メディアプレビュー',
+        loading: 'プレビューを読み込み中…',
+        loadError: 'プレビューを読み込めませんでした',
+        retry: '再試行',
+        ready: '準備完了。適用するとキャンバスを変更します。',
+        align_left: '左揃え',
+        align_center: '中央揃え',
+        align_right: '右揃え',
+        align_justify: '両端揃え'
+    }
+};

package/dist/tree/LayersPanel.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
-import { Input } from '@ptengine/design-components';
+import { SearchInput } from '@ptengine/design-components';
 import { TreePanel } from '../canvas-ui/index.js';
 import { findIdBySelector } from './domTreeAdapter.js';
 export function LayersPanel({ tree, selectedSelector, hoverSelector, onSelect, onHover, onMove, onExpand }) {
+    const { t } = useTranslation();
     const [query, setQuery] = useState('');
     if (!tree) {
         return (_jsx("p", { "data-testid": "layers-empty", className: "px-3 py-6 text-center text-xs text-[#8993A4]", children: "\u8FD8\u6CA1\u6709\u62FF\u5230\u9875\u9762\u7ED3\u6784" }));
     }
     const selectorOf = (id) => tree.nodes[id]?.selector ?? id;
     const idOf = (selector) => selector ? findIdBySelector(tree, selector) : null;
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "layers-panel", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { "data-testid": "layers-search", placeholder: "\u641C\u7D22\u56FE\u5C42", value: query, onChange: e => setQuery(e.target.value) }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(TreePanel, { nodes: tree.nodes, rootId: tree.rootId, selectedId: idOf(selectedSelector), hoverId: idOf(hoverSelector ?? null), query: query, onSelect: id => onSelect(selectorOf(id)), onHover: id => onHover(id ? selectorOf(id) : ''), onMove: onMove &&
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "layers-panel", children: [_jsx("div", { className: "p-2", children: _jsx(SearchInput, { clearLabel: t('inlineCanvas.review.clearSearch', '清除搜索'), "data-testid": "layers-search", placeholder: t('inlineCanvas.review.searchLayers', '搜索图层'), value: query, onValueChange: setQuery, onClear: () => setQuery('') }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(TreePanel, { emptyLabel: t('inlineCanvas.review.noLayers', '没有匹配的图层'), nodes: tree.nodes, rootId: tree.rootId, selectedId: idOf(selectedSelector), hoverId: idOf(hoverSelector ?? null), query: query, onSelect: id => onSelect(selectorOf(id)), onHover: id => onHover(id ? selectorOf(id) : ''), onMove: onMove &&
                         ((dragId, targetId, pos) => onMove(selectorOf(dragId), selectorOf(targetId), pos)), onExpand: onExpand }) })] }));
 }

package/dist/useInlineEditor.d.ts

@@ -42,6 +42,7 @@ export interface InlineEditorSelection {
     declaredStyles: Record<string, string>;
 }
 export interface UseInlineEditorInput {
+    onHistoryShortcut?: (direction: 'undo' | 'redo') => void;
     url: string;
     device: CanvasDevice;
     /** change list 变化时回调 —— 宿主自己决定存哪（本 hook 不做持久化）。 */

package/dist/useInlineEditor.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CANVAS_MSG_NAMESPACE } from '@ptengine/inline-core/protocol';
 import { useCanvasSession } from './kernel/useCanvasSession.js';
 import { useCanvasStream } from './kernel/useCanvasStream.js';
 import { useMobileFit } from './kernel/useMobileFit.js';
@@ -49,10 +50,21 @@ export function useInlineEditor(input) {
         documentSizeRef.current?.(payload);
     }, []);
     const stream = useCanvasStream(undefined, geometry.onGeometry, onTextEditCommit, onLifecycle, onDocumentSize);
+    const historyShortcutRef = useRef(input.onHistoryShortcut);
+    historyShortcutRef.current = input.onHistoryShortcut;
+    const onStreamEvent = useCallback((msg) => {
+        if (msg.namespace === CANVAS_MSG_NAMESPACE && msg.event === 'historyShortcut') {
+            const direction = msg.payload?.direction;
+            if (direction === 'undo' || direction === 'redo')
+                historyShortcutRef.current?.(direction);
+        }
+        else
+            stream.onStreamEvent(msg);
+    }, [stream.onStreamEvent]);
     const session = useCanvasSession({
         url: input.url,
         device: input.device,
-        onStreamEvent: stream.onStreamEvent
+        onStreamEvent
     });
     const sessionId = session.frameProps?.sessionId;
     const changeList = useChangeList(sessionId, {
@@ -147,6 +159,33 @@ export function useInlineEditor(input) {
             ? graftSubtree(prev, anchorId, root, { renderIcon: renderIconRef.current })
             : prev);
     }, [sessionId]);
+    const treeLoaded = tree !== null;
+    const contentRevision = changeList.list
+        .filter(record => ['elementContent', 'elementText', 'elementMove'].includes(record.change.type))
+        .map(record => record.changeId)
+        .join('|');
+    const refreshedContent = useRef('');
+    useEffect(() => {
+        if (!wantTree ||
+            !domReady ||
+            !sessionId ||
+            !treeRef.current ||
+            refreshedContent.current === contentRevision)
+            return;
+        let cancelled = false;
+        const loaded = Object.values(treeRef.current.nodes);
+        void getDomTree(sessionId, { maxDepth: 16, maxNodes: Math.max(1500, loaded.length) })
+            .then(root => {
+            if (!cancelled) {
+                refreshedContent.current = contentRevision;
+                setTree(adaptDomTree(root, { renderIcon: renderIconRef.current }));
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [contentRevision, domReady, sessionId, wantTree, treeLoaded]);
     const revealAttemptedRef = useRef(new Set());
     const selectedSelector = selection?.selector ?? null;
     const selectionChain = selection?.chain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.577.0",
-    "@ptengine/inline-core": "~0.2.0"
+    "@ptengine/inline-core": "~0.2.1"
   },
   "devDependencies": {
     "@ptengine/design-components": "^0.10.0",