Add support for Ceros Flex embeds

packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts

@@ -1,35 +1,89 @@
 import { BlockAnnotation } from "@atjson/document";
 
-export class CerosEmbed extends BlockAnnotation<{
-  /**
-   * The URL to the Ceros experience.
-   */
-  url: string;
-
-  /**
-   * The aspect ratio, as a fraction of the embed, which
-   * is used so the embed can be scaled automatically
-   * by the Ceros script tag.
-   */
-  aspectRatio: number;
-
-  /**
-   * The mobile aspect ratio of the embed, which is chosen
-   * by Ceros when on smaller screen sizes.
-   */
-  mobileAspectRatio?: number;
-
-  /**
-   * Layout information, used to indicate mutually
-   * exclusive layouts, for example sizes, floats, etc.
-   */
-  layout?: string;
-
-  /**
-   * A named identifier used to quickly jump to this item
-   */
-  anchorName?: string;
-}> {
+export class CerosEmbed extends BlockAnnotation<
+  | {
+      /**
+       * The URL to the Ceros experience.
+       */
+      url: string;
+
+      /**
+       * Layout information, used to indicate mutually
+       * exclusive layouts, for example sizes, floats, etc.
+       */
+      layout?: string;
+
+      /**
+       * Accessible title for the generated iframe. For Flex embeds this
+       * is sourced from the container's `data-title` attribute.
+       */
+      title?: string;
+
+      /**
+       * A named identifier used to quickly jump to this item
+       */
+      anchorName?: string;
+
+      /**
+       * The type of ceros embed.
+       */
+      cerosType?: "studio";
+
+      /**
+       * The aspect ratio, as a fraction of the embed, which
+       * is used so the embed can be scaled automatically
+       * by the Ceros script tag.
+       */
+      aspectRatio: number;
+
+      /**
+       * The mobile aspect ratio of the embed, which is chosen
+       * by Ceros when on smaller screen sizes.
+       */
+      mobileAspectRatio?: number;
+    }
+  | {
+      /**
+       * The URL to the Ceros experience.
+       */
+      url: string;
+
+      /**
+       * Layout information, used to indicate mutually
+       * exclusive layouts, for example sizes, floats, etc.
+       */
+      layout?: string;
+
+      /**
+       * Accessible title for the generated iframe. For Flex embeds this
+       * is sourced from the container's `data-title` attribute.
+       */
+      title?: string;
+
+      /**
+       * A named identifier used to quickly jump to this item
+       */
+      anchorName?: string;
+
+      /**
+       * The type of ceros embed.
+       */
+      cerosType: "flex";
+
+      /**
+       * The configured width for a Flex embed. Per Ceros docs this is
+       * typically a percentage value such as `100%`.
+       */
+      embedWidth?: string;
+
+      /**
+       * The configured height for a Flex embed. Per Ceros docs this is
+       * either `auto` for a full-height embed or a fixed pixel value
+       * such as `800px` for a scrolling embed.
+       */
+      embedHeight?: string;
+    }
+> {
   static vendorPrefix = "offset";
   static type = "ceros-embed";
 }

packages/@atjson/renderer-html/src/index.ts

@@ -132,11 +132,26 @@ export default class HTMLRenderer extends Renderer {
   }
 
   *CerosEmbed(embed: Block<CerosEmbed>) {
+    if (embed.attributes.cerosType === "flex") {
+      let { embedHeight, embedWidth, title, url } = embed.attributes;
+      return `<div ${this.htmlAttributes({
+        "data-embed-width": embedWidth,
+        "data-embed-height": embedHeight,
+        "data-ceros-experience": url,
+        "data-title": title,
+      }).join(
+        " ",
+      )}></div><script src="https://assets.ceros.site/js/embed.v1.js"></script>`;
+    }
+
+    let { anchorName, aspectRatio, mobileAspectRatio, title, url } =
+      embed.attributes;
+
     return `<div ${this.htmlAttributes({
       style: [
         "position: relative",
         "width: auto",
-        `padding: 0 0 ${100 / embed.attributes.aspectRatio}%`,
+        `padding: 0 0 ${100 / aspectRatio}%`,
         "height: 0",
         "top: 0",
         "left: 0",
@@ -146,12 +161,13 @@ export default class HTMLRenderer extends Renderer {
         "border: 0 none",
       ].join(";"),
       id: `experience-${embed.id}`,
-      "data-aspectRatio": embed.attributes.aspectRatio?.toString(),
-      "data-mobile-aspectRatio": embed.attributes.mobileAspectRatio?.toString(),
+      "data-aspectRatio": aspectRatio.toString(),
+      "data-mobile-aspectRatio": mobileAspectRatio?.toString(),
     }).join(" ")}><iframe ${this.htmlAttributes({
       allowfullscreen: true,
-      src: embed.attributes.url,
-      id: embed.attributes.anchorName,
+      src: url,
+      id: anchorName,
+      title,
       style: [
         "position: absolute",
         "top: 0",

packages/@atjson/renderer-html/test/renderer.test.ts

@@ -510,6 +510,34 @@ describe("renderer-html", () => {
       );
     });
 
+    test("flex", () => {
+      let doc = new OffsetSource({
+        content: "\uFFFC",
+        annotations: [
+          new CerosEmbed({
+            id: "test",
+            start: 0,
+            end: 1,
+            attributes: {
+              cerosType: "flex",
+              url: "https://flexamples.ceros.site/example-1",
+              embedWidth: "100%",
+              embedHeight: "auto",
+              title: "Example Flex Experience",
+            },
+          }),
+          new ParseAnnotation({
+            start: 0,
+            end: 1,
+          }),
+        ],
+      });
+
+      expect(Renderer.render(doc)).toMatchInlineSnapshot(
+        `"<div data-embed-width="100%" data-embed-height="auto" data-ceros-experience="https://flexamples.ceros.site/example-1" data-title="Example Flex Experience"></div><script src="https://assets.ceros.site/js/embed.v1.js"></script>"`,
+      );
+    });
+
     test("with mobile aspect ratio", () => {
       let doc = new OffsetSource({
         content: "\uFFFC",

packages/@atjson/source-html/src/converter/third-party-embeds.ts

@@ -12,6 +12,10 @@ function isCerosExperienceFrame(a: Annotation<any>) {
   return a.type === "iframe" && a.attributes.class === "ceros-experience";
 }
 
+function isFlexCerosContainer(a: Annotation<any>) {
+  return a.type === "div" && a.attributes.dataset?.["ceros-experience"] != null;
+}
+
 function isCerosOriginDomainsScript(a: Annotation<any>) {
   if (a.type !== "script") {
     return false;
@@ -37,6 +41,27 @@ function isCerosContainer(a: Annotation<any>) {
   );
 }
 
+function isFlexCerosScript(a: Annotation<any>) {
+  if (a.type !== "script" || typeof a.attributes.src !== "string") {
+    return false;
+  }
+
+  let src = a.attributes.src;
+  if (src.indexOf("//") === 0) {
+    src = `https:${src}`;
+  }
+
+  try {
+    let url = new URL(src);
+    return (
+      url.hostname === "assets.ceros.site" &&
+      /^\/js\/embed\.v\d+\.js$/i.test(url.pathname)
+    );
+  } catch (error) {
+    return false;
+  }
+}
+
 function isCneAudioScript(a: Annotation<any>) {
   return (
     a.attributes.src &&
@@ -48,6 +73,17 @@ function aCoversB(a: Annotation<any>, b: Annotation<any>) {
   return a.start < b.start && a.end > b.end;
 }
 
+function adjacentSiblingWithOptionalWhitespace(
+  doc: Document,
+  first: Annotation<any>,
+  second: Annotation<any>,
+) {
+  return (
+    second.start >= first.end &&
+    /^\s*$/.test(doc.content.slice(first.end, second.start))
+  );
+}
+
 function getCneAudioEnvironment(hostname: string): AudioEnvironments {
   const isCneAudioProduction = (hostname: string): boolean => {
     return /embed-audio\.cnevids\.com/.test(hostname);
@@ -65,14 +101,20 @@ function getCneAudioEnvironment(hostname: string): AudioEnvironments {
 
 export default function convertThirdPartyEmbeds(doc: Document) {
   /**
-   * Ceros Embeds are iframes wrapped in divs:
+   * Ceros studio Embeds are iframes wrapped in divs:
    *   <div id="experience-*" data-aspectRatio="{aspectRatio}" data-mobile-aspectRatio="{mobileAspectRatio}">
    *     <iframe src="{url}" class="ceros-experience"></iframe>
    *   </div>
    *   <script type="text/javascript" src="//view.ceros.com/scroll-proxy.min.js" data-ceros-origin-domains="view.ceros.com"></script>
    */
+  /**
+   * Ceros flex embeds are wrapped in divs
+   * <div data-embed-width="100%" data-embed-height="auto" data-ceros-experience="https://cn-adelphi.ceros.site/flex-testing"></div>
+   * <script src="https://assets.ceros.site/js/embed.v1.js"></script>
+   */
   let containers = doc.where(isCerosContainer).as("container");
   let iframeTags = doc.where(isCerosExperienceFrame).as("iframes");
+  let flexContainers = doc.where(isFlexCerosContainer).as("container");
 
   doc.where(isCerosOriginDomainsScript).remove();
 
@@ -99,9 +141,48 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             anchorName: iframes[0].attributes.id,
             aspectRatio,
             mobileAspectRatio,
+            title: iframes[0].attributes.title,
             url: iframes[0].attributes.src,
           },
-        })
+        }),
+      );
+    });
+
+  flexContainers
+    .join(
+      doc.where(isFlexCerosScript).as("scripts"),
+      function scriptAfterFlexContainer(container, script: Script) {
+        return adjacentSiblingWithOptionalWhitespace(doc, container, script);
+      },
+    )
+    .update(({ container, scripts }) => {
+      let script = scripts.find(
+        (annotation) =>
+          typeof annotation.attributes.src === "string" &&
+          annotation.attributes.src.length > 0,
+      );
+
+      if (!script) return;
+
+      if (container.end !== script.start) {
+        doc.deleteText(container.end, script.start);
+      }
+
+      doc.removeAnnotations(scripts);
+
+      doc.replaceAnnotation(
+        container,
+        new CerosEmbed({
+          start: container.start,
+          end: container.end,
+          attributes: {
+            cerosType: "flex",
+            url: container.attributes.dataset["ceros-experience"],
+            embedWidth: container.attributes.dataset["embed-width"],
+            embedHeight: container.attributes.dataset["embed-height"],
+            title: container.attributes.dataset["title"],
+          },
+        }),
       );
     });
 
@@ -120,7 +201,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             src.match(/fwcdn\d\.com\//) != null ||
             src.match(/fwpub\d\.com\//) != null)
         );
-      }
+      },
     )
     .update(({ embed, scripts }) => {
       let playlist = embed.attributes.playlist;
@@ -142,7 +223,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             channel: channel,
             open: embed.attributes.open_in,
           },
-        })
+        }),
       );
       // Remove newlines from embed code
       if (scripts.length) {
@@ -184,7 +265,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioId,
             anchorName,
           },
-        })
+        }),
       );
     });
   /**
@@ -212,7 +293,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioType,
             anchorName: iframe.attributes.id,
           },
-        })
+        }),
       );
     });
   /**
@@ -238,7 +319,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
         attributes: {
           url: embed.attributes.url,
         },
-      })
+      }),
     );
   });