How to setup the development environment?

How do I export the various CSS and the HTML objects in the editor state into one single HTML file?

How do I add custom component via the plugin and assign their pluginOpt.

Throwing error for nextjs window is not defined

I tried importing this library on Nextjs first and failed(despite dynamic loading etc).
Thought its a problem with Nextjs config or something and therefore moved to React.
Same problem on React too.

import 'grapesjs-preset-webpage';
import {Editor} from 'grapesjs-react'

import 'grapesjs/dist/css/grapes.min.css';

const Primary = () => {
  return <Editor
    id='grapesjs-react'
    plugins={[
      
      'gjs-blocks-basic'
    ]}
  />;
};
export default Primary;

This is the error I get:
Attempted import error: 'grapesjs-react' does not contain a default export (imported as 'Editor').

Tried using import Editor from 'grapesjs-react'
and
import {GEditor} from 'grapesjs-react' as well.

Not working in both React and Nextjs.

Here are the dependencies of React:
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"grapesjs": "^0.17.19",
"grapesjs-preset-webpage": "^0.1.11",
"grapesjs-react": "^4.0.1-alpha",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},

Is it possible to develop custom components with React, to use Hooks like useState, useEffect and useContext?

<--- Last few GCs --->

[5930:0x102802000] 42499 ms: Scavenge 1370.6 (1421.3) -> 1369.8 (1421.8) MB, 6.6 / 0.0 ms (average mu = 0.195, current mu = 0.128) allocation failure
[5930:0x102802000] 44135 ms: Mark-sweep 1370.0 (1421.8) -> 1369.8 (1418.8) MB, 1635.1 / 0.0 ms (average mu = 0.127, current mu = 0.052) allocation failure GC in old space requested
[5930:0x102802000] 44176 ms: Scavenge 1375.4 (1423.3) -> 1374.4 (1423.8) MB, 13.5 / 0.0 ms (average mu = 0.127, current mu = 0.052) allocation failure

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x3b9e0575be3d]

