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 button in the UI.

WebViewer({
  // options
}, document.getElementById('viewer'))
.then((instance) => {
  // Enable content edit button
  instance.UI.enableElements(['contentEditButton']);
});

You will see the content edit button in the "Edit" toolbar group.

After you press the edit button a warning modal will appear with some information about content editing mode. After proceeding the text and images in the document will be displayed with a dashed box around them.

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 a modal will appear with the text and styles that allow you to edit the content. After saving the update the text will be refreshed 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.

WebViewer({
  // options
}, viewerElement)
.then((instance) => {
  instance.UI.setToolMode(instance.Core.Tools.ToolNames.CONTENT_EDIT);
});

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 there is a ContentEditTool that you can switch into. For example:

const contentEditTool = myDocumentViewer.getTool(Core.Tools.ToolNames.CONTENT_EDIT);
myDocumentViewer.setToolMode(contentEditTool);

The first time the tool mode is switched into the content edit 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
}

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], {}]);