diff --git a/packages/plugins/plugin-block/src/block-provider.ts b/packages/plugins/plugin-block/src/block-provider.ts index 4ef3215d54e..81e81c7eab4 100644 --- a/packages/plugins/plugin-block/src/block-provider.ts +++ b/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 /// 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 } /// A provider for creating block. @@ -57,6 +66,12 @@ export class BlockProvider { /// @internal #initialized = false + /// @internal + readonly #middleware: Middleware[] + + /// @internal + readonly #floatingUIOptions: Partial + /// @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`, diff --git a/packages/plugins/plugin-slash/src/slash-provider.ts b/packages/plugins/plugin-slash/src/slash-provider.ts index 3a910f7e29e..b0db0a80fb5 100644 --- a/packages/plugins/plugin-slash/src/slash-provider.ts +++ b/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 } /// A provider for creating slash. @@ -35,6 +43,12 @@ export class SlashProvider { /// @internal #initialized = false + /// @internal + readonly #middleware: Middleware[] + + /// @internal + readonly #floatingUIOptions: Partial + /// @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`, diff --git a/packages/plugins/plugin-tooltip/src/tooltip-provider.ts b/packages/plugins/plugin-tooltip/src/tooltip-provider.ts index ddfcfde70fa..3d627f658a7 100644 --- a/packages/plugins/plugin-tooltip/src/tooltip-provider.ts +++ b/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 } /// 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 + /// @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`,