Customize the text selection floating toolbar

Customizing the floating toolbar takes two steps: create a custom controller for the tool logic, then add or edit the tool in fragments.

Example: custom controller and fragment configuration

Sample code is in /examples/UIExtension/custom-text-selection-tool.

Logic helpers used by the floating toolbar

When customizing the toolbar, you will often add a controller. A typical pattern:

var tooltipLayer = this.component.getClosestComponentByType('tooltip-layer');
var textSelectionTool = tooltipLayer.getCurrentSelectionTool();
textSelectionTool.getSelectionInfo().then((selectionInfo) => {
});
textSelectionTool.pageRender /The current rendering page object

• getClosestComponentByType() returns the matching tooltip layer.

• getCurrentSelectionTool() returns the text selection tool.

• getSelectionInfo() returns the selected text and the current page render object. The selection info includes:

• page — PDF page object

• text — selected text

• rectArray — text blocks (unit: point)

Floating toolbar component names

Component name	Description
fv--text-selection-tooltip	Floating toolbar layer
fv--text-selection-tooltip-copy	Copy tool
fv--text-selection-tooltip-create-highlight	Highlight tool
fv--text-selection-tooltip-create-strikeout	Strikeout tool
fv--text-selection-tooltip-create-underline	Underline tool