Vizel API / react/src / VizelBubbleMenu

Function: VizelBubbleMenu()

function VizelBubbleMenu(__namedParameters): Element | null;

Defined in: packages/react/src/components/VizelBubbleMenu.tsx:60

A floating menu that appears when text is selected. Provides formatting options like bold, italic, strike, code, and link.

Parameters

Parameter	Type
__namedParameters	VizelBubbleMenuProps

Returns

Element | null

Example

// Basic usage with default menu
<VizelProvider editor={editor}>
  <VizelEditor />
  <VizelBubbleMenu />
</VizelProvider>

// With custom items using sub-components
<VizelBubbleMenu>
  <VizelBubbleMenuButton
    onClick={() => editor.chain().toggleBold().run()}
    isActive={editor.isActive("bold")}
  >
    Bold
  </VizelBubbleMenuButton>
  <VizelBubbleMenuDivider />
  <VizelBubbleMenuButton onClick={() => setShowLinkEditor(true)}>
    Link
  </VizelBubbleMenuButton>
</VizelBubbleMenu>