Guides

Content Editor

ComPDF React Native SDK supports content editor callbacks and listener events for style panels and editable content selection.

Available Callbacks and Events

Type	Name	Trigger Timing	Payload
Reader callback	onContentEditorStyleDialogDismissed	Content editor style dialog is dismissed	{ type } event object
Listener event	CPDFEvent.EDITOR_SELECTION_SELECTED	Editable content is selected	CPDFEditArea
Listener event	CPDFEvent.EDITOR_SELECTION_DESELECTED	Editable content is deselected	CPDFEditArea | null

Example Usage

const onEditorSelectionSelected = (editArea: CPDFEditArea) => {
  console.log('Content editor selected:', editArea.type);
};

const onEditorSelectionDeselected = (editArea: CPDFEditArea | null) => {
  console.log('Content editor deselected:', editArea?.type);
};

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={configuration}
  onViewCreated={() => {
    pdfReaderRef.current?.addEventListener(
      CPDFEvent.EDITOR_SELECTION_SELECTED,
      onEditorSelectionSelected,
    );
    pdfReaderRef.current?.addEventListener(
      CPDFEvent.EDITOR_SELECTION_DESELECTED,
      onEditorSelectionDeselected,
    );
  }}
  onContentEditorStyleDialogDismissed={(event) => {
    console.log('Content editor style dialog dismissed:', event.type);
  }}
/>

CPDFEvent.EDITOR_SELECTION_SELECTED returns CPDFEditArea and its subclasses, such as CPDFEditTextArea, CPDFEditImageArea, and CPDFEditPathArea. CPDFEvent.EDITOR_SELECTION_DESELECTED may return null.

Remove Event Listeners

pdfReaderRef.current?.removeEventListener(
  CPDFEvent.EDITOR_SELECTION_SELECTED,
  onEditorSelectionSelected,
);