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 documentLoader.loadDocument and documentLoader.loadRelatedDocument functions will no longer reload errored documents as default. When you want to force these functions to reload errored documents, forceReloadingErroredDocuments 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 retryLoadingDocumentForHierarchyNode function in Configure hierarchical multi-document management can be used to reload errored documents as well. In this case, the forceReloadingErroredDocuments option should be passed to documentloader.loadDocument and documentLoader.loadRelatedDocument as true.

forceReloadingErroredDocuments

JavaScript

const options = {forceReloadingErroredDocuments: true};

const loadingPromise = documentReference.remoteDocumentId
	? documentLoader.loadDocument(documentReference.remoteDocumentId, options)
	: documentLoader.loadRelatedDocument(
		documentReference.relativeUrl,
		documentReference.referrerId,
		options
	);

FxDocumentContextualOperationsWidget

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 useAuthorAndTimestampLabel. 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 contextualOperations 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 setContextNodeIdToFirstMatchingNodeFromContextNode 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 FxOperationButton as below. But keep in mind that you should pass the node id of selected element as contextNodeId and the node id of focused hierarchy as hierarchyNodeId:

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>
    );
}