Creating custom components and blocks for grapesjs in React

[raroa]

Great job, Thanhtunguet! I had some path issues after instal but I solved them.

My question: how can I use GComponent class from components/GComponent.js and GBlock class from components/GBlock.js in order to create my own custom components and blocks?

If you can you provide a relevant example I would very much appreciate it.

[thanhtunguet]

Great job, Thanhtunguet! I had some path issues after instal but I solved them.

My question: how can I use GComponent class from components/GComponent.js and GBlock class from components/GBlock.js in order to create my own custom components and blocks?

If you can you provide a relevant example I would very much appreciate it.

My idea is creating abstract classes to easy implement custom components and custom blocks (GComponent and GBlock).

In my newest commit eb7d5abe035d01273cbc180fb79854b16ab9c75c, I have added an example for CustomBlock. See file src/example/CustomBlock.js. To understand properties of a block, please read the official Grapejs Docs for Block (here). The GComponent class has not been completed so it will not work. If you are able to and have time for this, please help me to make this class work. Thank you!

[raroa]

Thank you for you promt answer and fast commit!

As you only left

in https://github.com/thanhtunguet/grapesjs-react/blob/master/src/example/App.js when people download your app and intall it will only render an empty div. It would be best to move everything in example/App.js in order to render the canvas.

I did try to edit the code and succeded to render the canvas but did not succeed to display the newly created Simple Block. You have below my code: `// CustomBlock.js import React from 'react'; import GEditor from 'components/GEditor'; import GBlock from 'components/GBlock'; import 'antd/dist/antd.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';

class SimpleBlock extends GBlock { content = <div class="simple-block"> This is a simple block </div>;

constructor() { super('simple-block', 'Simple Block'); } }

const simpleBlock = new SimpleBlock();

function CustomBlock() { console.log(simpleBlock); return (

); }

export default CustomBlock;`

// exapmple/App.js `import React, { useState } from 'react'; import GEditor from '../components/GEditor'; import GBlock from 'components/GBlock'; import CustomBlock from 'example/CustomBlock'; import 'antd/dist/antd.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Button } from 'antd';

class SimpleBlock extends GBlock { content = <div class="simple-block"> This is a simple block </div>;

constructor() { super('simple-block', 'Simple Block'); } }

function App() { const [mounted, setMounted] = useState(true);

function handleMounting() { setMounted(!mounted); }

return (

{mounted ? 'Unmount' : 'Mount'}

{mounted && ( )}

); }

export default App;`

Is there something I am doing wrong or is there another setting I must fill in on other file?

I am willing to help, just not sure I can, I am not very advanced in javascript, maybe if I will have a full working example on the custom blocks I be able to do it similar for the components.

[thanhtunguet]

Thank you for you promt answer and fast commit!

As you only left

in https://github.com/thanhtunguet/grapesjs-react/blob/master/src/example/App.js when people download your app and intall it will only render an empty div. It would be best to move everything in example/App.js in order to render the canvas. I did try to edit the code and succeded to render the canvas but did not succeed to display the newly created Simple Block. You have below my code: `// CustomBlock.js import React from 'react'; import GEditor from 'components/GEditor'; import GBlock from 'components/GBlock'; import 'antd/dist/antd.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';

class SimpleBlock extends GBlock { content = <div class="simple-block"> This is a simple block </div>;

constructor() { super('simple-block', 'Simple Block'); } }

const simpleBlock = new SimpleBlock();

function CustomBlock() { console.log(simpleBlock); return (

<GEditor id="geditor" blocks={[ simpleBlock ]} />

); } export default CustomBlock;`

// exapmple/App.js `import React, { useState } from 'react'; import GEditor from '../components/GEditor'; import GBlock from 'components/GBlock'; import CustomBlock from 'example/CustomBlock'; import 'antd/dist/antd.min.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Button } from 'antd';

class SimpleBlock extends GBlock { content = <div class="simple-block"> This is a simple block </div>;

constructor() { super('simple-block', 'Simple Block'); } }

function App() { const [mounted, setMounted] = useState(true);

function handleMounting() { setMounted(!mounted); }

return (

{mounted ? 'Unmount' : 'Mount'}

{mounted && (

)}

); } export default App;`

Is there something I am doing wrong or is there another setting I must fill in on other file?

I am willing to help, just not sure I can, I am not very advanced in javascript, maybe if I will have a full working example on the custom blocks I be able to do it similar for the components.

The "example" folder contains the code I write to test what I've implemented. so maybe it makes others feel confused. Let me explain it clearly. CustomBlock is a component that will render the editor with a custom-div-block. It seems like you forgot to render CustomBlock in the render method of App.js. To get visual of it, re-implement your App's render method like below:

class App {
render() {
    return (
        <CustomBlock />
    );
}
}

[thanhtunguet]

You have two ways to test this:

1. Clone this repository, install dependencies by using yarn, then run yarn start to test example.
2. Add grapesjs-react to your project dependencies and simply import GEditor, GBlock like this:

   import GEditor, {GBlock} from 'grapesjs-react';

   If you are familiar to Storybook, you can use storybook to view my examples conveniently:

In Terminal, run: yarn start-storybook

Here is stories.js file

import React from 'react';
import { storiesOf } from '@storybook/react';
import EditorMounting from './EditorMounting';
import CustomBlock from './CustomBlock';
import 'grapesjs/dist/css/grapes.min.css';

storiesOf('GrapesJS React', module)
  .add('mounting', () => (
    <EditorMounting/>
  ))
  .add('custom-block', () => (
    <CustomBlock/>
  ));