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

package/src/utils/RichTextConverter/RichTextConverter.test.tsx

@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react';
+import { Layout, TextAlign } from '@cntrl-site/sdk';
+import { RICH_TEXT_LAYOUT_PENDING_CLASS, RichTextConverter, RichTextSource } from './RichTextConverter';
+
+const layouts: Layout[] = [{ id: 'desktop', title: 'Desktop', startsWith: 800, exemplary: 1440 }];
+
+function text(blocks: { text: string; type?: string }[], rangeStyles = [{ start: 0, end: 4, style: 'FONTSIZE', value: '0.02' }]): RichTextSource {
+  let offset = 0;
+  const richTextBlocks = blocks.map(({ text, type = 'unstyled' }) => {
+    const block = { start: offset, end: offset + text.length, type, entities: [] };
+    offset += text.length + 1;
+    return block;
+  });
+  return {
+    id: 'text',
+    commonParams: { text: blocks.map(block => `${block.text}\n`).join(''), blocks: richTextBlocks },
+    layoutParams: { desktop: { rangeStyles, textAlign: TextAlign.Left } }
+  };
+}
+
+describe('RichTextConverter', () => {
+  const converter = new RichTextConverter();
+
+  it('sizes an item\'s ranges in pixels of the exemplary, in viewport units while the layout is not known', () => {
+    const [, styles] = converter.toHtml(text([{ text: 'Read on' }]), layouts);
+    expect(styles).toContain('font-size: 28.8px');
+    expect(styles).toContain(`.${RICH_TEXT_LAYOUT_PENDING_CLASS}`);
+  });
+
+  it('sizes the ranges of text in the page\'s flow in viewport units throughout', () => {
+    const [, styles] = converter.toHtml(text([{ text: 'Read on' }]), layouts, { isScaledToViewport: false });
+    expect(styles).toContain('font-size: 2vw');
+    expect(styles).not.toMatch(/font-size: [\d.]+px/);
+    expect(styles).not.toContain(RICH_TEXT_LAYOUT_PENDING_CLASS);
+  });
+
+  it('draws list items with their markers, a numbered run restarting after anything else', () => {
+    const [content, styles] = converter.toHtml(text([
+      { text: 'Intro' },
+      { text: 'One', type: 'ordered-list-item' },
+      { text: 'Two', type: 'ordered-list-item' },
+      { text: 'Dot', type: 'unordered-list-item' }
+    ], []), layouts, { isScaledToViewport: false });
+    const { container } = render(<>{content}</>);
+    expect([...container.children].map(child => child.className.split(' ')[1])).toEqual([
+      'rt-paragraph',
+      'rt-ordered-list-item',
+      'rt-ordered-list-item',
+      'rt-unordered-list-item'
+    ]);
+    expect(styles).toContain('counter-increment: cntrl-list');
+    expect(styles).toContain('content: \'•\'');
+  });
+
+  it('draws a highlighted range on its colour, with an rgba fallback where oklch is not supported', () => {
+    const [, styles] = converter.toHtml(text([{ text: 'Read on' }], [{ start: 0, end: 4, style: 'HIGHLIGHT', value: '#FFFF00' }]), layouts);
+    expect(styles).toMatch(/\.s-0-4 \{\s*background-color: [^;]+;/);
+    expect(styles).toContain('background-color: rgba(255, 255, 0, 1)');
+  });
+
+  it('leaves text without lists as it was', () => {
+    const [content, styles] = converter.toHtml(text([{ text: 'Plain' }]), layouts);
+    const { container } = render(<>{content}</>);
+    expect(container.firstElementChild!.className).not.toContain('rt-paragraph');
+    expect(styles).not.toContain('cntrl-list');
+  });
+});

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -4,14 +4,37 @@ import {
   getLayoutMediaQuery,
   TextTransform,
   Layout,
-  RichTextItem,
   VerticalAlign,
   RichTextStyle,
-  RichTextEntity
+  RichTextEntity,
+  RichTextBlock,
+  TextAlign
 } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../../components/items/LinkWrapper';
 import { getFontFamilyValue } from '../getFontFamilyValue';
 
+/** Rich text to draw: a rich text item, or a block of a section's structured content that holds text. */
+export interface RichTextSource {
+  id: string;
+  commonParams: {
+    text: string;
+    blocks?: RichTextBlock[];
+  };
+  layoutParams: Record<string, {
+    rangeStyles?: RichTextStyle[];
+    textAlign: TextAlign;
+  }>;
+}
+
+interface ToHtmlOptions {
+  /**
+   * An item is drawn at its layout's exemplary width and scaled to the viewport as a whole, so once
+   * the layout is known its lengths are pixels of the exemplary. Text in the page's flow, whose box a
+   * scale would leave at the unscaled size, takes viewport units throughout.
+   */
+  isScaledToViewport?: boolean;
+}
+
 interface StyleGroup {
   start: number;
   end: number;
@@ -41,12 +64,47 @@ export const RICH_TEXT_LAYOUT_PENDING_CLASS = 'rich-text-layout-pending';
 
 const SCALING_STYLES = new Set(['FONTSIZE', 'LINEHEIGHT', 'LETTERSPACING', 'WORDSPACING']);
 
+const LIST_ITEM_CLASSES: Record<string, string> = {
+  'unordered-list-item': 'rt-unordered-list-item',
+  'ordered-list-item': 'rt-ordered-list-item'
+};
+
+// a list item's marker hangs before its first line; a numbered run restarts after anything else
+const LIST_STYLES = `
+  .rt-unordered-list-item,
+  .rt-ordered-list-item {
+    padding-left: 1.5em;
+    text-indent: -1.5em;
+  }
+  .rt-unordered-list-item::before,
+  .rt-ordered-list-item::before {
+    display: inline-block;
+    width: 1.5em;
+    text-indent: 0;
+  }
+  .rt-unordered-list-item::before {
+    content: '•';
+  }
+  .rt-paragraph,
+  .rt-unordered-list-item {
+    counter-reset: cntrl-list;
+  }
+  .rt-ordered-list-item {
+    counter-increment: cntrl-list;
+  }
+  .rt-ordered-list-item::before {
+    content: counter(cntrl-list) '.';
+  }
+`;
+
 export class RichTextConverter {
   toHtml(
-    richText: RichTextItem,
-    layouts: Layout[]
+    richText: RichTextSource,
+    layouts: Layout[],
+    { isScaledToViewport = true }: ToHtmlOptions = {}
   ): [ReactNode[], string] {
     const { text, blocks = [] } = richText.commonParams;
+    const hasLists = blocks.some(block => block.type in LIST_ITEM_CLASSES);
     const root: ReactElement[] = [];
     const styleRules = layouts.reduce<Record<string, string[]>>((rec, layout) => {
       rec[layout.id] = [];
@@ -62,16 +120,18 @@ export class RichTextConverter {
       const block = blocks[blockIndex];
       const content = text.slice(block.start, block.end + 1);
       const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
+      const typeClass = hasLists ? ` ${LIST_ITEM_CLASSES[block.type] ?? 'rt-paragraph'}` : '';
       if (content.length === 1) {
         const id = `rt_${richText.id}_br_${blockIndex}`;
-        root.push(<div key={id} className={id}><br /></div>);
+        root.push(<div key={id} className={`${id}${typeClass}`}><br /></div>);
         layouts.forEach(l => {
           const lhForLayout = currentLineHeight[l.id];
           if (lhForLayout === undefined) return;
           const lineHeightStyle = { name: 'LINEHEIGHT', value: lhForLayout };
-          const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, true);
-          const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
+          const lh = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, isScaledToViewport);
           styleRules[l.id].push(`.rt_${richText.id}_br_${blockIndex} {${lh}}`);
+          if (!isScaledToViewport) return;
+          const lhPending = RichTextConverter.fromRangeStylesToInline(lineHeightStyle, l.exemplary, false);
           styleRules[l.id].push(`.${RICH_TEXT_LAYOUT_PENDING_CLASS} .rt_${richText.id}_br_${blockIndex} {${lhPending}}`);
         });
         continue;
@@ -158,27 +218,29 @@ export class RichTextConverter {
             for (const styleGroup of entitiesGroup.stylesGroup) {
               const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
               const color = styleGroup.styles.find(s => s.name === 'COLOR');
+              const highlight = styleGroup.styles.find(s => s.name === 'HIGHLIGHT');
               if (lineHeight?.value) {
                 currentLineHeight[item.layout] = lineHeight.value;
               }
               styleRules[item.layout].push(`
                 .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, true)).join('\n')}
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, isScaledToViewport)).join('\n')}
                 }
               `);
               const lengthStyles = styleGroup.styles.filter(s => SCALING_STYLES.has(s.name));
-              if (lengthStyles.length !== 0) {
+              if (isScaledToViewport && lengthStyles.length !== 0) {
                 styleRules[item.layout].push(`
                 .${RICH_TEXT_LAYOUT_PENDING_CLASS} .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
                   ${lengthStyles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary, false)).join('\n')}
                 }
               `);
               }
-              if (color) {
+              if (color?.value || highlight?.value) {
                 styleRules[item.layout].push(`
                 @supports not (color: oklch(42% 0.3 90 / 1)) {
                   .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${CntrlColor.parse(getResolvedValue(color.value, 'COLOR')!).fmt('rgba')};
+                    ${color?.value ? `color: ${CntrlColor.parse(color.value).fmt('rgba')};` : ''}
+                    ${highlight?.value ? `background-color: ${CntrlColor.parse(highlight.value).fmt('rgba')};` : ''}
                   }
                 }
               `);
@@ -186,14 +248,14 @@ export class RichTextConverter {
             }
           }
         }
-        root.push(<div key={blockClass} className={blockClass}>{kids}</div>);
+        root.push(<div key={blockClass} className={`${blockClass}${typeClass}`}>{kids}</div>);
       }
     }
     const styles = layouts.map(l => `
       ${getLayoutMediaQuery(l.id, layouts)} {
         ${styleRules[l.id].join('\n')}
       }
-    `).join('\n');
+    `).join('\n') + (hasLists ? LIST_STYLES : '');
     return [
       root,
       styles
@@ -291,6 +353,7 @@ export class RichTextConverter {
     const { value, name } = draftStyle;
     const map: Record<string, Record<string, string | undefined>> = {
       COLOR: { color: getResolvedValue(value, name) },
+      HIGHLIGHT: { 'background-color': getResolvedValue(value, name) },
       TYPEFACE: { 'font-family': `${getFontFamilyValue(value!)}` },
       FONTSTYLE: value ? { ...FontStyles[value] } : {},
       FONTWEIGHT: { 'font-weight': value },
@@ -329,7 +392,7 @@ function getScaledValue(value: string | undefined, exemplary: number, isLayoutDe
 }
 
 function getResolvedValue(value: string | undefined, name: string) {
-  if (name !== 'COLOR') return value;
+  if (name !== 'COLOR' && name !== 'HIGHLIGHT') return value;
   return value ? CntrlColor.parse(value).toCss() : value;
 }
 

package/src/utils/getVimeoEmbedUrl.ts

@@ -0,0 +1,16 @@
+import { VimeoEmbedItem } from '@cntrl-site/sdk';
+
+/** The player's url with how the layout plays the video, and none of Vimeo's own title, byline or portrait. */
+export function getVimeoEmbedUrl(url: string, layoutParams: VimeoEmbedItem['layoutParams'][string]): string {
+  const validURL = new URL(url);
+  validURL.searchParams.append('controls', String(layoutParams.controls));
+  validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
+  validURL.searchParams.append('muted', String(layoutParams.muted));
+  validURL.searchParams.append('loop', String(layoutParams.loop));
+  validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
+  validURL.searchParams.append('title', '0');
+  validURL.searchParams.append('byline', '0');
+  validURL.searchParams.append('portrait', '0');
+  validURL.searchParams.append('autopause', 'false');
+  return validURL.href;
+}