From c3125bee8778da35c447240ebe835e8fd6ca2672 Mon Sep 17 00:00:00 2001
From: Dikshita S Khandke <86658196+DikshitaKhandke@users.noreply.github.com>
Date: Tue, 7 Jul 2026 20:05:54 +0530
Subject: [PATCH 1/2] feat(ceros-flex): atc-7642 ceros flex inline embeds

---
 .../src/annotations/ceros-embed.ts            | 51 ++++++++++++++-
 packages/@atjson/renderer-html/src/index.ts   | 26 ++++++--
 .../renderer-html/test/renderer.test.ts       | 29 +++++++++
 .../src/converter/third-party-embeds.ts       | 64 +++++++++++++++++--
 .../source-html/test/ceros-embed.test.ts      | 55 ++++++++++++++++
 5 files changed, 212 insertions(+), 13 deletions(-)

diff --git a/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts b/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts
index 22ce4939e..81863a442 100644
--- a/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts
+++ b/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,49 @@ 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 client script URL for rendering Ceros Flex experiences.
+   */
+  scriptUrl?: 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";
 }
diff --git a/packages/@atjson/renderer-html/src/index.ts b/packages/@atjson/renderer-html/src/index.ts
index 2ed1fe8de..c2d077ebe 100644
--- a/packages/@atjson/renderer-html/src/index.ts
+++ b/packages/@atjson/renderer-html/src/index.ts
@@ -132,11 +132,27 @@ 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:
+          embed.attributes.scriptUrl ??
+          "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 +162,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",
diff --git a/packages/@atjson/renderer-html/test/renderer.test.ts b/packages/@atjson/renderer-html/test/renderer.test.ts
index 3f1cb2a63..8bbb375d1 100644
--- a/packages/@atjson/renderer-html/test/renderer.test.ts
+++ b/packages/@atjson/renderer-html/test/renderer.test.ts
@@ -484,6 +484,35 @@ 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",
+              scriptUrl: "https://assets.ceros.site/js/flex-client.js",
+              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",
diff --git a/packages/@atjson/source-html/src/converter/third-party-embeds.ts b/packages/@atjson/source-html/src/converter/third-party-embeds.ts
index ee0b60dee..47d93792b 100644
--- a/packages/@atjson/source-html/src/converter/third-party-embeds.ts
+++ b/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,28 @@ 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"],
+            scriptUrl: "https://assets.ceros.site/js/flex-client.js",
+            height: getInlineStyleHeight(container.attributes.style),
+          },
+        }),
+      );
+    });
+
+  doc.where(isCerosFlexClientScript).remove();
+
   containers
     .join(iframeTags, aCoversB)
     .update(function joinContainerWithFrames({ container, iframes }) {
@@ -101,7 +153,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             mobileAspectRatio,
             url: iframes[0].attributes.src,
           },
-        })
+        }),
       );
     });
 
@@ -120,7 +172,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 +194,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             channel: channel,
             open: embed.attributes.open_in,
           },
-        })
+        }),
       );
       // Remove newlines from embed code
       if (scripts.length) {
@@ -184,7 +236,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioId,
             anchorName,
           },
-        })
+        }),
       );
     });
   /**
@@ -212,7 +264,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             audioType,
             anchorName: iframe.attributes.id,
           },
-        })
+        }),
       );
     });
   /**
@@ -238,7 +290,7 @@ export default function convertThirdPartyEmbeds(doc: Document) {
         attributes: {
           url: embed.attributes.url,
         },
-      })
+      }),
     );
   });
 
diff --git a/packages/@atjson/source-html/test/ceros-embed.test.ts b/packages/@atjson/source-html/test/ceros-embed.test.ts
index b44f803af..4f5afbf19 100644
--- a/packages/@atjson/source-html/test/ceros-embed.test.ts
+++ b/packages/@atjson/source-html/test/ceros-embed.test.ts
@@ -3,6 +3,61 @@ 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",
+              "scriptUrl": "https://assets.ceros.site/js/flex-client.js",
+            },
+            "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,
+            scriptUrl: "https://assets.ceros.site/js/flex-client.js",
+            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>`,

From 8e870934db32ecec50dbf66c6b8b5a487e2f90b2 Mon Sep 17 00:00:00 2001
From: Dikshita S Khandke <86658196+DikshitaKhandke@users.noreply.github.com>
Date: Wed, 8 Jul 2026 10:45:27 +0530
Subject: [PATCH 2/2] feat(ceros-flex): atc-7642 update annotation to remove
 scripturl

---
 .../offset-annotations/src/annotations/ceros-embed.ts        | 5 -----
 packages/@atjson/renderer-html/src/index.ts                  | 4 +---
 packages/@atjson/renderer-html/test/renderer.test.ts         | 1 -
 .../@atjson/source-html/src/converter/third-party-embeds.ts  | 1 -
 packages/@atjson/source-html/test/ceros-embed.test.ts        | 2 --
 5 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts b/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts
index 81863a442..e7d5e1798 100644
--- a/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts
+++ b/packages/@atjson/offset-annotations/src/annotations/ceros-embed.ts
@@ -52,11 +52,6 @@ export type CerosFlexInlineEmbedAttributes = {
    */
   manifestUrl: string;
 
