Editor state getting reverted using header and console logs "Block «header» skipped because saved data is invalid".

[HarkiratShopism1]

Describe the bug.

I am using editorJs in my react application as a form component and when trying to add a Paragraph or Header I am getting following error in the console "Block «header» skipped because saved data is invalid" for header and "Block «paragraph» skipped because saved data is invalid" for Paragraph also the editor state gets reverted back to blocks -> 0 and I am not able to get the header or paragraph on the next line. Following is the sample react code attached how I have initialized editorJs in my application.

import React, { useEffect, useRef } from 'react';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';

const Editor = ({ data, onChange }) => {
    const ejInstance = useRef(null);
    const editorContainer = useRef(null);

    useEffect(() => {
        if (!ejInstance.current) {
            ejInstance.current = new EditorJS({
                holder: editorContainer.current,
                tools: {
                    header: Header,
                    list: List,
                    paragraph: {
                        class: Paragraph,
                        inlineToolbar: true,
                    },
                },
                data: data,
                onChange: async () => {
                    const content = await ejInstance.current.save();
                    onChange(content);
                },
            });
        }

        return () => {
            if (ejInstance.current && typeof ejInstance.current.destroy === 'function') {
                ejInstance.current.destroy();
                ejInstance.current = null;
            }
        };
    }, [data, onChange]);

    return <div ref={editorContainer}></div>;
};

export default Editor;

Screenshots:

Device, Browser, OS: Windows, Google Chrome

Editor.js version: 2.29.1

Plugins you use with their versions: header 2.8.1, paragraph 2.11.6

[neSpecc]

Do you mean that empty headers and paragraph are skipped?

[HarkiratShopism1]

Yes exactly.

[HarkiratShopism1]

Do you mean that empty headers and paragraph are skipped?

Hi @neSpecc do you have any solution or fix for this issue?

[neSpecc]

Try using header 2.8.7

[HarkiratShopism1]

I have tried multiple things but issue not getting resolved Removed React strict mode Installed 2.8.7 headers

Nothing worked Can anyone help me with this

[ansonurpants]

hi im having the same issue, has anyone found the solution?

[neSpecc]

Please, clarify the problem. I'm not sure I've got it correctly. Right now Editor.js skips blank blocks (those which specified the validate() method for that).

Do you want to preserve blank lines?

And what does it mean Editor state getting reverted ?

[ansonurpants]

yeah the problem is the validate function runs when first creating the heading line so it skips the block because the line will always be blank like with the paragraph block. once the heading block is skipped, the heading styling no longer shows up so I'm the editor it just shows up like paragraph text even tho in the Json it's saved as a heading block.

[neSpecc]

once the heading block is skipped, the heading styling no longer shows up

why? block is not removed. It's just skipped in output JSON

[ansonurpants]

hmm you're right, it might have something to do with using CDN instead of npm?

On Wed, Nov 27, 2024, 10:48 AM Peter @.***> wrote:

once the heading block is skipped, the heading styling no longer shows up

why? block is not removed. It's just skipped in output JSON

— Reply to this email directly, view it on GitHub https://github.com/codex-team/editor.js/issues/2767#issuecomment-2504580622, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFQJOTOZX4Y6MMILQGBWR32CYHY3AVCNFSM6AAAAABKS5OLP2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMBUGU4DANRSGI . You are receiving this because you commented.Message ID: @.***>