thanhtunguet / grapesjs-react

A React wrapper for GrapesJS library
https://thanhtunguet.github.io/grapesjs-react
194 stars 58 forks source link

Add custom block in latest version #56

Closed confettidc closed 2 years ago

confettidc commented 2 years ago

Hi,

I would like to add custom blocks / plugins using the wrapper.

Now I implemented as below:

class GEditorExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pluginsOpts: {
                // xxx
            },
            storageManager: {
                // xxx
            },
            assetManager: {
                // xxx
            }
        }
        console.log(props);
    }

render() {
        return(
                <GrapesjsReact
                    id='grapesjs-react'
                    height="600px"
                    width="auto"
                    plugins={[
                        'gjs-preset-webpage',
                        'gjs-blocks-basic'
                    ]}
                    pluginsOpts={this.state.pluginsOpts}
                    storageManager={this.state.storageManager}
                    assetManager={this.state.assetManager}
                />
            );
    }
}

export default GEditorExample;

How I can add custom block (i.e. convert editor.BlockManager.add('my-block-id', xxx) here?

Thanks.

confettidc commented 2 years ago

Issue solved, thanks.