How to get registerEditorSidebarTab

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

Type: Function

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

Content quality; Used for displaying and managing content quality suggestions.

  • id: 'content-quality'

  • icon: contentQualityConfiguration.sidebarIcon || 'lightbulb-o'

  • label: contentQualityConfiguration.sidebarLabel || t('Quality check')

  • tooltipContent: contentQualityConfiguration.sidebarTooltipContent || t('Display the list of suggestions on how to improve the quality of your content.')

  • priority: 70 Note how this configuration is dependant on contentQualityConfiguration. Look at the content quality docs for more information.

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

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 is dependant on the 'show-xml-source-view-tab-label' config var.


# Name Type Description
1. tab EditorSidebarTabConfig
Was this page helpful?