Format

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 to blockFormatter.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' }
});