Skip to content
ComPDF
New Release

Open-Source PDF SDK & AI Document Processing

Get the full self-hosted SDK and AI document processing on GitHub. One-click deploy to quickly build your document workflows.

Content Editor

The content editor lets users edit text and images directly on the PDF page — add text, add images, and modify existing content. It is coordinated by the engine's content_edit_manager with a dedicated history manager, exposed to the UI through the core bridge.

The content-editing engine lives in the closed-source Core (packages/core/src/editor/). The UI layer drives it through the bridge and mirrors state in the stores.

UI APIs

Save / save-as enable/disable

javascript
UI.disableDocumentEditorSave();     // useViewer.setDocumentEditorSaveStatus(false)
UI.enableDocumentEditorSave();      // useViewer.setDocumentEditorSaveStatus(true)
UI.disableDocumentEditorSaveAs();   // useViewer.setDocumentEditorSaveAsStatus(false)
UI.enableDocumentEditorSaveAs();    // useViewer.setDocumentEditorSaveAsStatus(true)

Toggle the documentEditorSaveStatus / documentEditorSaveAsStatus flags in the viewer store, controlling whether the Save / Save-As actions are available in the document editor.

UI.saveDocumentEditor() (async)

Persist the document-editor changes and reload the document.

javascript
await UI.saveDocumentEditor();

Internally (in apis/saveDocumentEditor.js):

  1. Calls core.saveDocumentEdit() to get a newUrl; returns early if falsy.
  2. Resets editor state: useDocument.resetSetting(), useDocument.setToolState('').
  3. Switches the viewer back to view mode: setActiveToolMode('view'), setToolbarGroup('toolbarGroup-View'), setActiveHeaderGroup('default').
  4. Triggers upload (setUpload(true), setUploadLoading(true)), preserves the old scale.
  5. Sets useDocument.setCurrentPdfData(newUrl), refreshes totalPages via core.getPagesCount(), outlines via core.getOutlines(), resets page to 1.
  6. Re-applies scroll/spread mode and scale via core.switchScrollMode / core.switchSpreadMode / core.scaleChanged.
  7. setUploadLoading(false).

Content editor state

StoreFieldPurpose
viewercontentEditorTypeEditor type ('text').
viewerdocumentEditorSaveStatus / documentEditorSaveAsStatusSave / save-as availability.
documentdocumentEditor{ operationList[], pageList[], selectedPageList[] }.
documentcanUndo / canRedo{ content, annotation } undo/redo flags.

useHistoryListener (in HeaderItemsListener.js) bridges the engine's contentEditHistoryChanged / historyChanged events into useDocument.setCanUndo / setCanRedo.

Content editor components

  • DocumentEditorContainer — the page editor surface, shown when the active tool mode is document.
  • ContentEditorPanel — content-editor selection properties (right panel, eager-loaded).
  • ContentEditorToolBar — content-editor toolbar.
  • ContentEditorPopup — the content-editor context menu (see Popups).

Related dialogs: ContentEditorPreventDialog, DocEditorPreventDialog.

Core bridge (content-editor surface)

The core bridge exposes on instance.Core:

FunctionPurpose
switchAnnotationEditorModeSwitch the editor mode.
setContentEditorPropertySet a content-editor property.
getContentEditManagerGet the content-edit coordinator.
getContentEditHistoryManagerGet the content-edit history manager.
addEditorImageAdd an image to the editor.
getCropedPageImageGet a cropped page image.
saveDocumentEditSave edits and return a new URL.

Examples

Disable save-as in the editor

javascript
UI.disableDocumentEditorSaveAs();

Save and reload

javascript
await UI.saveDocumentEditor();