Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HarkiratShopism1 opened this issue Jul 9, 2024 · 5 comments
Labels

Comments

@HarkiratShopism1
Copy link

Describe a 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:
image

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
Copy link
Member

neSpecc commented Jul 9, 2024

Do you mean that empty headers and paragraph are skipped?

@HarkiratShopism1
Copy link
Author

HarkiratShopism1 commented Jul 10, 2024

Yes exactly.

@HarkiratShopism1
Copy link
Author

Do you mean that empty headers and paragraph are skipped?

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

@neSpecc
Copy link
Member

neSpecc commented Jul 16, 2024

Try using header 2.8.7

@HarkiratShopism1
Copy link
Author

HarkiratShopism1 commented Jul 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants