Changing 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 Recipe
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 Editor
by default.
Add a new toolbar tab
You can add any amount of toolbar tabs by using the tabs
property on Fx
. Check out the 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 Recipe
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 Fx
JSX
<FxOperationButton operationName="toggle-bold" />
Buttons in the toolbar are normally driven by operations. For that reason most code examples use Fx
, Fx
, 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' Button
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 Fx
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 Fx
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 Fx
Fonto makes no assumption on where you want those buttons, so you have to add them yourself.
Pass the quick
prop to <
. You can use <
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 Fxmasthead
property and a Button
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>
)}
/>
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!