Feat(ceros-flex): atc-7641 support for cero-flex embeds

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

@@ -1,6 +1,11 @@
 import { BlockAnnotation } from "@atjson/document";
 
-export class CerosEmbed extends BlockAnnotation<{
+export type CerosStudioEmbedAttributes = {
+  /**
+   * The type of Ceros experience.
+   */
+  cerosType?: "studio";
+
   /**
    * The URL to the Ceros experience.
    */
@@ -29,7 +34,44 @@ export class CerosEmbed extends BlockAnnotation<{
    * A named identifier used to quickly jump to this item
    */
   anchorName?: string;
-}> {
+};
+
+export type CerosFlexInlineEmbedAttributes = {
+  /**
+   * The type of Ceros experience.
+   */
+  cerosType: "flex";
+
+  /**
+   * The Flex rendering mode.
+   */
+  renderMode: "inline";
+
+  /**
+   * The manifest URL for the Ceros Flex experience.
+   */
+  manifestUrl: string;
+
+  /**
+   * The inline container height for full-height scrolling Flex experiences.
+   */
+  height?: string;
+
+  /**
+   * 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<
+  CerosStudioEmbedAttributes | CerosFlexInlineEmbedAttributes
+> {
   static vendorPrefix = "offset";
   static type = "ceros-embed";
 }

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

@@ -132,11 +132,25 @@ export default class HTMLRenderer extends Renderer {
   }
 
   *CerosEmbed(embed: Block<CerosEmbed>) {
+    if (embed.attributes.cerosType === "flex") {
+      return `<div ${this.htmlAttributes({
+        "data-flex-inline": true,
+        style: embed.attributes.height
+          ? `height: ${embed.attributes.height}`
+          : undefined,
+        "data-flex-manifest-url": embed.attributes.manifestUrl,
+      }).join(" ")}></div><script ${this.htmlAttributes({
+        src: "https://assets.ceros.site/js/flex-client.js",
+      }).join(" ")}></script>`;
+    }
+
+    let studioAttributes = embed.attributes;
+
     return `<div ${this.htmlAttributes({
       style: [
         "position: relative",
         "width: auto",
-        `padding: 0 0 ${100 / embed.attributes.aspectRatio}%`,
+        `padding: 0 0 ${100 / studioAttributes.aspectRatio}%`,
         "height: 0",
         "top: 0",
         "left: 0",
@@ -146,12 +160,12 @@ 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": studioAttributes.aspectRatio?.toString(),
+      "data-mobile-aspectRatio": studioAttributes.mobileAspectRatio?.toString(),
     }).join(" ")}><iframe ${this.htmlAttributes({
       allowfullscreen: true,
-      src: embed.attributes.url,
-      id: embed.attributes.anchorName,
+      src: studioAttributes.url,
+      id: studioAttributes.anchorName,
       style: [
         "position: absolute",
         "top: 0",

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

@@ -484,6 +484,34 @@ describe("renderer-html", () => {
   });
 
   describe("ceros", () => {
+    test("flex inline embed", () => {
+      let doc = new OffsetSource({
+        content: "\uFFFC",
+        annotations: [
+          new CerosEmbed({
+            id: "test",
+            start: 0,
+            end: 1,
+            attributes: {
+              cerosType: "flex",
+              renderMode: "inline",
+              manifestUrl:
+                "https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json",
+              height: "100vh",
+            },
+          }),
+          new ParseAnnotation({
+            start: 0,
+            end: 1,
+          }),
+        ],
+      });
+
+      expect(Renderer.render(doc)).toMatchInlineSnapshot(
+        `"<div data-flex-inline style="height: 100vh" data-flex-manifest-url="https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json"></div><script src="https://assets.ceros.site/js/flex-client.js"></script>"`,
+      );
+    });
+
     test("without mobile aspect ratio", () => {
       let doc = new OffsetSource({
         content: "\uFFFC",

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

@@ -28,6 +28,36 @@ function isCerosOriginDomainsScript(a: Annotation<any>) {
   }
 }
 
+function isCerosFlexInlineContainer(a: Annotation<any>) {
+  return (
+    a.attributes.dataset &&
+    a.attributes.dataset["flex-inline"] != null &&
+    a.attributes.dataset["flex-manifest-url"] != null
+  );
+}
+
+function isCerosFlexClientScript(a: Annotation<any>) {
+  if (a.type !== "script") {
+    return false;
+  }
+
+  let src = a.attributes.src;
+  if (src && src.indexOf("//") === 0) {
+    src = `https:${src}`;
+  }
+
+  return src === "https://assets.ceros.site/js/flex-client.js";
+}
+
+function getInlineStyleHeight(style?: string) {
+  if (!style) {
+    return undefined;
+  }
+
+  let match = style.match(/(?:^|;)\s*height\s*:\s*([^;]+)/i);
+  return match?.[1]?.trim();
+}
+
 function isCerosContainer(a: Annotation<any>) {
   return (
     a.attributes.id != null &&
@@ -76,6 +106,27 @@ export default function convertThirdPartyEmbeds(doc: Document) {
 
   doc.where(isCerosOriginDomainsScript).remove();
 
+  doc
+    .where(isCerosFlexInlineContainer)
+    .update(function convertCerosFlexInlineContainer(container) {
+      doc.replaceAnnotation(
+        container,
+        new CerosEmbed({
+          id: container.id,
+          start: container.start,
+          end: container.end,
+          attributes: {
+            cerosType: "flex",
+            renderMode: "inline",
+            manifestUrl: container.attributes.dataset["flex-manifest-url"],
+            height: getInlineStyleHeight(container.attributes.style),
+          },
+        }),
+      );
+    });
+
+  doc.where(isCerosFlexClientScript).remove();
+
   containers
     .join(iframeTags, aCoversB)
     .update(function joinContainerWithFrames({ container, iframes }) {
@@ -101,7 +152,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             mobileAspectRatio,
             url: iframes[0].attributes.src,
           },
-        })
+        }),
       );
     });
 
@@ -120,7 +171,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 +193,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             channel: channel,
             open: embed.attributes.open_in,
           },
-        })
+        }),
       );
       // Remove newlines from embed code
       if (scripts.length) {
@@ -184,7 +235,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioId,
             anchorName,
           },
-        })
+        }),
       );
     });
   /**
@@ -212,7 +263,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioType,
             anchorName: iframe.attributes.id,
           },
-        })
+        }),
       );
     });
   /**
@@ -238,7 +289,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
         attributes: {
           url: embed.attributes.url,
         },
-      })
+      }),
     );
   });
 

packages/@atjson/source-html/test/ceros-embed.test.ts

@@ -3,6 +3,59 @@ import OffsetSource from "@atjson/offset-annotations";
 import { serialize } from "@atjson/document";
 
 describe("CerosEmbed", () => {
+  test("flex inline embed", () => {
+    let doc = HTMLSource.fromRaw(
+      `<div data-flex-inline style="height: 100vh" data-flex-manifest-url="https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json"></div><script src="https://assets.ceros.site/js/flex-client.js"></script>`,
+    ).convertTo(OffsetSource);
+
+    expect(serialize(doc, { withStableIds: true })).toMatchInlineSnapshot(`
+      {
+        "blocks": [
+          {
+            "attributes": {
+              "cerosType": "flex",
+              "height": "100vh",
+              "manifestUrl": "https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json",
+              "renderMode": "inline",
+            },
+            "id": "B00000000",
+            "parents": [],
+            "selfClosing": false,
+            "type": "ceros-embed",
+          },
+        ],
+        "marks": [],
+        "text": "",
+      }
+    `);
+  });
+
+  test.each([
+    "https://a-j-lawrence.ceros.site/trench-the-world-of-twenty-one-pilots/manifest.v1.json",
+    "https://a-j-lawrence.ceros.site/refined-living-real-estate/manifest.v1.json",
+    "https://a-j-lawrence.ceros.site/ge-flex-experience/manifest.v1.json",
+  ])("flex scrolling embed %s", (manifestUrl) => {
+    let doc = HTMLSource.fromRaw(
+      `<div data-flex-inline style="height: 100vh" data-flex-manifest-url="${manifestUrl}"></div><script src="https://assets.ceros.site/js/flex-client.js"></script>`,
+    ).convertTo(OffsetSource);
+
+    expect(serialize(doc, { withStableIds: true })).toMatchObject({
+      blocks: [
+        {
+          type: "ceros-embed",
+          attributes: {
+            cerosType: "flex",
+            renderMode: "inline",
+            manifestUrl,
+            height: "100vh",
+          },
+        },
+      ],
+      marks: [],
+      text: "\uFFFC",
+    });
+  });
+
   test("with mobileAspectRatio", () => {
     let doc = HTMLSource.fromRaw(
       `<div style="position: relative;width: auto;padding: 0 0 50%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none" id="experience-test" data-aspectRatio="2.01" data-mobile-aspectRatio="3.2"><iframe allowfullscreen src="//view.ceros.com/ceros-inspire/carousel-3" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 1px;width: 1px;min-height: 100%;min-width: 100%" frameborder="0" class="ceros-experience" scrolling="no"></iframe></div><script type="text/javascript" src="//view.ceros.com/scroll-proxy.min.js"></script>`,