@standhigher/puck-page-builder 0.12.2 → 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 +1 -5
- package/dist/index.js +104 -111
- package/package.json +1 -1
- package/src/styles.css +17 -11
package/dist/index.d.ts
CHANGED
|
@@ -324,8 +324,6 @@ declare const messages: {
|
|
|
324
324
|
readonly publishFailed: "发布失败";
|
|
325
325
|
readonly published: "已发布";
|
|
326
326
|
readonly publishSuccessTitle: "发布成功";
|
|
327
|
-
readonly publishSuccessMessage: "页面已发布，消费者将看到当前版本。";
|
|
328
|
-
readonly publishSuccessClose: "完成";
|
|
329
327
|
readonly back: "返回";
|
|
330
328
|
readonly confirmLeaveTitle: "离开编辑器？";
|
|
331
329
|
readonly leave: "离开";
|
|
@@ -390,8 +388,6 @@ declare const messages: {
|
|
|
390
388
|
readonly publishFailed: "Could not publish";
|
|
391
389
|
readonly published: "Published";
|
|
392
390
|
readonly publishSuccessTitle: "Published";
|
|
393
|
-
readonly publishSuccessMessage: "This page is live. Shoppers will see the current version.";
|
|
394
|
-
readonly publishSuccessClose: "Done";
|
|
395
391
|
readonly back: "Back";
|
|
396
392
|
readonly confirmLeaveTitle: "Leave the editor?";
|
|
397
393
|
readonly leave: "Leave";
|
|
@@ -428,7 +424,7 @@ type AdminMessageKey = keyof typeof messages["zh-CN"];
|
|
|
428
424
|
/** Minimal, dependency-free Admin copy catalog. Product locale remains PageDocument.settings.locale. */
|
|
429
425
|
declare function createAdminI18n(locale?: string): {
|
|
430
426
|
locale: AdminLocale;
|
|
431
|
-
t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "products" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "历史记录" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "发布成功" | "
|
|
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";
|
|
432
428
|
};
|
|
433
429
|
|
|
434
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,
|
|
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
|
|
|
@@ -799,8 +799,6 @@ var messages = {
|
|
|
799
799
|
publishFailed: "\u53D1\u5E03\u5931\u8D25",
|
|
800
800
|
published: "\u5DF2\u53D1\u5E03",
|
|
801
801
|
publishSuccessTitle: "\u53D1\u5E03\u6210\u529F",
|
|
802
|
-
publishSuccessMessage: "\u9875\u9762\u5DF2\u53D1\u5E03\uFF0C\u6D88\u8D39\u8005\u5C06\u770B\u5230\u5F53\u524D\u7248\u672C\u3002",
|
|
803
|
-
publishSuccessClose: "\u5B8C\u6210",
|
|
804
802
|
back: "\u8FD4\u56DE",
|
|
805
803
|
confirmLeaveTitle: "\u79BB\u5F00\u7F16\u8F91\u5668\uFF1F",
|
|
806
804
|
leave: "\u79BB\u5F00",
|
|
@@ -865,8 +863,6 @@ var messages = {
|
|
|
865
863
|
publishFailed: "Could not publish",
|
|
866
864
|
published: "Published",
|
|
867
865
|
publishSuccessTitle: "Published",
|
|
868
|
-
publishSuccessMessage: "This page is live. Shoppers will see the current version.",
|
|
869
|
-
publishSuccessClose: "Done",
|
|
870
866
|
back: "Back",
|
|
871
867
|
confirmLeaveTitle: "Leave the editor?",
|
|
872
868
|
leave: "Leave",
|
|
@@ -1026,7 +1022,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
|
|
|
1026
1022
|
const document = editor.document;
|
|
1027
1023
|
setRequest("saving");
|
|
1028
1024
|
setSaveState("saving");
|
|
1029
|
-
setNotice(
|
|
1025
|
+
setNotice(null);
|
|
1030
1026
|
try {
|
|
1031
1027
|
const result = draftPersistence ? await draftPersistence.saveDraft({ document, expectedRevision: draftRevision, session: editor.session }) : await onSave?.(document);
|
|
1032
1028
|
if (result?.revision !== void 0) setDraftRevision(result.revision);
|
|
@@ -1109,117 +1105,114 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
|
|
|
1109
1105
|
if (editor.isDirty || request === "saving") setConfirmBack(true);
|
|
1110
1106
|
else onBack();
|
|
1111
1107
|
};
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
/* @__PURE__ */ jsxs5(
|
|
1117
|
-
/* @__PURE__ */ jsx7(
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
/* @__PURE__ */ jsxs5("div", { className: "pb-
|
|
1121
|
-
/* @__PURE__ */ jsx7(
|
|
1122
|
-
/* @__PURE__ */ jsxs5(
|
|
1123
|
-
"
|
|
1124
|
-
editor.
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
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
|
+
/* @__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
|
+
/* @__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
|
+
] }) }),
|
|
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 }),
|
|
1130
|
+
/* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
|
|
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,
|
|
1132
|
+
onPreview ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
|
|
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,
|
|
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") })
|
|
1135
|
+
] }) })
|
|
1134
1136
|
] }) }),
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
/* @__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: [
|
|
1153
|
-
/* @__PURE__ */ jsxs5("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
|
|
1154
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks" && leftRailOpen, variant: "tertiary", onClick: () => {
|
|
1155
|
-
setBlockView("blocks");
|
|
1156
|
-
setLeftRailOpen(true);
|
|
1157
|
-
} }),
|
|
1158
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
|
|
1159
|
-
setBlockView("outline");
|
|
1160
|
-
setLeftRailOpen(true);
|
|
1161
|
-
} })
|
|
1162
|
-
] }),
|
|
1163
|
-
/* @__PURE__ */ jsxs5("aside", { className: `pb-left-panel${leftRailOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u533A\u5757", children: [
|
|
1164
|
-
/* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
|
|
1165
|
-
/* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
|
|
1166
|
-
/* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
|
|
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
|
+
} })
|
|
1167
1154
|
] }),
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
}
|
|
1173
|
-
event.dataTransfer.setData("application/x-page-document-block", type);
|
|
1174
|
-
event.dataTransfer.effectAllowed = "copy";
|
|
1175
|
-
setDraggingLibraryType(type);
|
|
1176
|
-
}, onDragEnd: () => setDraggingLibraryType(null), children: [
|
|
1177
|
-
/* @__PURE__ */ jsxs5("span", { className: "pb-library-block-title", children: [
|
|
1178
|
-
/* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
|
|
1179
|
-
/* @__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) })
|
|
1180
1159
|
] }),
|
|
1181
|
-
/* @__PURE__ */ jsx7(
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
/* @__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
|
|
1197
1194
|
] }) : null
|
|
1198
1195
|
] }),
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
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
|
+
] })
|
|
1203
1206
|
] }),
|
|
1204
|
-
/* @__PURE__ */
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
] })
|
|
1214
|
-
] }),
|
|
1215
|
-
/* @__PURE__ */ jsx7(Modal2, { instant: true, open: notice === "published", onClose: () => setNotice(null), title: i18n.t("publishSuccessTitle"), primaryAction: { content: i18n.t("publishSuccessClose"), onAction: () => setNotice(null) }, children: /* @__PURE__ */ jsx7(Modal2.Section, { children: /* @__PURE__ */ jsx7("div", { className: "pb-publish-success", "data-testid": "editor-notice", "data-notice": "published", children: /* @__PURE__ */ jsx7(Text3, { as: "p", children: i18n.t("publishSuccessMessage") }) }) }) }),
|
|
1216
|
-
editor.pendingDeleteBlock ? /* @__PURE__ */ jsx7(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
|
|
1217
|
-
confirmBack ? /* @__PURE__ */ jsx7(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
|
|
1218
|
-
setConfirmBack(false);
|
|
1219
|
-
onBack?.();
|
|
1220
|
-
} }) : null
|
|
1221
|
-
] })
|
|
1222
|
-
] }) });
|
|
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
|
+
] });
|
|
1223
1216
|
}
|
|
1224
1217
|
function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion }) {
|
|
1225
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); }
|
|
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
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-page-title p { margin: 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; }
|
|
16
15
|
.pb-header-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; }
|
|
17
16
|
.pb-header-device-toolbar { display: flex; align-items: center; gap: var(--builder-space-2); }
|
|
18
|
-
.pb-header-actions { display: flex; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
|
|
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); }
|
|
@@ -115,10 +121,10 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
|
|
|
115
121
|
.pb-editor-status > * { width: min(100%, 28rem); justify-self: center; }
|
|
116
122
|
.pb-shell--v04 > .Polaris-Banner,
|
|
117
123
|
.pb-editor-notice { margin: var(--builder-space-3) var(--builder-space-4) 0; }
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
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; }
|
|
122
128
|
.pb-document-canvas__text, .pb-document-canvas__image { max-width: 760px; margin: 0 auto; padding: 48px; color: #1d2939; background: #fff; cursor: pointer; }
|
|
123
129
|
.pb-document-canvas__text { font-size: clamp(32px, 4vw, 52px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; }
|
|
124
130
|
.pb-document-canvas__text p { margin: 0; }
|