How to getHtml(), getCss(), and getJs() about grapesjs-react HOT 2 CLOSED

// @flow

import React from 'react';
import GrapesJS from 'grapesjs';
// Presets and Plugins
import gjsPresetWebpage from 'grapesjs-preset-webpage';
import gjsPresetNewsletter from 'grapesjs-preset-newsletter';
import gjsBasicBlocks from 'grapesjs-blocks-basic';

const {
  useEffect,
  useState,
} = React;


function GEditor(props: PropsType) {
  const {
    id = 'grapesjs-react-editor',
    storageManager,
    blockManager,
    webpage,
    newsletter,
    setGlobalEditor
  } = props;
  const [editor, setEditor] = useState(null);
  useEffect(
    () => {
      if (!editor) {
        let plugins = [
          gjsBasicBlocks,
          ...props.plugins,
        ];
        if (webpage) {
          plugins = [
            ...plugins,
            gjsPresetWebpage,
          ];
        }
        if (newsletter) {
          plugins = [
            ...plugins,
            gjsPresetNewsletter,
          ];
        }
        const editor = GrapesJS.init({
          fromElement: true,
          container: `#${id}`,
          plugins,
          storageManager: storageManager,
          blockManager: blockManager,
        });
        setGlobalEditor(editor);
        setEditor(editor);
      } else {
        if (document) {
          document.getElementById(id).append(editor.render());
        }
      }
      return function cleanup() {
        if (editor) {
          // Destroy current editor
          editor.destroy();
        }
        // Remove editor from global GrapesJS store
        GrapesJS.editors = GrapesJS.editors.filter((e) => e !== editor);
      };
    },
    [],
  );

  return (
    <div id={id}/>
  );
}

GEditor.defaultProps = {
  webpage: false,
  newsletter: false,
  plugins: [],
  components: [],
  storageManager: {},
  blockManager: {},
};

export default GEditor;

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 Editor from '../components/ui/Editor';
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.editor = React.createRef();
    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) {

    }
  }

  savePopup() {
    console.log(this.editor);
    console.log(this.editor.getHtml());
  }



  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.savePopup()}
            >
              {pageButtonTitle}
            </Button>
          ]}
          style={{ marginBottom: 10 }}
        />
        <Editor
          blocks={[]}
          webpage
          setGlobalEditor={(editor) => this.editor = editor}
        />

      </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));