instanceRef.current is undefined

[codigoisaac]

Environment

• @editorjs/editorjs version: ^2.23.2
• react-editor-js version: ^2.0.6

Describe

I'm trying to get the data when hitting save. But I get this error:
Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'save')

I followed this example and this other one (both I found in other issues), but nothing seems to work.

My code:

import { createReactEditorJS } from 'react-editor-js'
import Image from '@editorjs/image'

const Editor = createReactEditorJS()

const instanceRef = useRef(null);

async function handleSave() {
  const savedData = await instanceRef.current.save();
  console.log("savedData", savedData);
}

<Button color='primary' className='text-nowrap px-1 btn-sm' onClick={handleSave} outline>

<Editor
  placeholder="Enunciado da alternativa"
  tools={{ image: Image }}
  instanceRef={instance => (instanceRef.current = instance)}
/>

When I press the button:

[quatre29]

I get the same issue, any idea how to fix it?

LE: I have managed to get my hand on the data by using it like this

  const editorCore = React.useRef<any>(null);

  async function handleSave() {
    console.log("savedData", editorCore.current._editorJS.configuration.data.blocks); //here is the data
  }

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


  return (

    <div>
      <ReactEditorJs
        onInitialize={handleInitialize}
        tools={EDITOR_JS_TOOLS}
        defaultValue={defaultValue}
      />
      <button onClick={handleSave}>Save</button>
    </div>
  );

Now to be honest I don't think is the right way(I'm a beginner) but let me know a better solution

---

LE: Yeah that solution won't work, It made me confused but it will display the default value only and when you make changes it won't update. Hopefully there is a fix soon

---

LE: I have fixed it, try this

 const editorCore = useRef<any>(null);


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

  const handleSave = React.useCallback(async () => {
    const savedData = await editorCore.current.save();
    console.log(savedData);
  }, []);


return (
    <div>
      <ReactEditorJs
        onInitialize={handleInitialize}
        tools={EDITOR_JS_TOOLS}
        placeholder="Start writing..."
      />
      <button onClick={handleSave}>Save</button>
    </div>
  );

[AlbinoGeek]

Try: #190 (comment)

@codigoisaac @quatre29 It works for me in NextJS after doing this.

[codigoisaac]

@quatre29 @AlbinoGeek I just switched to TinyMCE (best decision ever). Thanks, guys.

[AlbinoGeek]

@quatre29 @AlbinoGeek I just switched to TinyMCE (best decision ever). Thanks, guys.

Huge mistake, but you do you. EditorJS generates structured JSON describing blocks, TinyMCE generates HTML soup the likes of which we haven't seen since Adobe DreamWeaver, and/or copy-pasting Rich Text from Microsoft Word into a website... the output is completely different, and much worse.

However, I'll admit, TinyMCE lets you do more, because it's plain HTML.

Consider a Google around The problem with WYSIWYG. I don't enjoy 100kb if nested <font> or <span> tags with various once-applied styles, and your browser doesn't either. Perhaps my favourite message on the spaghetti that WYSIWYG editors output is as follows:

    * Egg and bacon
    * Egg, sausage and bacon
    * Egg and <span>
    * Egg, bacon and <span>
    * Egg, bacon, sausage and <span>
    * <span>, bacon, sausage and <span>
    * <span>, egg, <span>, <span>, bacon and <span>
    * <span>, <span>, <span>, egg, and <span>
    * <span>, <span>, <span>, <span>, <span>, <span>, baked beans, <span>, <span>, <span> and <span>
    * Lobster thermidor aux crevettes with a Mornay sauce garnished with truffle paté, brandy and with a fried egg on top and <span>
    * <span>, sausage, <span>, <span>, <span>, bacon, <span>, tomato and <span>

https://what.thedailywtf.com/topic/3275/why-wysiwyg-html-editors-should-not-exist/10

---

Ultimately, if it's no longer your problem, consider closing the issue.

[quatre29]

@quatre29 @AlbinoGeek I just switched to TinyMCE (best decision ever). Thanks, guys.

Huge mistake, but you do you. EditorJS generates structured JSON describing blocks, TinyMCE generates HTML soup the likes of which we haven't seen since Adobe DreamWeaver, and/or copy-pasting Rich Text from Microsoft Word into a website... the output is completely different, and much worse.

However, I'll admit, TinyMCE lets you do more, because it's plain HTML.

Consider a Google around The problem with WYSIWYG. I don't enjoy 100kb if nested <font> or <span> tags with various once-applied styles, and your browser doesn't either. Perhaps my favourite message on the spaghetti that WYSIWYG editors output is as follows:

    * Egg and bacon
    * Egg, sausage and bacon
    * Egg and <span>
    * Egg, bacon and <span>
    * Egg, bacon, sausage and <span>
    * <span>, bacon, sausage and <span>
    * <span>, egg, <span>, <span>, bacon and <span>
    * <span>, <span>, <span>, egg, and <span>
    * <span>, <span>, <span>, <span>, <span>, <span>, baked beans, <span>, <span>, <span> and <span>
    * Lobster thermidor aux crevettes with a Mornay sauce garnished with truffle paté, brandy and with a fried egg on top and <span>
    * <span>, sausage, <span>, <span>, <span>, bacon, <span>, tomato and <span>

https://what.thedailywtf.com/topic/3275/why-wysiwyg-html-editors-should-not-exist/10

Ultimately, if it's no longer your problem, consider closing the issue.

I'm a beginner and to be honest, I have a hard time implementing a rich text editor that works with embedded videos, uploading images etc. EditorJS is awesome but has a lot of bugs. Do you think WYSIWYG editors would make the application slower?

Also do you experience flickering screen page with react-editor-js?

[AlbinoGeek]

@quatre29
I'm a beginner and to be honest, I have a hard time implementing a rich text editor that works with embedded videos, uploading images etc. EditorJS is awesome but has a lot of bugs. Do you think WYSIWYG editors would make the application slower?

TLDR, my editor is open source, you could just use that.

"" fixed link to next-ui-builder, previously was nextjs-boilerplate (whoops)

"" fixed link to point at WIP branch

We would love fellow contributors!

Regarding "Bugs"

Honestly, if you follow the two step instructions in my workaround here, there are very few bugs remaining. EditorJS is actively maintained, and the only bugs I've run into so far are relatively minor (like scrolling suppressed when autofocus={true}, which was easy to document around.)

Regarding "Uploading images"

I've not implemented uploading images yet (that image is by URL), although @editorjs/image supports this out of the box if you're okay with using things "as is" (I'm not one of those people, so I'm re-writing all of their components in full TypeScript with Material-UI, because I'm stubborn, lol.) I didn't have to do this.

Regarding "WYSIWYG editors are slow"

Yes, WYSIWYG editors are very slow, in the sense that they generate "tag soup" (sometimes even invalid HTML, with lots of embedded style="" attributes, which in general is bad form, and hurts the browser's contentful paint load time.)

Since you're a self-professed beginner, consider the following:

• What's so bad about in-line CSS?
• What are the risks associated with using inline styles?

And in general, if you're allowing "random users" to use your editor, then avoid any editor which allows users to copy-paste or hand-enter raw HTML code, as this is the root of all evil when it comes to content exploits.

By contrast, EditorJS outputs JSON, not HTML -- and by default, doesn't allow HTML.

Regarding "Flickering"

Also do you experience flickering screen page with react-editor-js?

The only issue I experienced similar to this is when the insertion caret (text pointer) is above where you are trying to scroll, EditorJS (not react-editor-js fault) scrolls your browser up to where you're typing. It should be something you can suppress, but there's a bug where you can't suppress this at the moment. You can work around this issue rather easily (just give the editor enough room to breathe, such as a full screen editor as I've shown in my example.)

There are some default CSS rules in EditorJS itself that you might want to override to reduce this flickering, or due to quality of life / stylistic choices:

1. The default max-width is 650px, and we're not in 2000 anymore, so...

   .ce-block__content,
   .ce-toolbar__content {
     max-width: 1024px;
   }

2. The editor adds 300px margin-bottom to allow for easy insertion, which makes "flickering" worse if your editor doesn't have at least 300px of space to work with in the page, such as a comment editor, but you can easily override this with CSS too:

   .codex-editor__redactor {
     margin-bottom: -200px; /* padding is set using style="", so we can't
                               override directly, but setting a matching
                               negative margin does exactly the same thing. */
   }

[codigoisaac]

@AlbinoGeek I see, and you have good points, but I tried some editors (draftjs, quill, editorjs), and TinyMCE was and it's being the best experience. I needed to implement image upload and image resize, and it simply was so painful to find information and to implement it with others, and none of them has image resize, except TinyMCE and Draftjs-plugins - but Draftjs-plugins has a documentation that doesn't work and Draftjs is being discontinued by Facebook...

With TinyMCE things just worked and we could move on to actually building our software.