Type: Function

How to get editEditorSidebarTab?


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

Edit a pre-existing tab on Fonto's sidebar.

Call this in the install.js of any package. Make sure you have a dependency on the addon whose sidebar tab you want to edit. 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. You cannot override the 'Component'.

If you want to register a new custom sidebar tab, use registerEditorSidebarTab 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')

  • size: 'm'

  • 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

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.