-  /**
-   * The client script URL for rendering Ceros Flex experiences.
-   */
-  scriptUrl?: string;
-
   /**
    * The inline container height for full-height scrolling Flex experiences.
    */
diff --git a/packages/@atjson/renderer-html/src/index.ts b/packages/@atjson/renderer-html/src/index.ts
index c2d077ebe..dae53799c 100644
--- a/packages/@atjson/renderer-html/src/index.ts
+++ b/packages/@atjson/renderer-html/src/index.ts
@@ -140,9 +140,7 @@ export default class HTMLRenderer extends Renderer {
           : undefined,
         "data-flex-manifest-url": embed.attributes.manifestUrl,
       }).join(" ")}></div><script ${this.htmlAttributes({
-        src:
-          embed.attributes.scriptUrl ??
-          "https://assets.ceros.site/js/flex-client.js",
+        src: "https://assets.ceros.site/js/flex-client.js",
       }).join(" ")}></script>`;
     }
 
diff --git a/packages/@atjson/renderer-html/test/renderer.test.ts b/packages/@atjson/renderer-html/test/renderer.test.ts
index 8bbb375d1..d59b8732e 100644
--- a/packages/@atjson/renderer-html/test/renderer.test.ts
+++ b/packages/@atjson/renderer-html/test/renderer.test.ts
@@ -497,7 +497,6 @@ describe("renderer-html", () => {
               renderMode: "inline",
               manifestUrl:
                 "https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json",
-              scriptUrl: "https://assets.ceros.site/js/flex-client.js",
               height: "100vh",
             },
           }),
diff --git a/packages/@atjson/source-html/src/converter/third-party-embeds.ts b/packages/@atjson/source-html/src/converter/third-party-embeds.ts
index 47d93792b..70e4dd904 100644
--- a/packages/@atjson/source-html/src/converter/third-party-embeds.ts
+++ b/packages/@atjson/source-html/src/converter/third-party-embeds.ts
@@ -119,7 +119,6 @@ export default function convertThirdPartyEmbeds(doc: Document) {
             cerosType: "flex",
             renderMode: "inline",
             manifestUrl: container.attributes.dataset["flex-manifest-url"],
-            scriptUrl: "https://assets.ceros.site/js/flex-client.js",
             height: getInlineStyleHeight(container.attributes.style),
           },
         }),
diff --git a/packages/@atjson/source-html/test/ceros-embed.test.ts b/packages/@atjson/source-html/test/ceros-embed.test.ts
index 4f5afbf19..6a5fdec50 100644
--- a/packages/@atjson/source-html/test/ceros-embed.test.ts
+++ b/packages/@atjson/source-html/test/ceros-embed.test.ts
@@ -17,7 +17,6 @@ describe("CerosEmbed", () => {
               "height": "100vh",
               "manifestUrl": "https://a-j-lawrence.ceros.site/newsletter-hub/manifest.v1.json",
               "renderMode": "inline",
-              "scriptUrl": "https://assets.ceros.site/js/flex-client.js",
             },
             "id": "B00000000",
             "parents": [],
@@ -48,7 +47,6 @@ describe("CerosEmbed", () => {
             cerosType: "flex",
             renderMode: "inline",
             manifestUrl,
-            scriptUrl: "https://assets.ceros.site/js/flex-client.js",
             height: "100vh",
           },
         },