Content edit

WebViewer 10.3 adds support for WYSIWYG PDF content editing 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.UI.Feature.ContentEdit]);
});

You will see the "Edit Text" toolbar group after the UI is loaded.

To proceed, click the "Edit Text" button or switch to content edit mode programmatically:

instance.UI.setToolbarGroup(instance.UI.ToolbarGroup.EDIT_TEXT);

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:

• Double click on the box

or

• Single click on the box to select it
• 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.

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 = Core.getDocumentViewer().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 = Core.getDocumentViewer().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 use the preloadWorker method.

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

You have the ability to programmatically set the editor to apply a specific font style to the next characters. This style will remain active until it is updated by a subsequent selection or another call to the API.

const fontStyle = {
    "bold": false,
    "italic": false,
    "underline": true,
    "fontName": "Cousine",
    "fontSize": "12",
    "fontColor": "#FF00E8"
}
Core.ContentEdit.setTextAttributes(fontStyle);

By using the provided code snippet, you can effortlessly define the desired font style, such as bold, italic, and underline, along with the font name and size. The changes will be applied to the text within the editor, maintaining the style until further modifications are made through subsequent selections or API calls.

When you are editing text within a Content Edit Box, you have the ability to retrieve the current Text Attributes of your selection. This can be useful if you want to update your UI or confirm text properties as a user navigates the text.

First, attach a function to the contentBoxEditStarted event that will store the reference to the active Content Box editor.

const handleEditorStarted = ({ editor }) => {
  // Store this editor reference for use later.
  // We will assume that reference is a variable 'contentEditorRef'.
  contentEditorRef = editor;
};
contentEditManager.addEventListener('contentBoxEditStarted', handleEditorStarted);

Secondly, attach a function to the contentEditSelectionChange event. This function should call the referenced editor we stored earlier to retrieve the Text Attributes with the getTextAttributes method. Once we obtain the attributes from the current selection, we can extract the various properties.

const handleSelectionChange = async () => {
  if (contentEditorRef) {
    const attribute = await contentEditorRef.getTextAttributes();
    const { fontSize, fontName, fontColor, bold, italic, underline, textAlign } = attribute;
  }
};
contentEditManager.addEventListener('contentEditSelectionChange', handleSelectionChange);

You can extract the Text Style (e.g., font size, color) from a Content Edit Box that isn't in edit mode. This process fetches the first instance of each property. For instance, if a box has both 12-point and 30-point fonts, with the 12-point appearing first, the output will be 12 points.

To do this:

• Select an Annotation
• Obtain the contentEditBoxId
• Request the Content Box Attributes from the Content Edit Manager

const contentBoxId = annotation.getCustomData('contentEditBoxId');
const contentEditManager = Core.getDocumentViewer().getContentEditManager();
const textAttributes = await contentEditManager.getContentBoxAttributes(contentBoxId);

You have the capability to programmatically undo or redo changes made during PDF text edits. This functionality encompasses actions such as character additions/deletions, style modifications, and adjustments to content boxes. These changes are managed through the Content Edit History Manager.

// to undo a change
await Core.getDocumentViewer().getContentEditHistoryManager().undo();
// to redo a change
await Core.getDocumentViewer().getContentEditHistoryManager().redo();
// to check if there is an available change to undo
const canUndo = Core.getDocumentViewer().getContentEditHistoryManager().canUndo();
// to check if there is an availabe change to redo
const canRedo = Core.getDocumentViewer().getContentEditHistoryManager().canRedo();

Using the provided code snippet, you can easily initiate undo and redo operations programmatically. The undo() function allows you to reverse the most recent change, while the redo() function re-applies a previously undone change. Additionally, you can utilize the canUndo() and canRedo() functions to check if there are available changes to be undone or redone, respectively. This grants you control over the revision history and enables a seamless editing experience.

Starting with WebViewer 10.7, we've introduced an enhanced feature that displays a link annotation popup. This popup includes link information and an unlink button, which can be triggered simply by hovering over any link annotations within a document.

Currently, there is no direct API to remove a hyperlink that has been added in Content Edit Mode. However, an alternative approach is available, allowing you to detect the link annotation you've added, store it, and then perform the deletion action.

Utilize the mouseMove event in conjunction with the available API getAnnotationsByMouseEvent to identify link annotations.

Here is the example of an onHover for annotations:

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('mouseMove', evt => {
      const annotations = Core.getAnnotationManager().getAnnotationsByMouseEvent(evt, true);
      const linkAnnot = annotations.find((annot) => annot instanceof window.Core.Annotations.Link);
    });
  });

The annotations include links from within WebViewer, both in and outside of Content Edit mode, or from embedded URLs in the document Regardless of the link annotations obtained, you can use the deleteAnnotations method to remove them from the document. Please note that, in the current implementation, the link style will still persist.

Here's an example of removing link annotations generated by WebViewer:

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { annotationManager } = instance.Core;
    const linkAnnotations = annotationManager.getAnnotationsList().filter((annot) => annot instanceof window.Core.Annotations.Link);
    // add {'source': 'unlink'} to let content edit worker know to refresh cached data
    annotationManager.deleteAnnotations(linkAnnotations, { 'source': 'unlink' });
  });