using the grapes cli to create a plugin

[arunkumar413]

Hi Team,

I'm trying to use the grapes cli tool (https://github.com/artf/grapesjs-cli) to create a plugin to be used with a react project. The cli tool created blocks.js, components.js and an index.js files. The index.js file contains the below code:

export default (editor, opts = {}) => {
  const options = {
    ...{
      // default options
    },
    ...opts
  };

  // Add components
  loadComponents(editor, options);
  // Add blocks
  loadBlocks(editor, options);

  // TODO Remove
  editor.on("load", () =>
    editor.addComponents(
      `<div style="margin:100px; padding:25px;">

        </div>`,
      { at: 0 }
    )
  );

Which of the following should be used to define components? Is the loadComponents used for loading the components defined in the components.js or adding the components?

1) loadComponents(editor, options) 2) editor.addComponents( ) 3) Or use the components.js file

Could you please make a few codesandboxes to helps us better understand on how to use grapesjs with react, jsx, UI tool kits such as material-UI etc,.

Thanks, Arun

[pouyamiralayi]

@arunkumar413 this issue must be posted at grapesjs-cli

Which of the following should be used to define components?

you must define your components at components.js file. loadComponents is the named import of that file. after that you must define your blocks inside blocks.js file in order to expose your defined components for usage. cheers!

[artf]

Could you please make a few codesandboxes to helps us better understand on how to use grapesjs with react, jsx, UI tool kits such as material-UI etc,.

https://github.com/artf/grapesjs/issues/2370#issuecomment-550515205