@cntrl-site/sdk-nextjs 1.9.82 → 1.9.83
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/lib/common/useCurrentLayout.js +5 -3
- package/lib/components/StructuredBlockItem/StructuredComponent/StructuredComponent.js +3 -1
- package/package.json +1 -1
- package/src/common/useCurrentLayout.ts +4 -3
- package/src/components/StructuredBlockItem/StructuredComponent/StructuredComponent.tsx +2 -0
|
@@ -33,9 +33,11 @@ function useCurrentLayout() {
|
|
|
33
33
|
return;
|
|
34
34
|
return articleRectObserver.on('resize', () => {
|
|
35
35
|
const articleWidth = articleRectObserver.width;
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
const layout = getCurrentLayout(articleWidth);
|
|
37
|
+
if (!layout)
|
|
38
|
+
return;
|
|
39
|
+
setLayoutId(layout.layoutId);
|
|
40
|
+
setDeviation(articleWidth / layout.exemplary);
|
|
39
41
|
});
|
|
40
42
|
}, [articleRectObserver, getCurrentLayout]);
|
|
41
43
|
return { layoutId, layoutDeviation: deviation };
|
|
@@ -26,7 +26,9 @@ const StructuredComponent = ({ block }) => {
|
|
|
26
26
|
const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
|
|
27
27
|
const commonParameters = block.commonParams.parameters;
|
|
28
28
|
const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef,
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef,
|
|
30
|
+
// preventing layout shift while supporting SSG for proper SEO
|
|
31
|
+
style: { opacity: layout == null ? 0 : undefined }, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
|
|
30
32
|
itemId: block.id,
|
|
31
33
|
submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
|
|
32
34
|
}, portalId: "component-portal", content: block.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: block.id, children: `
|
package/package.json
CHANGED
|
@@ -42,9 +42,10 @@ export function useCurrentLayout(): UseCurrentLayoutReturn {
|
|
|
42
42
|
if (!articleRectObserver) return;
|
|
43
43
|
return articleRectObserver.on('resize', () => {
|
|
44
44
|
const articleWidth = articleRectObserver.width;
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
const layout = getCurrentLayout(articleWidth);
|
|
46
|
+
if (!layout) return;
|
|
47
|
+
setLayoutId(layout.layoutId);
|
|
48
|
+
setDeviation(articleWidth / layout.exemplary);
|
|
48
49
|
});
|
|
49
50
|
}, [articleRectObserver, getCurrentLayout]);
|
|
50
51
|
|
|
@@ -32,6 +32,8 @@ export const StructuredComponent: FC<Props> = ({ block }) => {
|
|
|
32
32
|
<div
|
|
33
33
|
className={`custom-component-${block.id}`}
|
|
34
34
|
ref={setRef}
|
|
35
|
+
// preventing layout shift while supporting SSG for proper SEO
|
|
36
|
+
style={{ opacity: layout == null ? 0 : undefined }}
|
|
35
37
|
>
|
|
36
38
|
{parameters && Element && (
|
|
37
39
|
<Element
|