@haklex/rich-editor-ui

Headless UI primitives for the Haklex rich editor, built on Base UI (@base-ui/react).

Installation

pnpm add @haklex/rich-editor-ui

Peer Dependencies

| Package | Version | | --- | --- | | react | >=19 | | react-dom | >=19 |

Usage

import { Dialog, DialogTrigger, DialogPopup, presentDialog } from '@haklex/rich-editor-ui'
import '@haklex/rich-editor-ui/style.css'

// Declarative usage
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPopup>Dialog content here</DialogPopup>
</Dialog>

// Imperative usage
presentDialog({
  title: 'Confirm',
  content: ({ dismiss }) => <p>Are you sure? <button onClick={dismiss}>Close</button></p>,
})

Exports

Dialog

Dialog, DialogTrigger, DialogPopup, DialogBackdrop, DialogPortal, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogStackProvider

Imperative API: presentDialog, dismissDialog, dismissTopDialog, dismissAllDialogs

DropdownMenu

DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuRadioGroup

Popover

Popover, PopoverTrigger, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverPanel, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, usePopover

Combobox

Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxItemIndicator, ComboboxGroup, ComboboxGroupLabel, ComboboxEmpty

Other Components

| Export | Description | | --- | --- | | AnimatedTabs | Tab bar with animated active indicator | | AnimatedCheckbox | Checkbox with animation | | ColorPicker | Color picker input | | SegmentedControl | Segmented control / toggle group | | TooltipRoot, TooltipTrigger, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider | Tooltip components | | createTooltipHandle | Imperative tooltip control | | ViewportGate | Render children only when visible in viewport |

Theme Utilities

PortalThemeProvider, PortalThemeWrapper, usePortalTheme (re-exported from @haklex/rich-style-token)

Sub-path Exports

| Import Path | Description | | --- | --- | | @haklex/rich-editor-ui | All components and utilities | | @haklex/rich-editor-ui/style.css | Compiled stylesheet |

Part of Haklex

This package is part of the Haklex rich editor ecosystem.

License

MIT