save does not update the blocks of the instance

[ThinkDevStudios]

Environment

"@editorjs/checklist": "^1.3.0", "@editorjs/code": "^2.7.0", "@editorjs/delimiter": "^1.2.0", "@editorjs/editorjs": "^2.22.2", "@editorjs/embed": "^2.5.0", "@editorjs/header": "^2.6.2", "@editorjs/image": "^2.6.2", "@editorjs/inline-code": "^1.3.1", "@editorjs/link": "^2.4.0", "@editorjs/list": "^1.6.2", "@editorjs/marker": "^1.2.2", "@editorjs/paragraph": "^2.8.0", "@editorjs/quote": "^2.4.0", "@editorjs/raw": "^2.3.0", "@editorjs/simple-image": "^1.4.1", "@editorjs/table": "^2.0.1", "@editorjs/warning": "^1.2.0", "editorjs-button": "^1.0.4",

Describe

When saving the editor via onChange, when i do a console.log of the current instance. It does not seem to update the blocks data.

import React, {useState} from 'react';
import { createReactEditorJS } from 'react-editor-js'
import { EDITOR_JS_TOOLS } from '@/Shared/EditorTools'

const ReactEditorJS = createReactEditorJS()
const DEFAULT_INITIAL_DATA = () => {
    return {
      "time": new Date().getTime(),
      "blocks": [
        {
          "type": "header",
          "data": {
            "text": "This is my awesome editor!",
            "level": 1
          }
        },
      ]
    }
  }
export default () => {
    const editorCore = React.useRef(null)
    const [val, setVal] = React.useState(DEFAULT_INITIAL_DATA)
    const handleInitialize = React.useCallback((instance) => {
    editorCore.current = instance
    console.log(editorCore.current)
    }, [])

    const handleSave = React.useCallback(async () => {
        console.log(editorCore)
        const savedData = await editorCore.current.save();
        setVal(savedData)
        console.log("savedData", savedData); // blocks seems to be unchanged even though the frontend did change
        console.log(val) // only returns the default initial data ( does not update)
      }, [])
    const handleReady = (editor) => {
      new Undo({ editor })
    };
    console.log(val)
    return(
        <ReactEditorJS 
            onInitialize={handleInitialize}
            tools={EDITOR_JS_TOOLS} 
            defaultValue={val}
            onChange={handleSave}
        />
    )
};

[Jungwoo-An]

@ThinkDevStudios Hi! First of all, thanks for your interest! 👋

onChange doesn't works with promises. If you want to use promise, follow the code below.

const handleChange = React.useCallback(() => {
  editorCore.current.save().then(savedData => { ... });
}, []);

Thanks!