@cntrl-site/sdk-nextjs 1.10.8 → 1.11.0-0

package/lib/components/StructuredBlockItem/BlockCaption/BlockCaption.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockCaption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const textStylesRule_1 = require("../textStylesRule");
+const CAPTION_GAP_PX = 5;
+/** The caption under an image: as wide as the reading column, or as the image where it is narrower, and centered under it. */
+const BlockCaption = ({ blockId, caption, layoutParams, readingWidth }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutValues = [layoutParams, readingWidth];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `structured-caption-${blockId}`, children: caption }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-caption-${blockId}`, children: `
+        .structured-caption-${blockId} {
+          margin-left: auto;
+          margin-right: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([params, width], exemplary) => (`
+          .structured-caption-${blockId} {
+            width: ${width !== undefined ? `min(${width * 100}vw, 100%)` : '100%'};
+            margin-top: ${CAPTION_GAP_PX / exemplary * 100}vw;
+          }
+          ${(params === null || params === void 0 ? void 0 : params.captionStyles) ? (0, textStylesRule_1.textStylesRule)(`.structured-caption-${blockId}`, params.captionStyles) : ''}
+        `))}
+      ` })] }));
+};
+exports.BlockCaption = BlockCaption;

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -9,51 +9,26 @@ const sdk_1 = require("@cntrl-site/sdk");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useSizing_1 = require("../items/useSizing");
-const StructuredComponent_1 = require("./StructuredComponent/StructuredComponent");
-const noop = () => null;
-const itemsMap = {
-    [sdk_1.StructuredBlockType.Component]: StructuredComponent_1.StructuredComponent,
-    [sdk_1.StructuredBlockType.RichText]: noop,
-    [sdk_1.StructuredBlockType.Image]: noop,
-    [sdk_1.StructuredBlockType.VimeoEmbed]: noop,
-    [sdk_1.StructuredBlockType.YoutubeEmbed]: noop,
-};
-const StructuredBlockItem = ({ block, maxWidthMap }) => {
+const blockPlacement_1 = require("./blockPlacement");
+const blocksMap_1 = require("./blocksMap");
+const StructuredBlockItem = ({ block, readingWidth }) => {
     var _a;
     const reactId = (0, react_1.useId)();
     const id = `${reactId}-item-${block.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const layoutValues = [block.area, block.layoutParams, (_a = block.hidden) !== null && _a !== void 0 ? _a : {}, maxWidthMap];
-    const ItemComponent = itemsMap[block.type] || noop;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { block: block }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
-                    var _a, _b;
-                    const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
-                    return (`
-                .structured-block-item-${block.id} {
-                  display: ${hidden ? 'none' : 'block'};
-                  align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
-                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
-                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  margin-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  outline: none;
-                  left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
-                  position: relative;
-                  z-index: ${area.zIndex};
-                }
-              `);
-                })}
-        ` })] }));
+    const layoutValues = [block.area, block.layoutParams, (_a = block.hidden) !== null && _a !== void 0 ? _a : {}];
+    const BlockComponent = blocksMap_1.blocksMap[block.type];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `structured-block-item-${block.id}`, children: [(0, jsx_runtime_1.jsx)(BlockComponent, { block: block, readingWidth: readingWidth }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hidden]) => (`
+          .structured-block-item-${block.id} {
+            display: ${hidden ? 'none' : 'block'};
+            position: relative;
+            z-index: ${area.zIndex};
+            margin-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 0};
+            outline: none;
+            ${(0, blockPlacement_1.blockPlacement)(area, layoutParams)}
+          }
+        `))}
+      ` })] }));
 };
 exports.StructuredBlockItem = StructuredBlockItem;
-function getAlignSelf(alignment) {
-    switch (alignment) {
-        case 'left':
-            return 'start';
-        case 'right':
-            return 'end';
-        default:
-            return 'center';
-    }
-}

