react-editor-js icon indicating copy to clipboard operation
react-editor-js copied to clipboard

Is it possible to pass changing variables to `onChange`

Open lassegit opened this issue 3 years ago • 2 comments

I have an component that needs to store the editor data whenever it has changed. I am using the onChange function but besides the actual data which I can get via (const body = await api.saver.save(); or a ref as shown in the docs), I need to add a changing temporary id (changingTemporaryId in the example below) to the onChange function, but this value seem to be stale and doesn't change even if the surrounding value has. Is it possible to pass a changing variable to onChange or EditorJS?

Example:

function ReactComponent() {
  const changingTemporaryId = Math.random().toString().substring(2);

  const handleOnChange = async (api) => {
    const body = await api.saver.save();

    console.log(changingTemporaryId); // This value is stale and doesn't get updated with re-renders.

    fetch('/api/sections', {
      method: 'POST',
      body: JSON.stringify({body, changingTemporaryId}),
    });
  };

  return <Editor onChange={handleOnChange} />
}

lassegit avatar Feb 01 '22 15:02 lassegit

I have the same problem. Please, fix it!

proteye avatar Apr 12 '22 19:04 proteye

Initialize your Editor as EditorJs and your onChange should work.

const EditorJS = createReactEditorJS(); and in the component pass onChange={handleSave}

fortysev-en avatar Aug 06 '22 06:08 fortysev-en