Create operations

In this step we will set up our first operation. Operations are interactions with the state of the editor instance, for example inserting an element or opening a sidepanel.

What you'll need

Step 1: Create an operation

In this example we will add the "bold" operation. For this operation we will use the toggle-inline-formatting-element operation. Refer to the operations API for more in depth information about all the available operations.

  • Create a new file /packages/recipe-sx-module/src/operations.json.

  • Add the following code to this file to add the “bold” operation:

    "toggle-bold": {
        "label": "Bold",
        "description": "Applies bold formatting to text.",
        "icon": "bold",
        "keyBinding": "ctrl+b",
        "osxKeyBinding": "cmd+b",
        "steps": {
            "type": "operation/toggle-inline-formatting-element",
            "data": {
                "nodeName": "b"

For now the “bold” operation only works through keybindings. The most common place to add operations is the masthead.

If you followed the steps of the Getting started guide using version 3.0.0 or higher of the Fonto Development Tools proceed with step 2a. If you used the Creating a masthead guide proceed with step 2b.

Step 2a: Add the operation to the ExampleToolbar

  • Navigate to the packages/editor-masthead/src/toolbars/ExampleToolbar.jsx file
  • Replace "do-nothing" with "toggle-bold"
  • Remove the icon property and its value 
  • Remove the label property and its value
  • The code should look like this:

import React from 'react';

import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';

import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';

const ExampleToolbar = () => (
            <FxOperationButton operationName="toggle-bold" />

export default ExampleToolbar;

Step 2b: Add the operation to the Masthead

  • Navigate to the packages/recipe-masthead/src/Masthead.jsx file

  • Fill the operation name associated with the newly created operation.

    • The start-tab can be filled with any operation you created in the operation.json file.

  • Change the content of the toolbar by adding the “bold” operation inside the toolbar.

  • The code should look like this:

const tabs = [
        id: 'start-tab',
        label: 'Start',
        content: (
                    <FxOperationButton operationName="toggle-bold" />
  • Reload the editor to see the full base of your own Fonto editor.

Final result

Go to the concepts page Operations for more information about how to create other operations for specific cases.

Was this page helpful?