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

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -1,70 +1,43 @@
-import { getLayoutStyles, StructuredBlockAny, StructuredBlockType } from '@cntrl-site/sdk';
-import { ComponentType, FC, useId } from 'react';
+import { getLayoutStyles, StructuredBlockAny } from '@cntrl-site/sdk';
+import { FC, useId } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { useCntrlContext } from '../../provider/useCntrlContext';
-import { parseSizing } from '../items/useSizing';
-import { StructuredComponent } from './StructuredComponent/StructuredComponent';
+import { blockPlacement } from './blockPlacement';
+import { blocksMap } from './blocksMap';
 
 export interface StructuredBlockItemProps<I extends StructuredBlockAny> {
   block: I;
+  /** The section's reading column on each layout, which a caption keeps to. */
+  readingWidth: Record<string, number>;
 }
 
 interface Props {
   block: StructuredBlockAny;
-  maxWidthMap: Record<string, number>;
+  readingWidth: Record<string, number>;
 }
 
-const noop = () => null;
-
-const itemsMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
-  [StructuredBlockType.Component]: StructuredComponent,
-  [StructuredBlockType.RichText]: noop,
-  [StructuredBlockType.Image]: noop,
-  [StructuredBlockType.VimeoEmbed]: noop,
-  [StructuredBlockType.YoutubeEmbed]: noop,
-};
-
-export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
+export const StructuredBlockItem: FC<Props> = ({ block, readingWidth }) => {
   const reactId = useId();
   const id = `${reactId}-item-${block.id}`;
   const { layouts } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}, maxWidthMap];
-  const ItemComponent = itemsMap[block.type] || noop;
+  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}];
+  const BlockComponent = blocksMap[block.type];
   return (
-    <div
-      className={`structured-block-item-${block.id}`}
-    >
-      <ItemComponent block={block} />
+    <div className={`structured-block-item-${block.id}`}>
+      <BlockComponent block={block} readingWidth={readingWidth} />
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
-          const sizingAxis = parseSizing(layoutParams.sizing);
-          return (`
-                .structured-block-item-${block.id} {
-                  display: ${hidden ? 'none' : 'block'};
-                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
-                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : 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: ${(area.horizontalOffset ?? 0) * 100}vw;
-                  position: relative;
-                  z-index: ${area.zIndex};
-                }
-              `);
-          })}
-        `}
+        ${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;
+            ${blockPlacement(area, layoutParams)}
+          }
+        `))}
+      `}
       </JSXStyle>
     </div>
   );
 };
-
-function getAlignSelf(alignment: 'left' | 'center' | 'right') {
-  switch (alignment) {
-    case 'left':
-      return 'start';
-    case 'right':
-      return 'end';
-    default:
-      return 'center';
-  }
-}

package/src/components/StructuredBlockItem/StructuredCode/StructuredCode.tsx

@@ -0,0 +1,86 @@
+import { CodeStructuredBlock, CodeToken, getLayoutStyles } from '@cntrl-site/sdk';
+import { CSSProperties, FC, Fragment, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+
+// 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 }: CodeToken): CSSProperties {
+  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. */
+export const StructuredCode: FC<StructuredBlockItemProps<CodeStructuredBlock>> = ({ block }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const { lines, colors = DEFAULT_COLORS } = block.commonParams;
+  return (
+    <div ref={setRef} className={`structured-code-${block.id}`}>
+      <pre className={`structured-code-text-${block.id}`}>
+        <code>
+          {lines.map((line, index) => (
+            <Fragment key={index}>
+              {index > 0 && '\n'}
+              {line.map((token, tokenIndex) => <span key={tokenIndex} style={tokenStyle(token)}>{token.content}</span>)}
+            </Fragment>
+          ))}
+        </code>
+      </pre>
+      <JSXStyle id={`${reactId}-code-${block.id}`}>{`
+        .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;
+        }
+        ${getLayoutStyles(layouts, [], (_, exemplary) => {
+      const px = (value: number) => `${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)};
+            }
+          `);
+    })}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/StructuredDivider/StructuredDivider.tsx

