Format dropdown and format application.
Access:
app.format
app.getModule('format')
app.invoke('format.method', …)
add#
Registers a dynamic format dropdown item config by name.
Parameters:
- name (
string) — identifier name - config (
object) — configuration object
app.format.add('lead', { title: 'Lead', command: 'format.set' });
remove#
Marks format item names as removed.
Parameters:
- ...names (
Array) — list of names to process
app.format.remove('lead');
getItems#
Builds the format dropdown item list for the given block context.
Parameters:
- block (
Block | HTMLElement) — block instance
Returns: object[]
app.format.getItems(block);
open#
Creates and opens the format dropdown anchored to a trigger element.
Parameters:
- params (
object) — command or form parameters - button (
HTMLElement | string) — toolbar or UI button element - el (
HTMLElement | string) — DOM element
app.format.open({}, { button });
set#
Closes the dropdown and applies block formatting via blockFormatter.format for the given type. Extra keys (headingLevel/level, listTag/tag, attrs, classes, styles) are applied to the resulting blocks.
Parameters:
- type (
string) — target block type, e.g.'text','heading','list','todo','quote','pre' - ...options (
object) — format options forwarded toblockFormatter.format— see keys below in examples:headingLevel/level,listTag/tag,attrs,classes,styles
Returns: Block[]
// Heading level
app.format.set({ type: 'heading', headingLevel: 2 });
// level is an alias for headingLevel
app.format.set({ type: 'heading', level: 3 });
// Ordered / unordered list
app.format.set({ type: 'list', listTag: 'ol' });
app.format.set({ type: 'list', tag: 'ul' });
// CSS classes (string or array) — toggled on the block element
app.format.set({ type: 'text', classes: 'lead highlight' });
app.format.set({ type: 'heading', headingLevel: 2, classes: ['section-title'] });
// Inline styles
app.format.set({
type: 'text',
styles: { color: '#334155', backgroundColor: '#f8fafc' }
});
// HTML attributes
app.format.set({
type: 'quote',
attrs: { 'data-role': 'callout', cite: 'https://example.com' }
});
// Combined
app.format.set({
type: 'heading',
headingLevel: 2,
classes: ['lead'],
attrs: { id: 'intro' },
styles: { letterSpacing: '0.02em' }
});