package/lib/components/StructuredBlockItem/StructuredCode/StructuredCode.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+// the box and its type are fixed, in pixels of the layout, scaled with it like everything drawn in it
+const BOX = { paddingTop: 14, paddingRight: 18, paddingBottom: 16, paddingLeft: 18, radius: 6, border: 1 };
+const CODE_FONT_PX = 14;
+const CODE_FONT = 'ui-monospace, \'SF Mono\', Menlo, Consolas, \'Liberation Mono\', monospace';
+// the default theme's own, for code whose theme could not be loaded
+const DEFAULT_COLORS = { background: '#FFFFFF', foreground: '#000000' };
+const FONT_STYLE_ITALIC = 1;
+const FONT_STYLE_BOLD = 2;
+const FONT_STYLE_UNDERLINE = 4;
+function tokenStyle({ color, fontStyle = 0 }) {
+    return {
+        color,
+        fontStyle: fontStyle & FONT_STYLE_ITALIC ? 'italic' : undefined,
+        fontWeight: fontStyle & FONT_STYLE_BOLD ? 'bold' : undefined,
+        textDecoration: fontStyle & FONT_STYLE_UNDERLINE ? 'underline' : undefined
+    };
+}
+/** Code in a box coloured by its theme, as it comes from the API: in lines of coloured tokens. */
+const StructuredCode = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const { lines, colors = DEFAULT_COLORS } = block.commonParams;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-code-${block.id}`, children: [(0, jsx_runtime_1.jsx)("pre", { className: `structured-code-text-${block.id}`, children: (0, jsx_runtime_1.jsx)("code", { children: lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && '\n', line.map((token, tokenIndex) => (0, jsx_runtime_1.jsx)("span", { style: tokenStyle(token), children: token.content }, tokenIndex))] }, index))) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-code-${block.id}`, children: `
+        .structured-code-${block.id} {
+          box-sizing: border-box;
+          width: 100%;
+          border-style: solid;
+          background: ${colors.background};
+          border-color: color-mix(in srgb, ${colors.foreground} 15%, ${colors.background});
+        }
+        .structured-code-text-${block.id} {
+          margin: 0;
+          color: ${colors.foreground};
+          font-family: ${CODE_FONT};
+          line-height: 1.5;
+          tab-size: 2;
+          white-space: pre-wrap;
+          overflow-wrap: anywhere;
+          word-break: normal;
+          font-variant-ligatures: none;
+          letter-spacing: 0;
+        }
+        .structured-code-text-${block.id} code {
+          font: inherit;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [], (_, exemplary) => {
+                    const px = (value) => `${value / exemplary * 100}vw`;
+                    return (`
+            .structured-code-${block.id} {
+              padding: ${px(BOX.paddingTop)} ${px(BOX.paddingRight)} ${px(BOX.paddingBottom)} ${px(BOX.paddingLeft)};
+              border-width: ${px(BOX.border)};
+              border-radius: ${px(BOX.radius)};
+            }
+            .structured-code-text-${block.id} {
+              font-size: ${px(CODE_FONT_PX)};
+            }
+          `);
+                })}
+      ` })] }));
+};
+exports.StructuredCode = StructuredCode;

