Create a sidebar

Sidebars are located in the area to the right of the document view, and can be used alongside the document.

This makes a sidebar useful for containing additional information about the document, metadata or different cross-sections of content - for example the structure view add-on. Besides the sidebars that come with Fonto Editor out of the box, you can also create your own.

The sidebar is a React component. You can compose your own sidebar component using any number of Fonto Design System components and your own. There are also several FDS components designed specifically for common parts of a sidebar.

What you'll need:

Step 1: Create a new package for the sidebar

Create a folder called "recipe-sidebar" in your packages/ directory. Your folder structure might look like this:

Folder structure

Other

training-editor/
  packages/
    recipe-sidebar/

Step 2: Create the sidebar component

Create the file packages/recipe-sidebar/src/ui/RecipeSidebar.jsx.

RecipeSidebar.jsx

JSX

import React from 'react';

import { Flex, SidebarHeader, SidebarInlay, Text } from 'fds/components';

export default function ExampleSidebar () {
    return (
        <Flex flex="1" flexDirection="column">
            <SidebarHeader title="Hello World!" />

            <SidebarInlay>
                <Text>Hello world</Text>
            </SidebarInlay>
         </Flex>
    );
}

Any React component will do, but most sidebars use the full available height as well as some common parts; a header and an inlay. The SidebarHeader and SidebarInlay provide a simple way to structure the contents of a sidebar.

Step 3: Register the sidebar

Create packages/recipe-sidebar/src/install.js and use the registerEditorSidebarTab function as follows:

install.js

JavaScript

import registerEditorSidebarTab from 'fontoxml-editor/src/registerEditorSidebarTab.js';
import t from 'fontoxml-localization/src/t.js';

import RecipeSidebar from './ui/RecipeSidebar.jsx';

export default function install() {
    registerEditorSidebarTab({
        id: 'hello',
        icon: 'globe',
        label: t('Hello'),
        size: 'm',
        tooltipContent: t('Hello world'),
        Component: RecipeSidebar,
        priority: 0
    });
}

This code registers your React component to the list of sidebars that Fonto Editor will initiate. The API reference for registerEditorSidebarTab also includes the identifiers and priorities used by Fonto’s out-of-the-box sidebars.

Step 4: Add the dependency

Add a reference to the “recipe-sidebar” package from config/fonto-manifest.json. At a minimum, it should contain:

fonto-manifest.json

JSON

{
    "dependencies": {
        "recipe-sidebar": "packages/recipe-sidebar"
    }
}

Final result

A screenshot of a nearly empty sidebar extension

You’re now free to use any React component in FDS, your own components, and Fonto’s state managers to make your sidebar do something awesome.

The files that you’ve touched are:

Folder structure

Other

training-editor/
  config/
    fonto-manifest.json
  packages/
    recipe-sidebar/
      src/
        ui/
          RecipeSidebar.jsx
        install.js