Upgrade from 7.10 to 7.11
For the full release notes, head over to Fonto 7.11.0
Required changes
Reloading errored documents in editors with custom hierarchies
The documentforce
option should be set true
.
The editors which have custom hierarchies have their own hierarchical multi-document management system. In such a system, an errored document can be intended to be reloaded specifically. For example, the retry
function in Configure hierarchical multi-document management can be used to reload errored documents as well. In this case, the force
option should be passed to documentloader.loadtrue
.
forceReloadingErroredDocuments
JavaScript
const options = {forceReloadingErroredDocuments: true};
const loadingPromise = documentReference.remoteDocumentId
? documentLoader.loadDocument(documentReference.remoteDocumentId, options)
: documentLoader.loadRelatedDocument(
documentReference.relativeUrl,
documentReference.referrerId,
options
);
Fx Document Contextual Operations Widget
It now requires the hierarchyNodeId as a property. Please make sure it is set if you use this widget.
Update the fontoxml-review-reference-configuration package if you have Fonto Review
The Fonto Review reference configuration package previously depended on the private React hook use
. We have moved the hook from the Fonto platform to the reference configuration package. To ensure compatibility, you must upgrade the reference configuration to the 7.11.0 version.
Add the expand button to the context menu and the table toolbar
In 7.11.0 we removed the expand button from tables, because it was overlapping some of the content of the table cell.

Now the expand button exists in the default table context menu and the default table toolbar. But if you do have a custom table context menu and/or a custom table toolbar, it is better to add the expand button to your table context menu and table toolbar.
Adding the expand button to the table context menu
You can add the expand button to your table context menu by following the Configure contextual operations guide. Only thing you need to do is adding toggle-table-overflow-expanded operation as contextual
as below:
configureSxModule.js
JavaScript
import configureProperties from 'fontoxml-families/src/configureProperties.js';
import configureAsCalsTableElements from 'fontoxml-table-flow-cals/src/configureAsCalsTableElements.js';
export default function configureSxModule(sxModule) {
configureAsCalsTableElements(sxModule, {
// you are not using the default context menu
useDefaultContextMenu: false
// your other table options
});
// your table cell configurations
configureProperties(sxModule, 'self::entry', {
// OVERRIDE: new nested/grouped contextual operations that mimic the structure of the
// default context menu for tables
contextualOperations: [
{
heading: 'Table',
contents: [
// you should add this operation as your contextual operation
{ name: 'toggle-table-overflow-expanded' }
]
}
]
});
}
The toggle-table-overflow-expanded
and the toggle-table-overflow-mode
require the contextNodeId to be set to one of the table elements (table, row, cell, etc...). When you want one of these operations to work on a table figure element you'll have to wrap these operations in your own operation and use the transform set
as first step, to set the contextNodeId to the table element instead of the table figure element.
Adding the expand button to the table toolbar
You can add the expand button to your table toolbar by following the Create a masthead guide. Only thing you need to do is adding toggle-table-overflow-expanded operation as Fx
as below. But keep in mind that you should pass the node id of selected element as context
and the node id of focused hierarchy as hierarchy
TableToolbar.jsx
JavaScript
import useManagerState from 'fontoxml-fx/src/useManagerState.js';
import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';
import selectionManager from 'fontoxml-selection/src/selectionManager.js';
import getNodeId from 'fontoxml-dom-identification/src/getNodeId.js';
import { MastheadToolbar, MastheadToolbarButtons } from 'fds/components';
import React from 'react';
function useSelectedElement() {
return useManagerState(selectionManager.selectionChangeNotifier, () =>
selectionManager.getSelectedElement()
);
}
function useFocusedHierarchyNodeId() {
return useManagerState(selectionManager.selectionChangeNotifier, () =>
selectionManager.getFocusedHierarchyNodeId()
);
}
export default function TableToolbar() {
const selectedElement = useSelectedElement();
const selectedElementNodeId = selectedElement ? getNodeId(selectedElement) : null;
const focusedHierarchyNodeId = useFocusedHierarchyNodeId();
return (
<MastheadToolbar>
<MastheadToolbarButtons>
{/* The expand button */}
<FxOperationButton
label=""
operationName="toggle-table-overflow-expanded"
operationData={{
contextNodeId: selectedElementNodeId,
hierarchyNodeId: focusedHierarchyNodeId
}}
/>
</MastheadToolbarButtons>
{/* Your other table toolbar buttons... */}
</MastheadToolbar>
);
}