codex-team / codex-team/editor.js

Editor.js renders duplicate blocks when used in Svelte component

Open
#2,314 8 comments 2 reactions 0 assignees View on GitHub
bug
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
image

Duplicated when only one fetch and one render called
image

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.