@@ -0,0 +1,31 @@
+import { DividerStructuredBlock, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { colorRule } from '../textStylesRule';
+
+/** A line filling its block, which is as tall as the line. */
+export const StructuredDivider: FC<StructuredBlockItemProps<DividerStructuredBlock>> = ({ block }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  return (
+    <>
+      <div ref={setRef} className={`structured-divider-${block.id}`} />
+      <JSXStyle id={`${reactId}-divider-${block.id}`}>{`
+        .structured-divider-${block.id} {
+          width: 100%;
+          height: 100%;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => (
+      colorRule(`.structured-divider-${block.id}`, 'background-color', layoutParams.color)
+    ))}
+      `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/StructuredBlockItem/StructuredEmbed/StructuredVimeoEmbed.tsx

@@ -0,0 +1,101 @@
+import { getLayoutStyles, VimeoEmbedStructuredBlock } from '@cntrl-site/sdk';
+import Player from '@vimeo/player';
+import { FC, useEffect, useId, useMemo, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { getVimeoEmbedUrl } from '../../../utils/getVimeoEmbedUrl';
+import { useLayoutContext } from '../../useLayoutContext';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { embedFrameStyles } from './embedFrameStyles';
+
+/** A Vimeo video playing as the Vimeo item does, its cover over it until it plays. */
+export const StructuredVimeoEmbed: FC<StructuredBlockItemProps<VimeoEmbedStructuredBlock>> = ({ block }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const layoutId = useLayoutContext();
+  const layoutParams = layoutId ? block.layoutParams[layoutId] : null;
+  const { url, coverUrl } = block.commonParams;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null);
+  const player = useMemo(() => (iframe ? new Player(iframe) : undefined), [iframe]);
+  const [isCoverVisible, setIsCoverVisible] = useState(coverUrl !== null);
+  useItemGeometry(block.id, ref);
+  const src = useMemo(() => (layoutParams ? getVimeoEmbedUrl(url, layoutParams) : url), [url, layoutParams]);
+
+  useEffect(() => {
+    if (!player || !layoutParams) return;
+    setIsCoverVisible(layoutParams.play !== 'auto' && coverUrl !== null);
+    const showCover = () => setIsCoverVisible(coverUrl !== null);
+    const handlePause = ({ seconds }: { seconds: number }) => {
+      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?.play();
+  };
+  const togglePlay = async () => {
+    if (!player) return;
+    if (await player.getPaused()) {
+      play();
+    } else {
+      player.pause();
+    }
+  };
+
+  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams];
+  return (
+    <div
+      ref={setRef}
+      className={`structured-embed-${block.id}`}
+      onMouseEnter={() => {
+        if (layoutParams?.play === 'on-hover' && !isCoverVisible) player?.play();
+      }}
+      onMouseLeave={() => {
+        if (layoutParams?.play === 'on-hover') player?.pause();
+      }}
+    >
+      {coverUrl && isCoverVisible && (
+        <img
+          className={`structured-embed-cover-${block.id}`}
+          src={coverUrl}
+          alt=""
+          onClick={layoutParams?.play === 'on-click' ? play : undefined}
+          onMouseEnter={layoutParams?.play === 'on-hover' ? play : undefined}
+        />
+      )}
+      {/* an iframe swallows its clicks, so they are caught over it */}
+      {layoutParams && !layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto') && (
+        <div className={`structured-embed-overlay-${block.id}`} onClick={togglePlay} />
+      )}
+      <iframe
+        ref={setIframe}
+        className={`structured-embed-frame-${block.id}`}
+        src={src}
+        allow="autoplay; fullscreen; picture-in-picture;"
+        allowFullScreen
+      />
+      <JSXStyle id={`${reactId}-vimeo-${block.id}`}>{`
+        ${embedFrameStyles(block.id)}
+        ${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;
+          }
+        `))}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/StructuredEmbed/StructuredYoutubeEmbed.tsx

@@ -0,0 +1,106 @@
+import { getLayoutStyles, YoutubeEmbedStructuredBlock } from '@cntrl-site/sdk';
+import { FC, useEffect, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { getYoutubeId } from '../../../utils/getValidYoutubeUrl';
+import { useYouTubeIframeApi } from '../../../utils/Youtube/useYouTubeIframeApi';
+import { YTPlayer, YTPlayerState } from '../../../utils/Youtube/YoutubeIframeApi';
+import { useLayoutContext } from '../../useLayoutContext';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { embedFrameStyles } from './embedFrameStyles';
+
+/** A YouTube video playing as the YouTube item does, its cover over it until it plays. */
+export const StructuredYoutubeEmbed: FC<StructuredBlockItemProps<YoutubeEmbedStructuredBlock>> = ({ block }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const layoutId = useLayoutContext();
+  const layoutParams = layoutId ? block.layoutParams[layoutId] : null;
+  const { url, coverUrl } = block.commonParams;
+  const YT = useYouTubeIframeApi();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const [frame, setFrame] = useState<HTMLDivElement | null>(null);
+  const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
+  const [isCoverVisible, setIsCoverVisible] = useState(coverUrl !== null);
+  useItemGeometry(block.id, ref);
+
+  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: getYoutubeId(new URL(url)),
+      playerVars: {
+        autoplay: play === 'auto' ? '1' : '0',
+        controls: controls ? '1' : '0'
+      },
+      events: {
+        onStateChange: (event) => {
+          if (play !== 'auto') return;
+          if (event.data === YTPlayerState.Playing) setIsCoverVisible(false);
+          if (event.data === YTPlayerState.Paused || event.data === 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 () => {
+      setPlayer(undefined);
+      created.destroy();
+      placeholder.parentElement?.removeChild(placeholder);
+    };
+  }, [YT, frame, layoutParams, url, coverUrl]);
+
+  const play = () => {
+    setIsCoverVisible(false);
+    player?.playVideo();
+  };
+
+  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams];
+  return (
+    <div
+      ref={setRef}
+      className={`structured-embed-${block.id}`}
+      onMouseEnter={() => {
+        if (layoutParams?.play === 'on-hover' && !isCoverVisible) player?.playVideo();
+      }}
+      onMouseLeave={() => {
+        if (layoutParams?.play === 'on-hover') player?.pauseVideo();
+      }}
+    >
+      {coverUrl && isCoverVisible && (
+        <img
+          className={`structured-embed-cover-${block.id}`}
+          src={coverUrl}
+          alt=""
+          onClick={layoutParams?.play === 'on-click' ? play : undefined}
+          onMouseEnter={layoutParams?.play === 'on-hover' ? play : undefined}
+        />
+      )}
+      <div ref={setFrame} className={`structured-embed-frame-${block.id}`} />
+      <JSXStyle id={`${reactId}-youtube-${block.id}`}>{`
+        ${embedFrameStyles(block.id)}
+        .structured-embed-frame-${block.id} iframe {
+          width: 100%;
+          height: 100%;
+          border: none;
+        }
+        ${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;
+          }
+        `))}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/StructuredEmbed/embedFrameStyles.ts

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+export function embedFrameStyles(blockId: string): string {
+  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;
+    }
+  `;
+}

package/src/components/StructuredBlockItem/StructuredHeaderImage/StructuredHeaderImage.tsx

@@ -0,0 +1,43 @@
+import { getLayoutStyles, HeaderImageStructuredBlock } from '@cntrl-site/sdk';
+import { FC, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { BlockCaption } from '../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.
+ */
+export const StructuredHeaderImage: FC<StructuredBlockItemProps<HeaderImageStructuredBlock>> = ({ block, readingWidth }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const { url, altText, caption } = block.commonParams;
+  if (!url) return null;
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  return (
+    <div ref={setRef} className={`structured-header-image-${block.id}`}>
+      <img className={`structured-header-picture-${block.id}`} src={url} alt={altText} />
+      {caption && <BlockCaption blockId={block.id} caption={caption} layoutParams={block.layoutParams} readingWidth={readingWidth} />}
+      <JSXStyle id={`${reactId}-header-image-${block.id}`}>{`
+        .structured-header-image-${block.id} {
+          width: 100%;
+        }
+        .structured-header-picture-${block.id} {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => (`
+          .structured-header-picture-${block.id} {
+            opacity: ${layoutParams.opacity};
+          }
+        `))}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/StructuredImage/StructuredImage.tsx

@@ -0,0 +1,75 @@
+import { getLayoutStyles, ImageStructuredBlock } from '@cntrl-site/sdk';
+import { FC, useCallback, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { BlockCaption } from '../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.
+ */
+export const StructuredImage: FC<StructuredBlockItemProps<ImageStructuredBlock>> = ({ block, readingWidth }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const { urls, altText, caption } = block.commonParams;
+  const [ratios, setRatios] = useState<Record<string, number>>({});
+  // an image already loaded when the page hydrates fires no load event of its own
+  const measure = useCallback((url: string, image: HTMLImageElement | null) => {
+    if (!image || !image.complete || !image.naturalHeight) return;
+    const ratio = image.naturalWidth / image.naturalHeight;
+    setRatios(prev => (prev[url] === ratio ? prev : { ...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) => sum + (ratios[url] ?? 1), 0);
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  return (
+    <div ref={setRef} className={`structured-gallery-${block.id}`}>
+      <div className={`structured-gallery-row-${block.id}`}>
+        {urls.map((url, index) => (
+          <img
+            key={`${url}-${index}`}
+            ref={image => measure(url, image)}
+            className={`structured-gallery-image-${block.id}`}
+            src={url}
+            alt={altText}
+            onLoad={event => measure(url, event.currentTarget)}
+            style={{ flexGrow: (ratios[url] ?? 1) / totalRatio }}
+          />
+        ))}
+      </div>
+      {caption && <BlockCaption blockId={block.id} caption={caption} layoutParams={block.layoutParams} readingWidth={readingWidth} />}
+      <JSXStyle id={`${reactId}-gallery-${block.id}`}>{`
+        .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;
+        }
+        ${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};
+          }
+        `))}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/StructuredRichText/StructuredRichText.tsx

@@ -0,0 +1,53 @@
+import { DateStructuredBlock, getLayoutStyles, QuoteStructuredBlock, RichTextStructuredBlock, StructuredBlockType } from '@cntrl-site/sdk';
+import { FC, useId, useMemo, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
+import { detectLang } from '../../../utils/detectLang';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+import { colorRule, textStylesRule } from '../textStylesRule';
+
+type TextBlock = RichTextStructuredBlock | QuoteStructuredBlock | DateStructuredBlock;
+
+const richTextConverter = new 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.
+ */
+export const StructuredRichText: FC<StructuredBlockItemProps<TextBlock>> = ({ block }) => {
+  const reactId = useId();
+  const id = `${reactId}-structured-text-${block.id}`;
+  const { layouts } = useCntrlContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const [content, rangeStyles] = useMemo(
+    () => richTextConverter.toHtml(block, layouts, { isScaledToViewport: false }),
+    [block, layouts]
+  );
+  const lang = useMemo(() => detectLang(block.commonParams.text), [block.commonParams.text]);
+  const isQuote = block.type === StructuredBlockType.Quote;
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  return (
+    <>
+      <div ref={setRef} lang={lang} className={`structured-text-${block.id}`}>
+        {isQuote ? <div className={`structured-quote-box-${block.id}`}>{content}</div> : content}
+      </div>
+      <JSXStyle id={id}>
+        {rangeStyles}
+        {`${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => (`
+          ${textStylesRule(`.structured-text-${block.id}`, layoutParams)}
+          ${isQuote ? `
+            .structured-quote-box-${block.id} {
+              padding: ${(layoutParams.boxPadding ?? 0) * 100}vw;
+              border-radius: ${(layoutParams.boxRadius ?? 0) * 100}vw;
+              background-color: transparent;
+            }
+            ${layoutParams.background ? colorRule(`.structured-quote-box-${block.id}`, 'background-color', layoutParams.background) : ''}
+          ` : ''}
+        `))}`}
+      </JSXStyle>
+    </>
+  );
+};