Behavior API Overview

Reference docs for the behavior API.

defineBehavior

Options Object

• on (string): Internal editor event
• guard (function or boolean): function accepts snapshot and event, returns boolean
• actions (array): function accepts snapshot and event, returns array of actions

Example

const noLowerCaseA = defineBehavior({
  on: 'insert.text',
  guard: ({snapshot, event}) => event.text === 'a',
  actions: [({snapshot, event}) => [{type: 'insert.text', text: 'A'}]],
})

Behavior Event types

Native event types

• clipboard.copy
• clipboard.cut
• clipboard.paste
• drag.dragstart
• drag.drag
• drag.dragend
• drag.dragenter
• drag.dragover
• drag.drop
• drag.dragleave
• keyboard.keydown
• keyboard.keyup
• mouse.click

Synthetic event types

• annotation.add
• annotation.remove
• block.set
• block.unset
• decorator.add
• decorator.remove
• delete.backward
• delete.block
• delete.forward
• insert.block
• insert.inline object
• insert.span
• insert.text
• move.block
• move.block down
• move.block up
• select
• split.block

Abstract event types

• annotation.toggle
• decorator.toggle
• delete.text
• deserialize
• deserialization.failure
• deserialization.success
• insert.blocks
• insert.break
• insert.soft break
• list item.add
• list item.remove
• list item.toggle
• select.next block
• select.previous block
• serialize
• serialization.failure
• serialization.success
• style.add
• style.remove
• style.toggle

Custom event types

• custom.* (e.g. custom.add link)

Behavior Actions

Actions as part of synthetic events

• annotation.add
• annotation.remove
• annotation.toggle
• block.set
• block.unset
• blur
• decorator.add
• decorator.remove
• decorator.toggle
• delete.backward
• delete.block
• delete.forward
• focus
• insert.block
• insert.inline object
• insert.span
• insert.text
• move.block
• move.block down
• move.block up
• select
• split.block

Additional actions

• noop
• effect
• raise

raise

The raise action type is used to trigger synthetic events.

Properties:

• type: raise
• event: Behavior event object

const raisedUppercaseA = defineBehavior({
  on: 'insert.text',
  guard: ({snapshot, event}) => event.text === 'a',
  actions: [
    ({snapshot, event}) => [
      {type: 'raise', event: {type: 'insert.text', text: 'A'}},
    ],
  ],
})

The raise action also has a handy shorthand function. It accepts a behavior event object.

const raisedUppercaseA = defineBehavior({
  on: 'insert.text',
  guard: ({snapshot, event}) => event.text === 'a',
  actions: [({snapshot, event}) => [raise({type: 'insert.text', text: 'A'})]],
})