diff --git a/packages/plugins/plugin-block/src/block-provider.ts b/packages/plugins/plugin-block/src/block-provider.ts index b51e9c0a894..c22540db619 100644 --- a/packages/plugins/plugin-block/src/block-provider.ts +++ b/packages/plugins/plugin-block/src/block-provider.ts @@ -1,6 +1,7 @@ import type { ComputePositionConfig, Middleware, + OffsetOptions, Placement, VirtualElement, } from '@floating-ui/dom' @@ -33,13 +34,7 @@ export interface BlockProviderOptions { /// The function to determine whether the tooltip should be shown. shouldShow?: (view: EditorView, prevState?: EditorState) => boolean /// The offset to get the block. Default is 0. - getOffset?: (deriveContext: DeriveContext) => - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + getOffset?: (deriveContext: DeriveContext) => OffsetOptions /// The function to get the position of the block. Default is the position of the active node. getPosition?: (deriveContext: DeriveContext) => Omit /// The function to get the placement of the block. Default is 'left'. @@ -79,13 +74,7 @@ export class BlockProvider { readonly #floatingUIOptions: Partial /// @internal - readonly #getOffset?: (deriveContext: DeriveContext) => - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + readonly #getOffset?: (deriveContext: DeriveContext) => OffsetOptions /// @internal readonly #getPosition?: ( diff --git a/packages/plugins/plugin-slash/src/slash-provider.ts b/packages/plugins/plugin-slash/src/slash-provider.ts index ca725dedfae..a81137f67ef 100644 --- a/packages/plugins/plugin-slash/src/slash-provider.ts +++ b/packages/plugins/plugin-slash/src/slash-provider.ts @@ -1,6 +1,7 @@ import type { ComputePositionConfig, Middleware, + OffsetOptions, VirtualElement, } from '@floating-ui/dom' import type { Node } from '@milkdown/prose/model' @@ -23,13 +24,7 @@ export interface SlashProviderOptions { /// The key trigger for shouldShow, '/' by default. trigger?: string | string[] /// The offset to get the block. Default is 0. - offset?: - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + offset?: OffsetOptions /// 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. @@ -65,13 +60,7 @@ export class SlashProvider { readonly #shouldShow: (view: EditorView, prevState?: EditorState) => boolean /// The offset to get the block. Default is 0. - readonly #offset?: - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + readonly #offset?: OffsetOptions /// On show callback. onShow = () => {} diff --git a/packages/plugins/plugin-tooltip/src/tooltip-provider.ts b/packages/plugins/plugin-tooltip/src/tooltip-provider.ts index 6f3df6d462a..53d14249957 100644 --- a/packages/plugins/plugin-tooltip/src/tooltip-provider.ts +++ b/packages/plugins/plugin-tooltip/src/tooltip-provider.ts @@ -1,6 +1,8 @@ import type { ComputePositionConfig, Middleware, + OffsetOptions, + ShiftOptions, VirtualElement, } from '@floating-ui/dom' import type { EditorState } from '@milkdown/prose/state' @@ -20,13 +22,9 @@ export interface TooltipProviderOptions { /// The function to determine whether the tooltip should be shown. shouldShow?: (view: EditorView, prevState?: EditorState) => boolean /// The offset to get the block. Default is 0. - offset?: - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + offset?: OffsetOptions + /// The amount to shift options the block by. + shift?: ShiftOptions /// 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. @@ -56,13 +54,10 @@ export class TooltipProvider { #initialized = false /// @internal - readonly #offset?: - | number - | { - mainAxis?: number - crossAxis?: number - alignmentAxis?: number | null - } + readonly #offset?: OffsetOptions + + /// @internal + readonly #shift?: ShiftOptions /// The root element of the tooltip. element: HTMLElement @@ -78,6 +73,7 @@ export class TooltipProvider { this.#debounce = options.debounce ?? 200 this.#shouldShow = options.shouldShow ?? this.#_shouldShow this.#offset = options.offset + this.#shift = options.shift this.#middleware = options.middleware ?? [] this.#floatingUIOptions = options.floatingUIOptions ?? {} this.#root = options.root @@ -112,7 +108,12 @@ export class TooltipProvider { } computePosition(virtualEl, this.element, { placement: this.#floatingUIOptions.placement ?? 'top', - middleware: [flip(), offset(this.#offset), shift(), ...this.#middleware], + middleware: [ + flip(), + offset(this.#offset), + shift(this.#shift), + ...this.#middleware, + ], }) .then(({ x, y }) => { Object.assign(this.element.style, { @@ -162,7 +163,12 @@ export class TooltipProvider { if (virtualElement) { computePosition(virtualElement, this.element, { placement: 'top', - middleware: [flip(), offset(this.#offset)], + middleware: [ + flip(), + offset(this.#offset), + shift(this.#shift), + ...this.#middleware, + ], ...this.#floatingUIOptions, }) .then(({ x, y }) => {