CodeManager.getCode method get CSS class missing

[nguyenvoanhkhoa1]

I am writing an export project function.
My old method was to select each page and then get the CSS of the selected page, for example:

for (const page of editor.Pages.getAll()) {
  editor.Pages.select(page.id.toString());
  //select CSS: editor.getCss()
}

This code works really well for me, except for one thing, if you have a lot of pages, then select each of them, the canvas editor flick (but still acceptable).
So I changed to a new way, that loop but not select:

for (const page of editor.Pages.getAll()) {
  //select CSS: editor.CodeManager.getCode(page.getMainComponent(), "css")
}

The result is not sustainable, it does not have enough CSS class, but the missing classes is not the same for each call.

This is my component in the editor:

And this is my component after export:

The HTML still has the class "hero", but the CSS class is missing
There are some other classes that are missing too, but each time is not the same, so weird

• I can not find the document for CodeManager, or is it deprecated?
• Can anyone help me with another way to get CSS code, or I will use my old way that select each page and accept the flick?

Thanks all.

[artf]

Check an example here on how to get HTML/CSS from all pages

[nguyenvoanhkhoa1]

The result of my second method:

editor.CodeManager.getCode(page.getMainComponent(), "css")

and your example method

const component = page.getMainComponent();
editor.getCss({ component })

are the same, the CSS classes return are missing.
I'm not sure why but maybe it is because of my component and block, please check it:

export function loadHero(editor: Editor, opt: any = {}) {
  const c = opt;
  let bm = editor.BlockManager;
  const am = editor.AssetManager;
  const dc = editor.DomComponents;

  bm.add("hero", {
    label: "Hero",
    media: COMPONENT_ICON,
    category: opt.categoryName,
    attributes: { class: "" },
    content: {
      type: "hero",
      components: [
        {
          tagName: "img",
          selectable: false,
          droppable: false,
          draggable: false,
          hoverable: false,
          highlightable: false,
          attributes: {
            class: "hero__bg-img",
            src: SRC_DEFAULT.background,
            alt: "",
          },
        },
        {
          tagName: "div",
          selectable: false,
          droppable: false,
          draggable: false,
          hoverable: false,
          highlightable: false,
          attributes: {
            class: "container hero__container",
          },
          components: [
            {
              tagName: "div",
              attributes: { class: "hero__wrapper" },
              components: [
                {
                  tagName: "div",
                  components: [
                    {
                      type: "text",
                      tagName: "h1",
                      attributes: {
                        class: "hero__title",
                      },
                      content: "Somfy First Program",
                    },
                    {
                      tagName: "div",
                      attributes: {
                        class: "border-line",
                      },
                    },
                  ],
                },
                {
                  type: "text",
                  tagName: "h2",
                  attributes: {
                    class: "hero__sub-title",
                  },
                  content: `POWERING SMART HOME SYSTEMS<br>MOTORIZATION SOLUTIONS FOR A SMARTER HOME INSIDE & OUT`,
                },
              ],
            },
          ],
        },
      ],
    },
  });

  editor.TraitManager.addType("hero-upload-image", {
    createInput({ trait }) {
      const el = document.createElement("div");
      el.innerHTML = `
        <div class="card upload-image-area">
          <div class="card-body">
            <div class="target-img">
            <img src=${SRC_DEFAULT.logo} class="card-img-top"/>
            </div>
            <button type="button" class="change-btn">Change</button>
            <button type="button" class="remove-btn">Remove</button>
          </div>
        </div>`;

      const changeBtn = el.querySelector(".upload-image-area .card-body button.change-btn") as HTMLButtonElement;
      const removeBtn = el.querySelector(".upload-image-area .card-body button.remove-btn") as HTMLButtonElement;
      const inputImage = el.querySelector(".upload-image-area .card-body img") as HTMLImageElement;
      const logoImage = editor.getSelected()?.get("components")?.models[0];
      changeBtn.onclick = () => {
        am.open({
          select(asset, complete) {
            inputImage.src = asset.getSrc();
            setAttribute(logoImage, { src: asset.getSrc() });
            logoImage?.removeClass("d-none");
          },
        });
      };

      removeBtn.onclick = () => {
        setAttribute(logoImage, { src: SRC_DEFAULT.logo });

        inputImage.src = SRC_DEFAULT.logo;
      };

      return el;
    },

    onUpdate({ elInput, component }: any) {
      const src = $(component.view.el).find(".hero__bg-img").attr("src");
      const inputImage = elInput.querySelector(".upload-image-area .card-body img") as HTMLImageElement;
      if (src && src != "data:,") {
        inputImage.src = src;
      } else {
        inputImage.src = SRC_DEFAULT.logo;
      }
    },
  });

  dc.addType("hero", {
    model: {
      defaults: {
        name: "Hero",
        tagName: "section",
        attributes: {
          class: "hero",
        },
        traits: [
          {
            type: "hero-upload-image",
            changeProp: true,
            label: "Logo image",
            name: "logoImage",
          },
        ],
        styles: `
        .hero {
          position: relative;
        }
        .hero__bg-img {
          height: 50vh;
          width: auto;
          object-fit: cover;
          object-position: center;
          max-width: 100%;
        }
        .container.hero__container {
          position: absolute;
          inset: 0px;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .hero__wrapper {
          display: flex;
          flex-direction: column;
          color: white;
        }
        .hero__title {
          max-width: 228px;
          font-size: 65px;
          font-style: normal;
          font-weight: 700;
          line-height: 70px;
          text-transform: uppercase;
          font-size: 2.25rem;
          line-height: 2.5rem;
        }
        .border-line {
          margin-top: 1.25rem;
          width: 94px;
          height: 6px;
          background-color: var(--bs-primary);
        }
        .hero__subtitle {
          font-style: normal;
          font-weight: 400;
          font-size: 36px;
        }
        @media (min-width: 640px) {
          .hero__title {
            max-width: 304px;
            font-size: 3rem;
            line-height: 1;
          }
        }
        @media (min-width: 768px) {
          .hero__title {
            max-width: 379px;
            font-size: 3.75rem;
            line-height: 1;
          }
        }
        @media (min-width: 1024px) {
          .hero__title {
            max-width: 411px;
            font-size: 65px;
          }
          .hero__bg-img {
            width: 100%;
            height: auto;
          }
        }
        `,
        script: function () {},
      },

      init() {},
      initData() {},
    },
  });
}

