good first issue
仓库指标
- 星标
- (26,602 个星标)
- PR 合并指标
- (30 天内没有已合并 PR)
描述
Editor.js Version
v2.29.0
Issue description
Hi!
I've found a memory leak in the Shortcuts class. When you remove the shortcut for an element you don't check if the element's shortcuts are empty and left the element in the registeredShortcuts map (with an empty array):
If you create a new EditorJS and destroys it, you will see a bunch of detached elements referenced by registeredShortcuts map.
Steps to reproduce:
You can reproduce the issue with this simple html:
<html>
<body>
<button id="remove">Remove</button>
<div id="editor" style="min-width: 700px"></div>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script>
let editor = new EditorJS({
holder: 'editor',
});
function remove() {
document.querySelector('#editor').remove();
editor.isReady.then(() => {
editor.destroy();
editor = undefined;
});
}
document.querySelector('#remove').addEventListener('click', remove);
</script>
</body>
</html>
Press "Remove" button and take a snapshot in Chrome dev tools. You will see detached HTMLDivElement's referenced by registeredShortcuts:
If you remove the element from the map when the shortcuts array is empty, the problem disappears:
const newShortcuts = shortcuts.filter(el => el !== shortcut);
newShortcuts.length===0?
this.registeredShortcuts.delete(element):
this.registeredShortcuts.set(element, newShortcuts);