Creating new container component type: Add placeholder, default size, and automatically resize to inner components

[benryanwilliams]

I'm trying to create a new for-each-container component type that manages a 'for each' condition e.g. for each 'invoice' in 'customer.invoices', repeat the inner components (which could be anything - text components, images, table rows etc.). The idea is to create a container component similar to '1 Column' from the grapesjs-blocks-basic plugin, but it needs attributes to be stored in / fetched from the component, so I'll need to create a component TYPE rather than just a basic component.

The for-each-container component should behave as follows:

1. When dragged from blocks to the canvas, the for-each-container should be the same width as the parent component that it's dragged into, with a default height (the same behaviour as '1 Column' from grapesjs-blocks-basic). It should contain a single div that other components can be dragged into. Default padding of 10px should be applied to the for-each-container so that the user can either click on this or the div inside of it easily. This padding should be able to be changed or removed via the styles pane as with other components.

2. The div should have a centered placeholder ('Drag an element here') when empty, similar to this issue: QUESTION: Set component's empty state #3076, but for some reason applying the logic from this issue doesn't work for me. I have had to revise the code slightly (see my code at the bottom of this post) otherwise I get an Uncaught TypeError relating to UniveralModuleDefinition. When I actually drag the block onto the canvas, the component is added to the layers manager but does not appear on the screen at all:

Screen.Recording.2022-08-24.at.16.44.54-1.mov

Note: you can see the console logs in my code below - both are null when the app is first run, and if I don't have another if statement to check for (doc) it causes an Uncaught TypeError. It makes sense that stl would be null to begin with, which is when the style is applied, but if I had many of these components surely it wouldn't work anyway because the id ("style#foreach") would be the same for all of them?

3. When dragging another component into the div inside the for-each-container, both the div and the for-each-container should automatically resize to the total size of the component(s) inside of it (with default padding of 10px between the div and the for-each-container so that the user can still click on the for-each-container and its child component(s) independently - this padding can also be changed / removed via the styles pane).

4. The logic for repeating the inner component(s), when the final document is actually rendered, will be handled on the server side using Liquid (Shopify's templating language), and the HTML output shouldn't be a problem for me to handle. The main point of this question is regarding the view of the component. The for-each-container on the canvas should only ever show one div inside of it, which contains the components that have been dragged into it - there is no need to show multiple divs on the canvas (e.g. for each 'invoice' in 'customer.invoices' - this will only happen when the document is finally rendered).

5. However, the for-each-container within the HTML will still need to be able to flex to allow for multiple divs inside of it when rendering (e.g. one div for each 'invoice' in 'customer.invoices'), so I guess the style of the for-each-container will have to be changed to 'flex', and the flex direction will also need to be editable via the styles pane e.g. if the user wants the repeated divs inside of it to be positioned horizontally rather than vertically. Presumably this is a CSS thing that should automatically be handled by the styles pane, same as with the padding.

Here's what I've done so far:

export default (editor = {}) => {
  const domComponents = editor.DomComponents

  domComponents.addType("for-each-container", {
    extend: "default",
    isComponent: (el) => el.tagName == "FOREACH",
    model: {
      defaults: {
        name: "For-Each Block",
        tagName: "foreach",
        displayedObject: {},
        forEachObjects: [],
        displayedObjectIndex: -1,
        isNew: true,
      },
    },
    view: {
      init() {
        const doc = editor.Canvas.getDocument()
        console.log(doc) // Returns null when loading app but returns document when dragging block onto canvas
        if (doc) {
          const stl = doc.querySelector("style#foreach")
          console.log(stl) // Returns null when dragging first block onto canvas but returns below style block when dragging second block onto canvas
        if (!stl) {
          doc.body.insertAdjacentHTML(
            "beforeend", `
          <style id="foreach">
           .cc-class:empty:after {
              content: "Empty block";
              text-align: center;
              display: block;
            }
           </style>
          `);
        }
        }
        
      },

      events: {
        dblclick: "onDblClick",
      },

      onDblClick() {
        editor.Commands.get("open-for-each").run()
      },
    },
  })
}

Hopefully this makes sense, but let me know if you need any more information.

Thanks in advance for your help!

[benryanwilliams]

I've managed to implement most of the above by copying and editing the code from grapesjs-blocks-basic as follows:

export default (editor = {}) => {
  const domComponents = editor.DomComponents

  // FOR-EACH CONTAINER

  const rowHeight = 30;
  const clsRow = `for-each-row`;
  const clsCell = `for-each-cell`;
  const styleRow = `
    .${clsRow} {
      display: table;
      padding: 10px;
      width: 100%;
    }
    @media (max-width: 768px) {
      .${clsCell} {
        width: 100%;
        display: block;
      }
    }`;
  const styleClm = `
    .${clsCell} {
      width: 8%;
      display: table-cell;
      height: ${rowHeight}px;
    }`;

  const styleEmptyCell = `
  .${clsCell}:empty:after {
    content: "Drag elements into here";
    text-align: center;
    line-height: 30px;
    display: table-cell;
  }
  `;

  const step = 0.2;
  const minDim = 1;
  const currentUnit = 1;
  const resizerBtm = {
    tl: 0,
    tc: 0,
    tr: 0,
    cl: 0,
    cr: 0,
    bl: 0,
    br: 0,
    minDim
  };
  const resizerRight = {
    ...resizerBtm,
    cr: 1,
    bc: 0,
    currentUnit,
    minDim,
    step
  };

  const rowAttr = {
    class: clsRow,
    'data-gjs-draggable': false,
    'data-gjs-droppable': `.${clsCell}`,
    'data-gjs-resizable': resizerBtm,
    'data-gjs-name': 'For-Each Row'
  };

  const colAttr = {
    class: clsCell,
    'data-gjs-draggable': `.${clsRow}`,
    'data-gjs-resizable': resizerRight,
    'data-gjs-name': 'For-Each Cell'
  };

  // Make row and column classes private
  const privateCls = [`.${clsRow}`, `.${clsCell}`];
  editor.on(
    'selector:add',
    selector =>
      privateCls.indexOf(selector.getFullName()) >= 0 &&
      selector.set('private', 1)
  );

  const attrsToString = attrs => {
    const result = [];

    for (let key in attrs) {
      let value = attrs[key];
      const toParse = value instanceof Array || value instanceof Object;
      value = toParse ? JSON.stringify(value) : value;
      result.push(`${key}=${toParse ? `'${value}'` : `'${value}'`}`);
    }

    return result.length ? ` ${result.join(' ')}` : '';
  };

  const attrsRow = attrsToString(rowAttr);
  const attrsCell = attrsToString(colAttr);

  domComponents.addType("for-each-container", {
    extend: "default",
    isComponent: (el) => el.tagName == "FOREACH",
    model: {
      defaults: {
        name: "For-Each Container",
        tagName: "foreach",
        variable: null,
        isNew: true,
        components: `
        <div ${attrsRow}>
          <div ${attrsCell}></div>
        </div>
      ${ `<style>
          ${styleRow}
          ${styleClm}
          ${styleEmptyCell}
        </style>`
      }`
      },
    },
    view: {
      events: {
        dblclick: "onDblClick",
      },

      onDblClick() {
        editor.Commands.get("open-for-each").run()
      },
    },
  })
}

Most of the questions in the original post can therefore be disregarded, which you'll be happy about @artf.

The only problem with this is that I want the for-each-container component itself to have a blue outline and a title when selected, the same as the for-each-row and for-each-cell components. This is how the user is able to access the dialog allowing them to select the 'for x in y' condition to apply. At the minute, the only way to select the for-each-container is to select the for-each-row and click the up arrow (or access it via the layers manager), which is fine, but it doesn't show an outline or have a title when selected.

Here's a video showing the current behaviour:

Screen.Recording.2022-08-29.at.15.53.40-1.mov

Let me know if you need any further information, thanks in advance.

[benryanwilliams]

Fixed it! The reason is that the tagName property inside defaults is foreach and therefore the default stylings (blue border etc.) aren't being applied - if I change this to div it works.