@commercetools-demo/puck-content-manager 0.5.1 → 0.5.2
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.js +187 -161
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +133 -107
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ __export(index_exports, {
|
|
|
37
37
|
module.exports = __toCommonJS(index_exports);
|
|
38
38
|
|
|
39
39
|
// src/ContentManager.tsx
|
|
40
|
-
var
|
|
40
|
+
var import_react2 = require("react");
|
|
41
41
|
var import_puck_api = require("@commercetools-demo/puck-api");
|
|
42
42
|
var import_data_table = __toESM(require("@commercetools-uikit/data-table"));
|
|
43
43
|
var import_primary_button = __toESM(require("@commercetools-uikit/primary-button"));
|
|
@@ -51,7 +51,33 @@ var import_text_input = __toESM(require("@commercetools-uikit/text-input"));
|
|
|
51
51
|
var import_label = __toESM(require("@commercetools-uikit/label"));
|
|
52
52
|
var import_icons = require("@commercetools-uikit/icons");
|
|
53
53
|
var import_stamp = __toESM(require("@commercetools-uikit/stamp"));
|
|
54
|
+
|
|
55
|
+
// src/EnsureIntlProvider.tsx
|
|
56
|
+
var import_react = require("react");
|
|
57
|
+
var import_react_intl = require("react-intl");
|
|
54
58
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
|
+
var EnsureIntlProvider = ({ children }) => {
|
|
60
|
+
const intl = (0, import_react.useContext)(import_react_intl.IntlContext);
|
|
61
|
+
if (intl) {
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
|
63
|
+
}
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
import_react_intl.IntlProvider,
|
|
66
|
+
{
|
|
67
|
+
locale: "en",
|
|
68
|
+
defaultLocale: "en",
|
|
69
|
+
messages: {},
|
|
70
|
+
onError: (err) => {
|
|
71
|
+
if (err.code === import_react_intl.ReactIntlErrorCode.MISSING_TRANSLATION) return;
|
|
72
|
+
console.error(err);
|
|
73
|
+
},
|
|
74
|
+
children
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
// src/ContentManager.tsx
|
|
80
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
55
81
|
var columns = [
|
|
56
82
|
{ key: "name", label: "Name" },
|
|
57
83
|
{ key: "contentType", label: "Content Type" },
|
|
@@ -61,13 +87,13 @@ var columns = [
|
|
|
61
87
|
];
|
|
62
88
|
var ContentList = ({ defaultContentType, onEdit }) => {
|
|
63
89
|
const { contents, loading, error, fetchContents, createContent, deleteContent, refresh } = (0, import_puck_api.usePuckContents)(defaultContentType);
|
|
64
|
-
const [filterType, setFilterType] = (0,
|
|
65
|
-
const [showCreate, setShowCreate] = (0,
|
|
66
|
-
const [createName, setCreateName] = (0,
|
|
67
|
-
const [createType, setCreateType] = (0,
|
|
68
|
-
const [createError, setCreateError] = (0,
|
|
69
|
-
const [creating, setCreating] = (0,
|
|
70
|
-
const [deleting, setDeleting] = (0,
|
|
90
|
+
const [filterType, setFilterType] = (0, import_react2.useState)(defaultContentType ?? "");
|
|
91
|
+
const [showCreate, setShowCreate] = (0, import_react2.useState)(false);
|
|
92
|
+
const [createName, setCreateName] = (0, import_react2.useState)("");
|
|
93
|
+
const [createType, setCreateType] = (0, import_react2.useState)(defaultContentType ?? "");
|
|
94
|
+
const [createError, setCreateError] = (0, import_react2.useState)(null);
|
|
95
|
+
const [creating, setCreating] = (0, import_react2.useState)(false);
|
|
96
|
+
const [deleting, setDeleting] = (0, import_react2.useState)(null);
|
|
71
97
|
const handleFilter = () => void fetchContents(filterType || void 0);
|
|
72
98
|
const handleCreate = async () => {
|
|
73
99
|
setCreateError(null);
|
|
@@ -106,25 +132,25 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
106
132
|
}
|
|
107
133
|
};
|
|
108
134
|
const rows = contents.map((c) => ({ ...c, id: c.key }));
|
|
109
|
-
return /* @__PURE__ */ (0,
|
|
110
|
-
/* @__PURE__ */ (0,
|
|
111
|
-
/* @__PURE__ */ (0,
|
|
112
|
-
/* @__PURE__ */ (0,
|
|
135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Stack, { scale: "l", children: [
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Inline, { justifyContent: "space-between", alignItems: "center", children: [
|
|
137
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Headline, { as: "h1", children: "Content Items" }),
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
113
139
|
import_primary_button.default,
|
|
114
140
|
{
|
|
115
141
|
label: "New Content",
|
|
116
|
-
iconLeft: /* @__PURE__ */ (0,
|
|
142
|
+
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.PlusThinIcon, {}),
|
|
117
143
|
onClick: () => setShowCreate((v) => !v)
|
|
118
144
|
}
|
|
119
145
|
)
|
|
120
146
|
] }),
|
|
121
|
-
showCreate && /* @__PURE__ */ (0,
|
|
122
|
-
/* @__PURE__ */ (0,
|
|
123
|
-
createError && /* @__PURE__ */ (0,
|
|
124
|
-
/* @__PURE__ */ (0,
|
|
125
|
-
/* @__PURE__ */ (0,
|
|
126
|
-
/* @__PURE__ */ (0,
|
|
127
|
-
/* @__PURE__ */ (0,
|
|
147
|
+
showCreate && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_card.default, { insetScale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Stack, { scale: "m", children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
|
|
149
|
+
createError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Body, { tone: "negative", children: createError }),
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Inline, { scale: "m", children: [
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
|
|
152
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_label.default, { htmlFor: "create-name", children: "Name" }),
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
128
154
|
import_text_input.default,
|
|
129
155
|
{
|
|
130
156
|
id: "create-name",
|
|
@@ -134,9 +160,9 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
134
160
|
}
|
|
135
161
|
)
|
|
136
162
|
] }) }),
|
|
137
|
-
/* @__PURE__ */ (0,
|
|
138
|
-
/* @__PURE__ */ (0,
|
|
139
|
-
/* @__PURE__ */ (0,
|
|
163
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Stack, { scale: "xs", children: [
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_label.default, { htmlFor: "create-type", children: "Content Type" }),
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
140
166
|
import_text_input.default,
|
|
141
167
|
{
|
|
142
168
|
id: "create-type",
|
|
@@ -147,8 +173,8 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
147
173
|
)
|
|
148
174
|
] }) })
|
|
149
175
|
] }),
|
|
150
|
-
/* @__PURE__ */ (0,
|
|
151
|
-
/* @__PURE__ */ (0,
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Inline, { scale: "s", children: [
|
|
177
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
152
178
|
import_primary_button.default,
|
|
153
179
|
{
|
|
154
180
|
label: creating ? "Creating\u2026" : "Create",
|
|
@@ -156,11 +182,11 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
156
182
|
isDisabled: creating
|
|
157
183
|
}
|
|
158
184
|
),
|
|
159
|
-
/* @__PURE__ */ (0,
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_secondary_button.default, { label: "Cancel", onClick: () => setShowCreate(false) })
|
|
160
186
|
] })
|
|
161
187
|
] }) }),
|
|
162
|
-
/* @__PURE__ */ (0,
|
|
163
|
-
/* @__PURE__ */ (0,
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_spacings.default.Inline, { scale: "s", alignItems: "center", children: [
|
|
189
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
164
190
|
import_text_input.default,
|
|
165
191
|
{
|
|
166
192
|
value: filterType,
|
|
@@ -168,15 +194,15 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
168
194
|
placeholder: "Filter by content type\u2026"
|
|
169
195
|
}
|
|
170
196
|
) }),
|
|
171
|
-
/* @__PURE__ */ (0,
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
172
198
|
import_secondary_button.default,
|
|
173
199
|
{
|
|
174
200
|
label: "Filter",
|
|
175
|
-
iconLeft: /* @__PURE__ */ (0,
|
|
201
|
+
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.SearchIcon, {}),
|
|
176
202
|
onClick: handleFilter
|
|
177
203
|
}
|
|
178
204
|
),
|
|
179
|
-
/* @__PURE__ */ (0,
|
|
205
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
180
206
|
import_flat_button.default,
|
|
181
207
|
{
|
|
182
208
|
label: "Clear",
|
|
@@ -186,10 +212,10 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
186
212
|
}
|
|
187
213
|
}
|
|
188
214
|
),
|
|
189
|
-
/* @__PURE__ */ (0,
|
|
215
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_flat_button.default, { label: "Refresh", onClick: () => void refresh() })
|
|
190
216
|
] }),
|
|
191
|
-
error && /* @__PURE__ */ (0,
|
|
192
|
-
loading ? /* @__PURE__ */ (0,
|
|
217
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Body, { tone: "negative", children: error }),
|
|
218
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading_spinner.default, {}) }) : contents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_spacings.default.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
193
219
|
import_data_table.default,
|
|
194
220
|
{
|
|
195
221
|
columns,
|
|
@@ -197,9 +223,9 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
197
223
|
itemRenderer: (row, column) => {
|
|
198
224
|
switch (column.key) {
|
|
199
225
|
case "name":
|
|
200
|
-
return /* @__PURE__ */ (0,
|
|
226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Body, { fontWeight: "bold", children: row.value.name });
|
|
201
227
|
case "contentType":
|
|
202
|
-
return /* @__PURE__ */ (0,
|
|
228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
203
229
|
"code",
|
|
204
230
|
{
|
|
205
231
|
style: {
|
|
@@ -215,18 +241,18 @@ var ContentList = ({ defaultContentType, onEdit }) => {
|
|
|
215
241
|
case "status": {
|
|
216
242
|
const hasDraft = !!row.states.draft;
|
|
217
243
|
const hasPublished = !!row.states.published;
|
|
218
|
-
return /* @__PURE__ */ (0,
|
|
219
|
-
hasDraft && /* @__PURE__ */ (0,
|
|
220
|
-
hasPublished && /* @__PURE__ */ (0,
|
|
221
|
-
!hasDraft && !hasPublished && /* @__PURE__ */ (0,
|
|
244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
|
|
245
|
+
hasDraft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_stamp.default, { tone: "warning", label: "Draft", isCondensed: true }),
|
|
246
|
+
hasPublished && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_stamp.default, { tone: "positive", label: "Published", isCondensed: true }),
|
|
247
|
+
!hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_stamp.default, { tone: "secondary", label: "No state", isCondensed: true })
|
|
222
248
|
] });
|
|
223
249
|
}
|
|
224
250
|
case "updatedAt":
|
|
225
|
-
return /* @__PURE__ */ (0,
|
|
251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_text.default.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
|
|
226
252
|
case "actions":
|
|
227
|
-
return /* @__PURE__ */ (0,
|
|
228
|
-
/* @__PURE__ */ (0,
|
|
229
|
-
/* @__PURE__ */ (0,
|
|
253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
|
|
254
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_primary_button.default, { label: "Edit", size: "20", onClick: () => onEdit(row) }),
|
|
255
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
230
256
|
import_flat_button.default,
|
|
231
257
|
{
|
|
232
258
|
tone: "critical",
|
|
@@ -251,19 +277,19 @@ var ContentManagerList = ({
|
|
|
251
277
|
jwtToken,
|
|
252
278
|
defaultContentType,
|
|
253
279
|
onEdit
|
|
254
|
-
}) => /* @__PURE__ */ (0,
|
|
280
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EnsureIntlProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
255
281
|
import_puck_api.PuckApiProvider,
|
|
256
282
|
{
|
|
257
283
|
baseURL,
|
|
258
284
|
projectKey,
|
|
259
285
|
businessUnitKey,
|
|
260
286
|
jwtToken,
|
|
261
|
-
children: /* @__PURE__ */ (0,
|
|
287
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentList, { defaultContentType, onEdit })
|
|
262
288
|
}
|
|
263
|
-
);
|
|
289
|
+
) });
|
|
264
290
|
|
|
265
291
|
// src/ContentEditor.tsx
|
|
266
|
-
var
|
|
292
|
+
var import_react3 = require("react");
|
|
267
293
|
var import_puck = require("@measured/puck");
|
|
268
294
|
var import_puck2 = require("@measured/puck/puck.css");
|
|
269
295
|
var import_puck_api2 = require("@commercetools-demo/puck-api");
|
|
@@ -272,7 +298,7 @@ var import_puck_version_history = require("@commercetools-demo/puck-version-hist
|
|
|
272
298
|
var import_loading_spinner2 = __toESM(require("@commercetools-uikit/loading-spinner"));
|
|
273
299
|
var import_text2 = __toESM(require("@commercetools-uikit/text"));
|
|
274
300
|
var import_spacings2 = __toESM(require("@commercetools-uikit/spacings"));
|
|
275
|
-
var
|
|
301
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
276
302
|
var ContentEditorInner = ({
|
|
277
303
|
contentKey,
|
|
278
304
|
config,
|
|
@@ -292,9 +318,9 @@ var ContentEditorInner = ({
|
|
|
292
318
|
revertToPublished,
|
|
293
319
|
loadVersions
|
|
294
320
|
} = (0, import_puck_api2.usePuckContent)(contentKey);
|
|
295
|
-
const latestDataRef = (0,
|
|
296
|
-
const [hasUnsavedChanges, setHasUnsavedChanges] = (0,
|
|
297
|
-
const [isApplyingVersion, setIsApplyingVersion] = (0,
|
|
321
|
+
const latestDataRef = (0, import_react3.useRef)(null);
|
|
322
|
+
const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react3.useState)(false);
|
|
323
|
+
const [isApplyingVersion, setIsApplyingVersion] = (0, import_react3.useState)(false);
|
|
298
324
|
const currentData = states.draft?.data ?? content?.data ?? {
|
|
299
325
|
content: [],
|
|
300
326
|
root: { props: {} }
|
|
@@ -308,14 +334,14 @@ var ContentEditorInner = ({
|
|
|
308
334
|
versionHistory.previewData,
|
|
309
335
|
currentData
|
|
310
336
|
);
|
|
311
|
-
const isPreviewingRef = (0,
|
|
337
|
+
const isPreviewingRef = (0, import_react3.useRef)(false);
|
|
312
338
|
isPreviewingRef.current = versionHistory.isPreviewingHistory;
|
|
313
|
-
const handleChange = (0,
|
|
339
|
+
const handleChange = (0, import_react3.useCallback)((data) => {
|
|
314
340
|
if (isPreviewingRef.current) return;
|
|
315
341
|
latestDataRef.current = data;
|
|
316
342
|
setHasUnsavedChanges(true);
|
|
317
343
|
}, []);
|
|
318
|
-
const handleSave = (0,
|
|
344
|
+
const handleSave = (0, import_react3.useCallback)(async () => {
|
|
319
345
|
const data = latestDataRef.current;
|
|
320
346
|
if (!data) return;
|
|
321
347
|
try {
|
|
@@ -326,7 +352,7 @@ var ContentEditorInner = ({
|
|
|
326
352
|
onError?.(err);
|
|
327
353
|
}
|
|
328
354
|
}, [saveDraft, onSave, onError]);
|
|
329
|
-
const handlePublish = (0,
|
|
355
|
+
const handlePublish = (0, import_react3.useCallback)(
|
|
330
356
|
async (data) => {
|
|
331
357
|
try {
|
|
332
358
|
await saveDraft(data);
|
|
@@ -339,7 +365,7 @@ var ContentEditorInner = ({
|
|
|
339
365
|
},
|
|
340
366
|
[saveDraft, publish, onPublish, onError]
|
|
341
367
|
);
|
|
342
|
-
const handleRevert = (0,
|
|
368
|
+
const handleRevert = (0, import_react3.useCallback)(async () => {
|
|
343
369
|
try {
|
|
344
370
|
await revertToPublished();
|
|
345
371
|
setHasUnsavedChanges(false);
|
|
@@ -347,7 +373,7 @@ var ContentEditorInner = ({
|
|
|
347
373
|
onError?.(err);
|
|
348
374
|
}
|
|
349
375
|
}, [revertToPublished, onError]);
|
|
350
|
-
const handleApplyVersion = (0,
|
|
376
|
+
const handleApplyVersion = (0, import_react3.useCallback)(async () => {
|
|
351
377
|
const versionData = versionHistory.previewData;
|
|
352
378
|
if (!versionData) return;
|
|
353
379
|
setIsApplyingVersion(true);
|
|
@@ -362,7 +388,7 @@ var ContentEditorInner = ({
|
|
|
362
388
|
setIsApplyingVersion(false);
|
|
363
389
|
}
|
|
364
390
|
}, [versionHistory, saveDraft, onSave, onError]);
|
|
365
|
-
const contentConfig = (0,
|
|
391
|
+
const contentConfig = (0, import_react3.useMemo)(() => {
|
|
366
392
|
const otherRootFields = Object.fromEntries(
|
|
367
393
|
Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
|
|
368
394
|
);
|
|
@@ -384,21 +410,21 @@ var ContentEditorInner = ({
|
|
|
384
410
|
};
|
|
385
411
|
}, [config]);
|
|
386
412
|
if (loading) {
|
|
387
|
-
return /* @__PURE__ */ (0,
|
|
388
|
-
/* @__PURE__ */ (0,
|
|
389
|
-
/* @__PURE__ */ (0,
|
|
413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Stack, { scale: "m", alignItems: "center", children: [
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_loading_spinner2.default, {}),
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_text2.default.Body, { tone: "secondary", children: "Loading editor\u2026" })
|
|
390
416
|
] }) });
|
|
391
417
|
}
|
|
392
418
|
if (error) {
|
|
393
|
-
return /* @__PURE__ */ (0,
|
|
394
|
-
/* @__PURE__ */ (0,
|
|
419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_text2.default.Body, { tone: "negative", children: [
|
|
420
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Error loading content:" }),
|
|
395
421
|
" ",
|
|
396
422
|
error
|
|
397
423
|
] }) });
|
|
398
424
|
}
|
|
399
425
|
const activeData = versionHistory.previewData ?? currentData;
|
|
400
426
|
const toolbarStates = states;
|
|
401
|
-
return /* @__PURE__ */ (0,
|
|
427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
402
428
|
import_puck_version_history.VersionHistoryProvider,
|
|
403
429
|
{
|
|
404
430
|
diff,
|
|
@@ -411,7 +437,7 @@ var ContentEditorInner = ({
|
|
|
411
437
|
onApply: () => void handleApplyVersion(),
|
|
412
438
|
onDiscard: versionHistory.clearSelection,
|
|
413
439
|
onLoadVersions: versionHistory.openPanel,
|
|
414
|
-
children: /* @__PURE__ */ (0,
|
|
440
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
415
441
|
import_puck.Puck,
|
|
416
442
|
{
|
|
417
443
|
config: contentConfig,
|
|
@@ -419,8 +445,8 @@ var ContentEditorInner = ({
|
|
|
419
445
|
onChange: handleChange,
|
|
420
446
|
onPublish: handlePublish,
|
|
421
447
|
overrides: {
|
|
422
|
-
headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0,
|
|
423
|
-
/* @__PURE__ */ (0,
|
|
448
|
+
headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_spacings2.default.Inline, { scale: "s", alignItems: "center", children: [
|
|
449
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
424
450
|
import_puck_version_history.VersionPreviewBanner,
|
|
425
451
|
{
|
|
426
452
|
timestamp: versionHistory.selectedVersion.timestamp,
|
|
@@ -429,8 +455,8 @@ var ContentEditorInner = ({
|
|
|
429
455
|
isApplying: isApplyingVersion
|
|
430
456
|
}
|
|
431
457
|
),
|
|
432
|
-
/* @__PURE__ */ (0,
|
|
433
|
-
] }) : /* @__PURE__ */ (0,
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_version_history.VersionHistoryButton, { disabled: isApplyingVersion })
|
|
459
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
434
460
|
import_puck_editor.EditorToolbar,
|
|
435
461
|
{
|
|
436
462
|
saving,
|
|
@@ -442,9 +468,9 @@ var ContentEditorInner = ({
|
|
|
442
468
|
showPublishButton: true
|
|
443
469
|
}
|
|
444
470
|
),
|
|
445
|
-
components: ({ children }) => /* @__PURE__ */ (0,
|
|
446
|
-
componentItem: ({ children, name }) => /* @__PURE__ */ (0,
|
|
447
|
-
fields: ({ children, isLoading }) => /* @__PURE__ */ (0,
|
|
471
|
+
components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor.ComponentsPanel, { children }),
|
|
472
|
+
componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_editor.ComponentItemFilter, { name, children }),
|
|
473
|
+
fields: ({ children, isLoading }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_puck_version_history.VersionAwareFieldsPanel, { isLoading, children })
|
|
448
474
|
}
|
|
449
475
|
},
|
|
450
476
|
versionHistory.selectedVersionId ?? "current"
|
|
@@ -462,14 +488,14 @@ var ContentEditor = ({
|
|
|
462
488
|
onPublish,
|
|
463
489
|
onSave,
|
|
464
490
|
onError
|
|
465
|
-
}) => /* @__PURE__ */ (0,
|
|
491
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EnsureIntlProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
466
492
|
import_puck_api2.PuckApiProvider,
|
|
467
493
|
{
|
|
468
494
|
baseURL,
|
|
469
495
|
projectKey,
|
|
470
496
|
businessUnitKey,
|
|
471
497
|
jwtToken,
|
|
472
|
-
children: /* @__PURE__ */ (0,
|
|
498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
473
499
|
ContentEditorInner,
|
|
474
500
|
{
|
|
475
501
|
contentKey,
|
|
@@ -480,10 +506,10 @@ var ContentEditor = ({
|
|
|
480
506
|
}
|
|
481
507
|
)
|
|
482
508
|
}
|
|
483
|
-
);
|
|
509
|
+
) });
|
|
484
510
|
|
|
485
511
|
// src/ContentManagerRouter.tsx
|
|
486
|
-
var
|
|
512
|
+
var import_react4 = require("react");
|
|
487
513
|
var import_react_router_dom = require("react-router-dom");
|
|
488
514
|
var import_puck3 = require("@measured/puck");
|
|
489
515
|
var import_puck4 = require("@measured/puck/puck.css");
|
|
@@ -502,7 +528,7 @@ var import_text_input2 = __toESM(require("@commercetools-uikit/text-input"));
|
|
|
502
528
|
var import_label2 = __toESM(require("@commercetools-uikit/label"));
|
|
503
529
|
var import_stamp2 = __toESM(require("@commercetools-uikit/stamp"));
|
|
504
530
|
var import_icons2 = require("@commercetools-uikit/icons");
|
|
505
|
-
var
|
|
531
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
506
532
|
var DEFAULT_CONFIG = {
|
|
507
533
|
...import_puck_editor2.defaultPuckConfig,
|
|
508
534
|
components: { ...import_puck_editor2.defaultPuckConfig.components }
|
|
@@ -529,13 +555,13 @@ var COLUMNS = [
|
|
|
529
555
|
var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
530
556
|
const history = (0, import_react_router_dom.useHistory)();
|
|
531
557
|
const { contents, loading, error, fetchContents, createContent, deleteContent, refresh } = (0, import_puck_api3.usePuckContents)(defaultContentType);
|
|
532
|
-
const [filterType, setFilterType] = (0,
|
|
533
|
-
const [showCreate, setShowCreate] = (0,
|
|
534
|
-
const [createName, setCreateName] = (0,
|
|
535
|
-
const [createType, setCreateType] = (0,
|
|
536
|
-
const [createError, setCreateError] = (0,
|
|
537
|
-
const [creating, setCreating] = (0,
|
|
538
|
-
const [deleting, setDeleting] = (0,
|
|
558
|
+
const [filterType, setFilterType] = (0, import_react4.useState)(defaultContentType ?? "");
|
|
559
|
+
const [showCreate, setShowCreate] = (0, import_react4.useState)(false);
|
|
560
|
+
const [createName, setCreateName] = (0, import_react4.useState)("");
|
|
561
|
+
const [createType, setCreateType] = (0, import_react4.useState)(defaultContentType ?? "");
|
|
562
|
+
const [createError, setCreateError] = (0, import_react4.useState)(null);
|
|
563
|
+
const [creating, setCreating] = (0, import_react4.useState)(false);
|
|
564
|
+
const [deleting, setDeleting] = (0, import_react4.useState)(null);
|
|
539
565
|
const handleFilter = () => void fetchContents(filterType || void 0);
|
|
540
566
|
const handleCreate = async () => {
|
|
541
567
|
setCreateError(null);
|
|
@@ -575,28 +601,28 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
575
601
|
}
|
|
576
602
|
};
|
|
577
603
|
const rows = contents.map((c) => ({ ...c, id: c.key }));
|
|
578
|
-
return /* @__PURE__ */ (0,
|
|
579
|
-
/* @__PURE__ */ (0,
|
|
580
|
-
/* @__PURE__ */ (0,
|
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "32px 24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Stack, { scale: "l", children: [
|
|
605
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { justifyContent: "space-between", alignItems: "center", children: [
|
|
606
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "m", alignItems: "center", children: [
|
|
581
607
|
backButton,
|
|
582
|
-
/* @__PURE__ */ (0,
|
|
608
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Headline, { as: "h1", children: "Content Items" })
|
|
583
609
|
] }),
|
|
584
|
-
/* @__PURE__ */ (0,
|
|
610
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
585
611
|
import_primary_button2.default,
|
|
586
612
|
{
|
|
587
613
|
label: "New Content",
|
|
588
|
-
iconLeft: /* @__PURE__ */ (0,
|
|
614
|
+
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.PlusThinIcon, {}),
|
|
589
615
|
onClick: () => setShowCreate((v) => !v)
|
|
590
616
|
}
|
|
591
617
|
)
|
|
592
618
|
] }),
|
|
593
|
-
showCreate && /* @__PURE__ */ (0,
|
|
594
|
-
/* @__PURE__ */ (0,
|
|
595
|
-
createError && /* @__PURE__ */ (0,
|
|
596
|
-
/* @__PURE__ */ (0,
|
|
597
|
-
/* @__PURE__ */ (0,
|
|
598
|
-
/* @__PURE__ */ (0,
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
619
|
+
showCreate && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_card2.default, { insetScale: "l", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Stack, { scale: "m", children: [
|
|
620
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Subheadline, { as: "h4", isBold: true, children: "Create Content Item" }),
|
|
621
|
+
createError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "negative", children: createError }),
|
|
622
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "m", children: [
|
|
623
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Stack, { scale: "xs", children: [
|
|
624
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_label2.default, { htmlFor: "create-content-name", children: "Name" }),
|
|
625
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
600
626
|
import_text_input2.default,
|
|
601
627
|
{
|
|
602
628
|
id: "create-content-name",
|
|
@@ -606,9 +632,9 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
606
632
|
}
|
|
607
633
|
)
|
|
608
634
|
] }) }),
|
|
609
|
-
/* @__PURE__ */ (0,
|
|
610
|
-
/* @__PURE__ */ (0,
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
635
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Stack, { scale: "xs", children: [
|
|
636
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_label2.default, { htmlFor: "create-content-type", children: "Content Type" }),
|
|
637
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
612
638
|
import_text_input2.default,
|
|
613
639
|
{
|
|
614
640
|
id: "create-content-type",
|
|
@@ -619,8 +645,8 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
619
645
|
)
|
|
620
646
|
] }) })
|
|
621
647
|
] }),
|
|
622
|
-
/* @__PURE__ */ (0,
|
|
623
|
-
/* @__PURE__ */ (0,
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "s", children: [
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
624
650
|
import_primary_button2.default,
|
|
625
651
|
{
|
|
626
652
|
label: creating ? "Creating\u2026" : "Create",
|
|
@@ -628,11 +654,11 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
628
654
|
isDisabled: creating
|
|
629
655
|
}
|
|
630
656
|
),
|
|
631
|
-
/* @__PURE__ */ (0,
|
|
657
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_secondary_button2.default, { label: "Cancel", onClick: () => setShowCreate(false) })
|
|
632
658
|
] })
|
|
633
659
|
] }) }),
|
|
634
|
-
/* @__PURE__ */ (0,
|
|
635
|
-
/* @__PURE__ */ (0,
|
|
660
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
|
|
661
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, maxWidth: "280px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
636
662
|
import_text_input2.default,
|
|
637
663
|
{
|
|
638
664
|
value: filterType,
|
|
@@ -640,15 +666,15 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
640
666
|
placeholder: "Filter by content type\u2026"
|
|
641
667
|
}
|
|
642
668
|
) }),
|
|
643
|
-
/* @__PURE__ */ (0,
|
|
669
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
644
670
|
import_secondary_button2.default,
|
|
645
671
|
{
|
|
646
672
|
label: "Filter",
|
|
647
|
-
iconLeft: /* @__PURE__ */ (0,
|
|
673
|
+
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.SearchIcon, {}),
|
|
648
674
|
onClick: handleFilter
|
|
649
675
|
}
|
|
650
676
|
),
|
|
651
|
-
/* @__PURE__ */ (0,
|
|
677
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
652
678
|
import_flat_button2.default,
|
|
653
679
|
{
|
|
654
680
|
label: "Clear",
|
|
@@ -658,10 +684,10 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
658
684
|
}
|
|
659
685
|
}
|
|
660
686
|
),
|
|
661
|
-
/* @__PURE__ */ (0,
|
|
687
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_flat_button2.default, { label: "Refresh", onClick: () => void refresh() })
|
|
662
688
|
] }),
|
|
663
|
-
error && /* @__PURE__ */ (0,
|
|
664
|
-
loading ? /* @__PURE__ */ (0,
|
|
689
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "negative", children: error }),
|
|
690
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_loading_spinner3.default, {}) }) : contents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_spacings3.default.Stack, { scale: "m", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "secondary", children: "No content items found." }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
665
691
|
import_data_table2.default,
|
|
666
692
|
{
|
|
667
693
|
columns: COLUMNS,
|
|
@@ -669,9 +695,9 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
669
695
|
itemRenderer: (row, column) => {
|
|
670
696
|
switch (column.key) {
|
|
671
697
|
case "name":
|
|
672
|
-
return /* @__PURE__ */ (0,
|
|
698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { fontWeight: "bold", children: row.value.name });
|
|
673
699
|
case "contentType":
|
|
674
|
-
return /* @__PURE__ */ (0,
|
|
700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
675
701
|
"code",
|
|
676
702
|
{
|
|
677
703
|
style: {
|
|
@@ -687,17 +713,17 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
687
713
|
case "status": {
|
|
688
714
|
const hasDraft = !!row.states.draft;
|
|
689
715
|
const hasPublished = !!row.states.published;
|
|
690
|
-
return /* @__PURE__ */ (0,
|
|
691
|
-
hasDraft && /* @__PURE__ */ (0,
|
|
692
|
-
hasPublished && /* @__PURE__ */ (0,
|
|
693
|
-
!hasDraft && !hasPublished && /* @__PURE__ */ (0,
|
|
716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "inline-flex", gap: "4px", flexWrap: "wrap" }, children: [
|
|
717
|
+
hasDraft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_stamp2.default, { tone: "warning", label: "Draft", isCondensed: true }),
|
|
718
|
+
hasPublished && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_stamp2.default, { tone: "positive", label: "Published", isCondensed: true }),
|
|
719
|
+
!hasDraft && !hasPublished && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_stamp2.default, { tone: "secondary", label: "No state", isCondensed: true })
|
|
694
720
|
] });
|
|
695
721
|
}
|
|
696
722
|
case "updatedAt":
|
|
697
|
-
return /* @__PURE__ */ (0,
|
|
723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "secondary", children: new Date(row.value.updatedAt).toLocaleDateString() });
|
|
698
724
|
case "actions":
|
|
699
|
-
return /* @__PURE__ */ (0,
|
|
700
|
-
/* @__PURE__ */ (0,
|
|
725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
|
|
726
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
701
727
|
import_primary_button2.default,
|
|
702
728
|
{
|
|
703
729
|
label: "Edit",
|
|
@@ -705,7 +731,7 @@ var ContentListRoute = ({ defaultContentType, backButton }) => {
|
|
|
705
731
|
onClick: () => history.push(`/${row.key}`, { contentName: row.value.name })
|
|
706
732
|
}
|
|
707
733
|
),
|
|
708
|
-
/* @__PURE__ */ (0,
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
709
735
|
import_flat_button2.default,
|
|
710
736
|
{
|
|
711
737
|
tone: "critical",
|
|
@@ -740,9 +766,9 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
740
766
|
revertToPublished,
|
|
741
767
|
loadVersions
|
|
742
768
|
} = (0, import_puck_api3.usePuckContent)(contentKey);
|
|
743
|
-
const latestDataRef = (0,
|
|
744
|
-
const [hasUnsavedChanges, setHasUnsavedChanges] = (0,
|
|
745
|
-
const [isApplyingVersion, setIsApplyingVersion] = (0,
|
|
769
|
+
const latestDataRef = (0, import_react4.useRef)(null);
|
|
770
|
+
const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react4.useState)(false);
|
|
771
|
+
const [isApplyingVersion, setIsApplyingVersion] = (0, import_react4.useState)(false);
|
|
746
772
|
const currentData = states.draft?.data ?? content?.data ?? { content: [], root: { props: {} } };
|
|
747
773
|
const versionHistory = (0, import_puck_version_history2.useVersionHistoryPanel)({
|
|
748
774
|
versions,
|
|
@@ -750,14 +776,14 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
750
776
|
currentData
|
|
751
777
|
});
|
|
752
778
|
const diff = (0, import_puck_version_history2.useVersionDiff)(versionHistory.previewData, currentData);
|
|
753
|
-
const isPreviewingRef = (0,
|
|
779
|
+
const isPreviewingRef = (0, import_react4.useRef)(false);
|
|
754
780
|
isPreviewingRef.current = versionHistory.isPreviewingHistory;
|
|
755
|
-
const handleChange = (0,
|
|
781
|
+
const handleChange = (0, import_react4.useCallback)((data) => {
|
|
756
782
|
if (isPreviewingRef.current) return;
|
|
757
783
|
latestDataRef.current = data;
|
|
758
784
|
setHasUnsavedChanges(true);
|
|
759
785
|
}, []);
|
|
760
|
-
const handleSave = (0,
|
|
786
|
+
const handleSave = (0, import_react4.useCallback)(async () => {
|
|
761
787
|
const data = latestDataRef.current;
|
|
762
788
|
if (!data) return;
|
|
763
789
|
try {
|
|
@@ -767,7 +793,7 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
767
793
|
console.error("[ContentManagerRouter] save error:", err);
|
|
768
794
|
}
|
|
769
795
|
}, [saveDraft]);
|
|
770
|
-
const handlePublish = (0,
|
|
796
|
+
const handlePublish = (0, import_react4.useCallback)(
|
|
771
797
|
async (data) => {
|
|
772
798
|
try {
|
|
773
799
|
await saveDraft(data);
|
|
@@ -779,7 +805,7 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
779
805
|
},
|
|
780
806
|
[saveDraft, publish]
|
|
781
807
|
);
|
|
782
|
-
const handleRevert = (0,
|
|
808
|
+
const handleRevert = (0, import_react4.useCallback)(async () => {
|
|
783
809
|
try {
|
|
784
810
|
await revertToPublished();
|
|
785
811
|
setHasUnsavedChanges(false);
|
|
@@ -787,7 +813,7 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
787
813
|
console.error("[ContentManagerRouter] revert error:", err);
|
|
788
814
|
}
|
|
789
815
|
}, [revertToPublished]);
|
|
790
|
-
const handleApplyVersion = (0,
|
|
816
|
+
const handleApplyVersion = (0, import_react4.useCallback)(async () => {
|
|
791
817
|
const versionData = versionHistory.previewData;
|
|
792
818
|
if (!versionData) return;
|
|
793
819
|
setIsApplyingVersion(true);
|
|
@@ -801,7 +827,7 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
801
827
|
setIsApplyingVersion(false);
|
|
802
828
|
}
|
|
803
829
|
}, [versionHistory, saveDraft]);
|
|
804
|
-
const contentConfig = (0,
|
|
830
|
+
const contentConfig = (0, import_react4.useMemo)(() => {
|
|
805
831
|
const otherRootFields = Object.fromEntries(
|
|
806
832
|
Object.entries(config.root?.fields ?? {}).filter(([k]) => k !== "title")
|
|
807
833
|
);
|
|
@@ -823,21 +849,21 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
823
849
|
};
|
|
824
850
|
}, [config]);
|
|
825
851
|
if (loading) {
|
|
826
|
-
return /* @__PURE__ */ (0,
|
|
827
|
-
/* @__PURE__ */ (0,
|
|
828
|
-
/* @__PURE__ */ (0,
|
|
852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Stack, { scale: "m", alignItems: "center", children: [
|
|
853
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_loading_spinner3.default, {}),
|
|
854
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "secondary", children: "Loading editor\u2026" })
|
|
829
855
|
] }) });
|
|
830
856
|
}
|
|
831
857
|
if (error) {
|
|
832
|
-
return /* @__PURE__ */ (0,
|
|
833
|
-
/* @__PURE__ */ (0,
|
|
858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_text3.default.Body, { tone: "negative", children: [
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Error loading content:" }),
|
|
834
860
|
" ",
|
|
835
861
|
error
|
|
836
862
|
] }) });
|
|
837
863
|
}
|
|
838
864
|
const activeData = versionHistory.previewData ?? currentData;
|
|
839
865
|
const toolbarStates = states;
|
|
840
|
-
return /* @__PURE__ */ (0,
|
|
866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
841
867
|
import_puck_version_history2.VersionHistoryProvider,
|
|
842
868
|
{
|
|
843
869
|
diff,
|
|
@@ -850,23 +876,23 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
850
876
|
onApply: () => void handleApplyVersion(),
|
|
851
877
|
onDiscard: versionHistory.clearSelection,
|
|
852
878
|
onLoadVersions: versionHistory.openPanel,
|
|
853
|
-
children: /* @__PURE__ */ (0,
|
|
854
|
-
/* @__PURE__ */ (0,
|
|
879
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: NAV_BAR_STYLE, children: [
|
|
855
881
|
backButton,
|
|
856
|
-
backButton && /* @__PURE__ */ (0,
|
|
857
|
-
/* @__PURE__ */ (0,
|
|
882
|
+
backButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "secondary", children: "/" }),
|
|
883
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
858
884
|
import_flat_button2.default,
|
|
859
885
|
{
|
|
860
886
|
label: "Content Items",
|
|
861
|
-
icon: /* @__PURE__ */ (0,
|
|
887
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.AngleLeftIcon, {}),
|
|
862
888
|
iconPosition: "left",
|
|
863
889
|
onClick: () => history.push("/")
|
|
864
890
|
}
|
|
865
891
|
),
|
|
866
|
-
/* @__PURE__ */ (0,
|
|
867
|
-
/* @__PURE__ */ (0,
|
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { tone: "secondary", children: "/" }),
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_text3.default.Body, { fontWeight: "bold", children: contentName })
|
|
868
894
|
] }),
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_puck_editor2.ComponentSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
870
896
|
import_puck3.Puck,
|
|
871
897
|
{
|
|
872
898
|
config: contentConfig,
|
|
@@ -874,8 +900,8 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
874
900
|
onChange: handleChange,
|
|
875
901
|
onPublish: handlePublish,
|
|
876
902
|
overrides: {
|
|
877
|
-
headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0,
|
|
878
|
-
/* @__PURE__ */ (0,
|
|
903
|
+
headerActions: () => versionHistory.isPreviewingHistory ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_spacings3.default.Inline, { scale: "s", alignItems: "center", children: [
|
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
879
905
|
import_puck_version_history2.VersionPreviewBanner,
|
|
880
906
|
{
|
|
881
907
|
timestamp: versionHistory.selectedVersion.timestamp,
|
|
@@ -884,8 +910,8 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
884
910
|
isApplying: isApplyingVersion
|
|
885
911
|
}
|
|
886
912
|
),
|
|
887
|
-
/* @__PURE__ */ (0,
|
|
888
|
-
] }) : /* @__PURE__ */ (0,
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_puck_version_history2.VersionHistoryButton, { disabled: isApplyingVersion })
|
|
914
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
889
915
|
import_puck_editor2.EditorToolbar,
|
|
890
916
|
{
|
|
891
917
|
saving,
|
|
@@ -897,9 +923,9 @@ var ContentEditorRoute = ({ config, backButton }) => {
|
|
|
897
923
|
showPublishButton: true
|
|
898
924
|
}
|
|
899
925
|
),
|
|
900
|
-
components: ({ children }) => /* @__PURE__ */ (0,
|
|
901
|
-
componentItem: ({ children, name }) => /* @__PURE__ */ (0,
|
|
902
|
-
fields: ({ children, isLoading }) => /* @__PURE__ */ (0,
|
|
926
|
+
components: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_puck_editor2.ComponentsPanel, { children }),
|
|
927
|
+
componentItem: ({ children, name }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_puck_editor2.ComponentItemFilter, { name, children }),
|
|
928
|
+
fields: ({ children, isLoading }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_puck_version_history2.VersionAwareFieldsPanel, { isLoading, children })
|
|
903
929
|
}
|
|
904
930
|
},
|
|
905
931
|
versionHistory.selectedVersionId ?? "current"
|
|
@@ -912,20 +938,20 @@ var ContentManagerRouterInner = ({
|
|
|
912
938
|
config,
|
|
913
939
|
defaultContentType,
|
|
914
940
|
backButton
|
|
915
|
-
}) => /* @__PURE__ */ (0,
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
941
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router_dom.Switch, { children: [
|
|
942
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
917
943
|
import_react_router_dom.Route,
|
|
918
944
|
{
|
|
919
945
|
exact: true,
|
|
920
946
|
path: "/",
|
|
921
|
-
render: () => /* @__PURE__ */ (0,
|
|
947
|
+
render: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContentListRoute, { defaultContentType, backButton })
|
|
922
948
|
}
|
|
923
949
|
),
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
950
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
925
951
|
import_react_router_dom.Route,
|
|
926
952
|
{
|
|
927
953
|
path: "/:contentKey",
|
|
928
|
-
render: () => /* @__PURE__ */ (0,
|
|
954
|
+
render: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContentEditorRoute, { config, backButton })
|
|
929
955
|
}
|
|
930
956
|
)
|
|
931
957
|
] });
|
|
@@ -938,14 +964,14 @@ var ContentManager = ({
|
|
|
938
964
|
config = DEFAULT_CONFIG,
|
|
939
965
|
defaultContentType,
|
|
940
966
|
backButton
|
|
941
|
-
}) => /* @__PURE__ */ (0,
|
|
967
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EnsureIntlProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
942
968
|
import_puck_api3.PuckApiProvider,
|
|
943
969
|
{
|
|
944
970
|
baseURL,
|
|
945
971
|
projectKey,
|
|
946
972
|
businessUnitKey,
|
|
947
973
|
jwtToken,
|
|
948
|
-
children: /* @__PURE__ */ (0,
|
|
974
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_router_dom.BrowserRouter, { basename: parentUrl, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
949
975
|
ContentManagerRouterInner,
|
|
950
976
|
{
|
|
951
977
|
config,
|
|
@@ -954,7 +980,7 @@ var ContentManager = ({
|
|
|
954
980
|
}
|
|
955
981
|
) })
|
|
956
982
|
}
|
|
957
|
-
);
|
|
983
|
+
) });
|
|
958
984
|
// Annotate the CommonJS export names for ESM import in node:
|
|
959
985
|
0 && (module.exports = {
|
|
960
986
|
ContentEditor,
|