Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: useEditor returns null instead of Editor when it's not used in <EditorContent> #468

Open
HamedMP opened this issue Dec 15, 2024 · 3 comments

Comments

@HamedMP
Copy link

HamedMP commented Dec 15, 2024

Provide environment information

System:
OS: macOS 15.1.1
CPU: (10) arm64 Apple M1 Pro
Memory: 116.63 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
Yarn: 1.22.22 - ~/.yarn/bin/yarn
npm: 10.8.1 - ~/.nvm/versions/node/v21.2.0/bin/npm
pnpm: 9.6.0 - ~/.nvm/versions/node/v21.2.0/bin/pnpm
bun: 1.1.0 - ~/.bun/bin/bun

Describe the bug

I described the bug and the workaround in this issue.


I had a menu bar from Tiptap component I used before but I couldn't get it to work as useEditor() doesn't return proper Editor instance.

I ended up using onCreate of Editor Contet and using a state to handle editor, then I can use my menu bar.

<EditorContent
extensions={extensions}

      onCreate={({ editor }) => {
        console.log("Editor created");
        setEditor(editor);
      }}
         ...
    >

I need editor in other parts as well but haven't found an easier/better way to do it than lifting up the state.

Link to reproduction

.

To reproduce

Try using useEditor in your project and log the results. Using useEffect didn't help either.

Additional information

No response

@HamedMP HamedMP changed the title bug: useEditor is not returning an editor instance as expect (null is returned) bug: useEditor returns null instead of Editor when it's not used in <EditorContent> Dec 16, 2024
@HamedMP
Copy link
Author

HamedMP commented Dec 16, 2024

I noticed it works fine if it's called from a component in <EditorContent>.

The issue is that I want to show the Toolbar outside of the Editor Content. Right now it's shown below the cursor (even though it's the first component inside the EditorContent.
image

@ancs21
Copy link

ancs21 commented Dec 22, 2024

I got the same error, it seems Provider in EditorContent instead of EditorRoot.
Just workaround:

...
const [editor, setEditor] = useState<any | null>(null)

# set editot on update
<EditorContent
    onUpdate={({ editor }) => {
        setEditor(editor)
        setCharsCount(editor.storage.characterCount.words())
        console.log(editor.getHTML())
  }}
/>
....

@HamedMP
Copy link
Author

HamedMP commented Dec 24, 2024

Thanks @ancs21 , tried a similar approach but it's not ideal.

Are you creating a state for each of the relevant props?

setCharsCount(editor.storage.characterCount.words())

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants