[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.

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)
Do you mean the editor object from GrapesJS.editors? The one you remove manually with delete GrapesJS.editors[this.id];?
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.
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.
Issue #1364
[Bug]: Error on multiple instances of grapesjs
Hello, I use Grapesjs in my reactJS application. I have a react component which is an instance of Grapesjs. So I can add this component in...
Issue #1913
[BUG] Specifying background-size in background's properties breaks grapesjs
Using latest versions of grapesjs (0.14.55) and grapesjs-preset-webpage (0.1.10), I have configured my editor as such: The library crashes...
Issue #1699
[BUG] Link elements are not copyable/deletable
In the editor, if we have link element with some classes, the editor does not allow to copy/delete the element. GrapesJS version: v0.14.50S...
Issue #1770
[Bug] Components with custom tag are not rendered if specified in theme body
Hello I created very simple skeleton of GrapesJS editor. HTML template: Javascript: Result of loading: As you see, component is not rendere...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.