Security context: 0x01d6f0b1e6e9
1: SourceMapConsumer_allGeneratedPositionsFor [0x1d6323f89b1] [/Users/macbook/Documents/Poso/Web/XCUBE/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x3b9e063164db](this=0x01d69cb02309 ,aArgs=0x01d60ec11451 )
2: /* anonymous /(aka / anony...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10003cff5 node::Abort() [/usr/local/bin/node]
2: 0x10003d1ff node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0x1001b8265 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
4: 0x1005861c2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
5: 0x100588c95 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
6: 0x100584b3f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
7: 0x100582d14 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0x10058f5ac v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
9: 0x10058f62f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x10055ef74 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
11: 0x1007e7254 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x3b9e0575be3d
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbook/.npm/_logs/2020-02-24T11_20_10_567Z-debug.log

When I remove Grapesjs, everything works fine!!!

`Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ReportEditor.`

import { Editor } from 'grapesjs-react';

check the following path

./src/components/GEditor.js
Module not found: You attempted to import /components/GComponent which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

I got this error when I tried to clone and run locally

FIX: replace import GComponent from '/components/GComponent'; as import GComponent from './GComponent';

Any idea what this would be about?

ERROR in libs/grapes/src/lib/grapes.tsx:13:7
TS2322: Type '{ id: string; plugins: string[]; }' is not assignable to type 'IntrinsicAttributes & GrapesjsReactProps & { children?: ReactNode; }'.
Property 'plugins' does not exist on type 'IntrinsicAttributes & GrapesjsReactProps & { children?: ReactNode; }'.
11 | <GrapesjsReact
12 | id='grapesjs-react'

13 | plugins={[
| ^^^^^^^
14 | 'gjs-preset-webpage',
15 | 'gjs-blocks-basic'
16 | ]}

Here's the code - it works fine if I remove the plugins attribute:

import 'grapesjs-preset-webpage';
import { GrapesjsReact } from 'grapesjs-react';
export interface GrapesProps { }

export function Grapes(props: GrapesProps) {
  return (
    <GrapesjsReact
      id='grapesjs-react'
      plugins={[
        'gjs-preset-webpage',
        'gjs-blocks-basic'
      ]}
    />
  );
}

export default Grapes;

I wrote:

` <GrapesjsReact
id='grapesjs-react'
plugins={[
'gjs-preset-webpage',
'gjs-blocks-basic'
]}
pluginsOpts={{
"gjs-blocks-basic": {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map']
}
}}

    />;`

My blocks session remain empty

`
"grapesjs": "^0.19.5",
"grapesjs-blocks-basic": "^1.0.2",
"grapesjs-preset-webpage": "^1.0.3",
"grapesjs-react": "^4.0.1",``

Hello,
first of all i would like to thank you for creating grapesjs-react. I am just new to grapesjs.

Can I ask how to access the html elements and the style of it? I want to save it to the database. I can access it through localstorage and save it as a state. But i also want to load the whole object so that it can still be editable once it is saved from the database.

Thank you so much.

edit:
so in the storemanager I used this config:

const storageManager = {
id: 'gjs-',
type: 'remote',
autosave: true,
autoload: true,
stepsBeforeSave:1,
urlStore: 'https://xxxxxx/v1/store/grapejs/1',
urlLoad: 'https://xxxxxx/v1/load/grapejs/1',
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
};

when i view the heroku console, i can see it coming but there is no object inside.
It says Status code: 204 No Content when i try to check it on the network tab. Hope you could help me on this. Thanks.

i have issue when install grapesjs react. when i build app it throw bugs "nameof is not defined". please help me fix it!

How would you getHTML from the editor?

Tried getting id and ref but is not working.

Some of the css was not working properly for example the .gjs-cv-canvas was not working.

This is the screenshot of my grapejs page in nextjs

When i try to load this library in a create-react-app typescript project I get the following error:

Could not find a declaration file for module 'grapesjs-react'.

I tried installing the @types but it does not exist. I ended up declaring a dummy .d.ts file but having one included in the project would be nice.

Thanks for the package!

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.

Does not compile when used within a Create React App.

Lines 5 and 6 of index.cjs.js require two files that do not exist.

var helpers = require('helpers');
require('components/GComponent');

Are these modules located elsewhere?

Thanks!

Great implementation, but couldn't find the onchange event :)

I'm trying this package for the first time and I'm getting the following error:

warning  in ./node_modules/source-map-support/source-map-support.js

Module not found: Error: Can't resolve 'fs' in 'path_to_my_project\node_modules\source-map-support'

Version:

+-- [email protected] 
`-- [email protected]
  `-- [email protected]

React Version:

6.14.4

My Component:

import React, { Component } from 'react'
import { Editor } from 'grapesjs-react'
import 'grapesjs/dist/css/grapes.min.css'

class Templates extends Component {
    render() {
        return (
            <div>
                <h1>Templates</h1>
                <Editor />
            </div>
        )
    }
}

export default Templates

I need access to editor.getHtml(). Should onInit have access to the editor? I have seen #37, but I cant seem to access it.

My code:

<GrapesjsReact
    id='grapesjs-react'
    // onInit={(e) => setTitle(e.target.value)}
    onInit={[onInit]}
    children={<div>test</div>}
    plugins={[
      'gjs-preset-newsletter',
      'gjs-blocks-basic'
    ]}
  />

This Is what I tried:

onInit={console.log(this)}:

Gives:

'editor' is not defined  no-undef

Also would expect that onInit functions more like most callbacks (such as https://reactjs.org/docs/forms.html onChange) and takes a function:

function onInitFunc(editor){
  console.log(editor.getHtml());
}
.....
onInit={onInitFunc}

Gives:

undefined

Same this for:

onInit={(e) => console.log(e)}

Gives:

undefined

How do I access editor.getHtml()?

Would it be possible to add a license?

I got this problem, how to solve that ?,

this is my code, please help me for fix this

Thanks !

I wrote this package more than one year ago. It is a part of a commercial product and
I decided to share this package with community.
I am very happy that my work is useful and used by other open source projects on GitHub.
However, I do not have enough time to maintain this package and reply to issues.
I don't want people who opened issues have to wait for my response for long time.

So I wish that if there is one of who used this packages, have time and understand how's Grapesj works, help me to maintain this package for our community.

I would be thankful.

Hi,

I would be great if we had a property of GEditor where we could provide a function, which would be called once GEditor finished configuring the wrapped GrapesJS editor instance. Something like:

   <GEditor editorConfigured={setEditor}/>

This way the component creating the GEditor would have an easy access to the GrapesJS editor to further configure it.

What do you think?

Hi,
Drag and Drop of any MJML block on the canvas fails with the following warning:-
Target collection not found, Target is not droppable, accepts [undefined], Component not draggable, acceptable by [undefined]

Hi
I've tried to load HTML string from remote url to the canvas, and found that
editr.setComponent(htmlString) will work but, in the onInit props function the editor doesn't has setComponent function.

Thanks!

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.

I wrote following code.

But, load is not calling.

How can I get GBlock from package, in .js Files. for reference, I use WIKI Section

Hello, I would like to save the HTML and CSS, both into database. How I can do that?
Apart from that I am not able to drag and drop or upload an image into editor.

Any help would be great.
Thank You.

Hi,

it would be great if we could provide the initial content of the editor as the children of the GEditor like this:

 <GEditor id="geditor" newsletter={true}>
  <div>This is my initial editor content</div>
</GEditor>

I think it would only take 2 lines in GEditor.tsx to add children property to IProps and then include the children at the end in the div returned:

interface IProps {
  ...
  children?: any;
}

function GEditor(props: IProps) {
  ...
  return <div id={id}>{props.children ? props.children : null}</div>;
}

Howdy! Awesome to see hooks being used in this project. I noticed that react and react-dom aren't peerDependencies so it makes React think there are multiple copies of it.

Workaround is to npm link react and npm link react-dom from the project root AND the root of the installed module and was able to get the editor to load.

Also, in your example you import directly from the repo, which works but the it looks like import { Editor } from 'grapesjs-react'; or import { GEditor } from 'grapesjs-react'; is the way we have to import externally, the readme needs to be updated.

Cool package! looking forward to working with it.

Hi,

I'm having trouble styling components in firefox

In the option 'open style manager', it's possible to add a class by clicking on the plus sign, edit this class and delete. These three SVG icons are unconfigured in firefox

See in the demo:

https://grapesjs-react.thanhtunguet.info/?path=/story/editor--newslettereditor

Hi,

is there an example that shows how can this be configured to work with I18n module ?

https://grapesjs.com/docs/modules/I18n.html#configuration

Cheers,
TP

Hi,

I have an issue when using the MJML preset. I think When I use preset newsletter everything is fine when I switch to MJML, I have the editor loading without any error but it not possible to drag n drop anything into the content (content does not add).

I guess the initialisation is not correct, because when I select the source in the editor. I get a strange output in the mjml code section (should be mjml instead):

This is my editor settings :

import React from 'react';
import 'grapesjs/dist/css/grapes.min.css';
import {Editor} from 'grapesjs-react';
import {grapesJSMJML} from 'grapesjs-mjml';
import './App.css';

Editor.defaultProps = {
  id: 'grapesjs-react-editor',
  presetType: 'mjml',
  plugins: [grapesJSMJML],
  pluginsOpts: {
     [grapesJSMJML]: { }
  },
  blocks: [],
  blockManager: {},
  storageManager: {},
  styleManager: {},
  width: 'auto',
  height: '100vh',
};

function App() {
  return (
    <div className="App">
      <Editor />
    </div>
  );
}
export default App;

Is there any possibility to add external css to grapes editor?

In original grapesjs, we can import external css file like this.

var editor = grapesjs.init({
  ...
  canvas: {
    styles: [
      'https://...',
      ...
    ]
  }
});

How can I approach this in grapes-react library?

I want to load data from html file on editor load, please tell me the event and prop to load data when the editor initialised.
Also needs an event to export html from editor. Basically I want to add "Import" and "Export HTML" button at the top of editor.

Hello,

Great package you've created!

How can I set the layer manager config?

Thanks,
Josh

I am using this editor in my project. It is very well designed.

One issue I am facing here in the block section.

I am getting alphabet characters like Q, W, E. R in place of Icons by default.

here you can check on the right side block

https://grapesjs-react.thanhtunguet.info/?path=/story/editor--newslettereditor

required one => https://grapesjs.com/demo-newsletter-editor.html

Is there any default setting change so I can get the icons by default?

Is there any option in reactjs grapesjs to upload files to S3 or DigitalOcean Space instead of base64. Any example or refrerence.

I am getting this error on click of "View Code" in console and because of this "View Code" functionality is not working properly.

grapesjs-react.js:3977 Uncaught TypeError: Cannot read property 'level' of undefined
    at i (grapesjs-react.js:3977)
    at f (grapesjs-react.js:3977)
    at l (grapesjs-react.js:3977)
    at a (grapesjs-react.js:3977)
    at p (grapesjs-react.js:3977)
    at grapesjs-react.js:3977
    at Array.reduce (<anonymous>)
    at c (grapesjs-react.js:3977)
    at Object.n [as stringify] (grapesjs-react.js:3977)
    at Object.e.getPreservedText (grapesjs-react.js:3977)
    at Object.<anonymous> (grapesjs-react.js:3977)
    at u.e.each (grapesjs-react.js:3977)
    at u (grapesjs-react.js:3977)
    at c (grapesjs-react.js:3977)
    at Function.s [as juiceDocument] (grapesjs-react.js:3977)
    at a (grapesjs-react.js:3977)
    at t.exports (grapesjs-react.js:3977)
    at grapesjs-react.js:3977
    at run (grapesjs-react.js:3977)
    at r.callRun (grapesjs-react.js:3907)
    at Object.runCommand (grapesjs-react.js:3917)
    at r.updateActive (grapesjs-react.js:3917)
    at m (grapesjs-react.js:3907)
    at v (grapesjs-react.js:3907)
    at h (grapesjs-react.js:3907)
    at r.c.trigger (grapesjs-react.js:3907)
    at r.set (grapesjs-react.js:3907)
    at r.toogleActive (grapesjs-react.js:3917)
    at r.clicked (grapesjs-react.js:3917)
    at I (grapesjs-react.js:3907)
    at HTMLSpanElement.<anonymous> (grapesjs-react.js:3907)
    at HTMLSpanElement.<anonymous> (grapesjs-react.js:3907)

Getting a error when following the install instructions:

TypeError: undefined is not an object (evaluating 'blocks.forEach')

Source:

import React from 'react';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import {
  withRouter
} from 'react-router-dom';
import * as actions from '../redux/actions';
import {
  PageHeader,
  Button,
} from 'antd';
import GEditor from 'grapesjs-react';
import 'grapesjs/dist/css/grapes.min.css';

//import LoadingSpinner from '../components/LoadingSpinner';
import {
  DashboardContainer,
} from './styles';


class CreatePopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageTitle: 'Create Popup Link',
      pageButtonTitle: 'Save',
      personalizeVisible: false
    }
  }

  componentWillMount() {
  //  this.props.getPopup(this.props.match.params.id);
  }

  componentDidUpdate(prevProps){
    const {
      popup
    } = this.props.data;
    if (prevProps.data.popup !== popup) {

    }
  }



  render() {
    // const {
    //   creatingTemplate,
    //   isLoadingTemplate
    // } = this.props.data;
    const {
      pageTitle,
      pageButtonTitle
    } = this.state;
    // if(isLoadingTemplate) {
    //   return <LoadingSpinner />
    // }
    return (
      <DashboardContainer>
        <PageHeader
          title={pageTitle}
          onBack={() => window.history.back()}
          extra={[
            <Button
              type='primary'
              onClick={this.showModal}
            >
              {pageButtonTitle}
            </Button>
          ]}
        />
        <GEditor/>

      </DashboardContainer>
    );
  }
}

function mapStateToProps(state, props) {
    return {
        auth: state.AuthReducer,
        data: state.DataReducer
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CreatePopup));

Hi,
Can you please update library for last version of React
Thanks

Unhandled Rejection (Error): Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React from 'react';
import { GEditor } from 'grapesjs-react'

export default () => {

return (

);
}