Type: Function

How to get registerEditorSidebarTab?


import registerEditorSidebarTab from 'fontoxml-editor/src/registerEditorSidebarTab.js'

Add a tab to Fonto's sidebar.

Call this in the install.js of the package providing the React component to use as the sidebar tab's content. Sidebar tabs are ordered by decreasing priority.

The platform currently populates the sidebar based on the addons you have integrated. Below is an overview of the EditorSidebarTabConfig for each tab that is provided by an addon. The 'Component' key has been omitted because it is not overridable.

If you want to modify these sidebar tabs, use editEditorSidebarTab from this package instead.

Structure view; Used for displaying a table of contents based on element configuration.

  • id: 'structure'

  • icon: 'align-left fa-flip-vertical'

  • label: t('Outline')

  • tooltipContent: t('Document outline')

  • priority: 100

Attributes editor; Used for displaying a form-like interface that allows editing attributes based on configuration.

  • id: 'properties'

  • icon: 'sliders'

  • label: t('Properties')

  • tooltipContent: t('Lists the attributes of the selected element and allows for editing them.')

  • priority: 90

Review panel; Used for displaying comments and/or changes depending on which review related addons are integrated.

  • id: 'review'

  • icon: 'edit'

  • label: t('Review')

  • tooltipContent: t('Review changes and comments previously recorded using Fonto.')

  • priority: 50

Find and Replace panel; Used for searching into the document and displaying/replacing the results.

  • id: 'search'

  • icon: 'SearchSidebarTabIcon'

  • label: t('Search')

  • size: 'm'

  • tooltipContent: t('Open Find and Replace (F3) / (Ctrl + F) / (CMD + F)')

  • priority: 20

XML source view; Used for showing the XML source for the currently focused document.

  • id: 'source'

  • icon: 'code'

  • label: configurationManager.get('show-xml-source-view-tab-label') ? t('Source') : ''

  • size: 'l'

  • tooltipContent: t('XML source code')

  • priority: 0

Note how this configuration depends on the show-xml-source-view-tab-label config variable.

Fonto Review product sidebar; Used for providing and processing feedback on the document.

  • id: 'feedback'

  • icon: 'comment-o'

  • label: 'Comments'

  • size: 'l'

  • tooltipContent: t('Provide and process feedback on this document.')

  • priority: 50

The given id determines which registered editor sidebar tab you will override. All the other properties can be optionally overridden.


  1. tab