Load child components traits in parent component and connect attributes

[jcenlo]

I'm trying to create a component that contains a couple of child components, each with their own traits. My intention is to load these child components' traits in the parent component and make it work, but I'm running into some issues.

I can load the traits in the parent component and connect the values, but array of childTypes is not working, i have to refactor that.

I am not sure if there is another method to do this, trough "collections" maybe?

import type { Editor } from "grapesjs";
import { AddBlockType } from "../index";
import { getTextTraits } from "../traits";

const type = "checkbox";

export const Checkbox = (addBlock: AddBlockType) => {
  addBlock(type, {
    label: "Checkbox",
    media: ``,
    content: {
      type: type,
    },
  });
};

export default function (editor: Editor) {
  const { Components } = editor;

  const checkIfInPreview = (ev: Event) => {
    if (!editor.Commands.isActive("preview")) {
      ev.preventDefault();
    }
  };

  Components.addType("input-checkbox", {
    extend: "input",
    isComponent: (el: HTMLElement) =>
      el.tagName == "INPUT" && (el as HTMLInputElement).type == "checkbox",

    model: {
      defaults: {
        classes: ["form-check-input"],
        attributes: { type: "checkbox" },
        traits: [
          "id",
          "name",
          "value",
          {
            label: "Required",
            type: "checkbox",
            name: "required",
          },
          {
            label: "Checked",
            type: "checkbox",
            name: "checked",
          },
          {
            label: "Disabled",
            type: "checkbox",
            name: "disabled",
          },
          // getTextTraits([]),
        ],
      },
    },
    view: {
      events: {
        click: checkIfInPreview,
      },

      init() {
        // @ts-ignore
        this.listenTo( this.model,
          "change:attributes:checked",
          this.handleChecked
        );
      },

      handleChecked() {
        // @ts-ignore
        this.el.checked = !!this.model.get("attributes")?.checked;
      },
    },
  });

  const inputCheckboxType = Components.getType("input-checkbox");
  const labelType = Components.getType("label");
  // checkbox
  Components.addType(type, {
    // extend: "input-radio",
    isComponent: (el: HTMLElement) =>
      el?.classList?.contains("form-check") &&
      el.querySelector("input[type='checkbox']") !== null,

    model: {
      defaults: {
        tagName: "div",
        classes: ["form-check"],
        components: [
          {
            type: "input-checkbox",
          },
          {
            type: "label",
            classes: ["form-check-label"],
            content: "Checkbox item",
          },
        ],

      },
      init() {
        const tr = [
          ...inputCheckboxType?.model.prototype.defaults.traits,
          ...labelType?.model.prototype.defaults.traits,
        ]
        //@ts-ignore
        this.setTraits(tr);


        const childTypes = ["input-checkbox", "label"]; // replace with the desired child component types
        //@ts-ignore
        const child = this.components().models.find((c: any) => childTypes.includes(c.get('type')));

        console.log(child,'child')
        if (child) {
          // Update the child component's traits with the parent component's traits
          //@ts-ignore
          child.setTraits([...this.getTraits()]);
        }
        // Listen to any attribute change
        //@ts-ignore

        this.on("change:attributes", this.handleAttrChange);
      },

      handleAttrChange(this: any) {
        // Get the child component

      }
      
    },
  });
}

[artf]

You should somehow to instruct your traits on where to get/set values, the default trait applies changes on its own component. Probably from the parent component you should set up the listener for the trait and then propagate those changes to its inner children

[jcenlo]

I was considering implementing a feature to automatically load and connect child traits, but I wasn't sure if something similar already existed. I'm not sure if it's worth implementing, as I'm testing the editor and it seems that most editing will be done on individual elements, which are handled with the types. It's challenging to decide where to draw the line between component atomization, I think it ultimately depends on the users' HTML proficiency.