The missing classes are hero, hero__wrapper (always).
Thanks for helping me

[artf]

@nguyenvoanhkhoa1 please create a minimal reproducible demo

[nguyenvoanhkhoa1]

@artf Here is the demo:

export function loadHero(editor: Editor, opt: any = {}) {
  const c = opt;
  let bm = editor.BlockManager;
  const am = editor.AssetManager;
  const dc = editor.DomComponents;

  bm.add("hero", {
    label: "Hero",
    media: COMPONENT_ICON,
    category: opt.categoryName,
    attributes: { class: "" },
    content: {
      type: "hero",
      components: [
        {
          tagName: "img",
          attributes: {
            class: "hero__bg-img",
            src: SRC_DEFAULT.background,
            alt: "",
          },
        },
        {
          tagName: "div",
          attributes: {
            class: "container hero__container",
          },
          components: [
            {
              tagName: "div",
              attributes: { class: "hero__wrapper" },
              components: [
                {
                  tagName: "div",
                  components: [],
                },
                {
                  type: "text",
                  tagName: "h2",
                  attributes: {
                    class: "hero__sub-title",
                  },
                  content: `POWERING SMART HOME SYSTEMS<br>MOTORIZATION SOLUTIONS FOR A SMARTER HOME INSIDE & OUT`,
                },
              ],
            },
          ],
        },
      ],
    },
  });

  dc.addType("hero", {
    model: {
      defaults: {
        name: "Hero",
        tagName: "section",
        attributes: {
          class: "hero",
        },
        traits: [
          {
            type: "hero-upload-image",
            changeProp: true,
            label: "Logo image",
            name: "logoImage",
          },
        ],
        styles: `
        .hero {
          position: relative;
        }
        .hero__bg-img {
        }
        .container.hero__container {
        }
        .hero__wrapper {
          display: flex;
          flex-direction: column;
          color: white;
        }
        .hero__title {
        }
        .border-line {
        }
        .hero__subtitle {
        }
        `,
        script: function () {},
      },

      init() {},
      initData() {},
    },
  });
}

The return CSS code for components that contain this block usually missing class hero and hero__wrapper. How the hell I can not explain.

[artf]

I meant a reproducible demo on something similar to jsfiddle