Need help with creating custom 2 column layout using React component.

[Pranav4399]

Hello. Thanks for creating this great library. For our use case, we have requirements to create a custom 2-column layout through react component. But doing so is preventing any child control(Textbox, Link, Map etc.) to be added within that. I'm attaching the code of the 2-column layout react component and the addType method below as well.

DoubleColumn.js (React Component)

import React, { useState } from "react"; const DoubleColumn = () => { return ( <div style={{minHeight: '100px', display: 'flex', width: '100%'}}> <div style={{border: '1px solid green', width: '50%'}} data-gjs-type="default" className="row-cell" draggable="true"></div> <div style={{border: '1px solid red', width: '50%'}} data-gjs-type="default" className="row-cell" draggable="true"></div> {/* <div id="i96i" data-gjs-type="default" draggable="true" data-highlightable="1" class="row-cell"></div> */} </div> ) } export default DoubleColumn;

Code added in Plugin file

editor.Components.addType('DoubleColumn', { extend: 'react-component', model: { defaults: { component: DoubleColumn, stylable: true, resizable: false, editable: true, draggable: true, droppable: true, attributes: { style: 'height: 100px;' }, traits: [ { label: 'MLS ID', name: 'mlsid' } ] } }, isComponent: (el) => el.tagName === 'DOUBLECOLUMN' });

editor.BlockManager.add('doublecolumn', { label: "<div class='gjs-fonts gjs-f-b1'>2 Column</div>", category: 'Section Components', content: '<DoubleColumn></DoubleColumn>' });

This is how the component renders in the DOM normally -

When I try to drag an textbox into one of the child divs, the gjs-selected-parent attribute is getting applied to the parent div as seen below -

The main reason for this requirement is because we require the code of every form created in GrapeJS to be converted to JSON format. The existing column layouts show code in HTML format but we require them to be rendered as react component code as well similar to how custom components behave. I've also attached the difference between HTML code and React Code below -

All the code I've mentioned are written on top of this code already present in this great repository - https://github.com/beepsoft/grapesjs-react-components-by-artf

Please let me know if this use case is possible. Thanks & Cheers.

[artf]

Your react component doesn't allow children inside.
You should split DoubleColumn in 2 components: one for the row and one for the column (both with the possibility to pass children), then you should be able to drop other components inside.

Row component

const Row = ({ children }) => {
  return <div ....>{children}</div>
}

Column component

const Column = ({ children }) => {
  return <div ....>{children}</div>
}

And your block would be something like this:

editor.BlockManager.add('doublecolumn', {
  // ...
  content: `
  <Row>
    <Column></Column>
    <Column></Column>
  </Row>
` 
});

[artf]

Are you trying to move text/link or react columns? Reproducible demo would be helpful here

[Julia-Alberici]

Hi! I'm facing the exact same problem now and can't see a way to work around it. @Pranav4399 you were able to make this work? If so, could you point me in the right direction?
@artf he's trying to move the text/link inside the react columns, the problem is that we can't choose the location of the component drop inside of the react column, it will always be dropped on top, I was able to create a demo here: https://codesandbox.io/s/grapesjs-react-components-forked-q6v6vm?file=/src/mui-components/index.js
just try to add or move a component to bottom of the "custom row", it's impossible.

I also made a video to make sure the issue it's clear, if you need more info, pls let me know
https://github.com/GrapesJS/grapesjs/assets/101437173/3e27b074-8134-470c-987e-ec7ce3749959

[Pranav4399]

Hello. We couldn't resolve this issue unfortunately and due to our timelines, we ended up writing our own code for building our own page builder suiting our needs. But this does looks like a bug and in case if maintainers look into this and create an issue, we can try to resolve this.

[Pranav4399]

Hello. From what I explored, this issues seems to be fixed already. Please refer this site- https://thanhtunguet.info/grapesjs-react/?path=/story/grapesjsreact--primary

[Julia-Alberici]

Hi @Pranav4399. Thanks to answer!! I actually solve this a few days ago, just didn't have the time to update this discussion, but here it go:
It was never a grapesjs issue, just the way we're implementing it with react, there was a silly bug in the base component definition of the react demo, here's the changes I made

Basically, grapesjs uses the method getChildrenContainer to calculate where the block/component will be dropped (amoung other things) since previously this method was returning a "fake" element that didn't have the other children inserted before, it was leading to miscalculation, (eg. the children container in the DOM had 2 buttons, then when the third button it's dropped, grapesjs calls getChildrenContainer that returns an empty element,, since it's empty it just insert the third button in the first position). I'm sorry if i coudn't make this clear, anyway, here's a working demo in case anyone needs it someday https://codesandbox.io/s/grapesjs-react-components-forked-9n8v94?file=/src/base-react-component.js

[artf]

Thank you @Julia-Alberici ❤️
Updated the original demo with your fixes.