Issue #1515Opened October 15, 2018by thanhtunguet0 reactions

[Bug] Destroy editor but does not delete the editor object.

Question

Hello, I've created a wrapper Component of grapesjs for React.

// @flow

import React from 'react';
import GrapesJS from 'grapesjs';
// Presets
import gjsPresetWebpage from 'grapesjs-preset-webpage';
import gjsPresetNewsletter from 'grapesjs-preset-newsletter';
// Plugins
import gjsCustomCode from 'grapesjs-custom-code';
import gjsForms from 'grapesjs-plugin-forms';

import type {GrapesPluginType} from '../types/grapes';
import GComponent from './GComponent';

const {Component} = React;

type Props = {
  components: Array<GComponent>,
  plugins: Array<GrapesPluginType>,
  // Preset and plugin options
  webpage: boolean,
  newsletter: boolean,
  forms: boolean,
  ckeditor: boolean,
  customCode: boolean,
  // Editor configurations
  storageManager: {},
  blockManager: {},
}

type State = {}

class GEditor extends Component<Props, State> {
  /**
   * Component default props
   *
   * @type {Props}
   */
  static defaultProps: Props = {
    components: [],
    plugins: [],
    // Presets and plugins
    webpage: false,
    newsletter: true,
    forms: true,
    ckeditor: false,
    customCode: true,
    // Configurations
    storageManager: {},
    blockManager: {},
  };

  /**
   * Class editor id prefix
   *
   * @type {string}
   */
  static idPrefix: string = `gjs-editor-`;

  /**
   *
   * @param id
   * @returns {*}
   */
  static getEditorByIn = (id: number) => {
    return GrapesJS.editors[id];
  };

  /**
   * Editor container id
   *
   * @type {number}
   */
  id: number;

  /**
   * Get editor id
   *
   * @returns {string}
   */
  getId: Function = () => `gjs-react-editor-${this.id}`;

  /**
   * Get editor instance
   *
   * @returns {Object}
   */
  getEditor: Function = () => {
    return GrapesJS.editors[this.id] || null;
  };

  /**
   * Initialize new editor with configurations from props
   */
  initEditor: Function = () => {
    const id: string = this.getId();
    const {plugins, webpage, newsletter, forms, customCode, storageManager} = this.props;
    // Add preset
    if (webpage) {
      plugins.push(gjsPresetWebpage);
    }
    if (newsletter) {
      plugins.push(gjsPresetNewsletter);
    }
    // Add plugins
    if (forms) {
      plugins.push(gjsForms);
    }
    if (customCode) {
      plugins.push(gjsCustomCode);
    }
    GrapesJS.init({
      fromElement: true,
      autorender: false,
      container: `#${id}`,
      plugins,
      storageManager,
    });
  };

  /**
   * Destroy editor on component unmount
   */
  destroyEditor: Function = () => {
    this.getEditor().destroy();
    delete GrapesJS.editors[this.id];
  };

  constructor(props: Props) {
    super(props);
    this.id = GrapesJS.editors.length;
  }

  componentDidMount() {
    this.initEditor();
    this.getEditor().render();
  }

  componentWillUnmount() {
    this.destroyEditor();
    console.log('Called editor destroy');
  }

  render() {
    const id: string = this.getId();
    return (
      <div className="grapesjs-editor">
        <div id={id}/>
      </div>
    );
  }
}

// window global variables
window.grapesjs = window.GrapesJS = GrapesJS;

export default GEditor;

When the component is unmounted, it will destroy the editor by calling the destroy method. When my app render a new editor. (User goes back from 2 to 1, then go to 2 again, see my screenshot), the old destroyed editor seems to still exists. It affects to the rendering of the new one. image

In console, I found out that the destroy method does not delete the editor instance, it just can not be re-rendered but it still exists. If the app continues to render new ones, it will continue to render wrong again and again...

Did I do something wrong or Is it a bug?

Thanks for your help!

Answers (3)

artfOctober 26, 20180 reactions

Do you mean the editor object from GrapesJS.editors? The one you remove manually with delete GrapesJS.editors[this.id];?

thanhtunguetOctober 27, 20180 reactions

I tried to destroy the editor manually and by API (Editor.destroy) but they did not work. The editor seems not to be fully destroyed.

artfNovember 3, 20180 reactions

Ok then, we have already an issue related to the destroy method #1501 If you need to add something do it there

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.