Destroy editor in safe

[KentoMoriwaki]

Please describe your changes

Fix #3764

How did you accomplish your changes

There are two issues:

• The EditorContent is reused even though the instance of the editor has changed.
• The deletion of the editor occurs before the deletion of the EditorContent.

I solved those issues.

How have you tested your changes

I tested by changing demos/src/Examples/CustomParagraph/React/index.jsx below.

Test code

import './styles.scss'

import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, { useEffect } from 'react'

import { Paragraph } from './Paragraph.jsx'

export default () => {
  const [data, setData] = React.useState({ content: '' })

  useEffect(() => {
    const timer = setInterval(() => {
      setData({
        content: `
      <p>
        Each line shows the number of characters in the paragraph.
      </p>
      `,
      })
    }, 5000)

    return () => clearInterval(timer)
  }, [])

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        paragraph: false,
      }),
      Paragraph,
    ],
    content: data.content,
  }, [data])

  return (
    <EditorContent editor={editor} />
  )
}

How can we verify your changes

By running the above example code on the develop branch, you will see that the flushSync error appears, but it does not appear on this branch.

Remarks

[add any additional remarks here]

Checklist

• The changes are not breaking the editor
• Added tests where possible
• Followed the guidelines
• Fixed linting issues

Related issues

[add a link to the related issues here]

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	181400c
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/645b5256f8cabc000854f318
😎 Deploy Preview	https://deploy-preview-4000--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[KentoMoriwaki]

The intention of this change is to organize the lifecycle of the editor instance and EditorContent component.

To avoid the current issue with flushSync warning, the editor needs to be removed in the following order

• EditorContent is unmounted
• editor instance is destroyed

Currently, in the implementation, the sequence is as follows when the editor instance is recreated

• Old editor instance is destroyed
• New editor instance is created
• EditorContent is updated

With the changes in this pull request, the sequence will be as follows, and the issue with flushSync warning will be resolved:

• New editor instance is created
• Old EditorContent is unmounted
• New EditorContent is mounted
• Old editor instance is destroyed

[KentoMoriwaki]

@bdbch Can you take a look?

[Just-Moh-it]

Hey reviewers... please have a look... This issue seems to be a little problematic when using tiptap and fixing this would really help!

[nk11dev]

Please, take a look at this PR, because I did not found any workaround without it.

This fix could solve the issue.

[MadsFrost]

Hey guys, is this still an issue in progress? I still have this issue appear for me on v2.0.3

[bdbch]

LGTM! Thanks. @svenadlung what are your thoughts? Mergeable?