Rich text / foldkit-mixins-richtext

The block style picker

A button per text style the caret's block can take: Paragraph, Heading 1, 2, and 3, under the slash menu's labels.

ts
import { blockStyles } from 'foldkit-mixins-richtext'

blockStyles<Message>()(
  { document: model.document, selection: model.editor.selection, wrap: edited },
  h,
)

A click sends that style's RetypedBlock through wrap. At a heading level it does not list, none is pressed. In a code block none is pressed either, and a button retypes the block out of it, which the editor does given a vocabulary that says the kind holds text. With a node selection or none, every button is disabled, because a retype there is refused. Lists and quotes are not styles here: leaving one is a lift, not a retype.

SlotCapabilityRenders
rootContainerthe picker's wrapper
toolbarCollectionthe row, role="toolbar"
buttonInteractiveone style, data-style (the entry's id) and aria-pressed

blockStyleMenu<Message>() offers the same styles in the space of one button, for a toolbar with other things to hold. Its input adds open and toggled, since whether a menu is open is the caller's. The trigger shows the current style's icon and label ("Text style" where none applies) and opens a role="menu" of every style, each a menuitemradio, the current one checked. A choice sends its RetypedBlock through wrap, which is where the caller closes the menu. The trigger is disabled without a text selection, and the menu draws nothing then.

SlotCapabilityRenders
rootContainerthe wrapper, to anchor the menu to
triggerInteractivethe button naming the style, aria-haspopup="menu", aria-expanded
menuCollectionthe open menu
itemInteractiveone style, data-style, aria-checked
iconContainera style's icon
labelContainera style's label
checkContainerthe check beside the current style