Upgrade from 7.3 to 7.4

Required changes

Update localization bundles

We have upgraded the messageformat library used for localization to version 2.0.4. Please refer to the release notes of that library for more information on what's new. This version is less forgiving of syntactical errors in localization messages. In particular, dashes are no longer allowed in identifiers such as placeholders or cases in a select operator. Because of this, the attributes editor's button-with-value-from-modal field type is now represented as buttonWithValueFromModal in localization messages. We have also updated the localization tools to detect this case in existing message bundles.

If your application contains existing localization message bundles, it may be required to update these before Fonto can start. See Localize the interface (under "Updating localization for a new release") for details.


Use FDT to create, run, build and manage your FontoXML editor

The FontoXML Development Tools are a set of tools aimed at simplifying tasks encountered during the configuration of an editor instance. Tasks such as creating a new editor, upgrading an editor, compiling and reading the schema, and creating localization files. Even though this replaces all SDK Portal functionality, the SDK Portal will remain available for now.

See the npm repository for more information about installing and using the FontoXML development tools, including instructions on how to obtain the required development license file for some commands.

Configure namespaces for custom functions

The version of FontoXPath contained in Fonto 7.4 improves support for functions in namespaces and warns when a function is registered with an unknown prefix. The editor will warn about these unknown prefixes when starting up. To prevent compatibility problems, the library will generate a prefix just in time. However, to prevent problems in the future, we recommend to add the prefix to the global namespace configuration:


// In a configureSxModule.js file:
registerCustomXPathFunction('app:something', ['node()'], 'xs:boolean', function (dynamicContext, node) {

// Make sure the following exists in some configureSxModule.js file. Do make sure this is executed before any custom function is registered.
namespaceManager.addNamespace('app', 'http://www.example.com/app');

By registering a URI for the prefix, it will also be possible to use these custom functions in XQuery modules by referring to the same URI.

Configure Drag and Drop in the structure view

This release introduces the ability to drag and drop to move items around in the structure view. Default implementations are provided for single document editors as well as for DITA maps (in the fontoxml-dita add-on). Applications with customized structure view configuration or other special requirements may need to register one or more custom operations using the new addDragAndDropOperation API. Please refer to our guide for more details.

Use SplitButtonWithDrop instead of ButtonWithDrop with an onClick prop

Previously, when using an Fx component which renders a button with drop, toggling the drop was always possible. When using components inside the drop that execute an operation, it's possible that all of these components are disabled. In order to provide control over the state of a drop button in an operation context, we've made the following changes:

  1. FxOperationsSplitButtonWithDropMenu has two new optional props: dropButtonStateOperationName and dropButtonStateOperationData. The operation/data passed to these props are only used to determine the state of the button, the returned state should represent the state from the contents of the drop.

  2. Two new components have been added: FxOperationSplitButtonWithDrop and FxOperationStateButtonWithDrop, which both include the same props as named above.

  3. The onClick prop on ButtonWithDrop is now deprecated and will be removed in the next major release. The API for this component was overloaded since it conditionally rendered a split button based on the onClick prop. The new SplitButtonWithDrop component replaces what previously was the result of a ButtonWithDrop with an onClick prop.

Use idToScrollIntoView instead of selectedItems in VirtualList and VirtualGrid

A few changes have been made to VirtualList and VirtualGrid:

  1. The selectedItems prop is now deprecated on both components and will be removed in the next major release. Instead, we now provide a idToScrollIntoView prop to scroll items into view (which the selectedItems prop did previously). Visualising the rendered item as selected should be done from within the renderItem callback.

  2. A new prop named scrollIntoViewDirection has been added to both components, allowing you to set the direction in which items are scrolled into view (when updating the idToScrollIntoView prop).

Allow tab to insert new table rows

The new operation insert-row-on-tab allows inserting a new row to a table when the last cell is reached and tab is pressed. Applications can add this to their tab keybinding alternatives to take advantage of this functionality. See the operation's documentation for details and an example.

Remove old configuration values

The enable-experiment/refrain-from-merging-differently-configured-nodes experiment has concluded, and the corresponding configuration value has been removed. Whether merging is allowed is now always controlled by allowMergingWith configuration.

Structure view sidebar ("Outline")

The structure view sidebar is now renamed from "Structure" to "Outline" and the icon is changed from "align-right icon-flip-vertical" to "sitemap". User testing revealed that "Outline" is better understood by users then "Structure". If this change is not preferable then this can be changed back with the new editEditorSidebarTab API.

New modal sizes

We've reduced the maximum width of the M and L modal sizes so the scale of modal sizes is more evenly divided on regular sized desktop and laptop screens. We've also included a new modal size XS, especially meant for small text-only modals.

If your editor has a custom modal with size S, M or size L, please check whether these sizes are still appropriate:

  • 'xs' Meant for small, text-only modals like warnings or confirmation messages.

  • 's' Can be used for modals with a little UI in them, like the hyperlink modal.

  • 'm' Medium sized modal, like the special character browser.

  • 'l' Use for UI-heavy modals like image- or file browsers with previews.

  • 'none' The modal fills the entire screen width. Use for modals that need as much screen estate as possible, like publication previews.