[Question] How to append style manager to custom panel

[christianbalderrama]

I would like to append the whole style manager module to a panel? I have been digging up the docs for the past 2 days and couldn't find a proper example for this one.

I have initialized the GrapeJS Editor panel as empty array to remove all the panels and have a custom panel that is provided in the example as well

For now it looks like this:

I want the style manager to move below the custom panel that is in the right.

Thank you!

[christianbalderrama]

Is there a proper way via grapesjs that I just don't know or it have to be overriden via css

[christianbalderrama]

.panel-top {
  padding: 0;
  width: 100%;
  display: flex;
  position: initial;
  justify-content: center;
  justify-content: space-between;
}
.panel-top-actions {
  position: initial;
}

        <Row>
          <Col xs={10} md={10} lg={10}>
            <div id={this.state.id} ref={ref} style={{height}}>
              {children}
            </div>
          </Col>
          <Col xs={2} md={2} lg={2}>
            <div className="panel-top">
              <div className="panel-top-actions"></div>
            </div>
          </Col>
        </Row>

[pouyamiralayi]

Hi @christianbalderrama Inside your initialization config:

editor = grapesjs.init({
    //...
    styleManager: {
        appendTo: '#style-mgr',
        sectors:[
        //...
        ]
    }
)}

for the sectors, here is the sectors used inside demo. Cheers!

[christianbalderrama]

I have tried to append it via styleManager by targetting the .panel-top-actions but it didn't took effect

[pouyamiralayi]

@christianbalderrama please checkout this one which is using custom panels, see if it can help you out. Cheers!

[artf]

@christianbalderrama the examples provided by @pouyamiralayi are correct so you just need to ensure that .panel-top-actions is available on grapesjs init (you're using React so, it might happen something in between with elements)

[paooolino]

Sorry for reopening this. My question is related to this main one. In the provided example, we are losing the message "Select an element before using Style Manager". How can we keep this behaviour while having the StyleManager appended to a custom div? I wonder if there is a simpler solution than manually listening for events and update the interface accordingly.