@contentstack/live-preview-utils 2.0.3 → 2.0.4
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/README.md +2 -2
- package/dist/legacy/compare.cjs +72 -66
- package/dist/legacy/compare.cjs.map +1 -1
- package/dist/legacy/compare.js +72 -66
- package/dist/legacy/compare.js.map +1 -1
- package/dist/legacy/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/legacy/contentstack-live-preview-HOC.js +1 -1
- package/dist/legacy/index.cjs.map +1 -1
- package/dist/legacy/index.d.cts +3 -2
- package/dist/legacy/index.d.ts +3 -2
- package/dist/legacy/index.js.map +1 -1
- package/dist/legacy/live-preview.cjs +20 -6
- package/dist/legacy/live-preview.cjs.map +1 -1
- package/dist/legacy/live-preview.js +20 -6
- package/dist/legacy/live-preview.js.map +1 -1
- package/dist/legacy/utils/cslpdata.cjs +62 -0
- package/dist/legacy/utils/cslpdata.cjs.map +1 -0
- package/dist/legacy/utils/cslpdata.d.cts +16 -0
- package/dist/legacy/utils/cslpdata.d.ts +16 -0
- package/dist/legacy/utils/cslpdata.js +37 -0
- package/dist/legacy/utils/cslpdata.js.map +1 -0
- package/dist/modern/compare.cjs +72 -66
- package/dist/modern/compare.cjs.map +1 -1
- package/dist/modern/compare.js +72 -66
- package/dist/modern/compare.js.map +1 -1
- package/dist/modern/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/modern/contentstack-live-preview-HOC.js +1 -1
- package/dist/modern/index.cjs.map +1 -1
- package/dist/modern/index.d.cts +3 -2
- package/dist/modern/index.d.ts +3 -2
- package/dist/modern/index.js.map +1 -1
- package/dist/modern/live-preview.cjs +20 -6
- package/dist/modern/live-preview.cjs.map +1 -1
- package/dist/modern/live-preview.js +20 -6
- package/dist/modern/live-preview.js.map +1 -1
- package/dist/modern/utils/cslpdata.cjs +62 -0
- package/dist/modern/utils/cslpdata.cjs.map +1 -0
- package/dist/modern/utils/cslpdata.d.cts +16 -0
- package/dist/modern/utils/cslpdata.d.ts +16 -0
- package/dist/modern/utils/cslpdata.js +37 -0
- package/dist/modern/utils/cslpdata.js.map +1 -0
- package/package.json +5 -2
package/dist/modern/compare.cjs
CHANGED
|
@@ -33,7 +33,6 @@ __export(compare_exports, {
|
|
|
33
33
|
handleWebCompare: () => handleWebCompare
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(compare_exports);
|
|
36
|
-
var import_post_robot = __toESM(require("post-robot"), 1);
|
|
37
36
|
var import_compare = require("./styles/compare.cjs");
|
|
38
37
|
var import_compare2 = require("./utils/compare.cjs");
|
|
39
38
|
var voidElements = /* @__PURE__ */ new Set([
|
|
@@ -55,76 +54,83 @@ var voidElements = /* @__PURE__ */ new Set([
|
|
|
55
54
|
]);
|
|
56
55
|
var LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";
|
|
57
56
|
function handleWebCompare() {
|
|
58
|
-
(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
57
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
import("post-robot").then((postRobot) => {
|
|
61
|
+
(0, import_compare.loadCompareGlobalStyle)();
|
|
62
|
+
(0, import_compare2.registerCompareElement)();
|
|
63
|
+
postRobot.on("send-current-base-route", async () => {
|
|
64
|
+
return { url: window.location.href.split("?")[0] };
|
|
65
|
+
});
|
|
66
|
+
postRobot.on("send-cslp-data", async () => {
|
|
67
|
+
const elements = Array.from(
|
|
68
|
+
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
69
|
+
);
|
|
70
|
+
const map = {};
|
|
71
|
+
for (const element of elements) {
|
|
72
|
+
const cslp = element.getAttribute("data-cslp");
|
|
73
|
+
if (element.hasAttributes() && voidElements.has(element.tagName.toLowerCase())) {
|
|
74
|
+
let attributes = "";
|
|
75
|
+
for (const attr of element.attributes) {
|
|
76
|
+
attributes += `${attr.name} -> ${attr.value}
|
|
74
77
|
`;
|
|
78
|
+
}
|
|
79
|
+
map[cslp] = attributes;
|
|
80
|
+
} else {
|
|
81
|
+
map[cslp] = element.innerHTML;
|
|
75
82
|
}
|
|
76
|
-
map[cslp] = attributes;
|
|
77
|
-
} else {
|
|
78
|
-
map[cslp] = element.innerHTML;
|
|
79
83
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
prev.appendChild(prev.nextSibling);
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
import_post_robot.default.on("diff-value", async ({ data }) => {
|
|
93
|
-
const { diff, type } = data;
|
|
94
|
-
const operation = type === "base" ? "removed" : "added";
|
|
95
|
-
const elements = Array.from(
|
|
96
|
-
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
97
|
-
);
|
|
98
|
-
for (const element of elements) {
|
|
99
|
-
const path = element.getAttribute("data-cslp");
|
|
100
|
-
if (!diff[path])
|
|
101
|
-
continue;
|
|
102
|
-
if (voidElements.has(element.tagName.toLowerCase())) {
|
|
103
|
-
element.classList.add(`cs-compare__void--${operation}`);
|
|
104
|
-
} else {
|
|
105
|
-
element.innerHTML = diff[path];
|
|
84
|
+
return map;
|
|
85
|
+
});
|
|
86
|
+
const mergeColors = (className = ".cs-compare--added") => {
|
|
87
|
+
const elements = Array.from(document.querySelectorAll(className));
|
|
88
|
+
for (let i = 1; i < elements.length; i++) {
|
|
89
|
+
const prev = elements[i - 1];
|
|
90
|
+
const next = elements[i];
|
|
91
|
+
if (prev.nextElementSibling === next)
|
|
92
|
+
prev.appendChild(prev.nextSibling);
|
|
106
93
|
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
94
|
+
};
|
|
95
|
+
postRobot.on("diff-value", async ({ data }) => {
|
|
96
|
+
const { diff, type } = data;
|
|
97
|
+
const operation = type === "base" ? "removed" : "added";
|
|
98
|
+
const elements = Array.from(
|
|
99
|
+
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
100
|
+
);
|
|
101
|
+
for (const element of elements) {
|
|
102
|
+
const path = element.getAttribute("data-cslp");
|
|
103
|
+
if (!diff[path])
|
|
104
|
+
continue;
|
|
105
|
+
if (voidElements.has(element.tagName.toLowerCase())) {
|
|
106
|
+
element.classList.add(`cs-compare__void--${operation}`);
|
|
107
|
+
} else {
|
|
108
|
+
element.innerHTML = diff[path];
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
mergeColors(`.cs-compare--${operation}`);
|
|
112
|
+
});
|
|
113
|
+
postRobot.on("remove-diff", async () => {
|
|
114
|
+
const elements = Array.from(
|
|
115
|
+
document.querySelectorAll("cs-compare")
|
|
116
|
+
);
|
|
117
|
+
for (const element of elements) {
|
|
118
|
+
const parent = element.parentElement;
|
|
119
|
+
while (element.firstChild) {
|
|
120
|
+
parent.insertBefore(element.firstChild, element);
|
|
121
|
+
}
|
|
122
|
+
parent.removeChild(element);
|
|
123
|
+
}
|
|
124
|
+
const voidElements2 = Array.from(
|
|
125
|
+
document.querySelectorAll(
|
|
126
|
+
".cs-compare__void--added, .cs-compare__void--removed"
|
|
127
|
+
)
|
|
128
|
+
);
|
|
129
|
+
for (const element of voidElements2) {
|
|
130
|
+
element.classList.remove("cs-compare__void--added");
|
|
131
|
+
element.classList.remove("cs-compare__void--removed");
|
|
116
132
|
}
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
const voidElements2 = Array.from(
|
|
120
|
-
document.querySelectorAll(
|
|
121
|
-
".cs-compare__void--added, .cs-compare__void--removed"
|
|
122
|
-
)
|
|
123
|
-
);
|
|
124
|
-
for (const element of voidElements2) {
|
|
125
|
-
element.classList.remove("cs-compare__void--added");
|
|
126
|
-
element.classList.remove("cs-compare__void--removed");
|
|
127
|
-
}
|
|
133
|
+
});
|
|
128
134
|
});
|
|
129
135
|
}
|
|
130
136
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import { loadCompareGlobalStyle } from \"./styles/compare\";\nimport { registerCompareElement } from \"./utils/compare\";\n\nconst voidElements = new Set([\n \"area\",\n \"base\",\n \"br\",\n \"col\",\n \"embed\",\n \"hr\",\n \"img\",\n \"input\",\n \"keygen\",\n \"link\",\n \"meta\",\n \"param\",\n \"source\",\n \"track\",\n \"wbr\",\n]);\n\nconst LEAF_CSLP_SELECTOR = \"[data-cslp]:not(:has([data-cslp]))\";\n\nexport function handleWebCompare() {\n // Check if window and document are available\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n // Server-side, don't execute client-specific logic\n return;\n }\n\n // Client-side logic\n import(\"post-robot\").then((postRobot) => {\n loadCompareGlobalStyle();\n registerCompareElement();\n\n postRobot.on(\"send-current-base-route\", async () => {\n return { url: window.location.href.split(\"?\")[0] };\n });\n\n postRobot.on(\"send-cslp-data\", async () => {\n const elements = Array.from(\n document.querySelectorAll(LEAF_CSLP_SELECTOR)\n );\n const map: Record<string, string> = {};\n for (const element of elements) {\n const cslp = element.getAttribute(\"data-cslp\")!;\n if (\n element.hasAttributes() &&\n voidElements.has(element.tagName.toLowerCase())\n ) {\n let attributes = \"\";\n for (const attr of element.attributes) {\n attributes += `${attr.name} -> ${attr.value}\\n`;\n }\n map[cslp] = attributes;\n } else {\n map[cslp] = element.innerHTML;\n }\n }\n return map;\n });\n\n const mergeColors = (className = \".cs-compare--added\") => {\n const elements = Array.from(document.querySelectorAll(className));\n for (let i = 1; i < elements.length; i++) {\n const prev = elements[i - 1];\n const next = elements[i];\n if (prev.nextElementSibling === next)\n prev.appendChild(prev.nextSibling!);\n }\n };\n\n postRobot.on(\"diff-value\", async ({ data }) => {\n const { diff, type } = data;\n const operation = type === \"base\" ? \"removed\" : \"added\";\n const elements = Array.from(\n document.querySelectorAll(LEAF_CSLP_SELECTOR)\n );\n for (const element of elements) {\n const path = element.getAttribute(\"data-cslp\")!;\n if (!diff[path]) continue;\n\n if (voidElements.has(element.tagName.toLowerCase())) {\n element.classList.add(`cs-compare__void--${operation}`);\n } else {\n element.innerHTML = diff[path];\n }\n }\n\n mergeColors(`.cs-compare--${operation}`);\n });\n\n postRobot.on(\"remove-diff\", async () => {\n // unwrap the cs-compare tags\n const elements = Array.from(\n document.querySelectorAll(\"cs-compare\")\n );\n for (const element of elements) {\n const parent = element.parentElement!;\n while (element.firstChild) {\n parent.insertBefore(element.firstChild, element);\n }\n parent.removeChild(element);\n }\n // remove classes cs-compare__void--added and cs-compare__void--removed\n const voidElements = Array.from(\n document.querySelectorAll(\n \".cs-compare__void--added, .cs-compare__void--removed\"\n )\n );\n for (const element of voidElements) {\n element.classList.remove(\"cs-compare__void--added\");\n element.classList.remove(\"cs-compare__void--removed\");\n }\n });\n });\n}\n"],"mappings":"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","names":["import_compare","voidElements"]}
|
package/dist/modern/compare.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// src/compare.ts
|
|
2
|
-
import postRobot from "post-robot";
|
|
3
2
|
import { loadCompareGlobalStyle } from "./styles/compare.js";
|
|
4
3
|
import { registerCompareElement } from "./utils/compare.js";
|
|
5
4
|
var voidElements = /* @__PURE__ */ new Set([
|
|
@@ -21,76 +20,83 @@ var voidElements = /* @__PURE__ */ new Set([
|
|
|
21
20
|
]);
|
|
22
21
|
var LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";
|
|
23
22
|
function handleWebCompare() {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
23
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
import("post-robot").then((postRobot) => {
|
|
27
|
+
loadCompareGlobalStyle();
|
|
28
|
+
registerCompareElement();
|
|
29
|
+
postRobot.on("send-current-base-route", async () => {
|
|
30
|
+
return { url: window.location.href.split("?")[0] };
|
|
31
|
+
});
|
|
32
|
+
postRobot.on("send-cslp-data", async () => {
|
|
33
|
+
const elements = Array.from(
|
|
34
|
+
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
35
|
+
);
|
|
36
|
+
const map = {};
|
|
37
|
+
for (const element of elements) {
|
|
38
|
+
const cslp = element.getAttribute("data-cslp");
|
|
39
|
+
if (element.hasAttributes() && voidElements.has(element.tagName.toLowerCase())) {
|
|
40
|
+
let attributes = "";
|
|
41
|
+
for (const attr of element.attributes) {
|
|
42
|
+
attributes += `${attr.name} -> ${attr.value}
|
|
40
43
|
`;
|
|
44
|
+
}
|
|
45
|
+
map[cslp] = attributes;
|
|
46
|
+
} else {
|
|
47
|
+
map[cslp] = element.innerHTML;
|
|
41
48
|
}
|
|
42
|
-
map[cslp] = attributes;
|
|
43
|
-
} else {
|
|
44
|
-
map[cslp] = element.innerHTML;
|
|
45
49
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
prev.appendChild(prev.nextSibling);
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
postRobot.on("diff-value", async ({ data }) => {
|
|
59
|
-
const { diff, type } = data;
|
|
60
|
-
const operation = type === "base" ? "removed" : "added";
|
|
61
|
-
const elements = Array.from(
|
|
62
|
-
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
63
|
-
);
|
|
64
|
-
for (const element of elements) {
|
|
65
|
-
const path = element.getAttribute("data-cslp");
|
|
66
|
-
if (!diff[path])
|
|
67
|
-
continue;
|
|
68
|
-
if (voidElements.has(element.tagName.toLowerCase())) {
|
|
69
|
-
element.classList.add(`cs-compare__void--${operation}`);
|
|
70
|
-
} else {
|
|
71
|
-
element.innerHTML = diff[path];
|
|
50
|
+
return map;
|
|
51
|
+
});
|
|
52
|
+
const mergeColors = (className = ".cs-compare--added") => {
|
|
53
|
+
const elements = Array.from(document.querySelectorAll(className));
|
|
54
|
+
for (let i = 1; i < elements.length; i++) {
|
|
55
|
+
const prev = elements[i - 1];
|
|
56
|
+
const next = elements[i];
|
|
57
|
+
if (prev.nextElementSibling === next)
|
|
58
|
+
prev.appendChild(prev.nextSibling);
|
|
72
59
|
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
60
|
+
};
|
|
61
|
+
postRobot.on("diff-value", async ({ data }) => {
|
|
62
|
+
const { diff, type } = data;
|
|
63
|
+
const operation = type === "base" ? "removed" : "added";
|
|
64
|
+
const elements = Array.from(
|
|
65
|
+
document.querySelectorAll(LEAF_CSLP_SELECTOR)
|
|
66
|
+
);
|
|
67
|
+
for (const element of elements) {
|
|
68
|
+
const path = element.getAttribute("data-cslp");
|
|
69
|
+
if (!diff[path])
|
|
70
|
+
continue;
|
|
71
|
+
if (voidElements.has(element.tagName.toLowerCase())) {
|
|
72
|
+
element.classList.add(`cs-compare__void--${operation}`);
|
|
73
|
+
} else {
|
|
74
|
+
element.innerHTML = diff[path];
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
mergeColors(`.cs-compare--${operation}`);
|
|
78
|
+
});
|
|
79
|
+
postRobot.on("remove-diff", async () => {
|
|
80
|
+
const elements = Array.from(
|
|
81
|
+
document.querySelectorAll("cs-compare")
|
|
82
|
+
);
|
|
83
|
+
for (const element of elements) {
|
|
84
|
+
const parent = element.parentElement;
|
|
85
|
+
while (element.firstChild) {
|
|
86
|
+
parent.insertBefore(element.firstChild, element);
|
|
87
|
+
}
|
|
88
|
+
parent.removeChild(element);
|
|
89
|
+
}
|
|
90
|
+
const voidElements2 = Array.from(
|
|
91
|
+
document.querySelectorAll(
|
|
92
|
+
".cs-compare__void--added, .cs-compare__void--removed"
|
|
93
|
+
)
|
|
94
|
+
);
|
|
95
|
+
for (const element of voidElements2) {
|
|
96
|
+
element.classList.remove("cs-compare__void--added");
|
|
97
|
+
element.classList.remove("cs-compare__void--removed");
|
|
82
98
|
}
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
const voidElements2 = Array.from(
|
|
86
|
-
document.querySelectorAll(
|
|
87
|
-
".cs-compare__void--added, .cs-compare__void--removed"
|
|
88
|
-
)
|
|
89
|
-
);
|
|
90
|
-
for (const element of voidElements2) {
|
|
91
|
-
element.classList.remove("cs-compare__void--added");
|
|
92
|
-
element.classList.remove("cs-compare__void--removed");
|
|
93
|
-
}
|
|
99
|
+
});
|
|
94
100
|
});
|
|
95
101
|
}
|
|
96
102
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../src/compare.ts"],"sourcesContent":["import { loadCompareGlobalStyle } from \"./styles/compare\";\nimport { registerCompareElement } from \"./utils/compare\";\n\nconst voidElements = new Set([\n \"area\",\n \"base\",\n \"br\",\n \"col\",\n \"embed\",\n \"hr\",\n \"img\",\n \"input\",\n \"keygen\",\n \"link\",\n \"meta\",\n \"param\",\n \"source\",\n \"track\",\n \"wbr\",\n]);\n\nconst LEAF_CSLP_SELECTOR = \"[data-cslp]:not(:has([data-cslp]))\";\n\nexport function handleWebCompare() {\n // Check if window and document are available\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n // Server-side, don't execute client-specific logic\n return;\n }\n\n // Client-side logic\n import(\"post-robot\").then((postRobot) => {\n loadCompareGlobalStyle();\n registerCompareElement();\n\n postRobot.on(\"send-current-base-route\", async () => {\n return { url: window.location.href.split(\"?\")[0] };\n });\n\n postRobot.on(\"send-cslp-data\", async () => {\n const elements = Array.from(\n document.querySelectorAll(LEAF_CSLP_SELECTOR)\n );\n const map: Record<string, string> = {};\n for (const element of elements) {\n const cslp = element.getAttribute(\"data-cslp\")!;\n if (\n element.hasAttributes() &&\n voidElements.has(element.tagName.toLowerCase())\n ) {\n let attributes = \"\";\n for (const attr of element.attributes) {\n attributes += `${attr.name} -> ${attr.value}\\n`;\n }\n map[cslp] = attributes;\n } else {\n map[cslp] = element.innerHTML;\n }\n }\n return map;\n });\n\n const mergeColors = (className = \".cs-compare--added\") => {\n const elements = Array.from(document.querySelectorAll(className));\n for (let i = 1; i < elements.length; i++) {\n const prev = elements[i - 1];\n const next = elements[i];\n if (prev.nextElementSibling === next)\n prev.appendChild(prev.nextSibling!);\n }\n };\n\n postRobot.on(\"diff-value\", async ({ data }) => {\n const { diff, type } = data;\n const operation = type === \"base\" ? \"removed\" : \"added\";\n const elements = Array.from(\n document.querySelectorAll(LEAF_CSLP_SELECTOR)\n );\n for (const element of elements) {\n const path = element.getAttribute(\"data-cslp\")!;\n if (!diff[path]) continue;\n\n if (voidElements.has(element.tagName.toLowerCase())) {\n element.classList.add(`cs-compare__void--${operation}`);\n } else {\n element.innerHTML = diff[path];\n }\n }\n\n mergeColors(`.cs-compare--${operation}`);\n });\n\n postRobot.on(\"remove-diff\", async () => {\n // unwrap the cs-compare tags\n const elements = Array.from(\n document.querySelectorAll(\"cs-compare\")\n );\n for (const element of elements) {\n const parent = element.parentElement!;\n while (element.firstChild) {\n parent.insertBefore(element.firstChild, element);\n }\n parent.removeChild(element);\n }\n // remove classes cs-compare__void--added and cs-compare__void--removed\n const voidElements = Array.from(\n document.querySelectorAll(\n \".cs-compare__void--added, .cs-compare__void--removed\"\n )\n );\n for (const element of voidElements) {\n element.classList.remove(\"cs-compare__void--added\");\n element.classList.remove(\"cs-compare__void--removed\");\n }\n });\n });\n}\n"],"mappings":"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","names":["voidElements"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC, {\n ICSLivePreview,\n} from \"./contentstack-live-preview-HOC\";\n\nconst LightLivePreviewHoC = {\n init() {},\n onLiveEdit() {},\n onEntryChange(callback: () => void) {\n return callback();\n },\n get hash(): string {\n return \"\";\n },\n setConfigFromParams() {},\n};\n\nexport const ContentstackLivePreview =\n process.env.PURGE_PREVIEW_SDK || process.env.REACT_APP_PURGE_PREVIEW_SDK\n ? (LightLivePreviewHoC as unknown as ICSLivePreview)\n : ContentstackLivePreviewHOC;\n\nexport default ContentstackLivePreview;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAEO;
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC, {\n ICSLivePreview,\n} from \"./contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./utils/types\";\nexport type IStackSdk = ExternalStackSdkType;\n\nconst LightLivePreviewHoC = {\n init() {},\n onLiveEdit() {},\n onEntryChange(callback: () => void) {\n return callback();\n },\n get hash(): string {\n return \"\";\n },\n setConfigFromParams() {},\n};\n\nexport const ContentstackLivePreview =\n process.env.PURGE_PREVIEW_SDK || process.env.REACT_APP_PURGE_PREVIEW_SDK\n ? (LightLivePreviewHoC as unknown as ICSLivePreview)\n : ContentstackLivePreviewHOC;\n\nexport default ContentstackLivePreview;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAEO;AAKP,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,EAAC;AAAA,EACR,aAAa;AAAA,EAAC;AAAA,EACd,cAAc,UAAsB;AAChC,WAAO,SAAS;AAAA,EACpB;AAAA,EACA,IAAI,OAAe;AACf,WAAO;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EAAC;AAC3B;AAEO,IAAM,0BACT,QAAQ,IAAI,qBAAqB,QAAQ,IAAI,8BACtC,sBACD,qCAAAA;AAEV,IAAO,cAAQ;","names":["ContentstackLivePreviewHOC"]}
|
package/dist/modern/index.d.cts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ICSLivePreview } from './contentstack-live-preview-HOC.cjs';
|
|
2
|
-
import './utils/types.cjs';
|
|
2
|
+
import { IStackSdk as IStackSdk$1 } from './utils/types.cjs';
|
|
3
3
|
import './live-preview.cjs';
|
|
4
4
|
|
|
5
|
+
type IStackSdk = IStackSdk$1;
|
|
5
6
|
declare const ContentstackLivePreview: ICSLivePreview;
|
|
6
7
|
|
|
7
|
-
export { ContentstackLivePreview, ContentstackLivePreview as default };
|
|
8
|
+
export { ContentstackLivePreview, type IStackSdk, ContentstackLivePreview as default };
|
package/dist/modern/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ICSLivePreview } from './contentstack-live-preview-HOC.js';
|
|
2
|
-
import './utils/types.js';
|
|
2
|
+
import { IStackSdk as IStackSdk$1 } from './utils/types.js';
|
|
3
3
|
import './live-preview.js';
|
|
4
4
|
|
|
5
|
+
type IStackSdk = IStackSdk$1;
|
|
5
6
|
declare const ContentstackLivePreview: ICSLivePreview;
|
|
6
7
|
|
|
7
|
-
export { ContentstackLivePreview, ContentstackLivePreview as default };
|
|
8
|
+
export { ContentstackLivePreview, type IStackSdk, ContentstackLivePreview as default };
|
package/dist/modern/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC, {\n ICSLivePreview,\n} from \"./contentstack-live-preview-HOC\";\n\nconst LightLivePreviewHoC = {\n init() {},\n onLiveEdit() {},\n onEntryChange(callback: () => void) {\n return callback();\n },\n get hash(): string {\n return \"\";\n },\n setConfigFromParams() {},\n};\n\nexport const ContentstackLivePreview =\n process.env.PURGE_PREVIEW_SDK || process.env.REACT_APP_PURGE_PREVIEW_SDK\n ? (LightLivePreviewHoC as unknown as ICSLivePreview)\n : ContentstackLivePreviewHOC;\n\nexport default ContentstackLivePreview;\n"],"mappings":";AAAA,OAAO,gCAEA;
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC, {\n ICSLivePreview,\n} from \"./contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./utils/types\";\nexport type IStackSdk = ExternalStackSdkType;\n\nconst LightLivePreviewHoC = {\n init() {},\n onLiveEdit() {},\n onEntryChange(callback: () => void) {\n return callback();\n },\n get hash(): string {\n return \"\";\n },\n setConfigFromParams() {},\n};\n\nexport const ContentstackLivePreview =\n process.env.PURGE_PREVIEW_SDK || process.env.REACT_APP_PURGE_PREVIEW_SDK\n ? (LightLivePreviewHoC as unknown as ICSLivePreview)\n : ContentstackLivePreviewHOC;\n\nexport default ContentstackLivePreview;\n"],"mappings":";AAAA,OAAO,gCAEA;AAKP,IAAM,sBAAsB;AAAA,EACxB,OAAO;AAAA,EAAC;AAAA,EACR,aAAa;AAAA,EAAC;AAAA,EACd,cAAc,UAAsB;AAChC,WAAO,SAAS;AAAA,EACpB;AAAA,EACA,IAAI,OAAe;AACf,WAAO;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EAAC;AAC3B;AAEO,IAAM,0BACT,QAAQ,IAAI,qBAAqB,QAAQ,IAAI,8BACtC,sBACD;AAEV,IAAO,cAAQ;","names":[]}
|
|
@@ -27,6 +27,7 @@ var import_utils = require("./utils/index.cjs");
|
|
|
27
27
|
var import_public_logger = require("./utils/public-logger.cjs");
|
|
28
28
|
var import_handleUserConfig = require("./utils/handleUserConfig.cjs");
|
|
29
29
|
var import_defaults = require("./utils/defaults.cjs");
|
|
30
|
+
var import_cslpdata = require("./utils/cslpdata.cjs");
|
|
30
31
|
var import_live_preview = require("./styles/live_preview.cjs");
|
|
31
32
|
var LivePreview = class {
|
|
32
33
|
constructor(initData = import_defaults.userInitData) {
|
|
@@ -249,7 +250,7 @@ var LivePreview = class {
|
|
|
249
250
|
this.currentElementBesideTooltip = null;
|
|
250
251
|
this.tooltip.style.top = "-100%";
|
|
251
252
|
}
|
|
252
|
-
generateRedirectUrl(content_type_uid, locale = "en-us", entry_uid, preview_field) {
|
|
253
|
+
generateRedirectUrl(content_type_uid, locale = "en-us", entry_uid, variant, preview_field) {
|
|
253
254
|
if (!this.config.stackDetails.apiKey) {
|
|
254
255
|
throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.
|
|
255
256
|
|
|
@@ -277,7 +278,12 @@ var LivePreview = class {
|
|
|
277
278
|
const port = String(this.config.clientUrlParams.port);
|
|
278
279
|
const environment = String(this.config.stackDetails.environment);
|
|
279
280
|
const branch = String(this.config.stackDetails.branch || "main");
|
|
280
|
-
|
|
281
|
+
let urlHash = `!/stack/${this.config.stackDetails.apiKey}/content-type/${content_type_uid}/${locale ?? "en-us"}/entry/${entry_uid}`;
|
|
282
|
+
if (variant) {
|
|
283
|
+
urlHash += `/variant/${variant}/edit`;
|
|
284
|
+
} else {
|
|
285
|
+
urlHash += `/edit`;
|
|
286
|
+
}
|
|
281
287
|
const url = new URL(`${protocol}://${host}`);
|
|
282
288
|
url.port = port;
|
|
283
289
|
url.hash = urlHash;
|
|
@@ -294,16 +300,23 @@ var LivePreview = class {
|
|
|
294
300
|
return;
|
|
295
301
|
const cslpTag = this.tooltip.getAttribute("current-data-cslp");
|
|
296
302
|
if (cslpTag) {
|
|
297
|
-
const
|
|
303
|
+
const {
|
|
304
|
+
content_type_uid,
|
|
305
|
+
entry_uid,
|
|
306
|
+
locale,
|
|
307
|
+
variant,
|
|
308
|
+
fieldPath: field
|
|
309
|
+
} = (0, import_cslpdata.extractDetailsFromCslp)(cslpTag);
|
|
298
310
|
if (window.location !== window.parent.location) {
|
|
299
311
|
window.parent.postMessage(
|
|
300
312
|
{
|
|
301
313
|
from: "live-preview",
|
|
302
314
|
type: "scroll",
|
|
303
315
|
data: {
|
|
304
|
-
field
|
|
316
|
+
field,
|
|
305
317
|
content_type_uid,
|
|
306
318
|
entry_uid,
|
|
319
|
+
variant,
|
|
307
320
|
locale
|
|
308
321
|
}
|
|
309
322
|
},
|
|
@@ -315,7 +328,8 @@ var LivePreview = class {
|
|
|
315
328
|
content_type_uid,
|
|
316
329
|
locale,
|
|
317
330
|
entry_uid,
|
|
318
|
-
|
|
331
|
+
variant,
|
|
332
|
+
field
|
|
319
333
|
);
|
|
320
334
|
window.open(redirectUrl, "_blank");
|
|
321
335
|
} catch (error) {
|
|
@@ -424,7 +438,7 @@ var LivePreview = class {
|
|
|
424
438
|
config: {
|
|
425
439
|
shouldReload: this.config.ssr,
|
|
426
440
|
href: window.location.href,
|
|
427
|
-
sdkVersion: "2.0.
|
|
441
|
+
sdkVersion: "2.0.4"
|
|
428
442
|
}
|
|
429
443
|
}
|
|
430
444
|
},
|