Bangle uses the concept of Commands which is borrowed from Prosemirror to allow for making controlled changes to your editor.

In the example below we try out a heading command.

import { heading } from '';
// Create a command for toggling heading of level 3
const command = heading.commands.toggleHeading(3);
// Execute the command
command(state, dispatch);

Executing a command#

To get access to state, dispatch, you can save the editor in your applications state management and access it like this:

const editor = new BangleEditor({ ... })
const view = editor.view
const state = view.state
const dispatch = view.dispatch
// dry run a command
const success = toggleBold()(view.state);
// execute the command
toggleBold()(state, dispatch);

💡 Bangle will always export a higher order function which returns a command.

📖 API docs for commands.

📖 Please read the Prosemirror guide on commands for more details.