prosekit/web/block-handle

<prosekit-block-handle-root>
  <prosekit-block-handle-positioner>
    <prosekit-block-handle-popup>
      <prosekit-block-handle-add>...</prosekit-block-handle-add>
      <prosekit-block-handle-draggable>...</prosekit-block-handle-draggable>
    </prosekit-block-handle-popup>
  </prosekit-block-handle-positioner>
</prosekit-block-handle-root>

<prosekit-block-handle-add> custom element.

Properties: BlockHandleAddProps

new BlockHandleAddElement(): BlockHandleAddElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-block-handle-draggable> custom element.

Properties: BlockHandleDraggableProps

Data attributes:

new BlockHandleDraggableElement(): BlockHandleDraggableElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-block-handle-popup> custom element.

Properties: BlockHandlePopupProps

Data attributes:

new BlockHandlePopupElement(): BlockHandlePopupElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-block-handle-positioner> custom element.

Properties: BlockHandlePositionerProps

Data attributes:

CSS variables:

new BlockHandlePositionerElement(): BlockHandlePositionerElement

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

offset: OffsetOptions

The distance between the reference and floating element.

Default

Section titled “Default”

6

overlap: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport: boolean

Whether to constrain the floating element's width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default

Section titled “Default”

false

inline: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

boundary: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary: boolean

Whether to check the alternate elementContext's boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

placement: Placement

The placement of the popover, relative to the hovered block.

Default

Section titled “Default”

"left"

hoist: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

new BlockHandleStateChangeEvent(state: { node: ProseMirrorNode; pos: number; } | null): BlockHandleStateChangeEvent

detail: { node: ProseMirrorNode; pos: number; } | null

The currently hovered block's node and position, or null if no block is hovered.

<prosekit-block-handle-root> custom element.

Properties: BlockHandleRootProps

Events: BlockHandleRootEvents

new BlockHandleRootElement(): BlockHandleRootElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

offset: OffsetOptions

The distance between the reference and floating element.

Default

Section titled “Default”

6

overlap: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport: boolean

Whether to constrain the floating element's width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default

Section titled “Default”

false

inline: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

boundary: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary: boolean

Whether to check the alternate elementContext's boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

placement: Placement

The placement of the popover, relative to the hovered block.

Default

Section titled “Default”

"left"

hoist: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

false

stateChange: BlockHandleStateChangeEvent

Fired when the hovered block changes.