codex-team / codex-team/editor.js
Editor.js renders duplicate blocks when used in Svelte component
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
Editor.js instance renders the same data from 1 to 3 times, when used with Svelte && SvelteKit.
Steps to reproduce:
1. Create Editor.svelte component to house Editor.js instance
```
import { onMount } from "svelte";
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
export let isReadOnly = true;
export let data = {};
let editor;
async function startEditor() {
editor = new EditorJS({
holder: 'editorjs',
readOnly: isReadOnly,
data: data,
tools: {
header: Header,
},
});
}
onMount(startEditor);
$: if (data && editor) {
console.log("Editor - Update - Update: "
+ ("Updating editor with " + JSON.stringify(data)));
editor.isReady.then(() => {
editor.clear();
editor.render(data);
});
}
.editor {
margin-top: 1rem;
border: 1px solid black;
height: 500px;
}
```
2. Use this component in the outer component
```
-- fetchData omitted. The issue persists even if data is passed to the render function manually
-- Render still caused by completion of fetchData though
onMount(fetchData);
```
3. Open the site either in dev mode or preview
Expected behaviour:
Data is always rendered once
Screenshots:
Data block duplicated

Duplicated when only one fetch and one render called

Device, Browser, OS:
Windows 11, Chrome 111.0.5563.65
Editor.js version:
2.26.5
Plugins you use with their versions:
Header - 2.7.0
Svelte and SvelteKit versions:
3.54.0 && 1.5.0
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.