Editor render issue with data props about editor.js

[altumsoftwareds]

If I will pass expected data directly as prop ( not waiting for response ) -- there is no issues at all.

[altumsoftwareds]

@neSpecc could you help, please?
1)

1. onChange triggers with empty data however current answer is exists and it rewrites answer to be empty
2. even after some additional rerenders of component ( as soon as I get requested from BE data from props ) current answer becomes correct again, but editor doesn't rerenders with correct answer ( data ) object

[altumsoftwareds]

<Editor 
                        key={`editor-${section}-${item}`} 
                        data={answer} 
                        onChange={(data) => {
                            console.log('editor beforeOnChange answer', answer)
                            console.log('editor onChange', data)
                            setAnswer(data)
                        }}
                        editorblock={`editorjs-container-${section}-${item}`} 
                    />

why I don't see current answer after onChange as soon as I have setAnswer which is the part of useState?

[neSpecc]

@altumsoftwareds would you test in it 2.29.0-rc.4?

[ls84]

I am not sure if this is related, I am getting the same "warning" when I put editor.save() method inside the onChange function. However It is fine when I trigger editor.save() somewhere else

editor = new EditorJS({
    holder : 'summary',
    onChange: function(api, event) {
        editor.save().then(console.log)
    }
});

[altumsoftwareds]

@ls84 where to put editor.save() else, for example?

[ls84]

@ls84 where to put editor.save() else, for example?

I am guessing the problem of Block «paragraph» skipped because saved data is invalid is caused by saving data before it's ready to be saved out. My solution was to bind editor.save() to a button click action. Hope this helps

[a3626a]

It's because the Paragraph delays saving its data to element. And the save function makes data from its element.
(And the warning occurs when the element has empty body)

requestAnimationFrame causes the problem.

https://github.com/editor-js/paragraph/blob/6fff362a536599ba1f05a9dfd642d51668ac557b/src/index.js#L239-L254

There are two solutions.

1. Override the Paragraph and remove 'requestAnimationFrame' logic.
2. Save using requestAnimationFrame inside onChange. This will make the save is called after hydrate. (FIFO)