How to add a selectable table row component with no content

[benryanwilliams]

What I'm trying to achieve

N.B. This is just background information and isn't required to answer the question, so just go to 'The problem that I have' below if you don't want to read all of this.

I've created a for-each block and conditional text block (which both use Shopify's liquid template language to generate html to be rendered server-side) so that the user can use their data to automatically populate their document e.g. 'for each invoice in sales.invoices, display the invoice number, customer id and invoice amount', and I'm therefore trying to create separate table components (table shell, table-row and table-cell), so that the user can achieve the following two examples:

Example 1 - showing simple invoice details horizontally in a table

1. Drag a table-shell block (html content is just <table></table>) onto the canvas
2. Drag a for-each block into the table-shell component and select 'for each invoice in sales.invoices'
3. Drag a table-row block (html content is just <tr></tr>) into the for-each component
4. Drag 3 table-cell blocks (html content is just <td></td>) into the table-row component
5. Drag a conditional-text block into each table-cell component, selecting the following conditions:
   cell 1) If invoice.number exists, insert invoice.number, else insert 'N/A'
   cell 2) If invoice.customer.id exists, insert invoice.customer.id, else insert 'N/A'
   cell 3) If invoice.amount exists, insert invoice.amount, else insert 'N/A'

And the idea is that when rendering it will display a table containing a row for each invoice in sales.invoices, and 3 cells in each row, containing the invoice.number, invoice.customer.id and invoice.amount respectively.

Example 2 - showing simple invoice details vertically in a table

1. Drag a table-shell block (html content is just <table></table>) onto the canvas
2. Drag 3 table-row blocks (html content is just <tr></tr>) into the table-shell component
3. Drag a for-each block into each table-row component and select 'for each invoice in sales.invoices'
4. Drag a table-cell block (html content is just <td></td>) into each for-each component
5. Drag a conditional-text block into each table-cell component, selecting the following conditions:
   cell 1) If invoice.number exists, insert invoice.number, else insert 'N/A'
   cell 2) If invoice.customer.id exists, insert invoice.customer.id, else insert 'N/A'
   cell 3) If invoice.amount exists, insert invoice.amount, else insert 'N/A'

And the idea here is that when rendering it will display a table with 3 rows, and each row will contain a cell for each invoice in sales.invoices. The first row will display the invoice.number for each invoice, the second row will display the invoice.customer.id for each invoice, and the third row will display the invoice.amount for each invoice.

The problem that I have

My custom table-row component is not selectable, and I can't drag other blocks e.g. for-each and table-cell into it unless I add some default content to the component:

export default (domComponents, options) => {
  domComponents.addType(options.separatesRow, {
    isComponent: el => el.tagName === 'SEPARATESROW',
    model: {
      defaults: {
        name: 'Table Row',
        tagName: 'tr',
        content: 'Insert table cell or for each component here' // This line allows other components to be dragged into it
      }
    },
  });
};

I want to be able to drag a table-row block into the canvas without any content, but if I remove the content line I can't select it or drag other components into it. Please see both videos below:

Video 1 - with content line - Allows selection of row and inserting of cells but text inside row is still displayed

Screen.Recording.2022-11-10.at.11.41.31-1.mov

Video 2 - without content line - Doesn't allow selection of row or inserting of cells

Screen.Recording.2022-11-10.at.11.45.32-1.mov

Is this because of the default way that table rows are treated by the grapesjs framework? If so, is there any way of changing this?

The same actually goes for creating any component types without content - if I try to create a div container component type (used for the for-each container), I cannot drag anything into it unless I add some content or sub-components. Is there no way of creating a component type that only has one level e.g. <div id="ilzvk" liquidtag="foreach" liquid="for invoice in sales.invoices" class="for-each-container"></div> but with the ability to select it / drop other components inside of it?

[artf]

Hi @benryanwilliams you can apply some default styles on your components in order to give them some initial dimension and being able to drop other components inside.

[benryanwilliams]

Thanks @artf - got it all working, and also managed to add placeholder text to the component using your method here #3076 (comment).

[benryanwilliams]

Actually @artf, still having trouble with this. If I use this method (#3076 (comment)) to add placeholder text to the component I have the following problems:

1. If multiple components are added, they will all have the same class, and therefore if I resize / style one of them, all the others will also be resized / styled. Am I applying the empty:after css correctly? Is there any way to create separate unique classes on the fly? Or apply the empty:after css to the id of the component rather than a class?

2. I cannot resize the component if I add default styling to it - it just applies the resizing to the class, rather than the id of the component. Presumably this is because the class css conflicts with the style (id) css. If I remove the default styling (style: { height: '100px', width: '100%'},), it's resizeable, but I need the component to have a default size. Is there any way around this?

Here's the relevant code:

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

  const name = options.nameAdvancedTable
  const label = options.labelAdvancedTable
  const extendName = options.nameAdvancedTableBase

  domComponents.addType(name, {
    extend: extendName,
    isComponent: el => el.tagName === 'ADVANCEDTABLE',
    model: {
      defaults: {
        name: label,
        tagName: 'table',
        resizable: options.tblResizable,
        style: { height: '100px', width: '100%'},
        classes: [name],
      }
    },
    view: {
      init() {
        const doc = editor.Canvas.getDocument()
        if (!doc) { return }

        const stl = doc?.querySelector(`style#${name}`);
        if (!stl) {
          doc.body.insertAdjacentHTML('beforeend', `
          <style id=${name}>
            .${name}:empty:after {
              content: "${label}";
              height: 100%;
              font-size: large;
              color: gray;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          </style>
          `);
        } 
      }, 
    }
  });
};

... and here's the html / css output after trying to resize the table (the height and width of the advanced-table change, but the table still adheres to the #i41k css:

<body id="igst">
  <table id="i41k" conditional="true" class="advanced-table">
  </table>
</body>

<style>
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  .for-each-cell:empty::after{
    content:"Drag elements into here";
    text-align:center;
    line-height:30px;
    display:table-cell;
  }
  .advanced-table{
    height:174.26171875px;
    width:1009.640625px;
  }
  #i41k{
    height:100px;
    width:100%;
  }
</style>

Bonus question: How do I make a component's label stay there while the component is selected (not just when hovering over it)? For the table components, it's difficult to see which component is selected (table, tbody, tr, td etc.), so for these I just want the label badge to behave the same way as the component toolbar (be visible all the time while the component is selected).

[artf]

Please refer to this option https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

[benryanwilliams]

Please refer to this option https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

Amazing, thanks @artf