The license could not be verified: License Certificate has expired!

How to get FxOperationMenuItemWithDrop

import FxOperationMenuItemWithDrop from 'fontoxml-fx/src/FxOperationMenuItemWithDrop.jsx'

Type: Component

A menu item that invokes and reflects the state of an operation.

This component has the same behavior as FxOperationMenuItem, however it allows you to specify a "renderDrop" property accepting a Drop component with arbitrary content.


# Name Type Description
1. [focusEditorWhenDone] Boolean

Whether or not the given component should tell the editor (content view) to take back focus after its operation is done executing. By default this is has a value of null and is then determined at render time: its true if the component is placed inside the masthead or statusbar (including when used in drops or popovers triggered from the masthead or statusbar) and false otherwise.

Setting this prop to a value other than null or undefined forces that value for all renders, regardless of where the component is rendered.

  Default value
2. [hoverHighlightType] String

The contextNodeId must also be set on the operationData.

The type of highlighting on the contextNode when the component is hovered. Use the NodeHighlightManager to register a new highlight type.

  Default value
3. [icon] String

The icon that is displayed before the label. This overrides the icon provided by the operation (operation.icon).

Use an icon in this component. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
4. [isDisabled] Boolean

Set to true to render this component in a disabled state.

Setting it to false does not (re)enable it if the associated operation(s) are not enabled. This prevents users from executing operations that would cause errors or even break the document.

  Default value
5. [isSelected] Boolean

Set to true to render this component in a selected state.

Setting it to false does not force to deselected it if the associated operation(s) are active. This prevents users from getting misleading/inconsistent information from the underlying system.

If you never want to show the UI in a selected state for a particular operation, you can make and use a custom operation instead which ends with a final custom step that sets operationState.active to false. But breaking visual consistency this way with the rest of the editor is strongly discouraged and should only be used as a last resort.

  Default value
6. [label] String

The label of the menu item. This overrides the label provided by the operation (operation.label).

  Default value
7. [onClick] Function

Add additional onClick callback. The callback is called when the user clicks on the component and at the same time the operation is executed.

8. operationName String

The name by with the operation was registered. The component will be replaced with a CompactStateMessage if the operation is not found.

9. [operationData] Object

Set the contextNodeId on the operation data for the hover highlighting( hoverHighlightType).

Additional operation data, which will be added to the stepData of the operation.

  Default value
10. [renderDrop] Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.

# Name Type Description
1. parameters Object


Name Type Description
closeOuterDrop Function

Callback function which closes the outer drop.


Type: FDS~ReactNode

Whatever you want to render as a drop, usually atleast a Drop with some content.

11. [tooltipContent] String

The tooltip for the menu item. This overrides the tooltipContent provided by the operation (operation.description)

The content of the tooltip that is displayed when hovering over the whole component.

  Default value
Was this page helpful?