prosekit/react/block-handle

import {
  BlockHandleAdd,
  BlockHandleDraggable,
  BlockHandlePopup,
  BlockHandlePositioner,
  BlockHandleRoot,
} from 'prosekit/react/block-handle'

<BlockHandleRoot>
  <BlockHandlePositioner>
    <BlockHandlePopup>
      <BlockHandleAdd>...</BlockHandleAdd>
      <BlockHandleDraggable>...</BlockHandleDraggable>
    </BlockHandlePopup>
  </BlockHandlePositioner>
</BlockHandleRoot>

Props for the BlockHandleAdd React component.

Props for the BlockHandleDraggable React component.

Props for the BlockHandlePopup React component.

Props for the BlockHandlePositioner React component.

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

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

Props for the BlockHandleRoot React component.

onStateChange?: (event: BlockHandleStateChangeEvent) => void

Fired when the hovered block changes.

const BlockHandleAdd: ForwardRefExoticComponent<BlockHandleAddProps & HTMLAttributes<BlockHandleAddElement> & RefAttributes<BlockHandleAddElement>>

A React component that renders an prosekit-block-handle-add custom element.

const BlockHandleDraggable: ForwardRefExoticComponent<BlockHandleDraggableProps & HTMLAttributes<BlockHandleDraggableElement> & RefAttributes<BlockHandleDraggableElement>>

A React component that renders an prosekit-block-handle-draggable custom element.

const BlockHandlePopup: ForwardRefExoticComponent<BlockHandlePopupProps & HTMLAttributes<BlockHandlePopupElement> & RefAttributes<BlockHandlePopupElement>>

A React component that renders an prosekit-block-handle-popup custom element.

const BlockHandlePositioner: ForwardRefExoticComponent<BlockHandlePositionerProps & HTMLAttributes<BlockHandlePositionerElement> & RefAttributes<BlockHandlePositionerElement>>

A React component that renders an prosekit-block-handle-positioner custom element.

const BlockHandleRoot: ForwardRefExoticComponent<BlockHandleRootProps & HTMLAttributes<BlockHandleRootElement> & RefAttributes<BlockHandleRootElement>>

A React component that renders an prosekit-block-handle-root custom element.