Fixed mount adding editor as child instead of replacing element

Author: matthewlipski

packages/core/src/editor/BlockNoteEditor.ts

@@ -1061,12 +1061,13 @@ export class BlockNoteEditor<
     return extension;
   }
   /**
-   * Mount the editor to a parent DOM element.
+   * Mount the editor to a DOM element.
    *
    * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
-  public mount = (parentElement: HTMLElement) => {
-    this._tiptapEditor.mount(parentElement);
+  public mount = (element: HTMLElement) => {
+    // TODO: Fix typing for this in a TipTap PR
+    this._tiptapEditor.mount({ mount: element } as any);
   };
 
   /**

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -99,7 +99,7 @@ export class FormattingToolbarView implements PluginView {
       return;
     }
 
-    const editorWrapper = this.pmView.dom.parentElement!.parentElement!;
+    const editorWrapper = this.pmView.dom.parentElement!;
 
     // Checks if the focus is moving to an element outside the editor. If it is,
     // the toolbar is hidden.
@@ -127,7 +127,7 @@ export class FormattingToolbarView implements PluginView {
     if (!element) {
       return false;
     }
-    const editorWrapper = this.pmView.dom.parentElement!.parentElement!;
+    const editorWrapper = this.pmView.dom.parentElement!;
     if (!editorWrapper) {
       return false;
     }

packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -119,7 +119,7 @@ class LinkToolbarView implements PluginView {
   };
 
   clickHandler = (event: MouseEvent) => {
-    const editorWrapper = this.pmView.dom.parentElement!.parentElement!;
+    const editorWrapper = this.pmView.dom.parentElement!;
 
     if (
       // Toolbar is open.

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -571,7 +571,7 @@ export class SideMenuView<
       this.mousePos.y < editorOuterBoundingBox.bottom;
 
     // TODO: remove parentElement, but then we need to remove padding from boundingbox or find a different solution
-    const editorWrapper = this.pmView.dom!.parentElement!.parentElement!;
+    const editorWrapper = this.pmView.dom!.parentElement!;
 
     // Doesn't update if the mouse hovers an element that's over the editor but
     // isn't a part of it or the side menu.