Active state

Controls how toolbar and context buttons reflect the current selection. The editor compares the caret or range against registered rules and toggles the active class on matching buttons.

Rule keys must match button names from buttons.toolbar, buttons.context, dropdown items, and plugin buttons.

Runtime API: app.activeState (addTagRule, addBlockRule, addCustomRule, getActiveKeys, check). See the API reference for full method docs.

activeState.tagRules#

Type: object

Default:

{
  bold: 'b, strong',
  italic: 'i, em',
  deleted: 'del',
  underline: 'u',
  link: 'a',
  code: 'code',
  mark: 'mark',
  highlight: 'mark',
  subscript: 'sub',
  superscript: 'sup',
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  bulletlist: 'ul',
  numberedlist: 'ol'
}

Maps button keys to CSS selectors. A rule is active when the caret is inside a matching element, or when the selection intersects one (the module walks inline ancestors and range nodes).

const app = Redactor('#entry', {
  activeState: {
    tagRules: {
      dlist: 'dl'
    }
  }
});

activeState.blockRules#

Type: object

Default:

{
  list: ['list', 'list-item'],
  pre: ['pre'],
  table: ['table'],
  image: ['image'],
  embed: ['embed'],
  layout: ['layout'],
  wrapper: ['wrapper'],
  todo: ['todo', 'todo-item'],
  text: ['text'],
  quote: ['quote']
}

Maps button keys to block types. A rule is active when the caret is in a block of that type, or when the selection spans such blocks.

const app = Redactor('#entry', {
  activeState: {
    blockRules: {
      callout: ['callout']
    }
  }
});

Plugins typically register block rules at runtime instead of options:

this.app.activeState.addBlockRule('math', 'math');

Custom rules#

Custom predicate rules are not available through options. Register them on the editor instance:

app.activeState.addCustomRule('readonly', ({ blocks }) => {
  return blocks.some((b) => b.isReadOnly?.());
});

Custom rules run when tag and block rules do not match, and also when the selection is outside the editor.