WebViewer 8.3 adds support for a content editing (text edit and image edit) feature which allows you to edit text and images directly on PDF files.

To use the content editing feature with the WebViewer UI you need to enable the content edit feature in the UI.

WebViewer({
  // options
}, document.getElementById('viewer'))
.then((instance) => {
  // Enable the tools to edit the PDF content
  instance.UI.enableFeatures([instance.Feature.ContentEdit]);
});

You will see the "Edit Text" toolbar group with the tool buttons "Add Paragraph" and "Add Image".

After you press the "Edit Text" toolbar group button a warning modal will appear with some information about content editing mode. After proceeding, the editable text and images in the document will be displayed with a dashed box around them and a side panel will be open with the text editing tools.

To edit the text you can either:

1. Double click on the box

or

1. Single click on the box to select it
2. Click the edit button in the annotation popup menu

After this the text will become editable and once you've finished making changes you can click outside the box to have the text updated on the page.

Both text and images can be moved, resized and deleted. You can do this by selecting a box and then moving or resizing it like a normal annotation. You can also press the delete button to delete the content.

To add a new paragraph, you can select the Add Paragraph tool button and then click and drag to create a rectangle that your new text will go inside. You can then start typing to add text and use the available tools in the right panel to adjust properties of the text.

To add a new image, you can select the Add Image tool button and click on the document to choose where to place the image. The system file picker will open and you can select an image. After this, you can resize it, change its location or delete it.

WebViewer({
  // options
}, viewerElement)
.then((instance) => {
  instance.setToolbarGroup(instance.UI.ToolbarGroup.EDIT_TEXT);
});

By default the relevant WebAssembly files will only be loaded once you switch into the content editing tool mode. They may take some time to download, so if your users will often be using this feature you may want to preload those files.

You can use the preloadWorker constructor option to do this. For example:

WebViewer({
  preloadWorker: WebViewer.WorkerTypes.CONTENT_EDIT,
  // other options
}, viewerElement)
.then((instance) => {

});

If you use the WebViewer Core directly then there are some APIs provided to interact with content editing. As an example you can check out the WebViewer Custom UI Github repo which makes use of these APIs.

To begin editing content you'll have to call the method startContentEditMode.

const contentEditManager = myDocumentViewer.getContentEditManager();
contentEditManager.startContentEditMode();

To add new paragraphs, there is a tool called AddParagraphTool that you can switch into. For example:

const addParagraphTool = myDocumentViewer.getTool(Core.Tools.ToolNames.ADD_PARAGRAPH);
myDocumentViewer.setToolMode(addParagraphTool);

You can also add images switching to the AddImageContentTool.

const addImageContentTool = myDocumentViewer.getTool(Core.Tools.ToolNames.ADD_IMAGE_CONTENT);
myDocumentViewer.setToolMode(addImageContentTool);

If you need to finalize the editing content mode, you can call the endContentEditMode method.

const contentEditManager = myDocumentViewer.getContentEditManager();
contentEditManager.endContentEditMode();

The first time the tool mode is switched into the content edit mode WebAssembly files will be loaded. If you'd like to do this earlier you can Core.ContentEdit.preloadWorker.

Core.ContentEdit.preloadWorker(myDocumentViewer);

You can tell if an annotation is a content edit placeholder annotation by using the annotation.isContentEditPlaceHolder API. With those annotations you can use the getDocumentContent and updateDocumentContent APIs. For example:

// is the currently selected annotation a placeholder
const selectedAnnotation = annotationManager.getSelectedAnnotations()[0];
if (selectedAnnotation && selectedAnnotation.isContentEditPlaceholder()) {
  const content = await Core.ContentEdit.getDocumentContent(selectedAnnotation);

  // pass content to library that can display rich text, for example Quill
}


// later after the content has been updated this will update it on the page
await Core.ContentEdit.updateDocumentContent(annotation, newContent);

If you want to check whether the annotation is for text or an image then you can use getContentEditType. For example:

if (annotation.getContentEditType() === Core.ContentEditTypes.TEXT) {
  // this has text that can be updated
} else if (annotation.getContentEditType() === Core.ContentEditTypes.OBJECT) {
  // this has the image that can be updated
}

When the annotations representing the content are moved or deleted in the DocumentViewer then the content will automatically be updated on the page. You can also use the normal annotation APIs.

annotationManager.deleteAnnotation(myContentEditAnnotation);

myOtherContentEditAnnotation.X = 50;
annotationManager.trigger(Core.AnnotationManager.Events.ANNOTATION_CHANGED, ['modify', [myOtherContentEditAnnotation], {}]);