How to customize the masthead

This guide helps you customize the masthead by adding more toolbars to it.

What you need

You will need a Fonto Editor instance, which can be set up by following the Create a base editor guide.

This guide uses the editor created by following the Create a base editor guide. Files such as RecipeMasthead.jsx may be named differently in your Fonto Editor instance.

The file that defines your masthead is typically located in a folder called editor-masthead. And is called EditorMasthead.jsx by default.

Add a new toolbar tab

You can add any amount of toolbar tabs by using the tabs property on FxEditorMasthead. Check out the API documentation of that component for all the information accepted in tabs!

We'll start with a single toolbar tab with label "Start". The tabs property should therefore be an array with only one object.

Update RecipeMasthead.jsx with the following:

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>
                    Hello world!
                </MastheadToolbarButtons>
            </MastheadToolbar>
        )
    }
];

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

export default RecipeMasthead;

You can organize your variables however you like. As a matter of code organization you could move the contents of the "Start" tab's content property to a new file!

Add buttons and drop-downs to your toolbar

We have a range of buttons and drop-downs that are designed to look nice in the toolbar. You are encouraged to compose those however you want.

For example, the most common toolbar button is the FxOperationButton, because it reflects the state of an operation nicely.

JSX

<FxOperationButton operationName="toggle-bold" />

Buttons in the toolbar are normally driven by operations. For that reason most code examples use FxOperationButton, FxOperationMenuItem, and similar operation-aware components. Read more about operations and learn how to add your own!

You can create drop-down menus, and drive its menu items with operations too, using FDS' ButtonWithDrop in combination with FxOperationMenuItem:

JSX

<ButtonWithDrop
	label="Code block"
	icon="file-code"
	renderDrop={() => (
		<Drop>
			<Menu>
				<MenuGroup>
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-csharp" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-html" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-js" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-json" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-jsx" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-xml" />
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-xquery" />
				</MenuGroup>
				<MenuGroup>
					<FxOperationMenuItem operationName=":insert-codeblock_x-code-other" />
				</MenuGroup>
			</Menu>
		</Drop>
	)}
/>

Or even the combination between a clickable button and a drop-down, using FxOperationsSplitButtonWithDropMenu:

JSX

<FxOperationsSplitButtonWithDropMenu
	icon="note"
	operations={[
		{ operationName: 'insert-note' },
		{ operationName: 'insert-note--tip' },
		{ operationName: 'insert-note--warning' },
		{ operationName: 'insert-note--error' }
	]}
/>

Or a button that adopts the behavior of the first operation from a list that is enabled for that cursor position, using FxMultiOperationsButton:

JSX

<FxMultiOperationButton
	operations={[
		{ operationName: "convert-note-to-example" },
		{ operationName: "insert-example" }
	]}
/>

If you want to add a live operation to your toolbar now, follow the Create an operation guide.

Add quick-access buttons for common functionality

The quick-access buttons are always visible to the left of the toolbar tab labels. This makes them very suitable for buttons that need to be visible from any toolbar; for example "Save", "Undo", "Redo" and "Remove formatting" functionality.

See also the FxSaveButton and FxOperationButton components, as well as the undo and redo operations.

Fonto makes no assumption on where you want those buttons, so you have to add them yourself.

Pass the quickAccessButtons prop to <FxEditorMasthead>. You can use <Flex> to align and space buttons in that area as you like.

JSX

const quickAccessButtons = (
    <Flex flexDirection="row" flex="none">
        <FxSaveButton />
        <FxOperationButton operationName="undo" />
        <FxOperationButton operationName="redo" />
        <FxOperationButton operationName="convert-range-to-plain-text" />
    </Flex>
);

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

Add some useful interface controls to the toolbar

Some common controls that may improve the life of a user are setting the zoom level, and accessing the Quick Navigation feature. Both features are included with the platform. Other functionality, such as the spell-checker or Document History, might come from an add-on!

See also the open-quick-navigation and zoom-content-view-to operations.

You could use FxEditorMasthead's mastheadAlignRightContent property and a ButtonWithDrop, or introduce a whole new "Tools" toolbar.

JSX

<ButtonWithDrop
	label={t('Tools')}
	icon='wrench'
	renderDrop={() => (
		<Drop>
			<Menu>
				<MenuGroup>
					<FxOperationMenuItem operationName="open-quick-navigation" />
				</MenuGroup>
				<MenuGroup>
					<FxOperationMenuItem operationName="zoom-content-view-to-75%-75%" />
					<FxOperationMenuItem operationName="zoom-content-view-to-100%-100%" />
					<FxOperationMenuItem operationName="zoom-content-view-to-125%-125%" />
					<FxOperationMenuItem operationName="zoom-content-view-to-150%-150%" />
					<FxOperationMenuItem operationName="zoom-content-view-to-200%-200%" />
				</MenuGroup>
			</Menu>
		</Drop>
	)}
/>

A drop-down with common interface controls

All done! You'll probably want to add a lot more buttons to your toolbars, or add more toolbars to your masthead. Simply repeat some of the steps from this guide and use any of the component we provide, or even bring your own!