Error: element with ID «editorjs» is missing. Pass correct holder's ID.

Ivaneyko commented 1 year ago

Environment

@editorjs/editorjs version: 2.26.4
react-editor-js version: 2.1.0
react version: 18.2.0
react-dom version: 18.2.0

Code

const EditorInput = forwardRef<any, Props>(({
  label, id = '#', value, onChange, required, error, helperText, margin = 'normal',
  readOnly = false, minHeight = 32
}, ref) => {
  const instanceRef = useRef<any>(null);

  const handleInitialize = useCallback((instance:any) => {
    instanceRef.current = instance;
  }, []);

  const handleChange = async () => {
    const editorData = await instanceRef?.current?.save();

    if ( onChange ) onChange(editorData);
  }

  return (
     <ReactEditorJS
         tools={EDITOR_TOOLS}
         defaultValue={value}
         onInitialize={handleInitialize}
         onChange={handleChange}
         readOnly={readOnly}
         minHeight={minHeight}
         holder="editorjs"
     ><div id="editorjs" /></ReactEditorJS>
  )
});

Describe

Trying with and without custom holder. This happens when you go to the page where it is editor located. When loading a page directly, this does not always happen