@standhigher/puck-page-builder 0.12.1 → 0.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +4 -2
- package/dist/index.js +103 -103
- package/package.json +1 -1
- package/src/styles.css +24 -12
package/dist/index.d.ts
CHANGED
|
@@ -238,7 +238,7 @@ type PageDocumentEditorShellProps = {
|
|
|
238
238
|
/** Host-owned single-editor lock. Without this adapter the package stays backwards-compatible and editable. */
|
|
239
239
|
sessionAdapter?: EditorSessionAdapter;
|
|
240
240
|
onSessionStateChange?: (state: EditorSessionState) => void;
|
|
241
|
-
/** Host-owned draft persistence
|
|
241
|
+
/** Host-owned draft persistence used by the 800ms autosave path. */
|
|
242
242
|
draftPersistence?: DraftPersistenceAdapter;
|
|
243
243
|
draftRevision?: number;
|
|
244
244
|
autoSave?: boolean;
|
|
@@ -323,6 +323,7 @@ declare const messages: {
|
|
|
323
323
|
readonly offline: "当前离线，恢复网络后将自动保存";
|
|
324
324
|
readonly publishFailed: "发布失败";
|
|
325
325
|
readonly published: "已发布";
|
|
326
|
+
readonly publishSuccessTitle: "发布成功";
|
|
326
327
|
readonly back: "返回";
|
|
327
328
|
readonly confirmLeaveTitle: "离开编辑器？";
|
|
328
329
|
readonly leave: "离开";
|
|
@@ -386,6 +387,7 @@ declare const messages: {
|
|
|
386
387
|
readonly offline: "Offline — changes will save when connection returns";
|
|
387
388
|
readonly publishFailed: "Could not publish";
|
|
388
389
|
readonly published: "Published";
|
|
390
|
+
readonly publishSuccessTitle: "Published";
|
|
389
391
|
readonly back: "Back";
|
|
390
392
|
readonly confirmLeaveTitle: "Leave the editor?";
|
|
391
393
|
readonly leave: "Leave";
|
|
@@ -422,7 +424,7 @@ type AdminMessageKey = keyof typeof messages["zh-CN"];
|
|
|
422
424
|
/** Minimal, dependency-free Admin copy catalog. Product locale remains PageDocument.settings.locale. */
|
|
423
425
|
declare function createAdminI18n(locale?: string): {
|
|
424
426
|
locale: AdminLocale;
|
|
425
|
-
t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "products" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "历史记录" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "从 Shopify 选择商品" | "正在选择商品…" | "无法选择商品，请重试。" | "未选择商品" | "件商品" | "选择图片" | "正在上传图片…" | "无法上传图片，请重试。" | "未设置图片" | "移除图片" | "Blocks" | "Properties" | "Add block" | "Undo" | "Redo" | "Delete this block?" | "You can restore it with Undo after deleting." | "Cancel" | "Delete block" | "Move up" | "Move down" | "Loading editor…" | "This page has no blocks" | "The editor could not load" | "The editor is currently read-only" | "Action completed" | "Unsaved changes" | "Changes are kept in this session" | "Save draft" | "History" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "Back" | "Leave the editor?" | "Leave" | "Zoom" | "Auto zoom" | "Add to store" | "Acquiring edit lock…" | "This page is being edited" | "The edit lock has expired" | "This page is read-only" | "You have unsaved changes. Are you sure you want to leave?" | "Select a block to edit it." | "Collapse blocks panel" | "Collapse properties panel" | "Open blocks panel" | "Open properties panel" | "Select from Shopify" | "Selecting products…" | "Could not select products. Try again." | "No products selected" | "Select image" | "Uploading image…" | "Could not upload the image. Try again." | "No image selected" | "Remove image";
|
|
427
|
+
t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "products" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "历史记录" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "发布成功" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "从 Shopify 选择商品" | "正在选择商品…" | "无法选择商品，请重试。" | "未选择商品" | "件商品" | "选择图片" | "正在上传图片…" | "无法上传图片，请重试。" | "未设置图片" | "移除图片" | "Blocks" | "Properties" | "Add block" | "Undo" | "Redo" | "Delete this block?" | "You can restore it with Undo after deleting." | "Cancel" | "Delete block" | "Move up" | "Move down" | "Loading editor…" | "This page has no blocks" | "The editor could not load" | "The editor is currently read-only" | "Action completed" | "Unsaved changes" | "Changes are kept in this session" | "Save draft" | "History" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "Back" | "Leave the editor?" | "Leave" | "Zoom" | "Auto zoom" | "Add to store" | "Acquiring edit lock…" | "This page is being edited" | "The edit lock has expired" | "This page is read-only" | "You have unsaved changes. Are you sure you want to leave?" | "Select a block to edit it." | "Collapse blocks panel" | "Collapse properties panel" | "Open blocks panel" | "Open properties panel" | "Select from Shopify" | "Selecting products…" | "Could not select products. Try again." | "No products selected" | "Select image" | "Uploading image…" | "Could not upload the image. Try again." | "No image selected" | "Remove image";
|
|
426
428
|
};
|
|
427
429
|
|
|
428
430
|
declare function toEngineData(document: PageDocument, registry?: ExtensionRegistry): Data;
|
package/dist/index.js
CHANGED
|
@@ -351,7 +351,7 @@ function PropertyPanel({
|
|
|
351
351
|
|
|
352
352
|
// src/editor/shell/PageDocumentEditorShell.tsx
|
|
353
353
|
import { Puck as Puck2, usePuck } from "@puckeditor/core";
|
|
354
|
-
import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField } from "@shopify/polaris";
|
|
354
|
+
import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, Frame, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField, Toast } from "@shopify/polaris";
|
|
355
355
|
import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, ProductIcon, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
|
|
356
356
|
import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
|
|
357
357
|
|
|
@@ -798,6 +798,7 @@ var messages = {
|
|
|
798
798
|
offline: "\u5F53\u524D\u79BB\u7EBF\uFF0C\u6062\u590D\u7F51\u7EDC\u540E\u5C06\u81EA\u52A8\u4FDD\u5B58",
|
|
799
799
|
publishFailed: "\u53D1\u5E03\u5931\u8D25",
|
|
800
800
|
published: "\u5DF2\u53D1\u5E03",
|
|
801
|
+
publishSuccessTitle: "\u53D1\u5E03\u6210\u529F",
|
|
801
802
|
back: "\u8FD4\u56DE",
|
|
802
803
|
confirmLeaveTitle: "\u79BB\u5F00\u7F16\u8F91\u5668\uFF1F",
|
|
803
804
|
leave: "\u79BB\u5F00",
|
|
@@ -861,6 +862,7 @@ var messages = {
|
|
|
861
862
|
offline: "Offline \u2014 changes will save when connection returns",
|
|
862
863
|
publishFailed: "Could not publish",
|
|
863
864
|
published: "Published",
|
|
865
|
+
publishSuccessTitle: "Published",
|
|
864
866
|
back: "Back",
|
|
865
867
|
confirmLeaveTitle: "Leave the editor?",
|
|
866
868
|
leave: "Leave",
|
|
@@ -988,6 +990,10 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
|
|
|
988
990
|
const [confirmBack, setConfirmBack] = useState3(false);
|
|
989
991
|
const i18n = createAdminI18n(adminLocale);
|
|
990
992
|
const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
|
|
993
|
+
const canvasThemeStyle = useMemo2(() => {
|
|
994
|
+
const template = editor.document.templateId ? registry?.getTemplate(editor.document.templateId) : void 0;
|
|
995
|
+
return toThemeStyle(mergeThemeTokens(template?.theme, editor.document.theme));
|
|
996
|
+
}, [editor.document, registry]);
|
|
991
997
|
const validationIssues = useMemo2(() => validateDocumentBlocks(editor.document, registry), [editor.document, registry]);
|
|
992
998
|
const { confirmCanvasSelection, selectedBlockId, updateBlockProps, updateBlockPresentation } = editor;
|
|
993
999
|
const updateFromCanvasInput = useCallback2((id, props, preserveCanvasValue = false) => {
|
|
@@ -1030,7 +1036,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
|
|
|
1030
1036
|
}
|
|
1031
1037
|
}, [canPersistDraft, draftPersistence, draftRevision, editor, isOnline, onSave, request, validationIssues.length]);
|
|
1032
1038
|
useEffect3(() => {
|
|
1033
|
-
if (!autoSave || !canPersistDraft || !editor.isDirty || resolvedSaveState !== "dirty" || !isOnline || request !== "idle" || validationIssues.length > 0 || editor.sessionState !== "active") return;
|
|
1039
|
+
if (!autoSave || !canPersistDraft || !editor.isDirty || resolvedSaveState !== "dirty" && resolvedSaveState !== "failed" || !isOnline || request !== "idle" || validationIssues.length > 0 || editor.sessionState !== "active") return;
|
|
1034
1040
|
const timer = window.setTimeout(() => {
|
|
1035
1041
|
void save();
|
|
1036
1042
|
}, autoSaveDelayMs);
|
|
@@ -1094,125 +1100,119 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
|
|
|
1094
1100
|
};
|
|
1095
1101
|
const saveBadgeTone = resolvedSaveState === "failed" ? "critical" : resolvedSaveState === "offline" || resolvedSaveState === "dirty" ? "attention" : "success";
|
|
1096
1102
|
const saveBadgeLabel = resolvedSaveState === "saving" ? i18n.t("saving") : resolvedSaveState === "failed" ? i18n.t("saveFailed") : resolvedSaveState === "offline" ? i18n.t("offline") : resolvedSaveState === "dirty" ? i18n.t("unsaved") : i18n.t("saved");
|
|
1097
|
-
const saveButtonLabel = request === "saving" ? i18n.t("saving") : resolvedSaveState === "failed" ? i18n.t("retrySave") : i18n.t("save");
|
|
1098
1103
|
const requestBack = () => {
|
|
1099
1104
|
if (!onBack) return;
|
|
1100
1105
|
if (editor.isDirty || request === "saving") setConfirmBack(true);
|
|
1101
1106
|
else onBack();
|
|
1102
1107
|
};
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
/* @__PURE__ */ jsxs5(
|
|
1108
|
-
/* @__PURE__ */ jsx7(
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
/* @__PURE__ */ jsxs5("div", { className: "pb-
|
|
1112
|
-
/* @__PURE__ */ jsx7(
|
|
1113
|
-
/* @__PURE__ */ jsxs5(
|
|
1114
|
-
"
|
|
1115
|
-
editor.
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
|
|
1120
|
-
] })
|
|
1121
|
-
] }),
|
|
1122
|
-
/* @__PURE__ */ jsxs5("div", { className: "pb-header-controls", children: [
|
|
1123
|
-
/* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
|
|
1108
|
+
const dismissPublishedNotice = () => setNotice((current) => current === "published" ? null : current);
|
|
1109
|
+
return /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
1110
|
+
/* @__PURE__ */ jsx7(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => {
|
|
1111
|
+
if (!editor.updateFromCanvas(fromEngineData(data, editor.document, registry))) setCanvasResetVersion((version) => version + 1);
|
|
1112
|
+
}, children: /* @__PURE__ */ jsxs5(Puck2.Layout, { children: [
|
|
1113
|
+
/* @__PURE__ */ jsx7(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion }),
|
|
1114
|
+
/* @__PURE__ */ jsxs5("div", { className: "pb-shell pb-shell--v04", "data-testid": "page-document-editor", "data-page-id": editor.document.pageId, "data-dirty": editor.isDirty, "data-editor-state": editor.loadState, "data-editor-session-state": editor.sessionState, "data-save-state": resolvedSaveState, "data-left-panel": leftRailOpen ? "open" : "closed", "data-right-panel": rightPanelOpen ? "open" : "closed", children: [
|
|
1115
|
+
/* @__PURE__ */ jsx7("header", { className: "pb-header", children: /* @__PURE__ */ jsxs5("div", { className: "pb-header-content", children: [
|
|
1116
|
+
/* @__PURE__ */ jsxs5("div", { className: "pb-header-title-group", children: [
|
|
1117
|
+
onBack ? /* @__PURE__ */ jsx7(Button2, { variant: "tertiary", onClick: requestBack, children: i18n.t("back") }) : null,
|
|
1118
|
+
/* @__PURE__ */ jsxs5("div", { className: "pb-page-title", children: [
|
|
1119
|
+
/* @__PURE__ */ jsx7(Text3, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
|
|
1120
|
+
pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
|
|
1121
|
+
] })
|
|
1122
|
+
] }),
|
|
1123
|
+
/* @__PURE__ */ jsx7("div", { className: "pb-header-controls", children: /* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
|
|
1124
1124
|
/* @__PURE__ */ jsx7(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx7(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
|
|
1125
1125
|
/* @__PURE__ */ jsx7("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx7(Select2, { label: i18n.t("zoom"), labelHidden: true, options: [{ label: i18n.t("zoomAuto"), value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], value: zoom, onChange: (value) => setZoom(value) }) })
|
|
1126
|
-
] }),
|
|
1126
|
+
] }) }),
|
|
1127
1127
|
/* @__PURE__ */ jsx7("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs5(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
|
|
1128
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
|
|
1129
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo }),
|
|
1128
1130
|
/* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
|
|
1129
1131
|
onHistory ? /* @__PURE__ */ jsx7("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
|
|
1130
|
-
/* @__PURE__ */ jsx7(Button2, { disabled: !canPersistDraft || !editor.isDirty || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void save(), children: saveButtonLabel }),
|
|
1131
1132
|
onPreview ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
|
|
1132
1133
|
onAddToStore ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || pageStatus?.publicationStatus === "unpublished", onClick: () => void onAddToStore({ document: editor.document, session: editor.session }), children: i18n.t("addToStore") }) : null,
|
|
1133
|
-
/* @__PURE__ */ jsx7(Button2, { variant: "primary", disabled: !publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") })
|
|
1134
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
|
|
1135
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo })
|
|
1134
|
+
/* @__PURE__ */ jsx7(Button2, { variant: "primary", disabled: !publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") })
|
|
1136
1135
|
] }) })
|
|
1137
|
-
] })
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
issue.message
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
} })
|
|
1156
|
-
] }),
|
|
1157
|
-
/* @__PURE__ */ jsxs5("aside", { className: `pb-left-panel${leftRailOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u533A\u5757", children: [
|
|
1158
|
-
/* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
|
|
1159
|
-
/* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
|
|
1160
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
|
|
1136
|
+
] }) }),
|
|
1137
|
+
editor.loadState === "success" ? /* @__PURE__ */ jsx7(Banner, { tone: "success", children: i18n.t("success") }) : null,
|
|
1138
|
+
notice && notice !== "published" ? /* @__PURE__ */ jsx7("div", { className: `pb-editor-notice pb-editor-notice--${notice}`, "data-testid": "editor-notice", "data-notice": notice, children: /* @__PURE__ */ jsx7(Banner, { tone: "critical", children: i18n.t(notice) }) }) : null,
|
|
1139
|
+
validationIssues.length > 0 ? /* @__PURE__ */ jsx7(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx7("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs5("li", { children: [
|
|
1140
|
+
issue.path,
|
|
1141
|
+
": ",
|
|
1142
|
+
issue.message
|
|
1143
|
+
] }, `${issue.path}-${issue.message}`)) }) }) : null,
|
|
1144
|
+
/* @__PURE__ */ jsxs5("div", { className: `pb-workspace pb-workspace--document${leftRailOpen ? "" : " pb-workspace--left-closed"}${rightPanelOpen ? "" : " pb-workspace--right-closed"}`, "data-left-panel": leftRailOpen ? "open" : "closed", "data-right-panel": rightPanelOpen ? "open" : "closed", children: [
|
|
1145
|
+
/* @__PURE__ */ jsxs5("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
|
|
1146
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks" && leftRailOpen, variant: "tertiary", onClick: () => {
|
|
1147
|
+
setBlockView("blocks");
|
|
1148
|
+
setLeftRailOpen(true);
|
|
1149
|
+
} }),
|
|
1150
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
|
|
1151
|
+
setBlockView("outline");
|
|
1152
|
+
setLeftRailOpen(true);
|
|
1153
|
+
} })
|
|
1161
1154
|
] }),
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
}
|
|
1167
|
-
event.dataTransfer.setData("application/x-page-document-block", type);
|
|
1168
|
-
event.dataTransfer.effectAllowed = "copy";
|
|
1169
|
-
setDraggingLibraryType(type);
|
|
1170
|
-
}, onDragEnd: () => setDraggingLibraryType(null), children: [
|
|
1171
|
-
/* @__PURE__ */ jsxs5("span", { className: "pb-library-block-title", children: [
|
|
1172
|
-
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
|
|
1173
|
-
/* @__PURE__ */ jsx7("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(DragHandleIcon2, {}) })
|
|
1155
|
+
/* @__PURE__ */ jsxs5("aside", { className: `pb-left-panel${leftRailOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u533A\u5757", children: [
|
|
1156
|
+
/* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
|
|
1157
|
+
/* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
|
|
1158
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
|
|
1174
1159
|
] }),
|
|
1175
|
-
/* @__PURE__ */ jsx7(
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
/* @__PURE__ */ jsx7("span",
|
|
1160
|
+
blockView === "blocks" ? /* @__PURE__ */ jsx7("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: blockTypes.map((type) => /* @__PURE__ */ jsxs5("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.canAddBlock(type), "aria-disabled": !editor.canAddBlock(type), "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onDragStart: (event) => {
|
|
1161
|
+
if (!editor.canAddBlock(type)) {
|
|
1162
|
+
event.preventDefault();
|
|
1163
|
+
return;
|
|
1164
|
+
}
|
|
1165
|
+
event.dataTransfer.setData("application/x-page-document-block", type);
|
|
1166
|
+
event.dataTransfer.effectAllowed = "copy";
|
|
1167
|
+
setDraggingLibraryType(type);
|
|
1168
|
+
}, onDragEnd: () => setDraggingLibraryType(null), children: [
|
|
1169
|
+
/* @__PURE__ */ jsxs5("span", { className: "pb-library-block-title", children: [
|
|
1170
|
+
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
|
|
1171
|
+
/* @__PURE__ */ jsx7("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(DragHandleIcon2, {}) })
|
|
1172
|
+
] }),
|
|
1173
|
+
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
|
|
1174
|
+
] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx7("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs5("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => editor.requestCanvasSelection(block.id), children: [
|
|
1175
|
+
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
|
|
1176
|
+
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
|
|
1177
|
+
] }, block.id)) })
|
|
1178
|
+
] }),
|
|
1179
|
+
/* @__PURE__ */ jsxs5("main", { className: "pb-canvas-area", children: [
|
|
1180
|
+
/* @__PURE__ */ jsxs5("div", { className: "pb-canvas-stage", children: [
|
|
1181
|
+
/* @__PURE__ */ jsx7("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}${zoom === "auto" ? "" : ` pb-canvas-frame--zoom-${zoom}`}`, "data-device": editor.device, "data-zoom": zoom, style: canvasThemeStyle, children: /* @__PURE__ */ jsx7(Puck2.Preview, {}) }),
|
|
1182
|
+
draggingLibraryType ? /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-drop-target", "data-testid": "canvas-drop-target", role: "region", "aria-label": "\u533A\u5757\u6295\u653E\u533A", onDragOver: (event) => event.preventDefault(), onDrop: dropFromLibrary, children: [
|
|
1183
|
+
"\u677E\u5F00\u4EE5\u6DFB\u52A0 ",
|
|
1184
|
+
blockTypeLabel(draggingLibraryType, registry)
|
|
1185
|
+
] }) : null,
|
|
1186
|
+
editor.selectedBlock ? /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-overlay", "aria-label": `\u5DF2\u9009\u62E9 ${blockLabel(editor.selectedBlock, registry)}`, children: [
|
|
1187
|
+
/* @__PURE__ */ jsx7("span", { children: blockLabel(editor.selectedBlock, registry) }),
|
|
1188
|
+
/* @__PURE__ */ jsx7("span", { children: "Selected" })
|
|
1189
|
+
] }) : null
|
|
1190
|
+
] }),
|
|
1191
|
+
!leftRailOpen || !rightPanelOpen ? /* @__PURE__ */ jsxs5("div", { className: "pb-collapsed-actions", children: [
|
|
1192
|
+
!leftRailOpen ? /* @__PURE__ */ jsx7(Button2, { onClick: () => setLeftRailOpen(true), children: i18n.t("expandLeft") }) : null,
|
|
1193
|
+
!rightPanelOpen ? /* @__PURE__ */ jsx7(Button2, { onClick: () => setRightPanelOpen(true), children: i18n.t("expandRight") }) : null
|
|
1191
1194
|
] }) : null
|
|
1192
1195
|
] }),
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1196
|
+
/* @__PURE__ */ jsxs5("aside", { className: `pb-right-panel${rightPanelOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u5C5E\u6027", children: [
|
|
1197
|
+
/* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
|
|
1198
|
+
/* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
|
|
1199
|
+
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseRight"), icon: XIcon2, variant: "tertiary", onClick: () => setRightPanelOpen(false) })
|
|
1200
|
+
] }),
|
|
1201
|
+
editor.selectedBlock ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
1202
|
+
/* @__PURE__ */ jsx7(DocumentInspector, { settings: inspectorSettings?.[editor.selectedBlock.id] ?? inspectorSettings?.[editor.selectedBlock.type], pageId: editor.document.pageId, assetPicker, productPicker, i18n, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }, editor.selectedBlock.id),
|
|
1203
|
+
/* @__PURE__ */ jsx7(InspectorActions, { block: editor.selectedBlock, canDuplicate: editor.actionState.canDuplicate, canDelete: editor.actionState.canDelete, canMove: editor.actionState.canReorder, canMoveUp: editor.document.blocks[0]?.id !== editor.selectedBlock.id, canMoveDown: editor.document.blocks.at(-1)?.id !== editor.selectedBlock.id, i18n, onDuplicate: () => editor.duplicateBlock(editor.selectedBlock.id), onDelete: () => editor.requestDeleteBlock(editor.selectedBlock.id), onMove: (direction) => editor.moveBlock(editor.selectedBlock.id, direction) })
|
|
1204
|
+
] }) : /* @__PURE__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
|
|
1205
|
+
] })
|
|
1197
1206
|
] }),
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
] })
|
|
1208
|
-
] }),
|
|
1209
|
-
editor.pendingDeleteBlock ? /* @__PURE__ */ jsx7(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
|
|
1210
|
-
confirmBack ? /* @__PURE__ */ jsx7(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
|
|
1211
|
-
setConfirmBack(false);
|
|
1212
|
-
onBack?.();
|
|
1213
|
-
} }) : null
|
|
1214
|
-
] })
|
|
1215
|
-
] }) });
|
|
1207
|
+
editor.pendingDeleteBlock ? /* @__PURE__ */ jsx7(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
|
|
1208
|
+
confirmBack ? /* @__PURE__ */ jsx7(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
|
|
1209
|
+
setConfirmBack(false);
|
|
1210
|
+
onBack?.();
|
|
1211
|
+
} }) : null
|
|
1212
|
+
] })
|
|
1213
|
+
] }) }),
|
|
1214
|
+
/* @__PURE__ */ jsx7("div", { className: "pb-toast-host", ...notice === "published" ? { "data-testid": "editor-notice", "data-notice": "published" } : {}, children: /* @__PURE__ */ jsx7(Frame, { children: notice === "published" ? /* @__PURE__ */ jsx7(Toast, { content: i18n.t("publishSuccessTitle"), onDismiss: dismissPublishedNotice }) : null }) })
|
|
1215
|
+
] });
|
|
1216
1216
|
}
|
|
1217
1217
|
function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion }) {
|
|
1218
1218
|
const puck = usePuck();
|
package/package.json
CHANGED
package/src/styles.css
CHANGED
|
@@ -6,19 +6,25 @@ body { margin: 0; min-width: 320px; }
|
|
|
6
6
|
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--builder-accent); outline-offset: 2px; }
|
|
7
7
|
.pb-shell { min-height: 100vh; color: var(--builder-text); background: var(--builder-canvas-bg); }
|
|
8
8
|
.pb-shell [class*="PuckLayout-inner"] { height: auto !important; min-height: 100%; }
|
|
9
|
-
.pb-header { position: sticky; top: 0; z-index: 20; min-height: 56px; padding:
|
|
10
|
-
.pb-header-content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--builder-space-2) var(--builder-space-3); }
|
|
11
|
-
.pb-header-title-group { display: flex; flex: 1 1
|
|
9
|
+
.pb-header { display: flex; align-items: center; position: sticky; top: 0; z-index: 20; box-sizing: border-box; min-height: 56px; padding: 0 var(--builder-space-4); border-bottom: 1px solid var(--builder-border); background: var(--builder-surface); }
|
|
10
|
+
.pb-header-content { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--builder-space-2) var(--builder-space-3); }
|
|
11
|
+
.pb-header-title-group { display: flex; flex: 1 1 0; align-items: center; gap: var(--builder-space-2); min-width: 0; }
|
|
12
12
|
.pb-header-sidebar-toggles, [class*="PuckHeader-toggle"] { display: none !important; }
|
|
13
|
-
.pb-page-title { display:
|
|
14
|
-
.pb-page-title h1, .pb-page-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
15
|
-
.pb-
|
|
16
|
-
.pb-header-
|
|
17
|
-
.pb-header-
|
|
18
|
-
.pb-header-actions { display: flex; flex: 1 1 16rem; justify-content: flex-end; min-width: 0; }
|
|
13
|
+
.pb-page-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
|
|
14
|
+
.pb-page-title h1, .pb-page-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
|
|
15
|
+
.pb-header-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; }
|
|
16
|
+
.pb-header-device-toolbar { display: flex; align-items: center; gap: var(--builder-space-2); }
|
|
17
|
+
.pb-header-actions { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; min-width: 0; }
|
|
19
18
|
.pb-header-actions .Polaris-InlineStack { flex-wrap: wrap; justify-content: flex-end; }
|
|
20
19
|
.pb-header-actions .Polaris-Badge { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
21
|
-
.pb-zoom-control { width: 112px; flex: 0 0 auto; }
|
|
20
|
+
.pb-zoom-control { display: flex; align-items: center; width: 112px; flex: 0 0 auto; }
|
|
21
|
+
.pb-zoom-control .Polaris-Labelled { width: 100%; }
|
|
22
|
+
.pb-zoom-control .Polaris-Labelled__LabelWrapper { display: none; }
|
|
23
|
+
.pb-zoom-control .Polaris-Select,
|
|
24
|
+
.pb-zoom-control .Polaris-Select__Content,
|
|
25
|
+
.pb-zoom-control .Polaris-Select__Input { height: 28px; min-height: 28px; }
|
|
26
|
+
.pb-zoom-control .Polaris-Select__Content,
|
|
27
|
+
.pb-zoom-control .Polaris-Select__Input { padding-top: 4px; padding-bottom: 4px; }
|
|
22
28
|
.pb-page-status-card { display: grid; gap: 2px; margin-top: var(--builder-space-1); }
|
|
23
29
|
.pb-page-status-card p { margin: 0; }
|
|
24
30
|
.pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
|
|
@@ -52,6 +58,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
|
|
|
52
58
|
.pb-inspector-field input:hover, .pb-inspector-field textarea:hover { border-color: #94a3b8; }
|
|
53
59
|
.pb-inspector-field input:focus, .pb-inspector-field textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
|
|
54
60
|
.pb-inspector-field input:disabled, .pb-inspector-field textarea:disabled { color: #94a3b8; background: #f8fafc; cursor: not-allowed; }
|
|
61
|
+
.pb-inspector-field input[type="color"] { width: 52px; padding: 4px; cursor: pointer; }
|
|
55
62
|
.pb-product-picker { display: grid; gap: 8px; }
|
|
56
63
|
.pb-product-picker__summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
|
|
57
64
|
.pb-product-picker__summary p { margin: 0; color: #334155; }
|
|
@@ -112,7 +119,12 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
|
|
|
112
119
|
.pb-document-block-row--selected { border-color: var(--builder-accent); background: var(--builder-accent-subtle); }
|
|
113
120
|
.pb-editor-status { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 100dvh; padding: var(--builder-space-6); }
|
|
114
121
|
.pb-editor-status > * { width: min(100%, 28rem); justify-self: center; }
|
|
115
|
-
.pb-shell--v04 > .Polaris-Banner
|
|
122
|
+
.pb-shell--v04 > .Polaris-Banner,
|
|
123
|
+
.pb-editor-notice { margin: var(--builder-space-3) var(--builder-space-4) 0; }
|
|
124
|
+
.pb-toast-host { position: absolute; width: 0; height: 0; overflow: visible; pointer-events: none; }
|
|
125
|
+
.pb-toast-host .Polaris-Frame { min-height: 0; width: 0; height: 0; overflow: visible; background: transparent; }
|
|
126
|
+
.pb-toast-host .Polaris-Frame__Skip,
|
|
127
|
+
.pb-toast-host .Polaris-Frame__Main { display: none; }
|
|
116
128
|
.pb-document-canvas__text, .pb-document-canvas__image { max-width: 760px; margin: 0 auto; padding: 48px; color: #1d2939; background: #fff; cursor: pointer; }
|
|
117
129
|
.pb-document-canvas__text { font-size: clamp(32px, 4vw, 52px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; }
|
|
118
130
|
.pb-document-canvas__text p { margin: 0; }
|
|
@@ -145,4 +157,4 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
|
|
|
145
157
|
.bt-storefront__form button { padding: 13px 18px; border: 0; border-radius: 8px; color: white; background: #203e54; font: inherit; font-weight: 600; }
|
|
146
158
|
@media (max-width: 1180px) { .pb-workspace { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); } .pb-workspace--left-closed { grid-template-columns: 64px minmax(0, 1fr); } .pb-right-panel { grid-column: 2 / -1; border-top: 1px solid var(--builder-border); border-left: 0; } }
|
|
147
159
|
@media (max-width: 1023px) { .pb-header { position: static; } .pb-workspace { grid-template-columns: 64px minmax(0, 1fr); } .pb-left-panel, .pb-right-panel { grid-column: 2; border-left: 0; border-right: 0; border-bottom: 1px solid var(--builder-border); } .pb-canvas-area { grid-column: 2; } }
|
|
148
|
-
@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-title-group, .pb-header-controls, .pb-header-actions { flex
|
|
160
|
+
@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-title-group, .pb-header-controls, .pb-header-actions { flex: 1 1 100%; } .pb-header-controls, .pb-header-actions { justify-content: flex-start; } .pb-header-actions .Polaris-InlineStack { justify-content: flex-start; } .pb-canvas-stage { padding: 0; } .pb-canvas-frame--tablet, .pb-canvas-frame--mobile { width: 100%; } .bt-storefront { padding: 28px 20px; } .bt-storefront__form { flex-direction: column; } }
|