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.
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.
| Slot | Capability | Renders |
|---|---|---|
root | Container | the picker's wrapper |
toolbar | Collection | the row, role="toolbar" |
button | Interactive | one 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.
| Slot | Capability | Renders |
|---|---|---|
root | Container | the wrapper, to anchor the menu to |
trigger | Interactive | the button naming the style, aria-haspopup="menu", aria-expanded |
menu | Collection | the open menu |
item | Interactive | one style, data-style, aria-checked |
icon | Container | a style's icon |
label | Container | a style's label |
check | Container | the check beside the current style |