feat: 🎸 allow options to floating ui (#1578)

* feat: 🎸 allow options for floating ui

✅ Closes: #1436

* chore: f

Author: Saul-Mirone

packages/plugins/plugin-block/src/block-provider.ts

@@ -2,7 +2,12 @@ import type { Ctx } from '@milkdown/ctx'
 import type { EditorState } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 
-import type { Placement, VirtualElement } from '@floating-ui/dom'
+import type {
+  ComputePositionConfig,
+  Middleware,
+  Placement,
+  VirtualElement,
+} from '@floating-ui/dom'
 import { computePosition, flip, offset } from '@floating-ui/dom'
 
 import { editorViewCtx } from '@milkdown/core'
@@ -38,6 +43,10 @@ export interface BlockProviderOptions {
   getPosition?: (deriveContext: DeriveContext) => Omit<DOMRect, 'toJSON'>
   /// The function to get the placement of the block. Default is 'left'.
   getPlacement?: (deriveContext: DeriveContext) => Placement
+  /// Other middlewares for floating ui. This will be added after the internal middlewares.
+  middleware?: Middleware[]
+  /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
+  floatingUIOptions?: Partial<ComputePositionConfig>
 }
 
 /// A provider for creating block.
@@ -57,6 +66,12 @@ export class BlockProvider {
   /// @internal
   #initialized = false
 
+  /// @internal
+  readonly #middleware: Middleware[]
+
+  /// @internal
+  readonly #floatingUIOptions: Partial<ComputePositionConfig>
+
   /// @internal
   readonly #getOffset?: (deriveContext: DeriveContext) =>
     | number
@@ -85,6 +100,8 @@ export class BlockProvider {
     this.#getOffset = options.getOffset
     this.#getPosition = options.getPosition
     this.#getPlacement = options.getPlacement
+    this.#middleware = options.middleware ?? []
+    this.#floatingUIOptions = options.floatingUIOptions ?? {}
     this.hide()
   }
 
@@ -159,7 +176,8 @@ export class BlockProvider {
       placement: this.#getPlacement
         ? this.#getPlacement(deriveContext)
         : 'left',
-      middleware,
+      middleware: [...middleware, ...this.#middleware],
+      ...this.#floatingUIOptions,
     }).then(({ x, y }) => {
       Object.assign(this.#element.style, {
         left: `${x}px`,

packages/plugins/plugin-slash/src/slash-provider.ts

@@ -4,7 +4,11 @@ import type { Node } from '@milkdown/prose/model'
 import { TextSelection } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 import debounce from 'lodash.debounce'
-import type { VirtualElement } from '@floating-ui/dom'
+import type {
+  ComputePositionConfig,
+  Middleware,
+  VirtualElement,
+} from '@floating-ui/dom'
 import { computePosition, flip, offset } from '@floating-ui/dom'
 
 /// Options for slash provider.
@@ -25,6 +29,10 @@ export interface SlashProviderOptions {
         crossAxis?: number
         alignmentAxis?: number | null
       }
+  /// Other middlewares for floating ui. This will be added after the internal middlewares.
+  middleware?: Middleware[]
+  /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
+  floatingUIOptions?: Partial<ComputePositionConfig>
 }
 
 /// A provider for creating slash.
@@ -35,6 +43,12 @@ export class SlashProvider {
   /// @internal
   #initialized = false
 
+  /// @internal
+  readonly #middleware: Middleware[]
+
+  /// @internal
+  readonly #floatingUIOptions: Partial<ComputePositionConfig>
+
   /// @internal
   readonly #debounce: number
 
@@ -65,6 +79,8 @@ export class SlashProvider {
     this.#shouldShow = options.shouldShow ?? this.#_shouldShow
     this.#trigger = options.trigger ?? '/'
     this.#offset = options.offset
+    this.#middleware = options.middleware ?? []
+    this.#floatingUIOptions = options.floatingUIOptions ?? {}
   }
 
   /// @internal
@@ -94,7 +110,8 @@ export class SlashProvider {
     }
     computePosition(virtualEl, this.element, {
       placement: 'bottom-start',
-      middleware: [flip(), offset(this.#offset)],
+      middleware: [flip(), offset(this.#offset), ...this.#middleware],
+      ...this.#floatingUIOptions,
     }).then(({ x, y }) => {
       Object.assign(this.element.style, {
         left: `${x}px`,

packages/plugins/plugin-tooltip/src/tooltip-provider.ts

@@ -2,7 +2,11 @@ import type { EditorState } from '@milkdown/prose/state'
 import { TextSelection } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 import debounce from 'lodash.debounce'
-import type { VirtualElement } from '@floating-ui/dom'
+import type {
+  ComputePositionConfig,
+  Middleware,
+  VirtualElement,
+} from '@floating-ui/dom'
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { posToDOMRect } from '@milkdown/prose'
 
@@ -22,6 +26,10 @@ export interface TooltipProviderOptions {
         crossAxis?: number
         alignmentAxis?: number | null
       }
+  /// Other middlewares for floating ui. This will be added after the internal middlewares.
+  middleware?: Middleware[]
+  /// Options for floating ui. If you pass `middleware` or `placement`, it will override the internal settings.
+  floatingUIOptions?: Partial<ComputePositionConfig>
 }
 
 /// A provider for creating tooltip.
@@ -32,6 +40,12 @@ export class TooltipProvider {
   /// @internal
   readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean
 
+  /// @internal
+  readonly #middleware: Middleware[]
+
+  /// @internal
+  readonly #floatingUIOptions: Partial<ComputePositionConfig>
+
   /// @internal
   #initialized = false
 
@@ -58,6 +72,8 @@ export class TooltipProvider {
     this.#debounce = options.debounce ?? 200
     this.#shouldShow = options.shouldShow ?? this.#_shouldShow
     this.#offset = options.offset
+    this.#middleware = options.middleware ?? []
+    this.#floatingUIOptions = options.floatingUIOptions ?? {}
     this.element.dataset.show = 'false'
   }
 
@@ -88,7 +104,7 @@ export class TooltipProvider {
     }
     computePosition(virtualEl, this.element, {
       placement: 'top',
-      middleware: [flip(), offset(this.#offset), shift()],
+      middleware: [flip(), offset(this.#offset), shift(), ...this.#middleware],
     }).then(({ x, y }) => {
       Object.assign(this.element.style, {
         left: `${x}px`,
@@ -137,6 +153,7 @@ export class TooltipProvider {
       computePosition(virtualElement, this.element, {
         placement: 'top',
         middleware: [flip(), offset(this.#offset)],
+        ...this.#floatingUIOptions,
       }).then(({ x, y }) => {
         Object.assign(this.element.style, {
           left: `${x}px`,