package/lib/components/StructuredBlockItem/StructuredDivider/StructuredDivider.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const textStylesRule_1 = require("../textStylesRule");
+/** A line filling its block, which is as tall as the line. */
+const StructuredDivider = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const layoutValues = [block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `structured-divider-${block.id}` }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-divider-${block.id}`, children: `
+        .structured-divider-${block.id} {
+          width: 100%;
+          height: 100%;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => ((0, textStylesRule_1.colorRule)(`.structured-divider-${block.id}`, 'background-color', layoutParams.color)))}
+      ` })] }));
+};
+exports.StructuredDivider = StructuredDivider;

package/lib/components/StructuredBlockItem/StructuredEmbed/StructuredVimeoEmbed.js

@@ -0,0 +1,89 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredVimeoEmbed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const player_1 = __importDefault(require("@vimeo/player"));
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const getVimeoEmbedUrl_1 = require("../../../utils/getVimeoEmbedUrl");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const embedFrameStyles_1 = require("./embedFrameStyles");
+/** A Vimeo video playing as the Vimeo item does, its cover over it until it plays. */
+const StructuredVimeoEmbed = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutParams = layoutId ? block.layoutParams[layoutId] : null;
+    const { url, coverUrl } = block.commonParams;
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [iframe, setIframe] = (0, react_1.useState)(null);
+    const player = (0, react_1.useMemo)(() => (iframe ? new player_1.default(iframe) : undefined), [iframe]);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(coverUrl !== null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const src = (0, react_1.useMemo)(() => (layoutParams ? (0, getVimeoEmbedUrl_1.getVimeoEmbedUrl)(url, layoutParams) : url), [url, layoutParams]);
+    (0, react_1.useEffect)(() => {
+        if (!player || !layoutParams)
+            return;
+        setIsCoverVisible(layoutParams.play !== 'auto' && coverUrl !== null);
+        const showCover = () => setIsCoverVisible(coverUrl !== null);
+        const handlePause = ({ seconds }) => {
+            if (seconds === 0)
+                showCover();
+        };
+        player.on('pause', handlePause);
+        player.on('ended', showCover);
+        return () => {
+            player.off('pause', handlePause);
+            player.off('ended', showCover);
+        };
+    }, [player, layoutParams, coverUrl]);
+    const play = () => {
+        setIsCoverVisible(false);
+        player === null || player === void 0 ? void 0 : player.play();
+    };
+    const togglePlay = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!player)
+            return;
+        if (yield player.getPaused()) {
+            play();
+        }
+        else {
+            player.pause();
+        }
+    });
+    const layoutValues = [block.area, block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-embed-${block.id}`, onMouseEnter: () => {
+            if ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' && !isCoverVisible)
+                player === null || player === void 0 ? void 0 : player.play();
+        }, onMouseLeave: () => {
+            if ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover')
+                player === null || player === void 0 ? void 0 : player.pause();
+        }, children: [coverUrl && isCoverVisible && ((0, jsx_runtime_1.jsx)("img", { className: `structured-embed-cover-${block.id}`, src: coverUrl, alt: "", onClick: (layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? play : undefined, onMouseEnter: (layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? play : undefined })), layoutParams && !layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto') && ((0, jsx_runtime_1.jsx)("div", { className: `structured-embed-overlay-${block.id}`, onClick: togglePlay })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframe, className: `structured-embed-frame-${block.id}`, src: src, allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-vimeo-${block.id}`, children: `
+        ${(0, embedFrameStyles_1.embedFrameStyles)(block.id)}
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => (`
+          .structured-embed-${block.id} {
+            ${area.height === undefined ? 'aspect-ratio: 16 / 9;' : 'height: 100%;'}
+            opacity: ${layoutParams.opacity};
+          }
+          .structured-embed-frame-${block.id} {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
+        `))}
+      ` })] }));
+};
+exports.StructuredVimeoEmbed = StructuredVimeoEmbed;

package/lib/components/StructuredBlockItem/StructuredEmbed/StructuredYoutubeEmbed.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredYoutubeEmbed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const getValidYoutubeUrl_1 = require("../../../utils/getValidYoutubeUrl");
+const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeApi");
+const YoutubeIframeApi_1 = require("../../../utils/Youtube/YoutubeIframeApi");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const embedFrameStyles_1 = require("./embedFrameStyles");
+/** A YouTube video playing as the YouTube item does, its cover over it until it plays. */
+const StructuredYoutubeEmbed = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutParams = layoutId ? block.layoutParams[layoutId] : null;
+    const { url, coverUrl } = block.commonParams;
+    const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [frame, setFrame] = (0, react_1.useState)(null);
+    const [player, setPlayer] = (0, react_1.useState)(undefined);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(coverUrl !== null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    (0, react_1.useEffect)(() => {
+        if (!YT || !frame || !layoutParams)
+            return;
+        const { play, controls } = layoutParams;
+        setIsCoverVisible(play !== 'auto' && coverUrl !== null);
+        const placeholder = document.createElement('div');
+        frame.appendChild(placeholder);
+        const created = new YT.Player(placeholder, {
+            videoId: (0, getValidYoutubeUrl_1.getYoutubeId)(new URL(url)),
+            playerVars: {
+                autoplay: play === 'auto' ? '1' : '0',
+                controls: controls ? '1' : '0'
+            },
+            events: {
+                onStateChange: (event) => {
+                    if (play !== 'auto')
+                        return;
+                    if (event.data === YoutubeIframeApi_1.YTPlayerState.Playing)
+                        setIsCoverVisible(false);
+                    if (event.data === YoutubeIframeApi_1.YTPlayerState.Paused || event.data === YoutubeIframeApi_1.YTPlayerState.Unstarted)
+                        setIsCoverVisible(coverUrl !== null);
+                },
+                onReady: (event) => {
+                    setPlayer(event.target);
+                    // only a video started by a click may play with sound
+                    if (play !== 'on-click')
+                        created.mute();
+                }
+            }
+        });
+        return () => {
+            var _a;
+            setPlayer(undefined);
+            created.destroy();
+            (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
+        };
+    }, [YT, frame, layoutParams, url, coverUrl]);
+    const play = () => {
+        setIsCoverVisible(false);
+        player === null || player === void 0 ? void 0 : player.playVideo();
+    };
+    const layoutValues = [block.area, block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-embed-${block.id}`, onMouseEnter: () => {
+            if ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' && !isCoverVisible)
+                player === null || player === void 0 ? void 0 : player.playVideo();
+        }, onMouseLeave: () => {
+            if ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover')
+                player === null || player === void 0 ? void 0 : player.pauseVideo();
+        }, children: [coverUrl && isCoverVisible && ((0, jsx_runtime_1.jsx)("img", { className: `structured-embed-cover-${block.id}`, src: coverUrl, alt: "", onClick: (layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? play : undefined, onMouseEnter: (layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? play : undefined })), (0, jsx_runtime_1.jsx)("div", { ref: setFrame, className: `structured-embed-frame-${block.id}` }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-youtube-${block.id}`, children: `
+        ${(0, embedFrameStyles_1.embedFrameStyles)(block.id)}
+        .structured-embed-frame-${block.id} iframe {
+          width: 100%;
+          height: 100%;
+          border: none;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => (`
+          .structured-embed-${block.id} {
+            ${area.height === undefined ? 'aspect-ratio: 16 / 9;' : 'height: 100%;'}
+            opacity: ${layoutParams.opacity};
+          }
+          .structured-embed-frame-${block.id} {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
+        `))}
+      ` })] }));
+};
+exports.StructuredYoutubeEmbed = StructuredYoutubeEmbed;

package/lib/components/StructuredBlockItem/StructuredEmbed/embedFrameStyles.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.embedFrameStyles = void 0;
+/**
+ * The box an embedded player fills: as tall as its block where the block has a height of its own,
+ * else at a video's 16:9, with the cover and the click catcher laid over the player.
+ */
+function embedFrameStyles(blockId) {
+    return `
+    .structured-embed-${blockId} {
+      position: relative;
+      width: 100%;
+    }
+    .structured-embed-frame-${blockId} {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: none;
+      overflow: hidden;
+    }
+    .structured-embed-cover-${blockId},
+    .structured-embed-overlay-${blockId} {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .structured-embed-cover-${blockId} {
+      object-fit: cover;
+    }
+  `;
+}
+exports.embedFrameStyles = embedFrameStyles;

package/lib/components/StructuredBlockItem/StructuredHeaderImage/StructuredHeaderImage.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredHeaderImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const BlockCaption_1 = require("../BlockCaption/BlockCaption");
+/**
+ * A section header's key image with its caption; nothing until an image is uploaded. Where the
+ * header draws it as its backdrop, the header styles it: no caption, and covering the header if set to.
+ */
+const StructuredHeaderImage = ({ block, readingWidth }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const { url, altText, caption } = block.commonParams;
+    if (!url)
+        return null;
+    const layoutValues = [block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-header-image-${block.id}`, children: [(0, jsx_runtime_1.jsx)("img", { className: `structured-header-picture-${block.id}`, src: url, alt: altText }), caption && (0, jsx_runtime_1.jsx)(BlockCaption_1.BlockCaption, { blockId: block.id, caption: caption, layoutParams: block.layoutParams, readingWidth: readingWidth }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-header-image-${block.id}`, children: `
+        .structured-header-image-${block.id} {
+          width: 100%;
+        }
+        .structured-header-picture-${block.id} {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => (`
+          .structured-header-picture-${block.id} {
+            opacity: ${layoutParams.opacity};
+          }
+        `))}
+      ` })] }));
+};
+exports.StructuredHeaderImage = StructuredHeaderImage;

package/lib/components/StructuredBlockItem/StructuredImage/StructuredImage.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const BlockCaption_1 = require("../BlockCaption/BlockCaption");
+const GALLERY_GAP_PX = 8;
+/**
+ * A gallery: its images side by side in one row, each growing from nothing by its share of the row's
+ * aspect ratios, so that they fill the row as their ratios do and come out equally tall, with the
+ * caption under them. Until an image has loaded its ratio is taken to be square.
+ */
+const StructuredImage = ({ block, readingWidth }) => {
+    const reactId = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const { urls, altText, caption } = block.commonParams;
+    const [ratios, setRatios] = (0, react_1.useState)({});
+    // an image already loaded when the page hydrates fires no load event of its own
+    const measure = (0, react_1.useCallback)((url, image) => {
+        if (!image || !image.complete || !image.naturalHeight)
+            return;
+        const ratio = image.naturalWidth / image.naturalHeight;
+        setRatios(prev => (prev[url] === ratio ? prev : Object.assign(Object.assign({}, prev), { [url]: ratio })));
+    }, []);
+    // growth factors summing to less than one leave part of the row empty, so a lone portrait image
+    // would fill only its ratio of the block: each image grows by its share of the total instead
+    const totalRatio = urls.reduce((sum, url) => { var _a; return sum + ((_a = ratios[url]) !== null && _a !== void 0 ? _a : 1); }, 0);
+    const layoutValues = [block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: setRef, className: `structured-gallery-${block.id}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `structured-gallery-row-${block.id}`, children: urls.map((url, index) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)("img", { ref: image => measure(url, image), className: `structured-gallery-image-${block.id}`, src: url, alt: altText, onLoad: event => measure(url, event.currentTarget), style: { flexGrow: ((_a = ratios[url]) !== null && _a !== void 0 ? _a : 1) / totalRatio } }, `${url}-${index}`));
+                }) }), caption && (0, jsx_runtime_1.jsx)(BlockCaption_1.BlockCaption, { blockId: block.id, caption: caption, layoutParams: block.layoutParams, readingWidth: readingWidth }), (0, jsx_runtime_1.jsx)(style_1.default, { id: `${reactId}-gallery-${block.id}`, children: `
+        .structured-gallery-row-${block.id} {
+          display: flex;
+          align-items: flex-start;
+          width: 100%;
+          gap: var(--gallery-gap);
+        }
+        .structured-gallery-image-${block.id} {
+          display: block;
+          flex-shrink: 1;
+          flex-basis: 0;
+          min-width: 0;
+          height: auto;
+        }
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams], exemplary) => (`
+          .structured-gallery-${block.id} {
+            --gallery-gap: ${GALLERY_GAP_PX / exemplary * 100}vw;
+          }
+          .structured-gallery-row-${block.id} {
+            opacity: ${layoutParams.opacity};
+          }
+        `))}
+      ` })] }));
+};
+exports.StructuredImage = StructuredImage;

