PDF Editing Toolbar and UI

The Document Editor is a PSPDFKit for Web component that enables a whole host of document editing features. This includes new page creation, page duplication, copying and pasting, reordering, rotation, deletion, and the creation of new documents from a subset of selected pages.

Try for Free Launch Demo

This guide describes the built-in document editing user interface (UI). If you want to learn more about document editing APIs, refer to the document editing guide.

The Document Editor UI is only available if document editing is enabled in your license.

Entering Document Editing Mode Programmatically

The Document Editor’s UI is integrated into PSPDFKit.ViewState.InteractionMode as a separate interaction mode. To switch to the document editing view, change the view mode to PSPDFKit.ViewState.InteractionMode.DOCUMENT_EDITOR:

instance.setViewState(viewState =>
  viewState.set(
    "interactionMode",
    PSPDFKit.InteractionMode.DOCUMENT_EDITOR
  )
);

If your license has the document editing component, PSPDFKit.defaultToolbarItems includes a PSPDFKit.ToolbarItem, which can be used to facilitate switching to document editing mode via the UI. This button is added to the main toolbar.

You can remove it from the UI by setting the corresponding PSPDFKit.Configuration.toolbarItems value:

PSPDFKit.load({
  toolbarItems: PSPDFKit.defaultToolbarItems.filter(
    toolbarItem => toolbarItem.type !== "document-editor"
  )
});

Entering Document Editing Mode via the UI

To enter document editing mode, press the Document Editor toolbar button, which is placed on the main toolbar.

The image below shows the button used to switch to document editing mode.

User Interface

The Document Editor user interface is comprised of two main elements: the Document Editor toolbar, which is by default positioned on the very top; and the document view, which shows thumbnails of all the pages in a document.

Toolbar

The Document Editor toolbar holds a set of buttons that can be used to perform document editing actions. Some of the buttons are context sensitive and are enabled only on demand, based on factors such as the selection state in the document view. See Actions for a detailed description of all the actions you can perform with these buttons.

Document View

The document view is a vertically scrollable grid that represents all the pages in an edited document. Pages can be selected or deselected by single-pressing a page’s thumbnail. It’s possible to select more than one page at the same time. You can identify selected pages by paying attention to the thumbnail outline.

Thumbnail Zoom Controls

The document view thumbnails size can be controlled by using the dedicated zoom control buttons in the toolbar or by using the keyboard shortcuts Command/Control + and Command/Control -, or Command/Control 0 to reset to the default thumbnail size.

The minimum, maximum, and default sizes for thumbnails can be defined programmatically by providing the PSPDFKit.Configuration#documentEditorConfiguration configuration option when loading an instance, which offers a tailored viewing experience. This flexibility ensures the Document Editor UI can accommodate user preferences:

PSPDFKit.load({
	documentEditorConfiguration: {
		thumbnailMinSize: 50,
		thumbnailMaxSize: 600,
		thumbnailDefaultSize: 300,
	},
})

Actions

There are many actions you can perform using the Document Editor toolbar. The toolbar icons will appear horizontally stacked next to their label, unless there’s not enough space for all of them, in which case some of them may be grouped in a dropdown menu at the end of the toolbar, like shown below.

The following table lists all the toolbar buttons.

Icon	Name	Description
	Add	Adds a new page at the beginning of the document or after the selected page.
	Remove	Removes the currently selected pages from the document.
	Duplicate	Creates copies of the currently selected pages.
	Rotate left	Rotates the selected page 90 degrees counter-clockwise.
	Rotate right	Rotates the selected page 90 degrees clockwise.
	Move left	Moves the selected page before the previous page.
	Move right	Moves the selected page after the next page.
	Import document	Shows the open file dialog and merges the selected document into the current one.
	Extract pages	Downloads a new document that includes only the currently selected pages.
	Undo	Undoes the last document editing action.
	Redo	Redoes the last undone document editing action.
	Select all	Selects all pages.
	Select none	Deselects all pages.
	Zoom out	Decrease thumbnail size.
	Zoom in	Increase thumbnail size.

To prevent user mistakes, it isn’t possible to import the same document more than once in the same Document Editor UI operations block. However, it’s still possible to do it programmatically. Refer to the document editing guide for more information.

In the lower side of the Document Editor UI, there are three more buttons available.