feat: 🎸 add root option for tooltip,slash,block (#1681)

✅ Closes: #1635

Author: Saul-Mirone

Diff for: packages/plugins/plugin-block/src/block-provider.ts

@@ -47,6 +47,8 @@ export interface BlockProviderOptions {
   middleware?: Middleware[]
   /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
   floatingUIOptions?: Partial<ComputePositionConfig>
+  /// The root element that the block will be appended to.
+  root?: HTMLElement
 }
 
 /// A provider for creating block.
@@ -63,6 +65,9 @@ export class BlockProvider {
   /// @internal
   #activeNode: ActiveNode | null = null
 
+  /// @internal
+  readonly #root?: HTMLElement
+
   /// @internal
   #initialized = false
 
@@ -102,13 +107,15 @@ export class BlockProvider {
     this.#getPlacement = options.getPlacement
     this.#middleware = options.middleware ?? []
     this.#floatingUIOptions = options.floatingUIOptions ?? {}
+    this.#root = options.root
     this.hide()
   }
 
   /// @internal
   #init() {
     const view = this.#ctx.get(editorViewCtx)
-    view.dom.parentElement?.appendChild(this.#element)
+    const root = this.#root ?? view.dom.parentElement ?? document.body
+    root.appendChild(this.#element)
 
     const service = this.#ctx.get(blockService.key)
     service.bind(this.#ctx, (message) => {

Diff for: packages/plugins/plugin-slash/src/slash-provider.ts

@@ -33,6 +33,8 @@ export interface SlashProviderOptions {
   middleware?: Middleware[]
   /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
   floatingUIOptions?: Partial<ComputePositionConfig>
+  /// The root element that the slash will be appended to.
+  root?: HTMLElement
 }
 
 /// A provider for creating slash.
@@ -49,6 +51,9 @@ export class SlashProvider {
   /// @internal
   readonly #floatingUIOptions: Partial<ComputePositionConfig>
 
+  /// @internal
+  readonly #root?: HTMLElement
+
   /// @internal
   readonly #debounce: number
 
@@ -81,6 +86,7 @@ export class SlashProvider {
     this.#offset = options.offset
     this.#middleware = options.middleware ?? []
     this.#floatingUIOptions = options.floatingUIOptions ?? {}
+    this.#root = options.root
   }
 
   /// @internal
@@ -94,7 +100,8 @@ export class SlashProvider {
       prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
 
     if (!this.#initialized) {
-      view.dom.parentElement?.appendChild(this.element)
+      const root = this.#root ?? view.dom.parentElement ?? document.body
+      root.appendChild(this.element)
       this.#initialized = true
     }
 

Diff for: packages/plugins/plugin-tooltip/src/tooltip-provider.ts

@@ -30,6 +30,8 @@ export interface TooltipProviderOptions {
   middleware?: Middleware[]
   /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
   floatingUIOptions?: Partial<ComputePositionConfig>
+  /// The root element that the tooltip will be appended to.
+  root?: HTMLElement
 }
 
 /// A provider for creating tooltip.
@@ -46,6 +48,9 @@ export class TooltipProvider {
   /// @internal
   readonly #floatingUIOptions: Partial<ComputePositionConfig>
 
+  /// @internal
+  readonly #root?: HTMLElement
+
   /// @internal
   #initialized = false
 
@@ -74,6 +79,7 @@ export class TooltipProvider {
     this.#offset = options.offset
     this.#middleware = options.middleware ?? []
     this.#floatingUIOptions = options.floatingUIOptions ?? {}
+    this.#root = options.root
     this.element.dataset.show = 'false'
   }
 
@@ -88,7 +94,8 @@ export class TooltipProvider {
       prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
 
     if (!this.#initialized) {
-      view.dom.parentElement?.appendChild(this.element)
+      const root = this.#root ?? view.dom.parentElement ?? document.body
+      root.appendChild(this.element)
       this.#initialized = true
     }