package/lib/components/StructuredBlockItem/StructuredRichText/StructuredRichText.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StructuredRichText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
+const detectLang_1 = require("../../../utils/detectLang");
+const textStylesRule_1 = require("../textStylesRule");
+const richTextConverter = new RichTextConverter_1.RichTextConverter();
+/**
+ * A block of text: rich text, a quote, which is drawn in a box of its own, or a date, which comes as
+ * the text it reads as. Its text is set in the styles it was drawn with, its ranges styled over them.
+ */
+const StructuredRichText = ({ block }) => {
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-structured-text-${block.id}`;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useItemGeometry_1.useItemGeometry)(block.id, ref);
+    const [content, rangeStyles] = (0, react_1.useMemo)(() => richTextConverter.toHtml(block, layouts, { isScaledToViewport: false }), [block, layouts]);
+    const lang = (0, react_1.useMemo)(() => (0, detectLang_1.detectLang)(block.commonParams.text), [block.commonParams.text]);
+    const isQuote = block.type === sdk_1.StructuredBlockType.Quote;
+    const layoutValues = [block.layoutParams];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, lang: lang, className: `structured-text-${block.id}`, children: isQuote ? (0, jsx_runtime_1.jsx)("div", { className: `structured-quote-box-${block.id}`, children: content }) : content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [rangeStyles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => {
+                        var _a, _b;
+                        return (`
+          ${(0, textStylesRule_1.textStylesRule)(`.structured-text-${block.id}`, layoutParams)}
+          ${isQuote ? `
+            .structured-quote-box-${block.id} {
+              padding: ${((_a = layoutParams.boxPadding) !== null && _a !== void 0 ? _a : 0) * 100}vw;
+              border-radius: ${((_b = layoutParams.boxRadius) !== null && _b !== void 0 ? _b : 0) * 100}vw;
+              background-color: transparent;
+            }
+            ${layoutParams.background ? (0, textStylesRule_1.colorRule)(`.structured-quote-box-${block.id}`, 'background-color', layoutParams.background) : ''}
+          ` : ''}
+        `);
+                    })}`] })] }));
+};
+exports.StructuredRichText = StructuredRichText;