Popovers

Popovers are usually small components that appear near a clicked element, button or icon. Popovers can contain additional information about an element or other object, and optionally provide buttons for any further actions, like edit or remove.

Fonto comes with some popovers out of the box, but custom ones can be added from your application configuration.

Custom popovers

A custom popover could be any React component associated with a name via the uiManager, and using that name also associated with an element via the popoverComponentName CVK option.

JavaScript

import MyPopoverComponent from './MyPopoverComponent.jsx';

uiManager.registerReactComponent('MyPopoverComponent', MyPopoverComponent);

JavaScript

configureProperties(sxModule, 'self::para', {
	popoverComponentName: 'MyPopoverComponent'
});

You may find this step-by-step guide to creating custom popovers useful.

Available popovers

The popovers that come with the platform are automatically registered by their CVK families, such as configureAsInlineLink or configureAsConref. If you do need to use them elsewhere, simply refer to them by their string name, same as you would do for custom popovers.

Element popovers in read-only context

Element popovers will be rendered everywhere, including read-only contexts such as document previews and past revisions in Document History. If your popover is designed as an interactive form you may want to completely disable it, or render it differently than normal.

To disable the popover when a different Fonto product than Fonto Editor is used, or another user has the document lock, set the hidePopoverInReadOnlyViews static property of your popover component to true:

JavaScript

import React from 'react';
import { Popover } from 'fds/components';
 
function RecipePopover ({ togglePopover }) {
   return <Popover maxWidth="300px" minWidth="220px">
	   {/* And so on */}
	</Popover>;
};

RecipePopover.hidePopoverInReadOnlyViews = true;

export default RecipePopover;

Render differently in a read-only context

An element can be read-only for various reasons, which are reflected in different public APIs.

The table below shows a matrix of what read-only is in Fonto Editor. The columns are the 3 different read-only contexts in Fonto Editor (i.e. why something is read-only). The rows describe what happens visually to the content, and lists the values of various APIs (or whether or not they apply) in each of the read-only contexts.

Using the CVK family configureAsReadOnly

When the lock on the document is unavailable or when the document needs to be reloaded

View is read-only (e.g., on the review route or in previews in the sidebar of browse modals)

Visually the content is:

greyed out

greyed out

unchanged

hidePopoverInReadOnlyViews (see section above)

Popover can not be opened

Popover can not be opened

Popover can not be opened

data.isReadOnly prop for custom Popovers

Set to true for popovers opened for the node and its descendants

Set to true for popovers opened for nodes in the document

Set to true for popovers opened from the view

fonto:is-node-read-only XPath function (use inside your custom popover with useXPath)

Returns true for the node and its descendants

Returns true for nodes in the document

not affected

Note that popovers could be opened from a read-only preview of an otherwise editable document (which is also loaded in the editor). In such cases, operation-based components such as FxOperation would be enabled, and may need to be disabled manually based to prevent editing the document from a read-only view.

Use any (combination of) the APIs listed in the table above to disable the components manually as necessary and relevant for your popover and your documents.