Create a masthead

The masthead in Fonto is more commonly known as the toolbar of a text editor. In this step we will help you set it up. For more information click on the following link: Create an advanced Masthead.

If you followed the steps of the Getting started guide using version 3.0.0 or higher of the Fonto Development Tools, a masthead is likely already set up for your Fonto Editor instance.

What you'll need

Step 1: Create the masthead package

  • Create the masthead package in the packages/ folder of your Fonto editor. For this guide we will name this package recipe-masthead/src.

Step 2: Add the dependency

  • Create a dependency on the newly created package by adding it to the fonto-manifest.json in the config/ folder of your editor.
fonto-manifest.json
{
    "dependencies": {
        "recipe-masthead": "packages/recipe-masthead"
    }
}

Step 3: Create the masthead component

  • Create a new file named RecipeMasthead.jsx inside the masthead package.

This is the minimal code for an (empty) masthead:

RecipeMasthead.jsx
import React from 'react';

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

const RecipeMasthead = props => {
    return <FxEditorMasthead tabs={[]} />;
};

export default RecipeMasthead;

In the example above we used the FxEditorMasthead component. The tabs prop defines which tabs should be shown in the masthead and the tabs prop is the only required prop of this component. The tabs prop expects an array of objects describing the tabs to be shown. Since we want an empty masthead we need to pass an empty array to tabs property.

Step 4: Register the masthead

  • Register the masthead component to load it. To register the masthead create an install.js file inside the packages/recipe-masthead/src folder.
  • Import the uiManager and register the masthead component under the name “Masthead”.
install.js
import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import Masthead from './RecipeMasthead.jsx';
 
export default function install() {
    uiManager.registerReactComponent('Masthead', Masthead);
}

Step 5: Register the toolbar tabs

  • Register the toolbar tabs by passing an array of objects to the tabs property of the FxEditorMasthead component. Each object describes a tab that needs to be shown on the toolbar.

In our masthead we only have one tab, thus our array will only contain one object.

RecipeMasthead.jsx
import React from 'react';
import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';

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

const tabs = [
    {
        id: 'start-tab',
        label: 'Start',
        content: (
            <MastheadToolbar>
                <MastheadToolbarButtons>
                    <FxOperationButton operationName="" />
                </MastheadToolbarButtons>
            </MastheadToolbar>
        )
    }
];

const RecipeMasthead = props => {
    return <FxEditorMasthead tabs={tabs} />;
};

export default RecipeMasthead;

In the example above we defined the “Start” tab by passing the id, label and content properties to the object which are the only required properties for each defined tab.

The content property expects a  MastheadToolbar component in order to render the tab. This component is a layout container which should contain MastheadToolbarButtons components.

In this example we are using a FxOperationButton component as our button to invoke the state of an operation. You will learn more about operations in the guide Create operations.


Step 6: (Optional) Add the quick access buttons

  • Add this code example to the RecipeMasthead.jsx file created in step 3 to add the save, undo and redo buttons as our quick access buttons.
RecipeMasthead.jsx
import React from 'react';
import { Flex, MastheadToolbar, MastheadToolbarButtons } from 'fds/components';

import FxEditorMasthead from 'fontoxml-fx/src/FxEditorMasthead.jsx';
import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';
import FxSaveButton from 'fontoxml-fx/src/FxSaveButton.jsx';
const tabs = [
    {
        id: 'start-tab',
        label: 'Start',
        content: (
            <MastheadToolbar>
                <MastheadToolbarButtons>
                    <FxOperationButton operationName="" />
                </MastheadToolbarButtons>
            </MastheadToolbar>
        )
    }
];

const quickAccessButtons = (
    <Flex flexDirection="row" flex="none">
        <FxSaveButton />
        <FxOperationButton operationName="undo" />
        <FxOperationButton operationName="redo" />
    </Flex>
);

const RecipeMasthead = props => {
    return <FxEditorMasthead tabs={tabs} quickAccessButtons={quickAccessButtons} />;
};

export default RecipeMasthead;


In this example we are using the FxOperationButton component for the undo/ redo buttons and the FxSaveButton for the save button. Since the quickAccesButtons property in the FxEditorMasthead only accepts a component as argument, we wrapped the buttons in a Flex component to ensure we don’t encounter errors.

 

Final result

As you may have noticed, the masthead shows the message Operation not found. This is because there is no operation created yet. This will be done Creating operations guide.



Step 7: (Optional) Add the default toolbar for tables


  • Import the default table toolbar from fontoxml-table-flow and add the table toolbar as a toolbar tap
RecipeMasthead.jsx
import React from 'react';
import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';

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

// Import the Table Toolbar from 'fontoxml-table-flow'.
import TableToolbar from 'fontoxml-table-flow/src/TableToolbar.jsx';

const tabs = [
    {
        id: 'start-tab',
        label: 'Start',
        content: (
            <MastheadToolbar>
                <MastheadToolbarButtons>
                    <FxOperationButton operationName="" />
                </MastheadToolbarButtons>
            </MastheadToolbar>
        )
    },
    // Add the TableToolbar to the array of tabs
    {
        id: 'table-tab',
        label: 'Table',
        isHighlightedTabQuery: 'ancestor-or-self::table',
        isVisibleTabQuery: 'ancestor-or-self::table',
        content: <TableToolbar />
    },
];

const RecipeMasthead = props => {
    return <FxEditorMasthead tabs={tabs} />;
};

export default RecipeMasthead;

For a guide on how to configure the default TableToolbar, go to Configure default TableToolbar

For more in depth information and extra options we recommend to go to the Advanced Masthead guide.


Was this page helpful?