Account
Menu
Buy now →

Inline

Inline formatting commands.

Access:

app.inline
app.getModule('inline')
app.invoke('inline.method', …)

add#

Registers a dynamic inline format button config.

Parameters:

  • name (string) — identifier name
  • config (object) — configuration object
app.inline.add('mark', { title: 'Mark', command: 'inline.set', params: { tag: 'mark' } });

remove#

Removes dynamic inline buttons by name.

Parameters:

  • ...names (Array) — button name(s) previously registered via inline.add (accepts multiple arguments or arrays)
app.inline.remove('mark');

getItems#

Builds inline format dropdown items for current block.

Parameters:

  • block (Block | HTMLElement) — block instance

Returns: object[]

app.inline.getItems(block);

open#

Opens inline formatting dropdown.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.inline.open({}, { button });

set#

Toggles inline formatting for the current selection or caret position: wraps/unwraps tag and applies the same attrs/classes/styles decorations as inline.applyDecorations. Unlike applyDecorations, this method can wrap new text/elements (it is the method behind toolbar bold/italic/link-style buttons).

Parameters:

  • tag (string) — target inline tag (default: 'span')
  • attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)
  • classes (string | string[]) — CSS class names to toggle (string or array)
  • styles (object) — CSS declarations to toggle ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: HTMLElement[]

app.inline.set({ tag: 'strong' });
app.inline.set({ tag: 'a', attrs: { href: 'https://example.com' } });

removeFormat#

Removes inline formatting for the current selection. When tag is given, only wrappers matching that tag (and its equivalents, e.g. b/strong) are unwrapped; when omitted, all inline wrappers in the selection are removed.

Parameters:

  • tag (string) — tag to unwrap (equivalents like b/strong included); omit to remove every inline wrapper in the selection

Returns: boolean

app.inline.removeFormat('strong');
app.inline.removeFormat();

applyDecorations#

Applies attrs, classes, and/or styles to existing selected inline elements matching tag (equivalents such as b/strong included). Does not wrap new text or elements — use inline.set for that. Toggle semantics: re-applying the same value again removes it. At least one of attrs, classes, or styles is required, otherwise nothing happens.

Parameters:

  • tag (string) — target inline tag (default: 'span')
  • attrs (object) — HTML attributes ({ name: value }; true / null sets a boolean attribute)
  • classes (string | string[]) — CSS class names to toggle (string or array)
  • styles (object) — CSS declarations to toggle ({ color: '#f00' } or { backgroundColor: 'yellow' })

Returns: HTMLElement[]

// CSS classes (string or array)
app.inline.applyDecorations({ tag: 'span', classes: 'text-red highlight' });
app.inline.applyDecorations({ tag: 'span', classes: ['text-red', 'highlight'] });

// Inline styles
app.inline.applyDecorations({ tag: 'strong', styles: { color: '#f00', backgroundColor: 'yellow' } });

// Attributes
app.inline.applyDecorations({ tag: 'a', attrs: { href: 'https://example.com', target: '_blank', rel: 'noopener' } });

// Combined
app.inline.applyDecorations({ tag: 'span', classes: ['badge'], attrs: { 'data-role': 'mark' }, styles: { fontWeight: '600' } });