Editor Embed

Overview

pandadoc-editor is a TypeScript library for embedding and interacting with PandaDoc Editor in your web applications.

Use cases

For a detailed comparison of Embedded Sending and Embedded Editing, refer to the comparison table.

Installation

Install using yarn:

yarn add pandadoc-editor

or npm:

npm install --save pandadoc-editor

Usage

Import the library and create editor:

import { Editor } from 'pandadoc-editor';

const editor = new Editor(
  'editor-container', // ID of the container element
  {
    width: 800,
    height: 600,
    token: 'Edit session E-Token',
  }
);

editor.open();

You need to use Public API to generate E-Token for PandaDoc document/template.

API

Editor Class
Constructor

constructor(id: string, configuration: EditorConfig, pdConfig: Partial<PDConfigModel>)

id: ID of the HTML element to replace with the editor iframe.
configuration: Editor configuration object.
pdConfig: PandaDoc configuration object.

Methods

open(): Opens the editor.
close(): Closes the editor.
destroy(): Destroys the editor instance to free up resources and prevent memory leaks. After calling destroy(), the signing instance cannot be reused.
on(event, handler): Registers an event handler for signing session events. Returns the Editor instance for method chaining.
off(event, handler?): Removes an event handler. If no handler is specified, removes all handlers for the event. Returns the Editor instance for method chaining.
once(event, handler): Registers an event handler that will be called only once. Returns the Editor instance for method chaining.

Events

'content.rendered': Emitted when the document or template content has been rendered and is visible in the editor.
'document.loading': Emitted when the editor starts loading a document.
'document.loading.error': Emitted when an error occurs while loading a document.
'template.loading': Emitted when the editor starts loading a template.
'template.loading.error': Emitted when an error occurs while loading a template.

EditorConfig Interface

interface EditorConfig {
  width?: number | string;
  height?: number | string;
  token?: string;
  fieldPlacementOnly?: boolean;
  fields?: Record<FieldKind, FieldConfig>;
  blocks?: Record<BlockKind, BlockConfig>;
  hiddenElements?: UIElement[];
}

width: Width of the editor iframe.
height: Height of the editor iframe.
token: Editing Session Key (E-Token).
fieldPlacementOnly: Whether to only allow field placement.
fields: Field configuration object.
blocks: Block configuration object.
hiddenElements: Array of UI elements to hide.

PDConfigModel Interface

interface PDConfigModel {  
  host: string;  
}

host: PandaDoc application host.

FieldConfig Interface

interface FieldConfig {  
  visible: boolean;  
}

visible: Whether the field is visible.

BlockConfig Interface

interface BlockConfig {  
  visible: boolean;  
}

visible: Whether the block is visible.

UIElement Const

/**
 * Available UI elements that can be hidden in the editor.
 * MANAGE_RECIPIENTS: The recipients management ui elements.
 * MANAGE_ROLES: The roles management ui elements.
 * MANAGE_VARIABLES: The variables management panel ui element.
 */
export declare const UIElement: {
    readonly MANAGE_RECIPIENTS: "manage-recipients";
    readonly MANAGE_ROLES: "manage-roles";
    readonly MANAGE_VARIABLES_PANEL: "manage-variables-panel";
};

MANAGE_RECIPIENT: Use to hides the recipient management UI elements.
MANAGE_ROLES: Use to hides the role management UI elements.
MANAGE_VARIABLES_PANEL: Use to hides the variables panel UI elements.

Looking for React component? This work in progress, for now you can create your own component based on this example.