fix(react): destroy editor instances after two ticks

React's StrictMode makes it so that refs (which we use as the main trigger for mounting/unmounting the editor),
are triggered twice. This makes it difficult to know when the editor is _actually_ meant to be unmounted.
If an editor is unmounted during a render of React NodeViews, this can cause errors to occur (since elements which were in the dom at the start of the render are no longer in the dom by the time that the render occurs).

This change takes a similar approach to the editor integration in Tiptap, where it delays `unmount`ing the editor until 2 ticks have passed.
This is to allow React the opportunity to re-call `mount` with the same element, or if the ticks pass, to actually unmount the editor instance.

In most cases, delaying the removal of the editor instance should be fine, because it is not expected to be available after it has been destroyed.

Author: nperez0111

packages/core/src/editor/BlockNoteEditor.ts

@@ -1035,15 +1035,40 @@ export class BlockNoteEditor<
    * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
   public mount = (element: HTMLElement) => {
-    // TODO: Fix typing for this in a TipTap PR
-    this._tiptapEditor.mount({ mount: element } as any);
+    if (
+      // If the editor is scheduled for destruction, and
+      this.scheduledDestructionTimeout &&
+      // If the editor is being remounted to the same element as the one which is scheduled for destruction,
+      // then just cancel the destruction timeout
+      this.prosemirrorView.dom === element
+    ) {
+      clearTimeout(this.scheduledDestructionTimeout);
+      this.scheduledDestructionTimeout = undefined;
+      return;
+    }
+
+    this._tiptapEditor.mount({ mount: element });
   };
 
+  /**
+   * Timeout to schedule the {@link unmount}ing of the editor.
+   */
+  private scheduledDestructionTimeout:
+    | ReturnType<typeof setTimeout>
+    | undefined = undefined;
+
   /**
    * Unmount the editor from the DOM element it is bound to
    */
   public unmount = () => {
-    this._tiptapEditor.unmount();
+    // Due to how React's StrictMode works, it will `unmount` & `mount` the component twice in development mode.
+    // This can result in the editor being unmounted mid-rendering the content of node views.
+    // To avoid this, we only ever schedule the `unmount`ing of the editor when we've seen whether React "meant" to actually unmount the editor (i.e. not calling mount one tick later).
+    // So, we wait two ticks to see if the component is still meant to be unmounted, and if not, we actually unmount the editor.
+    this.scheduledDestructionTimeout = setTimeout(() => {
+      this._tiptapEditor.unmount();
+      this.scheduledDestructionTimeout = undefined;
+    }, 1);
   };
 
   /**