I want to add a new slick slide using traits

[zedo-san]

Hello @artf , hope you're having a great day.

I am creating a slider plugin using slick.
I have here a button trait where it adds a new slick slide

traits: [
          {
            name: "addNewSlideButton",
            full: true,
            label: "",
            type: "button",
            text: "Add new slide",
            noLabel: true,
            changeProp: 1,
            command: (editor, sender) => {
              const component = editor.getSelected();
              const model = sender.target;
              const el = sender.target.view.el;
              const currentSlides = el.children[3].children;

              const currentNumberOfSlides = currentSlides.length;
              const newSlidesLength = currentNumberOfSlides + 1;
              const slideTraitName = `slide${newSlidesLength}`;

              model.addTrait(newSlideTrait(slideTraitName, newSlidesLength));
              model.set(slideTraitName, "defaultTemplate");
              model.on(`change:slide${newSlidesLength}`, function () {
                const selectedTemplate = model.get(slideTraitName);
                onChangeSlideTemplate({
                  slideName: slideTraitName,
                  selectedTemplate,
                  slideNum: newSlidesLength,
                  model,
                  el,
                  editor,
                });
              });

              el.slick.addSlide(
                /*html*/
                `<div class="slick-slide" id="slide${newSlidesLength}">
                    <div class="hero-template">
                      <div class="content-left container">
                        <div class="hero-media">
                          <div class="image-container">
                            <img
                              src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                              alt="Add file"
                            />
                          </div>
                        </div>
                      </div>
                      <div class="hero-main container">
                        <h2 class="display-3 fw-semibold heading">Heading</h2>
                        <h4 class="display-5 fw-semibold subheading">Subheading</h4>
                        <p class="lead description">Description</p>
                        <div class="call-to-action">
                          <a href="#" class="btn btn-primary btn-lg px-4">Hover me</a>
                        </div>
                      </div>
                      <div class="content-right container">
                        <div class="hero-media">
                          <div class="image-container">
                            <img
                              src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                              alt="Add file"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                `
              );
            },
          },
        ],

helpers.js

export const newSlideTrait = (slideName, slideNum) => ({
  type: "select",
  label: `Slide ${slideNum}`,
  name: slideName,
  options: [
    {
      value: "defaultTemplate",
      name: "Default Template",
    },
    {
      value: "heroImagePlacementLeft",
      name: "With Hero Image on Left",
    },
    {
      value: "heroImagePlacementRight",
      name: "WIth Hero Image on Right",
    },
    { value: "removeSlide", name: "Remove slide" },
  ],
  changeProp: 1,
});
export const onChangeSlideTemplate = ({ model, el, slideName, selectedTemplate, slideNum, editor }) => {
 .........
};

Now it adds a slide into the canvas and it also adds the new trait but when I check on the model it only has the first three slides that I have pre made when creating the block. Meaning it doesn't really add the new slide with the rest of the child components. I assume that I should use model.append(), it adds the element but is not working. I think because of not using the slick commands of adding slides.

This is what happens when I use model.append()

Here is my block btw
blocks.js

export default (editor, options) => {
  const bm = editor.BlockManager;
  const style = /*css*/ `
    <style>
      ......
    </style>
  `;

  bm.add(options.name, {
    id: "slider",
    label: "Slider",
    media: /* html */ `
      <svg class="custom-blocks" width="53" height="48" viewBox="0 0 53 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        .....
      </svg>
    `,
    content: /* html */ ` 
      <div class="slick-slider" id="slick-slider">
        <div class="slick-slide" id="slide1">
          <div class="hero-template">
            <div class="content-left container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-image-or-video.png"
                    alt="Add image or video here"
                  />
                </div>
              </div>
            </div>
            <div class="hero-main container">
              <h2 class="display-3 fw-semibold heading">Heading</h2>
              <h4 class="display-5 fw-semibold subheading">Subheading</h4>
              <p class="lead description">Description</p>
              <div class="call-to-action">
                <a href="#" class="btn btn-primary btn-lg px-4">Hover me</a>
              </div>
            </div>
            <div class="content-right container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                    alt="Add file"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="slick-slide" id="slide2">
          <div class="hero-template">
            <div class="content-left container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-image-or-video.png"
                    alt="Add image or video here"
                  />
                </div>
              </div>
            </div>
            <div class="hero-main container">
              <h2 class="display-3 fw-semibold heading">Heading</h2>
              <h4 class="display-5 fw-semibold subheading">Subheading</h4>
              <p class="lead description">Description</p>
              <div class="call-to-action">
                <a href="#" class="btn btn-primary btn-lg px-4">Hover me</a>
              </div>
            </div>
            <div class="content-right container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                    alt="Add file"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="slick-slide" id="slide3">
          <div class="hero-template">
            <div class="content-left container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                    alt="Add file"
                  />
                </div>
              </div>
            </div>
            <div class="hero-main container">
              <h2 class="display-3 fw-semibold heading">Heading</h2>
              <h4 class="display-5 fw-semibold subheading">Subheading</h4>
              <p class="lead description">Description</p>
              <div class="call-to-action">
                <a href="#" class="btn btn-primary btn-lg px-4">Hover me</a>
              </div>
            </div>
            <div class="content-right container">
              <div class="hero-media">
                <div class="image-container">
                  <img
                    src="https://p1-mediaserver.s3.ap-southeast-1.amazonaws.com/builder/assets/images/add-file-image.png"
                    alt="Add file"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      ${style}
    `,
    category: "Elements",
  });
};

[artf]

Yeah you have to add the component via model if you want those elements to be available in the final HTML. I guess from the slick API you should find a way to refresh/remount the slider once a new slide is added